chore: update state return and only use modal on mobile

twilio-labs · Feb 7, 2025 · c5ff4e5 · c5ff4e5
1 parent a6e467a
commit c5ff4e5
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 35 deletions.
diff --git a/packages/paste-core/components/side-panel/src/SidePanel.tsx b/packages/paste-core/components/side-panel/src/SidePanel.tsx
@@ -64,10 +64,16 @@ const config = {
 interface SidePanelContentsProps extends SidePanelProps {
   sidePanelId: string;
   styles: any;
+  isMobile: boolean;
 }
 
+const getAs = (isMobile: boolean): any => {
+  if (isMobile) return ModalDialogPrimitiveContent as any;
+  return "div";
+};
+
 const SidePanelContents = React.forwardRef<HTMLDivElement, SidePanelContentsProps>(
-  ({ label, element, sidePanelId, styles, children, ...props }, ref) => {
+  ({ label, element, sidePanelId, styles, isMobile, children, ...props }, ref) => {
     // Get the offset of the side panel from the top of the viewport
     const sidePanelRef = React.useRef<HTMLDivElement>(null);
     const mergedSidePanelRef = useMergeRefs(sidePanelRef, ref) as React.RefObject<HTMLDivElement>;
@@ -83,7 +89,7 @@ const SidePanelContents = React.forwardRef<HTMLDivElement, SidePanelContentsProp
         {...safelySpreadBoxProps(props)}
         position="absolute"
         role="dialog"
-        as={ModalDialogPrimitiveContent as any}
+        as={getAs(isMobile)}
         aria-label={label}
         top={0}
         right={0}
@@ -183,6 +189,7 @@ const SidePanel = React.forwardRef<HTMLDivElement, SidePanelProps>(
                   sidePanelId={sidePanelId}
                   styles={styles}
                   label={label}
+                  isMobile
                   ref={ref}
                 >
                   {children}
@@ -195,6 +202,7 @@ const SidePanel = React.forwardRef<HTMLDivElement, SidePanelProps>(
                 sidePanelId={sidePanelId}
                 styles={styles}
                 label={label}
+                isMobile={false}
                 ref={ref}
               >
                 {children}

diff --git a/packages/paste-core/components/side-panel/src/hooks.ts b/packages/paste-core/components/side-panel/src/hooks.ts
@@ -5,12 +5,8 @@ import type { SidePanelStateReturn, UseSidePanelStateProps } from "./types";
 export const useSidePanelState = ({ open = false }: UseSidePanelStateProps = {}): SidePanelStateReturn => {
   const [isOpen, setIsOpen] = React.useState(open);
 
-  const toggleSidePanel = (): void => {
-    setIsOpen(!isOpen);
-  };
-
   return {
-    sidePanel: { isOpen, setIsOpen },
-    toggleSidePanel,
+    isOpen,
+    setIsOpen,
   };
 };
diff --git a/packages/paste-core/components/side-panel/src/types.ts b/packages/paste-core/components/side-panel/src/types.ts
@@ -177,30 +177,21 @@ export interface SidePanelContextProps {
 }
 
 export interface SidePanelStateReturn {
-  sidePanel: {
-    /**
-     * State for the Side Panel. Determines whether the Side Panel is open or closed.
-     *
-     * @type {boolean}
-     * @default false
-     * @memberof SidePanelStateReturn
-     */
-    isOpen: boolean;
-    /**
-     * Sets the state of the Side Panel between open and closed.
-     *
-     * @type {React.Dispatch<React.SetStateAction<boolean>>}
-     * @memberof SidePanelStateReturn
-     */
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  };
   /**
-   * Toggles the Side Panel between open and closed states. Apply to the `onClick` of the component that triggers the Side Panel.
+   * State for the Side Panel. Determines whether the Side Panel is open or closed.
    *
-   * @type {() => void}
+   * @type {boolean}
+   * @default false
+   * @memberof SidePanelStateReturn
+   */
+  isOpen: boolean;
+  /**
+   * Sets the state of the Side Panel between open and closed.
+   *
+   * @type {React.Dispatch<React.SetStateAction<boolean>>}
    * @memberof SidePanelStateReturn
    */
-  toggleSidePanel: () => void;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export interface UseSidePanelStateProps {

diff --git a/packages/paste-core/components/side-panel/stories/index.stories.tsx b/packages/paste-core/components/side-panel/stories/index.stories.tsx
@@ -77,13 +77,11 @@ Default.parameters = {
 };
 
 export const NoContent: StoryFn = () => {
-  const { sidePanel, toggleSidePanel } = useSidePanelState({ open: true });
+  const sidePanel = useSidePanelState({ open: true });
   return (
     <SidePanelContainer {...sidePanel}>
       <SidePanelPushContentWrapper>
-        <SidePanelButton variant="primary" onClick={toggleSidePanel}>
-          open sesame
-        </SidePanelButton>
+        <SidePanelButton variant="primary">open sesame</SidePanelButton>
       </SidePanelPushContentWrapper>
       <SidePanel label="intelligent assistant chat">
         <SidePanelHeader>header</SidePanelHeader>content

diff --git a/packages/paste-website/src/pages/components/side-panel/index.mdx b/packages/paste-website/src/pages/components/side-panel/index.mdx
@@ -239,7 +239,7 @@ export const SidePanelExample = (): React.ReactNode => {
 
 ### Using the state hook
 
-Side Panel comes with the option of using a hook to manage the open and close state of the panel. The `useSidePanelState` hook returns an object to spread onto SidePanelContainer and a function to pass to the `onClick` of SidePanelButton.
+Side Panel comes with the option of using a hook to manage the open and close state of the panel. The `useSidePanelState` hook returns an object to spread onto SidePanelContainer. To change the default state of the Side Panel from closed to open, pass `open: true` to the hook.
 
 <LivePreview
   scope={{
@@ -257,11 +257,11 @@ Side Panel comes with the option of using a hook to manage the open and close st
   height="300px"
 >
   {`const SidePanelExample = () => {
-    const { sidePanel, toggleSidePanel } = useSidePanelState({});
+    const sidePanel = useSidePanelState({});
     return (
       <SidePanelContainer {...sidePanel}>
         <SidePanelPushContentWrapper>
-          <SidePanelButton variant="primary" onClick={toggleSidePanel}>
+          <SidePanelButton variant="primary">
             Toggle Side Panel
           </SidePanelButton>
         </SidePanelPushContentWrapper>