Add resize to Breadcrumbs and ButtonGroup overflow stories (#2128)

Co-authored-by: Rohan <[email protected]>
iTwin · Jul 3, 2024 · 7f73ff0 · 7f73ff0
1 parent 1205baa
commit 7f73ff0
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 46 deletions.
diff --git a/...t-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png b/...t-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png
diff --git a/...t-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png b/...t-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png
diff --git a/...p/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Vertical Overflow.png b/...p/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Vertical Overflow.png
diff --git a/apps/react-workshop/src/Breadcrumbs.stories.tsx b/apps/react-workshop/src/Breadcrumbs.stories.tsx
@@ -11,6 +11,7 @@ import {
   MenuItem,
   Input,
   Tooltip,
+  Text,
 } from '@itwin/itwinui-react';
 import {
   SvgChevronRightDouble,
@@ -80,12 +81,28 @@ export const Overflow = () => {
       </Breadcrumbs.Item>
     ));
 
-  return (
-    <div style={{ maxWidth: '50%', border: '1px solid lightpink', padding: 8 }}>
-      <Breadcrumbs>{items}</Breadcrumbs>
-    </div>
-  );
+  return <Breadcrumbs>{items}</Breadcrumbs>;
 };
+Overflow.decorators = [
+  (Story: () => React.ReactNode) => (
+    <>
+      <Text variant='small' as='small' isMuted>
+        Resize the container to see overflow behavior.
+      </Text>
+      <div
+        style={{
+          width: 'min(30rem, 100%)',
+          border: '1px solid lightpink',
+          padding: 8,
+          resize: 'inline',
+          overflow: 'hidden',
+        }}
+      >
+        <Story />
+      </div>
+    </>
+  ),
+];
 
 export const CustomOverflowBackButton = () => {
   const items = Array(10)

diff --git a/apps/react-workshop/src/Breadcrumbs.test.ts b/apps/react-workshop/src/Breadcrumbs.test.ts
@@ -19,6 +19,10 @@ describe('Breadcrumbs', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
 
+      if (testName.includes('Overflow')) {
+        cy.get('small').hide();
+      }
+
       cy.compareSnapshot(testName);
     });
   });

diff --git a/apps/react-workshop/src/ButtonGroup.stories.tsx b/apps/react-workshop/src/ButtonGroup.stories.tsx
@@ -19,7 +19,6 @@ import {
   SvgPlaceholder,
   SvgMore,
 } from '@itwin/itwinui-icons-react';
-import { StoryDecorator } from '@ladle/react';
 
 export default {
   title: 'ButtonGroup',
@@ -60,53 +59,60 @@ export const Overflow = () => {
   ));
 
   return (
+    <ButtonGroup
+      orientation='horizontal'
+      overflowButton={(overflowStart) => {
+        return (
+          <DropdownMenu
+            menuItems={(close) => {
+              const length = items.length - overflowStart;
+
+              return Array.from({ length }, (_, _index) => {
+                const index = overflowStart + _index;
+
+                return (
+                  <MenuItem
+                    key={index}
+                    onClick={close}
+                    icon={<SvgPlaceholder />}
+                  >
+                    Item #{index}
+                  </MenuItem>
+                );
+              });
+            }}
+          >
+            <IconButton label='More'>
+              <SvgMore />
+            </IconButton>
+          </DropdownMenu>
+        );
+      }}
+    >
+      {items}
+    </ButtonGroup>
+  );
+};
+Overflow.decorators = [
+  (Story: () => React.ReactNode) => (
     <>
       <Text variant='small' as='small' isMuted>
-        Resize the viewport to see overflow behavior.
+        Resize the container to see overflow behavior.
       </Text>
       <div
         style={{
-          maxWidth: 'clamp(300px, 50%, 100%)',
+          width: 'min(30rem, 100%)',
           border: '1px solid hotpink',
           padding: 8,
+          overflow: 'hidden',
+          resize: 'inline',
         }}
       >
-        <ButtonGroup
-          orientation='horizontal'
-          overflowButton={(overflowStart) => {
-            return (
-              <DropdownMenu
-                menuItems={(close) => {
-                  const length = items.length - overflowStart;
-
-                  return Array.from({ length }, (_, _index) => {
-                    const index = overflowStart + _index;
-
-                    return (
-                      <MenuItem
-                        key={index}
-                        onClick={close}
-                        icon={<SvgPlaceholder />}
-                      >
-                        Item #{index}
-                      </MenuItem>
-                    );
-                  });
-                }}
-              >
-                <IconButton label='More'>
-                  <SvgMore />
-                </IconButton>
-              </DropdownMenu>
-            );
-          }}
-        >
-          {items}
-        </ButtonGroup>
+        <Story />
       </div>
     </>
-  );
-};
+  ),
+];
 
 export const InputButtonCombo = () => {
   return (
@@ -208,14 +214,23 @@ export const VerticalOverflow = () => {
   );
 };
 VerticalOverflow.decorators = [
-  (Story) => (
+  (Story: () => React.ReactNode) => (
     <>
       <Text variant='small' as='small' isMuted>
-        Resize the viewport to see overflow behavior.
+        Resize the container to see overflow behavior.
       </Text>
-      <div style={{ border: '1px solid hotpink', padding: 8 }}>
+      <div
+        style={{
+          blockSize: 'min(20rem, 100vh)',
+          inlineSize: 'min(20rem, 100vw)',
+          border: '1px solid hotpink',
+          padding: 8,
+          resize: 'block',
+          overflow: 'hidden',
+        }}
+      >
         <Story />
       </div>
     </>
   ),
-] satisfies StoryDecorator[];
+];