diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png
index 4b01458e4d3..48b5cbacbd3 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/Breadcrumbs.test.ts-Overflow.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png b/apps/react-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png
index dbd49e4727d..c29ce506c51 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Overflow.png differ
diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Vertical Overflow.png b/apps/react-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Vertical Overflow.png
index 2d97a8e3508..1df1ba83686 100755
Binary files a/apps/react-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Vertical Overflow.png and b/apps/react-workshop/cypress-visual-screenshots/baseline/ButtonGroup.test.ts-Vertical Overflow.png differ
diff --git a/apps/react-workshop/src/Breadcrumbs.stories.tsx b/apps/react-workshop/src/Breadcrumbs.stories.tsx
index e5a13c8fe4a..2f0dab197eb 100644
--- 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 = () => {
));
- return (
-
- {items}
-
- );
+ return {items};
};
+Overflow.decorators = [
+ (Story: () => React.ReactNode) => (
+ <>
+
+ Resize the container to see overflow behavior.
+
+
+
+
+ >
+ ),
+];
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
index ca3d75f2604..4bfc018fb8c 100644
--- 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
index 412dd6335ae..60e3eae2a90 100644
--- 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 (
+ {
+ return (
+ {
+ const length = items.length - overflowStart;
+
+ return Array.from({ length }, (_, _index) => {
+ const index = overflowStart + _index;
+
+ return (
+ }
+ >
+ Item #{index}
+
+ );
+ });
+ }}
+ >
+
+
+
+
+ );
+ }}
+ >
+ {items}
+
+ );
+};
+Overflow.decorators = [
+ (Story: () => React.ReactNode) => (
<>
- Resize the viewport to see overflow behavior.
+ Resize the container to see overflow behavior.
- {
- return (
- {
- const length = items.length - overflowStart;
-
- return Array.from({ length }, (_, _index) => {
- const index = overflowStart + _index;
-
- return (
- }
- >
- Item #{index}
-
- );
- });
- }}
- >
-
-
-
-
- );
- }}
- >
- {items}
-
+
>
- );
-};
+ ),
+];
export const InputButtonCombo = () => {
return (
@@ -208,14 +214,23 @@ export const VerticalOverflow = () => {
);
};
VerticalOverflow.decorators = [
- (Story) => (
+ (Story: () => React.ReactNode) => (
<>
- Resize the viewport to see overflow behavior.
+ Resize the container to see overflow behavior.
-
+
>
),
-] satisfies StoryDecorator[];
+];