fix(side-modal): fix position when using state hook (#3886)

* fix(side-modal): fix position when using state hook

* docs(tooltip primitive): improve example demonstrating how to style

.changeset/yellow-rabbits-tie.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/side-modal": patch
+"@twilio-paste/core": patch
+---
+
+[SideModal] fix position of SideModalContainer when using the state hook

packages/paste-core/components/side-modal/src/index.tsx

@@ -1,8 +1,23 @@
+import {
+  type NonModalDialogPrimitivePopoverInitialState,
+  type NonModalDialogPrimitiveStateReturn,
+  useNonModalDialogPrimitiveState,
+} from "@twilio-paste/non-modal-dialog-primitive";
+
 import type { SideModalStateReturn } from "./SideModalContainer";
 
 type SideModalStateReturnProps = SideModalStateReturn;
 
-export { useNonModalDialogPrimitiveState as useSideModalState } from "@twilio-paste/non-modal-dialog-primitive";
+/*
+ * Fixes issue where the popover would not open in a portal
+ * when using the state hook directly
+ */
+export const useSideModalState = (
+  options: NonModalDialogPrimitivePopoverInitialState,
+): NonModalDialogPrimitiveStateReturn => {
+  return useNonModalDialogPrimitiveState({ modal: true, unstable_fixed: true, ...options });
+};
+
 export { SideModal } from "./SideModal";
 export type { SideModalProps } from "./SideModal";
 export { SideModalButton } from "./SideModalButton";

packages/paste-website/src/component-examples/TooltipPrimitiveExamples.ts

@@ -1,12 +1,33 @@
 export const defaultExample = `
+const StyledTooltip = React.forwardRef(({ style, element, ...props }, ref) => {
+  return (
+    <Box
+      ref={ref}
+      element={element}
+      zIndex="zIndex90"
+      backgroundColor="colorBackgroundBody"
+      borderRadius="borderRadius20"
+      borderStyle="solid"
+      borderWidth="borderWidth10"
+      borderColor="colorBorderInverse"
+      maxWidth="size50"
+      paddingX="space30"
+      paddingY="space20"
+      fontSize="fontSize30"
+      {...props}
+      {...style}
+    />
+  );
+});
+
 const TooltipExample = () => {
   const tooltip = useTooltipPrimitiveState();
   return (
     <>
       <TooltipPrimitiveReference {...tooltip} as={Button} variant="primary">
         ✊ Action
       </TooltipPrimitiveReference>
-      <TooltipPrimitive {...tooltip} style={{backgroundColor: '#fff', zIndex:10}}>
+      <TooltipPrimitive {...tooltip} as={StyledTooltip}>
         Black Lives Matter. We stand with the Black community.
       </TooltipPrimitive>
     </>

packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx

@@ -55,6 +55,7 @@ export const getStaticProps = async () => {
 
 <LivePreview
   scope={{
+    Box,
     useTooltipPrimitiveState,
     TooltipPrimitive,
     TooltipPrimitiveReference,
@@ -92,6 +93,7 @@ This primitive should be used to compose all custom tooltips to ensure accessibi
 
 <LivePreview
   scope={{
+    Box,
     useTooltipPrimitiveState,
     TooltipPrimitive,
     TooltipPrimitiveReference,
@@ -109,6 +111,7 @@ The available placement options are available in the [props description here](#u
 
 <LivePreview
   scope={{
+    Box,
     useTooltipPrimitiveState,
     TooltipPrimitive,
     TooltipPrimitiveReference,