Add resize to leftover Breadcrumbs overflow stories (#2133)

Co-authored-by: Rohan <[email protected]>
iTwin · Jul 8, 2024 · a164f99 · a164f99
1 parent 9673bf6
commit a164f99
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 73 deletions.
diff --git a/...visual-screenshots/baseline/Breadcrumbs.test.ts-Custom Overflow Back Button.png b/...visual-screenshots/baseline/Breadcrumbs.test.ts-Custom Overflow Back Button.png
diff --git a/...ss-visual-screenshots/baseline/Breadcrumbs.test.ts-Custom Overflow Dropdown.png b/...ss-visual-screenshots/baseline/Breadcrumbs.test.ts-Custom Overflow Dropdown.png
diff --git a/apps/react-workshop/src/Breadcrumbs.stories.tsx b/apps/react-workshop/src/Breadcrumbs.stories.tsx
@@ -10,7 +10,6 @@ import {
   DropdownMenu,
   MenuItem,
   Input,
-  Tooltip,
   Text,
 } from '@itwin/itwinui-react';
 import {
@@ -117,39 +116,51 @@ export const CustomOverflowBackButton = () => {
     ));
 
   return (
-    <div
-      style={{
-        width: '50%',
-        maxWidth: 725,
-        minWidth: 150,
-        border: '1px solid lightpink',
-        padding: 8,
+    <Breadcrumbs
+      overflowButton={(visibleCount: number) => {
+        const previousBreadcrumb =
+          visibleCount > 1 ? items.length - visibleCount : items.length - 2;
+        return (
+          <IconButton
+            aria-label={`Item ${previousBreadcrumb}`}
+            onClick={() => {
+              console.log(`Visit breadcrumb ${previousBreadcrumb}`);
+            }}
+            styleType='borderless'
+            label={`Item ${previousBreadcrumb}`}
+            labelProps={{
+              placement: 'bottom',
+            }}
+          >
+            <SvgMore />
+          </IconButton>
+        );
       }}
     >
-      <Breadcrumbs
-        overflowButton={(visibleCount: number) => {
-          const previousBreadcrumb =
-            visibleCount > 1 ? items.length - visibleCount : items.length - 2;
-          return (
-            <Tooltip content={`Item ${previousBreadcrumb}`} placement='bottom'>
-              <IconButton
-                aria-label={`Item ${previousBreadcrumb}`}
-                onClick={() => {
-                  console.log(`Visit breadcrumb ${previousBreadcrumb}`);
-                }}
-                styleType='borderless'
-              >
-                <SvgMore />
-              </IconButton>
-            </Tooltip>
-          );
-        }}
-      >
-        {items}
-      </Breadcrumbs>
-    </div>
+      {items}
+    </Breadcrumbs>
   );
 };
+CustomOverflowBackButton.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 CustomOverflowDropdown = () => {
   const items = Array(10)
@@ -164,50 +175,60 @@ export const CustomOverflowDropdown = () => {
     ));
 
   return (
-    <div
-      style={{
-        width: '50%',
-        maxWidth: 725,
-        minWidth: 150,
-        border: '1px solid lightpink',
-        padding: 8,
-      }}
-    >
-      <Breadcrumbs
-        overflowButton={(visibleCount: number) => (
-          <DropdownMenu
-            menuItems={(close) =>
-              Array(items.length - visibleCount)
-                .fill(null)
-                .map((_, _index) => {
-                  const index = visibleCount > 1 ? _index + 1 : _index;
-                  const onClick = () => {
-                    console.log(`Visit breadcrumb ${index}`);
-                    close();
-                  };
-                  return (
-                    <MenuItem key={index} onClick={onClick}>
-                      Item {index}
-                    </MenuItem>
-                  );
-                })
-            }
+    <Breadcrumbs
+      overflowButton={(visibleCount: number) => (
+        <DropdownMenu
+          menuItems={(close) =>
+            Array(items.length - visibleCount)
+              .fill(null)
+              .map((_, _index) => {
+                const index = visibleCount > 1 ? _index + 1 : _index;
+                const onClick = () => {
+                  console.log(`Visit breadcrumb ${index}`);
+                  close();
+                };
+                return (
+                  <MenuItem key={index} onClick={onClick}>
+                    Item {index}
+                  </MenuItem>
+                );
+              })
+          }
+        >
+          <IconButton
+            aria-label='Dropdown with more breadcrumbs'
+            onClick={() => console.log('Clicked on overflow icon')}
+            styleType='borderless'
           >
-            <IconButton
-              aria-label='Dropdown with more breadcrumbs'
-              onClick={() => console.log('Clicked on overflow icon')}
-              styleType='borderless'
-            >
-              <SvgMore />
-            </IconButton>
-          </DropdownMenu>
-        )}
-      >
-        {items}
-      </Breadcrumbs>
-    </div>
+            <SvgMore />
+          </IconButton>
+        </DropdownMenu>
+      )}
+    >
+      {items}
+    </Breadcrumbs>
   );
 };
+CustomOverflowDropdown.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 FolderNavigation = () => {
   const items = useMemo(

diff --git a/apps/react-workshop/src/Breadcrumbs.test.ts b/apps/react-workshop/src/Breadcrumbs.test.ts
@@ -10,8 +10,8 @@ describe('Breadcrumbs', () => {
     'Folder Navigation',
     'Links',
     'Overflow',
-    // 'Custom Overflow Dropdown', // excluding because these fellas keep failing in CI
-    // 'Custom Overflow Back Button',
+    'Custom Overflow Dropdown',
+    'Custom Overflow Back Button',
   ];
 
   tests.forEach((testName) => {
@@ -23,6 +23,12 @@ describe('Breadcrumbs', () => {
         cy.get('small').hide();
       }
 
+      if (testName === 'Custom Overflow Dropdown') {
+        cy.get('button').eq(1).click();
+      } else if (testName === 'Custom Overflow Back Button') {
+        cy.get('button').eq(1).trigger('mouseenter');
+      }
+
       cy.compareSnapshot(testName);
     });
   });