From 0c3caa44371a26c2e12634d81cff0b0dd2b4eaa1 Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Mon, 14 Oct 2024 11:03:39 +0100 Subject: [PATCH] fix(menu, menu-item): ensure that menu-items all remain the same height if any wrap to new lines Ensures that `MenuItem`s flex so that they all have the same height if any wrap their content to new lines at smaller screen resolutions. Ensures no additional padding is set on `MenuItem` children of `MenuFullscreen`. BREAKING CHANGE: `Menu` no longer supports `height`, `minHeight`, `maxHeight`, `size`, `overflowY` and `display` props. `MenuItem` no longer supports `height`, `minHeight`, `maxHeight`, `size`, `verticalAlign`, `overflow`, `overflowY`, `overflowX` and `display` props. fix #6934, fix #7000 --- .../global-header/component.test-pw.tsx | 4 +- .../global-header-test.stories.tsx | 2 +- .../global-header/global-header.stories.tsx | 8 +- .../__internal__/submenu/submenu.style.ts | 15 +- src/components/menu/component.test-pw.tsx | 10 +- .../menu/menu-item/menu-item.component.tsx | 3 +- .../menu/menu-item/menu-item.style.ts | 56 +++++-- .../menu/menu-item/menu-item.test.tsx | 46 ++++-- src/components/menu/menu-test.stories.tsx | 76 ++++++++-- src/components/menu/menu.component.tsx | 13 +- src/components/menu/menu.mdx | 2 +- src/components/menu/menu.pw.tsx | 141 +----------------- src/components/menu/menu.stories.tsx | 6 +- src/components/menu/menu.style.ts | 14 ++ .../navigation-bar/components.test-pw.tsx | 10 +- .../navigation-bar-test.stories.tsx | 34 +++++ .../navigation-bar/navigation-bar.pw.tsx | 4 +- .../navigation-bar/navigation-bar.stories.tsx | 10 +- 18 files changed, 240 insertions(+), 214 deletions(-) diff --git a/src/components/global-header/component.test-pw.tsx b/src/components/global-header/component.test-pw.tsx index c4e9f3b9b4..fdd4aafe08 100644 --- a/src/components/global-header/component.test-pw.tsx +++ b/src/components/global-header/component.test-pw.tsx @@ -7,7 +7,7 @@ import NavigationBar from "../navigation-bar"; export const FullMenuExample = () => ( <> - + Product A @@ -22,7 +22,7 @@ export const FullMenuExample = () => ( - + Menu Item One Menu Item Two diff --git a/src/components/global-header/global-header-test.stories.tsx b/src/components/global-header/global-header-test.stories.tsx index 2d15506eb4..25f9473399 100644 --- a/src/components/global-header/global-header-test.stories.tsx +++ b/src/components/global-header/global-header-test.stories.tsx @@ -27,7 +27,7 @@ export const MenuWithIconOnlyButtonsStory: StoryFn< return ( }> - + Product A diff --git a/src/components/global-header/global-header.stories.tsx b/src/components/global-header/global-header.stories.tsx index d8d04695ac..3ba86d8a79 100644 --- a/src/components/global-header/global-header.stories.tsx +++ b/src/components/global-header/global-header.stories.tsx @@ -55,7 +55,7 @@ export const BasicMenu: Story = () => { return ( }> - + Product A @@ -112,7 +112,7 @@ export const ResponsiveMenu: Story = () => { return ( }> - + {fullscreenViewBreakPoint ? ( <> { return ( <> }> - + Product A @@ -160,7 +160,7 @@ export const GlobalLocalNavBarLayout: Story = () => { - + Menu Item One diff --git a/src/components/menu/__internal__/submenu/submenu.style.ts b/src/components/menu/__internal__/submenu/submenu.style.ts index c4a3da0b4d..ad31867c67 100644 --- a/src/components/menu/__internal__/submenu/submenu.style.ts +++ b/src/components/menu/__internal__/submenu/submenu.style.ts @@ -34,6 +34,7 @@ const StyledSubmenuWrapper = styled.div` position: relative; width: fit-content; max-width: inherit; + height: inherit; ${({ isSubmenuOpen, theme }) => isSubmenuOpen && @@ -41,8 +42,8 @@ const StyledSubmenuWrapper = styled.div` z-index: ${theme.zIndex.popover}; `} - ${({ inFullscreenView, menuType, asPassiveItem }) => - inFullscreenView && + ${({ inFullscreenView, menuType, asPassiveItem }) => css` + ${inFullscreenView && css` width: 100%; @@ -55,6 +56,11 @@ const StyledSubmenuWrapper = styled.div` } `} `} + ${!inFullscreenView && + css` + display: flex; + `} + `} `; const StyledSubmenu = styled.ul` @@ -73,6 +79,7 @@ const StyledSubmenu = styled.ul` css` box-shadow: var(--boxShadow100); position: absolute; + top: 100%; background-color: ${variant === "default" ? menuConfigVariants[menuType].submenuItemBackground : menuConfigVariants[menuType].background}; @@ -212,10 +219,6 @@ const StyledSubmenu = styled.ul` > a, > button { padding: 11px 16px 12px; - - :has([data-component="icon"]) { - padding: 9px 16px 7px; - } } `} diff --git a/src/components/menu/component.test-pw.tsx b/src/components/menu/component.test-pw.tsx index 201de941f4..a9582f2f09 100644 --- a/src/components/menu/component.test-pw.tsx +++ b/src/components/menu/component.test-pw.tsx @@ -33,7 +33,7 @@ export const MenuComponent = (props: Partial & MenuDividerProps) => { {menuType} - + Menu Item One Menu Item Two @@ -422,7 +422,7 @@ export const MenuComponentItems = ( return ( - + Item Submenu One Item Submenu Two @@ -622,7 +622,7 @@ export const MenuSegmentTitleComponent = (props: Partial) => { {menuType} - + Menu Item One Menu Item Two @@ -655,7 +655,7 @@ export const MenuSegmentTitleComponentWithAdditionalMenuItem = ( {menuType} - + Menu Item One Menu Item Two @@ -705,7 +705,7 @@ export const MenuDividerComponent = (props: MenuDividerProps) => { {menuType} - + Menu Item One Menu Item Two diff --git a/src/components/menu/menu-item/menu-item.component.tsx b/src/components/menu/menu-item/menu-item.component.tsx index cdb717d87e..85de143857 100644 --- a/src/components/menu/menu-item/menu-item.component.tsx +++ b/src/components/menu/menu-item/menu-item.component.tsx @@ -23,7 +23,7 @@ export type VariantType = "default" | "alternate"; interface MenuItemBaseProps extends Omit, - LayoutProps, + Pick, FlexboxProps, PaddingProps { /** Custom className */ @@ -330,6 +330,7 @@ export const MenuItem = ({ {...paddingProps} asDiv={hasInput || as === "div"} hasInput={hasInput} + inSubmenu={!!handleSubmenuKeyDown} > {children} diff --git a/src/components/menu/menu-item/menu-item.style.ts b/src/components/menu/menu-item/menu-item.style.ts index a74ca6bce1..9dac35c38e 100644 --- a/src/components/menu/menu-item/menu-item.style.ts +++ b/src/components/menu/menu-item/menu-item.style.ts @@ -33,6 +33,7 @@ interface StyledMenuItemWrapperProps asDiv?: boolean; hasInput?: boolean; menuItemVariant?: Pick["variant"]; + inSubmenu?: boolean; } const BASE_SPACING = 16; @@ -98,6 +99,7 @@ const StyledMenuItemWrapper = styled.a.attrs({ asPassiveItem, asDiv, hasInput, + inSubmenu, }) => css` display: flex; align-items: center; @@ -130,7 +132,7 @@ const StyledMenuItemWrapper = styled.a.attrs({ button:has([data-component="icon"]):not(:has(button)) ${StyledContent} { position: relative; - top: -2px; + top: -1px; } `} @@ -155,11 +157,16 @@ const StyledMenuItemWrapper = styled.a.attrs({ ${!inFullscreenView && css` max-width: inherit; + width: inherit; + height: inherit; > a, > button { display: flex; align-items: center; + ${!inSubmenu ? "justify-content: center;" : ""} + width: inherit; + max-width: inherit; } && { @@ -212,7 +219,7 @@ const StyledMenuItemWrapper = styled.a.attrs({ !inFullscreenView && ` > a:not(:has(button)) { - padding: 11px 16px 12px; + padding: 11px 16px; } > a ${StyledButton}:not(.search-button) { @@ -237,22 +244,37 @@ const StyledMenuItemWrapper = styled.a.attrs({ } ` : ` - a, - ${StyledLink} a, - button, - ${StyledLink} button { - - padding: ${inFullscreenView ? "0px 16px" : "11px 16px 12px"}; - - :has([data-component="icon"]) { - padding: 9px 16px 7px; - } + ${ + hasSubmenu + ? ` + a, + ${StyledLink} a, + button, + ${StyledLink} button { + height: 100%; + padding: 0px 16px; + } + ` + : ` + button, + ${StyledLink} button { + height: 100%; + padding: ${!inFullscreenView ? "11px" : "0px"} 16px; + } + + a, + ${StyledLink} a { + height: 100%; + padding: ${maxWidth && !inFullscreenView ? "10px" : "0px"} 16px; + } + ` } `} button, - ${StyledLink} button { - height: 40px; + ${StyledLink} button, + a, + ${StyledLink} a { margin: 0px; text-align: left; @@ -260,6 +282,10 @@ const StyledMenuItemWrapper = styled.a.attrs({ css` height: auto; white-space: normal; + + ${StyledIcon} { + top: -2px; + } `} } @@ -279,6 +305,8 @@ const StyledMenuItemWrapper = styled.a.attrs({ css` a > ${StyledIcon}, button > ${StyledIcon} { display: inline-block; + height: 18px; + top: -2px; } `} } diff --git a/src/components/menu/menu-item/menu-item.test.tsx b/src/components/menu/menu-item/menu-item.test.tsx index 49a3484f9c..f14c7648f5 100644 --- a/src/components/menu/menu-item/menu-item.test.tsx +++ b/src/components/menu/menu-item/menu-item.test.tsx @@ -4,7 +4,6 @@ import userEvent from "@testing-library/user-event"; import { MenuItem } from ".."; import { - testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemPaddingRTL, } from "../../../__spec_helper__/__internal__/test-utils"; @@ -35,14 +34,7 @@ describe("When MenuItem has no submenu", () => { undefined, { modifier: "&&& > a" } ); - testStyledSystemLayout( - (props) => ( - - Foo - - ), - () => screen.getByRole("listitem") - ); + testStyledSystemFlexBox( (props) => ( @@ -52,6 +44,30 @@ describe("When MenuItem has no submenu", () => { () => screen.getByRole("listitem") ); + it("should apply the expected styling when `width` prop passed", () => { + render(Item One); + + expect(screen.getByRole("listitem")).toHaveStyle({ + width: "50%", + }); + }); + + it("should apply the expected styling when `maxWidth` prop passed", () => { + render(Item One); + + expect(screen.getByRole("listitem")).toHaveStyle({ + maxWidth: "50%", + }); + }); + + it("should apply the expected styling when `minWidth` prop passed", () => { + render(Item One); + + expect(screen.getByRole("listitem")).toHaveStyle({ + minWidth: "50%", + }); + }); + it("should render children correctly", () => { render(Item One); @@ -615,7 +631,7 @@ describe("when MenuItem has a submenu", () => { Submenu Item One - + {}} /> Submenu Item Three @@ -640,7 +656,7 @@ describe("when MenuItem has a submenu", () => { Submenu Item One - + {}} /> Submenu Item Three @@ -666,7 +682,7 @@ describe("when MenuItem has a submenu", () => { Submenu Item One - + {}} /> Submenu Item Three @@ -893,7 +909,7 @@ describe("when MenuItem has a submenu", () => { Submenu Item One - + {}} /> Submenu Item Three @@ -917,7 +933,7 @@ describe("when MenuItem has a submenu", () => { Submenu Item One - + {}} /> Submenu Item Three @@ -944,7 +960,7 @@ describe("when MenuItem has a submenu", () => { Submenu Item One - + {}} /> Submenu Item Three diff --git a/src/components/menu/menu-test.stories.tsx b/src/components/menu/menu-test.stories.tsx index f1e43dc3be..dde7a895c9 100644 --- a/src/components/menu/menu-test.stories.tsx +++ b/src/components/menu/menu-test.stories.tsx @@ -10,6 +10,7 @@ import { MenuFullscreenProps, MenuSegmentTitle, ScrollableBlock, + MenuDivider, } from "."; import { MenuType } from "./__internal__/menu.context"; import Search from "../search"; @@ -35,6 +36,7 @@ const meta: Meta = { "MenuComponentFullScreenWithLongSubmenuText", "AsLinkWithAlternateVariant", "MenuWithSubmenuCustomPadding", + "WhenMenuItemsWrap", ], parameters: { info: { disable: true }, @@ -95,16 +97,25 @@ export const MenuFullScreenStory = ({ isOpen={isOpen} onClose={onClose} > - Menu Item One + + Menu item as link with icon + + + {}}> + Menu item as button with icon + + action("submenu item clicked")(evt)} - submenu="Menu Item Two" + submenu="Menu item with submenu and onClick" > - Submenu Item One + Submenu item one as link with padding override and icon + - - Submenu Item Two + {}}> + Submenu item two as button with padding override and icon + @@ -115,13 +126,18 @@ export const MenuFullScreenStory = ({ searchButton={searchButton} /> - Menu Item Three - Menu Item Four - - Submenu Item One - Submenu Item Two + Menu item as link + {}}>Menu item as button + + + Submenu item as link with icon + + + {}}> + Submenu item as button with icon + + - Menu Item Six {}}> Menu item as button with a really long topic where the text should not be truncated but instead it should be wrapped @@ -455,5 +471,41 @@ export const MenuWithSubmenuCustomPadding = () => ( ))} ); - MenuWithSubmenuCustomPadding.storyName = "Menu with submenu custom padding"; + +export const WhenMenuItemsWrap = () => { + return ( + + + + M + + {}}> + Menu Item Two + + + Item Submenu One + Item Submenu Two + + + Item Submenu Three + + + Item Submenu Four + + + {}}> + {}}>Item Submenu One + Item Submenu Two + + + + ); +}; +WhenMenuItemsWrap.storyName = "When menu items wrap"; diff --git a/src/components/menu/menu.component.tsx b/src/components/menu/menu.component.tsx index 1433692083..a7789a9d39 100644 --- a/src/components/menu/menu.component.tsx +++ b/src/components/menu/menu.component.tsx @@ -7,7 +7,18 @@ import MenuContext, { MenuType } from "./__internal__/menu.context"; import { menuKeyboardNavigation } from "./__internal__/keyboard-navigation"; import { MENU_ITEM_CHILDREN_LOCATOR } from "./__internal__/locators"; -export interface MenuProps extends TagProps, LayoutProps, FlexboxProps { +export interface MenuProps + extends TagProps, + Pick< + LayoutProps, + | "width" + | "minWidth" + | "maxWidth" + | "overflow" + | "overflowX" + | "verticalAlign" + >, + FlexboxProps { /** Children elements */ children: React.ReactNode; /** Defines the color scheme of the component */ diff --git a/src/components/menu/menu.mdx b/src/components/menu/menu.mdx index e7f8fee9fc..bae54f9024 100644 --- a/src/components/menu/menu.mdx +++ b/src/components/menu/menu.mdx @@ -98,7 +98,7 @@ If you need to split out a submenu into a separate component, it must be done as In order to align text and icons within a submenu a `Box` component will need to be used to adjust the margin of the content. - + ### Scrollable submenu diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx index d00b510e8d..fe9236d33c 100644 --- a/src/components/menu/menu.pw.tsx +++ b/src/components/menu/menu.pw.tsx @@ -404,7 +404,7 @@ test.describe("Prop tests for Menu component", () => { const topLess = 184; const leftLess = 108; // additionVal is to compensate for the outline. - const additionVal = 4; + const additionVal = 5; await page.keyboard.press("Tab"); await page.keyboard.press("Enter"); @@ -417,19 +417,19 @@ test.describe("Prop tests for Menu component", () => { const boundBottom = await cross.evaluate((element) => { return element.getBoundingClientRect().bottom; }); - expect(boundBottom).toBeLessThan(bottomLess + additionVal); + expect(boundBottom).toBeLessThanOrEqual(bottomLess + additionVal); expect(boundBottom).toBeGreaterThan(bottomLess); const boundTop = await cross.evaluate((element) => { return element.getBoundingClientRect().top; }); - expect(boundTop).toBeLessThan(topLess + additionVal); + expect(boundTop).toBeLessThanOrEqual(topLess + additionVal); expect(boundTop).toBeGreaterThan(topLess); const boundLeft = await cross.evaluate((element) => { return element.getBoundingClientRect().left; }); - expect(boundLeft).toBeLessThan(leftLess + additionVal); + expect(boundLeft).toBeLessThanOrEqual(leftLess + additionVal); expect(boundLeft).toBeGreaterThan(leftLess); }); @@ -559,27 +559,6 @@ test.describe("Prop tests for Menu component", () => { }); }); - ([ - ["number", 15, 15], - ["number", 27, 27], - ["number", 41, 41], - ["string", "10px", 10], - ["string", "30px", 30], - ["string", "50px", 50], - ] as [string, number | string, number][]).forEach( - ([type, propValue, pixels]) => { - test(`should render with height set to ${pixels}px when prop is passed as a ${type}`, async ({ - mount, - page, - }) => { - await mount(); - - const thisMenu = menu(page).first(); - await assertCssValueIsApproximately(thisMenu, "height", pixels); - }); - } - ); - ([ ["number", 810, 350, 810], ["number", 810, 1350, 1350], @@ -618,59 +597,6 @@ test.describe("Prop tests for Menu component", () => { } ); - ([ - ["number", 30, 20, 30], - ["number", 30, 40, 40], - ["string", "35px", "25px", 35], - ["string", "35px", "40px", 40], - ] as [string, string | number, string | number, number][]).forEach( - ([type, minHeight, height, pixels]) => { - test(`should render with minimum height of ${pixels}px when minHeight prop is passed as a ${type}`, async ({ - mount, - page, - }) => { - await mount(); - - const thisMenu = menu(page).first(); - await assertCssValueIsApproximately(thisMenu, "height", pixels); - }); - } - ); - - ([ - ["number", 30, 20, 20], - ["number", 30, 40, 30], - ["string", "35px", "25px", 25], - ["string", "35px", "40px", 35], - ] as [string, string | number, string | number, number][]).forEach( - ([type, maxHeight, height, pixels]) => { - test(`should render with maximum height of ${pixels}px when maxHeight prop is passed as a ${type}`, async ({ - mount, - page, - }) => { - await mount(); - - const thisMenu = menu(page).first(); - await assertCssValueIsApproximately(thisMenu, "height", pixels); - }); - } - ); - - ["block", "inline-block", "flex", "contents", "list-item", "none"].forEach( - (display) => { - test(`should render with display as ${display}`, async ({ - mount, - page, - }) => { - await mount(); - - const thisMenu = menu(page).first(); - await expect(thisMenu).toHaveAttribute("display", display); - await expect(thisMenu).toHaveCSS("display", display); - }); - } - ); - [ "baseline", "bottom", @@ -723,24 +649,6 @@ test.describe("Prop tests for Menu component", () => { }); }); - ([ - "auto", - "clip", - "hidden", - "scroll", - "visible", - ] as MenuProps["overflowY"][]).forEach((overflow) => { - test(`should render with overflowY as ${overflow}`, async ({ - mount, - page, - }) => { - await mount(); - - const thisMenu = menu(page).first(); - await expect(thisMenu).toHaveCSS("overflow-y", overflow as string); - }); - }); - ["normal", "stretch", "baseline", "center", "flex-start", "flex-end"].forEach( (alignment) => { test(`should render with alignItems as ${alignment}`, async ({ @@ -1875,17 +1783,6 @@ test.describe("Accessibility tests for Menu component", () => { }); }); - ["10px", "30px", "50px"].forEach((propValue) => { - test(`should pass accessibility tests when height is ${propValue}`, async ({ - mount, - page, - }) => { - await mount(); - - await checkAccessibility(page); - }); - }); - (["default", "large"] as MenuDividerProps["size"][]).forEach((size) => { test(`should pass accessibility tests when size is ${size}px`, async ({ mount, @@ -1897,19 +1794,6 @@ test.describe("Accessibility tests for Menu component", () => { }); }); - ["block", "inline-block", "flex", "contents", "list-item", "none"].forEach( - (display) => { - test(`should pass accessibility tests when display is ${display}`, async ({ - mount, - page, - }) => { - await mount(); - - await checkAccessibility(page); - }); - } - ); - [ "baseline", "bottom", @@ -1958,23 +1842,6 @@ test.describe("Accessibility tests for Menu component", () => { }); }); - ([ - "auto", - "clip", - "hidden", - "scroll", - "visible", - ] as MenuProps["overflowY"][]).forEach((overflow) => { - test(`should pass accessibility tests when overflowY is ${overflow}`, async ({ - mount, - page, - }) => { - await mount(); - - await checkAccessibility(page); - }); - }); - ["normal", "stretch", "baseline", "center", "flex-start", "flex-end"].forEach( (alignment) => { test(`should pass accessibility tests for when alignItems is ${alignment}`, async ({ diff --git a/src/components/menu/menu.stories.tsx b/src/components/menu/menu.stories.tsx index 02524b517d..600f728cf6 100644 --- a/src/components/menu/menu.stories.tsx +++ b/src/components/menu/menu.stories.tsx @@ -368,7 +368,7 @@ SplitSubmenuIntoSeparateComponentStory.parameters = { chromatic: { disableSnapshot: true }, }; -export const SubmeuIconAndTextAlignment: Story = () => { +export const SubmenuIconAndTextAlignment: Story = () => { return ( @@ -391,8 +391,8 @@ export const SubmeuIconAndTextAlignment: Story = () => { ); }; -SubmeuIconAndTextAlignment.storyName = "Submeu Icon and Text Alignment"; -SubmeuIconAndTextAlignment.parameters = { +SubmenuIconAndTextAlignment.storyName = "Submeu Icon and Text Alignment"; +SubmenuIconAndTextAlignment.parameters = { chromatic: { disableSnapshot: true }, }; diff --git a/src/components/menu/menu.style.ts b/src/components/menu/menu.style.ts index 1443c7f4af..ce0fb9a989 100644 --- a/src/components/menu/menu.style.ts +++ b/src/components/menu/menu.style.ts @@ -29,6 +29,8 @@ const StyledMenuWrapper = styled.ul` padding: 0; outline: none; display: flex; + align-items: stretch; + min-height: 40px; ${layout} ${flexbox} @@ -60,6 +62,13 @@ interface StyledMenuItemProps } const StyledMenuItem = styled.li` + display: flex; + ${({ maxWidth }) => + maxWidth && + css` + align-items: stretch; + `} + ${layout} ${flexbox} @@ -72,6 +81,11 @@ const StyledMenuItem = styled.li` css` display: list-item; `} + + ${!inSubmenu && + css` + height: inherit; + `} `} ${({ inFullscreenView }) => diff --git a/src/components/navigation-bar/components.test-pw.tsx b/src/components/navigation-bar/components.test-pw.tsx index 5f2e90632b..03a4a51ea9 100644 --- a/src/components/navigation-bar/components.test-pw.tsx +++ b/src/components/navigation-bar/components.test-pw.tsx @@ -57,7 +57,7 @@ export const ContentMaxWidthBox = () => (
- + {}}> Menu Item One @@ -92,7 +92,7 @@ export const Sticky = () => ( aria-label="header" > - + {}}> Menu Item One @@ -128,7 +128,7 @@ export const Sticky = () => ( aria-label="footer" > - + {}}> Menu Item One @@ -156,7 +156,7 @@ export const Fixed = () => ( offset="25px" aria-label="header" > - + {}}> Menu Item One @@ -190,7 +190,7 @@ export const Fixed = () => ( offset="25px" aria-label="footer" > - + {}}> Menu Item One diff --git a/src/components/navigation-bar/navigation-bar-test.stories.tsx b/src/components/navigation-bar/navigation-bar-test.stories.tsx index d3b6b5f0c0..d7332f94a0 100644 --- a/src/components/navigation-bar/navigation-bar-test.stories.tsx +++ b/src/components/navigation-bar/navigation-bar-test.stories.tsx @@ -1,6 +1,7 @@ import React, { useRef, useState, useEffect } from "react"; import NavigationBar, { NavigationBarProps } from "."; import { Menu, MenuItem } from "../menu"; +import Pill from "../pill"; import useMediaQuery from "../../hooks/useMediaQuery"; export default { @@ -10,6 +11,7 @@ export default { "NavigationBarWithSubmenuAndChangingHeight", "WithMediaQuery", "ResponsivePadding", + "WithPills", ], parameters: { info: { disable: true }, @@ -106,3 +108,35 @@ ResponsivePadding.parameters = { viewports: [599, 959, 1259], }, }; + +export const WithPills = () => { + return ( + + + {}}> + Menu 1 + + 1 + + + + Menu 2 + + 1 + + + + + ); +}; +WithPills.storyName = "With pills"; +WithPills.parameters = { + chromatic: { + disableSnapshot: false, + }, +}; diff --git a/src/components/navigation-bar/navigation-bar.pw.tsx b/src/components/navigation-bar/navigation-bar.pw.tsx index cbab856c44..f79ebc5f9e 100644 --- a/src/components/navigation-bar/navigation-bar.pw.tsx +++ b/src/components/navigation-bar/navigation-bar.pw.tsx @@ -185,7 +185,7 @@ test.describe("Test props for NavigationBar component", () => { aria-label="header" > - + {}}> Menu Item One @@ -204,7 +204,7 @@ test.describe("Test props for NavigationBar component", () => { aria-label="footer" > - + {}}> Menu Item One diff --git a/src/components/navigation-bar/navigation-bar.stories.tsx b/src/components/navigation-bar/navigation-bar.stories.tsx index b327d1397a..b9d9e3492e 100644 --- a/src/components/navigation-bar/navigation-bar.stories.tsx +++ b/src/components/navigation-bar/navigation-bar.stories.tsx @@ -83,7 +83,7 @@ export const ContentMaxWidthBox: Story = () => { return ( - + {}}> Menu Item One @@ -127,7 +127,7 @@ export const Sticky: Story = () => { aria-label="header" > - + {}}> Menu Item One @@ -158,7 +158,7 @@ export const Sticky: Story = () => { aria-label="footer" > - + {}}> Menu Item One @@ -189,7 +189,7 @@ export const Fixed: Story = () => { offset="25px" aria-label="header" > - + {}}> Menu Item One @@ -218,7 +218,7 @@ export const Fixed: Story = () => { offset="25px" aria-label="footer" > - + {}}> Menu Item One