fix: Updated Breadcrumbs

Workday · Nov 5, 2024 · a78d542 · a78d542
1 parent bdb92c4
commit a78d542
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/cypress/component/Breadcrumbs.spec.tsx b/cypress/component/Breadcrumbs.spec.tsx
@@ -218,7 +218,7 @@ context(
   'given the [Components/Navigation/Breadcrumbs, Overflow Breadcrumbs] menu is rendered',
   () => {
     beforeEach(() => {
-      cy.mount(<OverflowBreadcrumbs width={'480px'} />);
+      cy.mount(<OverflowBreadcrumbs width="480px" />);
 
       openDropdownMenu();
     });

diff --git a/modules/react/breadcrumbs/stories/Breadcrumbs.stories.ts b/modules/react/breadcrumbs/stories/Breadcrumbs.stories.ts
@@ -27,6 +27,7 @@ export const Basic: Story = {
   render: BasicExample,
 };
 export const OverflowBreadcrumbs: Story = {
+  // @ts-ignore Storybook doesn't allow the use of props within components
   render: OverflowBreadcrumbsExample,
 };
 export const RTLOverflowList: Story = {

diff --git a/modules/react/breadcrumbs/stories/examples/Overflow.tsx b/modules/react/breadcrumbs/stories/examples/Overflow.tsx
@@ -22,7 +22,7 @@ export const OverflowBreadcrumbs = ({width = '100%'}) => {
 
   const model = useBreadcrumbsModel({items});
   const [containerWidth, setContainerWidth] = React.useState(width);
-
+  console.log('width', width);
   return (
     <div>
       <Box width={containerWidth} marginBottom="xl">
@@ -32,10 +32,7 @@ export const OverflowBreadcrumbs = ({width = '100%'}) => {
         </div>
         <hr />
         <Breadcrumbs model={model} aria-label="Breadcrumbs">
-          <Breadcrumbs.List
-            width={width}
-            overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}
-          >
+          <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>
             {item =>
               item.link ? (
                 <Breadcrumbs.Item>
@@ -59,7 +56,13 @@ export const OverflowBreadcrumbs = ({width = '100%'}) => {
       </Box>
       <hr />
       <h4>Change Breadcrumbs container size</h4>
-      <SegmentedControl onSelect={data => setContainerWidth(data.id)}>
+      <SegmentedControl
+        initialValue={width}
+        onSelect={data => {
+          console.log('you called?');
+          setContainerWidth(data.id);
+        }}
+      >
         <SegmentedControl.List aria-label="container width control" marginBottom="m">
           <SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
           <SegmentedControl.Item data-id="480px">480px</SegmentedControl.Item>