feat(Flyout): enable trigger positioning in mobile (#2128)

Frontify · Dec 5, 2024 · 194ec41 · 194ec41
1 parent c67fbf6
commit 194ec41
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 52 deletions.
diff --git a/.changeset/perfect-dancers-clean.md b/.changeset/perfect-dancers-clean.md
@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": patch
+---
+
+feat(`Flyout`): enable trigger positioning for mobile viewports
diff --git a/packages/components/src/components/Flyout/Flyout.stories.tsx b/packages/components/src/components/Flyout/Flyout.stories.tsx
@@ -264,6 +264,39 @@ export const MobileView: Story = {
     },
 };
 
+export const MobileViewBottom: Story = {
+    parameters: {
+        viewport: {
+            viewports: {
+                mobile: {
+                    name: 'Mobile',
+                    styles: {
+                        width: '375px',
+                        height: '667px',
+                    },
+                },
+            },
+            defaultViewport: 'mobile',
+        },
+    },
+    render: ({ ...args }) => {
+        return (
+            <Flyout.Root>
+                <Flyout.Trigger>
+                    <Button className="tw-mt-[590px] tw-ml-28">Open flyout</Button>
+                </Flyout.Trigger>
+                <Flyout.Content {...args}>
+                    <Flyout.Header showCloseButton>Header</Flyout.Header>
+                    <Flyout.Body>I am a flyout</Flyout.Body>
+                    <Flyout.Footer>
+                        <Button>Submit</Button>
+                    </Flyout.Footer>
+                </Flyout.Content>
+            </Flyout.Root>
+        );
+    },
+};
+
 export const Overflow: Story = {
     decorators: [
         (Story) => (

diff --git a/packages/components/src/components/Flyout/Flyout.tsx b/packages/components/src/components/Flyout/Flyout.tsx
@@ -116,40 +116,43 @@ export const FlyoutContent = (
     }: FlyoutContentProps,
     ref: ForwardedRef<HTMLDivElement>,
 ) => {
-    const localRef = useRef(null);
+    const localRef = useRef<HTMLDivElement>(null);
 
     const { setMaxHeight } = usePreventDropdownOverflow(localRef);
 
     return (
         <RadixPopover.Portal>
-            <RadixPopover.Content
-                style={
-                    {
-                        '--flyout-max-width': maxWidth,
-                        '--flyout-width': width,
-                    } as CSSProperties
-                }
-                ref={localRef}
-                align={align}
-                collisionPadding={8}
-                sideOffset={8}
-                onOpenAutoFocus={() => {
-                    setMaxHeight();
-                    syncRefs(localRef, ref);
-                }}
-                onCloseAutoFocus={() => {
-                    syncRefs(localRef, ref);
-                }}
-                className={styles.root}
-                data-flyout-spacing={padding}
-                data-rounded={rounded}
-                data-shadow={shadow}
-                data-test-id={dataTestId}
-                onFocus={addShowFocusRing}
-                {...props}
-            >
-                {children}
-            </RadixPopover.Content>
+            <>
+                <div className={styles.overlay} />
+                <RadixPopover.Content
+                    style={
+                        {
+                            '--flyout-max-width': maxWidth,
+                            '--flyout-width': width,
+                        } as CSSProperties
+                    }
+                    ref={localRef}
+                    align={align}
+                    collisionPadding={8}
+                    sideOffset={8}
+                    onOpenAutoFocus={() => {
+                        setMaxHeight();
+                        syncRefs(localRef, ref);
+                    }}
+                    onCloseAutoFocus={() => {
+                        syncRefs(localRef, ref);
+                    }}
+                    className={styles.root}
+                    data-flyout-spacing={padding}
+                    data-rounded={rounded}
+                    data-shadow={shadow}
+                    data-test-id={dataTestId}
+                    onFocus={addShowFocusRing}
+                    {...props}
+                >
+                    {children}
+                </RadixPopover.Content>
+            </>
         </RadixPopover.Portal>
     );
 };

diff --git a/packages/components/src/components/Flyout/styles/flyout.module.scss b/packages/components/src/components/Flyout/styles/flyout.module.scss
@@ -9,7 +9,6 @@
     background-color: var(--base-color);
     border: var(--line-width) solid var(--line-color);
     width: 100%;
-    margin-top: sizeToken(4);
     overflow: auto;
 
     &[data-rounded='medium'] {
@@ -23,46 +22,50 @@
     &[data-shadow='medium'] {
         @include shadow-md;
     }
-    
+
     &[data-shadow='large'] {
         @include shadow-lg;
     }
 
-    // Responsive dialog background element
-    &::before {
-        content: '';
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100dvw;
-        height: 100dvh;
-        background-color: var(--box-positive-strong-inverse-color);
-        opacity: 0.3;
-        z-index: -1;
-        pointer-events: none;
-    }
-
     @include sm {
         width: var(--flyout-width);
         max-width: var(--flyout-max-width);
         margin-top: 0;
         background-color: var(--base-color);
-
-        &::before {
-            display: none;
-        }
     }
 
     // Mobile view flyout -> dialog responsiveness
     body > [data-radix-popper-content-wrapper]:has(&) {
         @include max-sm {
-            width: 100dvw;
-            padding: sizeToken(2);
-            transform: translate(0, 0) !important;
+            &:has([data-side='top']),
+            &:has([data-side='bottom']) {
+                // Radix always leaves an 8px gap on the left side via its transform property
+                width: calc(100dvw - 16px);
+            }
+            // This prevents overflowing of content since radix applies a min-width of max-content
+            min-width: 0 !important;
         }
     }
 }
 
+// Responsive dialog background element
+.overlay {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100dvw;
+    height: 100dvh;
+    background-color: var(--box-positive-strong-inverse-color);
+    opacity: 0.3;
+    z-index: -1;
+    pointer-events: none;
+
+    @include sm {
+        display: none;
+    }
+}
+
 .header {
     display: flex;
     justify-content: space-between;