From dad2a475fb02dd4581bd212671998e28a0570393 Mon Sep 17 00:00:00 2001 From: Neil Morrison Date: Fri, 30 Jun 2023 10:48:02 +0100 Subject: [PATCH 001/196] Adds a named container to the `Content` in `tabs` --- code/ui/components/src/tabs/tabs.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx index 454a92376d83..a1437b54de0d 100644 --- a/code/ui/components/src/tabs/tabs.tsx +++ b/code/ui/components/src/tabs/tabs.tsx @@ -65,6 +65,7 @@ const Content = styled.div( { display: 'block', position: 'relative', + container: 'tab-content / size' }, ({ theme }) => ({ fontSize: theme.typography.size.s2 - 1, From 03ddfe54e001fbfbec26b237795de14c7a3e7f40 Mon Sep 17 00:00:00 2001 From: Neil Morrison Date: Fri, 30 Jun 2023 11:31:20 +0100 Subject: [PATCH 002/196] Keep trailing comma --- code/ui/components/src/tabs/tabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx index a1437b54de0d..badab077aa98 100644 --- a/code/ui/components/src/tabs/tabs.tsx +++ b/code/ui/components/src/tabs/tabs.tsx @@ -65,7 +65,7 @@ const Content = styled.div( { display: 'block', position: 'relative', - container: 'tab-content / size' + container: 'tab-content / size', }, ({ theme }) => ({ fontSize: theme.typography.size.s2 - 1, From f2c4aba78f2149ded7cdb0b2503cf41c61c2ae76 Mon Sep 17 00:00:00 2001 From: Steffen Wilking Date: Tue, 11 Jul 2023 17:59:37 +0200 Subject: [PATCH 003/196] Hide keyboard shortcuts from menu when shortcuts are disabled --- code/ui/manager/src/containers/menu.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx index a387cb24d5f3..4dd8ab8ae477 100644 --- a/code/ui/manager/src/containers/menu.tsx +++ b/code/ui/manager/src/containers/menu.tsx @@ -71,6 +71,12 @@ export const useMenu = ( const whatsNewNotificationsEnabled = state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications; const isWhatsNewUnread = api.isWhatsNewUnread(); + + const separatorStyle = useMemo( + () => ({ borderBottom: `4px solid ${theme.appBorderColor}` }), + [theme.appBorderColor] + ); + const whatsNew = useMemo( () => ({ id: 'whats-new', @@ -79,8 +85,9 @@ export const useMenu = ( right: whatsNewNotificationsEnabled && isWhatsNewUnread && ( Check it out ), + style: { ...(enableShortcuts ? {} : separatorStyle) }, }), - [api, whatsNewNotificationsEnabled, isWhatsNewUnread] + [api, whatsNewNotificationsEnabled, isWhatsNewUnread, enableShortcuts, separatorStyle] ); const shortcuts = useMemo( @@ -89,11 +96,9 @@ export const useMenu = ( title: 'Keyboard shortcuts', onClick: () => api.navigateToSettingsPage('/settings/shortcuts'), right: enableShortcuts ? : null, - style: { - borderBottom: `4px solid ${theme.appBorderColor}`, - }, + style: { ...(enableShortcuts ? separatorStyle : {}) }, }), - [api, enableShortcuts, shortcutKeys.shortcutsPage, theme.appBorderColor] + [api, enableShortcuts, shortcutKeys.shortcutsPage, separatorStyle] ); const sidebarToggle = useMemo( @@ -231,7 +236,7 @@ export const useMenu = ( () => [ about, ...(state.whatsNewData?.status === 'SUCCESS' ? [whatsNew] : []), - shortcuts, + ...(enableShortcuts ? [shortcuts] : []), sidebarToggle, toolbarToogle, addonsToggle, @@ -262,6 +267,7 @@ export const useMenu = ( next, collapse, getAddonsShortcuts, + enableShortcuts, ] ); }; From 345d2dd31486cb608d02976df01ec52387bd2c87 Mon Sep 17 00:00:00 2001 From: Thomas Gossmann Date: Sat, 3 Feb 2024 15:34:19 +0100 Subject: [PATCH 004/196] Allow ember v5 as peer deps --- code/frameworks/ember/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index cd56a61fcbf5..575697252adc 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -51,7 +51,7 @@ "@babel/core": "*", "babel-plugin-ember-modules-api-polyfill": "^3.5.0", "babel-plugin-htmlbars-inline-precompile": "^5.3.1", - "ember-source": "~3.28.1 || ^4.0.0", + "ember-source": "~3.28.1 || >=4.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, From eb3fa011c7bae08fef9345e7d076d7a7483fe110 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 2 Mar 2024 00:13:55 +0800 Subject: [PATCH 005/196] Ember: Update description --- code/frameworks/ember/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 71f998740e7a..525364daae12 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,7 +1,7 @@ { "name": "@storybook/ember", "version": "8.0.0-rc.0", - "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", + "description": "Storybook for Ember: Develop, document, and test Ember components in isolation", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { "url": "https://github.com/storybookjs/storybook/issues" From 2ce62a73bdb121a95adc462c07567790293a5523 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 2 Mar 2024 00:15:01 +0800 Subject: [PATCH 006/196] Update yarn.lock --- code/yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/yarn.lock b/code/yarn.lock index 039c28a0c940..63a0aa6cd0ef 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5967,7 +5967,7 @@ __metadata: "@babel/core": "*" babel-plugin-ember-modules-api-polyfill: ^3.5.0 babel-plugin-htmlbars-inline-precompile: ^5.3.1 - ember-source: ~3.28.1 || ^4.0.0 + ember-source: ~3.28.1 || >=4.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown From f4674cc26632f2da5c117421928e7e01238dda0c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 2 Mar 2024 08:40:35 +0800 Subject: [PATCH 007/196] Trigger build --- code/frameworks/ember/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 525364daae12..964101dca90e 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,7 +1,7 @@ { "name": "@storybook/ember", "version": "8.0.0-rc.0", - "description": "Storybook for Ember: Develop, document, and test Ember components in isolation", + "description": "Storybook for Ember: Develop, document, and test Ember components in isolation!", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { "url": "https://github.com/storybookjs/storybook/issues" From 2e3f845757fdac6877724cfd65ee3e9d52ad672f Mon Sep 17 00:00:00 2001 From: gossi Date: Thu, 21 Mar 2024 15:28:00 +0100 Subject: [PATCH 008/196] trigger build --- code/frameworks/ember/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 10d6b0ad2756..6b31d58ebb48 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,7 +1,7 @@ { "name": "@storybook/ember", "version": "8.1.0-alpha.3", - "description": "Storybook for Ember: Develop, document, and test Ember components in isolation!", + "description": "Storybook for Ember: Develop, document, and test Ember components in isolation", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { "url": "https://github.com/storybookjs/storybook/issues" From 543a1cf83739132dc824972ae65bd99fbdd256db Mon Sep 17 00:00:00 2001 From: elisezhg Date: Sat, 20 Jul 2024 11:24:34 -0400 Subject: [PATCH 009/196] fix: set color scheme --- code/core/src/components/components/tooltip/Tooltip.tsx | 1 + code/core/src/manager/components/layout/Layout.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/code/core/src/components/components/tooltip/Tooltip.tsx b/code/core/src/components/components/tooltip/Tooltip.tsx index 83fbebfd1c9c..ae923ec17f38 100644 --- a/code/core/src/components/components/tooltip/Tooltip.tsx +++ b/code/core/src/components/components/tooltip/Tooltip.tsx @@ -96,6 +96,7 @@ const Wrapper = styled.div( ({ hidden }) => ({ display: hidden ? 'none' : 'inline-block', zIndex: 2147483647, + colorScheme: 'light dark', }), ({ theme, color, hasChrome }) => hasChrome diff --git a/code/core/src/manager/components/layout/Layout.tsx b/code/core/src/manager/components/layout/Layout.tsx index 82e6b532c9ae..fae3931b0902 100644 --- a/code/core/src/manager/components/layout/Layout.tsx +++ b/code/core/src/manager/components/layout/Layout.tsx @@ -187,6 +187,7 @@ const LayoutContainer = styled.div( overflow: 'hidden', display: 'flex', flexDirection: 'column', + colorScheme: 'light dark', [MEDIA_DESKTOP_BREAKPOINT]: { display: 'grid', From e6a8de0dc6a771f2de790897cde437893318bbb6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 19 Nov 2024 17:27:19 +0800 Subject: [PATCH 010/196] Tags: Add MDX test cases --- .../docs/template/stories/docs2/Tags.mdx | 7 +++ .../utils/StoryIndexGenerator.test.ts | 43 ++++++++++++++++--- .../utils/__mockdata__/src/docs2/Tags.mdx | 7 +++ .../core-server/utils/stories-json.test.ts | 15 +++++++ 4 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 code/addons/docs/template/stories/docs2/Tags.mdx create mode 100644 code/core/src/core-server/utils/__mockdata__/src/docs2/Tags.mdx diff --git a/code/addons/docs/template/stories/docs2/Tags.mdx b/code/addons/docs/template/stories/docs2/Tags.mdx new file mode 100644 index 000000000000..46f0965b5f92 --- /dev/null +++ b/code/addons/docs/template/stories/docs2/Tags.mdx @@ -0,0 +1,7 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Docs with tags + +hello docs \ No newline at end of file diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts index f199c05cfe7f..1aaacc1cc0ce 100644 --- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts +++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts @@ -1368,6 +1368,21 @@ describe('StoryIndexGenerator', () => { "title": "NoTitle", "type": "docs", }, + "tags--docs": { + "id": "tags--docs", + "importPath": "./src/docs2/Tags.mdx", + "name": "docs", + "storiesImports": [], + "tags": [ + "dev", + "test", + "foo", + "bar", + "unattached-mdx", + ], + "title": "Tags", + "type": "docs", + }, }, "v": 5, } @@ -1397,6 +1412,7 @@ describe('StoryIndexGenerator', () => { "A", "titlePrefix/NoTitle", "A", + "titlePrefix/Tags", "titlePrefix/docs2/Yabbadabbadooo", ] `); @@ -1503,6 +1519,21 @@ describe('StoryIndexGenerator', () => { "title": "NoTitle", "type": "docs", }, + "tags--info": { + "id": "tags--info", + "importPath": "./src/docs2/Tags.mdx", + "name": "Info", + "storiesImports": [], + "tags": [ + "dev", + "test", + "foo", + "bar", + "unattached-mdx", + ], + "title": "Tags", + "type": "docs", + }, }, "v": 5, } @@ -1738,6 +1769,7 @@ describe('StoryIndexGenerator', () => { "a--metaof", "notitle--docs", "a--second-docs", + "tags--docs", "docs2-yabbadabbadooo--docs", ] `); @@ -1791,6 +1823,7 @@ describe('StoryIndexGenerator', () => { "second-nested-g--story-one", "componentreference--docs", "notitle--docs", + "tags--docs", "h--story-one", "componentpath-extension--story-one", "componentpath-noextension--story-one", @@ -1840,7 +1873,7 @@ describe('StoryIndexGenerator', () => { const generator = new StoryIndexGenerator([storiesSpecifier, docsSpecifier], options); await generator.initialize(); await generator.getIndex(); - expect(toId).toHaveBeenCalledTimes(6); + expect(toId).toHaveBeenCalledTimes(7); toIdMock.mockClear(); await generator.getIndex(); @@ -1899,7 +1932,7 @@ describe('StoryIndexGenerator', () => { const generator = new StoryIndexGenerator([storiesSpecifier, docsSpecifier], options); await generator.initialize(); await generator.getIndex(); - expect(toId).toHaveBeenCalledTimes(6); + expect(toId).toHaveBeenCalledTimes(7); generator.invalidate(docsSpecifier, './src/docs2/Title.mdx', false); @@ -1921,7 +1954,7 @@ describe('StoryIndexGenerator', () => { const generator = new StoryIndexGenerator([storiesSpecifier, docsSpecifier], options); await generator.initialize(); await generator.getIndex(); - expect(toId).toHaveBeenCalledTimes(6); + expect(toId).toHaveBeenCalledTimes(7); generator.invalidate(storiesSpecifier, './src/A.stories.js', false); @@ -2021,7 +2054,7 @@ describe('StoryIndexGenerator', () => { const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options); await generator.initialize(); await generator.getIndex(); - expect(toId).toHaveBeenCalledTimes(6); + expect(toId).toHaveBeenCalledTimes(7); expect(Object.keys((await generator.getIndex()).entries)).toContain('notitle--docs'); @@ -2043,7 +2076,7 @@ describe('StoryIndexGenerator', () => { const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options); await generator.initialize(); await generator.getIndex(); - expect(toId).toHaveBeenCalledTimes(6); + expect(toId).toHaveBeenCalledTimes(7); expect(Object.keys((await generator.getIndex()).entries)).toContain('a--metaof'); diff --git a/code/core/src/core-server/utils/__mockdata__/src/docs2/Tags.mdx b/code/core/src/core-server/utils/__mockdata__/src/docs2/Tags.mdx new file mode 100644 index 000000000000..46f0965b5f92 --- /dev/null +++ b/code/core/src/core-server/utils/__mockdata__/src/docs2/Tags.mdx @@ -0,0 +1,7 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Docs with tags + +hello docs \ No newline at end of file diff --git a/code/core/src/core-server/utils/stories-json.test.ts b/code/core/src/core-server/utils/stories-json.test.ts index 4868c149b724..fd59822a6c09 100644 --- a/code/core/src/core-server/utils/stories-json.test.ts +++ b/code/core/src/core-server/utils/stories-json.test.ts @@ -242,6 +242,21 @@ describe('useStoriesJson', () => { "title": "docs2/NoTitle", "type": "docs", }, + "docs2-tags--docs": { + "id": "docs2-tags--docs", + "importPath": "./src/docs2/Tags.mdx", + "name": "docs", + "storiesImports": [], + "tags": [ + "dev", + "test", + "foo", + "bar", + "unattached-mdx", + ], + "title": "docs2/Tags", + "type": "docs", + }, "docs2-yabbadabbadooo--docs": { "id": "docs2-yabbadabbadooo--docs", "importPath": "./src/docs2/Title.mdx", From 59855df422c359ef5a346a455a1831818347434e Mon Sep 17 00:00:00 2001 From: Valentin Semirulnik Date: Sun, 20 Apr 2025 22:22:47 +0300 Subject: [PATCH 011/196] Alias react-element-to-jsx-string to @7rulnik/react-element-to-jsx-string --- code/renderers/react/package.json | 2 +- code/yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index bf39f036579c..a309d672b612 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -88,7 +88,7 @@ "expect-type": "^0.15.0", "html-tags": "^3.1.0", "prop-types": "^15.7.2", - "react-element-to-jsx-string": "^15.0.0", + "react-element-to-jsx-string": "npm:@7rulnik/react-element-to-jsx-string@15.0.1", "require-from-string": "^2.0.2", "semver": "^7.3.7", "ts-dedent": "^2.0.0", diff --git a/code/yarn.lock b/code/yarn.lock index 4a2912de6282..6ec19fbc25a8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7067,7 +7067,7 @@ __metadata: expect-type: "npm:^0.15.0" html-tags: "npm:^3.1.0" prop-types: "npm:^15.7.2" - react-element-to-jsx-string: "npm:^15.0.0" + react-element-to-jsx-string: "npm:@7rulnik/react-element-to-jsx-string@15.0.1" require-from-string: "npm:^2.0.2" semver: "npm:^7.3.7" ts-dedent: "npm:^2.0.0" @@ -23618,9 +23618,9 @@ __metadata: languageName: node linkType: hard -"react-element-to-jsx-string@npm:^15.0.0": - version: 15.0.0 - resolution: "react-element-to-jsx-string@npm:15.0.0" +"react-element-to-jsx-string@npm:@7rulnik/react-element-to-jsx-string@15.0.1": + version: 15.0.1 + resolution: "@7rulnik/react-element-to-jsx-string@npm:15.0.1" dependencies: "@base2/pretty-print-object": "npm:1.0.1" is-plain-object: "npm:5.0.0" @@ -23628,7 +23628,7 @@ __metadata: peerDependencies: react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0 react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0 - checksum: 10c0/0d60a0ea758529c32a706d0c69d70b69fb94de3c46442fffdee34f08f51ffceddbb5395b41dfd1565895653e9f60f98ca525835be9d5db1f16d6b22be12f4cd4 + checksum: 10c0/e52439d2dd4b25e073ab3928c484a6470a7094f4e77c4844cb86248016c7b34a3d5efddfc6e2ae30cf715c1cb53498d08d7211a505e67c56c7ab6607c5d0fbfe languageName: node linkType: hard From ea7d1a9264db07401de454470cd3ecab7c565221 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Fri, 27 Sep 2024 10:57:24 +0900 Subject: [PATCH 012/196] Add EditorConfig to extensions.json Recommend installing EditorConfig to help ensure consistent code formatting. --- .vscode/extensions.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 0ff975ec7f5b..020ac953c668 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,7 +1,8 @@ { "recommendations": [ "dbaeumer.vscode-eslint", + "EditorConfig.EditorConfig", "unifiedjs.vscode-mdx", "yzhang.markdown-all-in-one" ] -} \ No newline at end of file +} From 156bf0fe0d413cd555fba5d1d442b39f4e0ed320 Mon Sep 17 00:00:00 2001 From: yatishgoel <58841989+yatishgoel@users.noreply.github.com> Date: Wed, 7 May 2025 11:27:11 +0530 Subject: [PATCH 013/196] Apply user updates for mobile navigation accessibility --- .../src/manager/components/layout/Layout.tsx | 34 ++++- .../mobile/navigation/MobileAddonsDrawer.tsx | 15 +- .../mobile/navigation/MobileMenuDrawer.tsx | 31 +++- .../navigation/MobileNavigation.stories.tsx | 7 +- .../mobile/navigation/MobileNavigation.tsx | 26 +++- .../mobile/navigation/useFocusTrap.tsx | 139 ++++++++++++++++++ 6 files changed, 225 insertions(+), 27 deletions(-) create mode 100644 code/core/src/manager/components/mobile/navigation/useFocusTrap.tsx diff --git a/code/core/src/manager/components/layout/Layout.tsx b/code/core/src/manager/components/layout/Layout.tsx index 747e533d6871..7d8dab221cbf 100644 --- a/code/core/src/manager/components/layout/Layout.tsx +++ b/code/core/src/manager/components/layout/Layout.tsx @@ -127,6 +127,28 @@ const useLayoutSyncingState = ({ }; }; +const MainContentMatcher = ({ children }: { children: React.ReactNode }) => { + const { isMobileMenuOpen } = useLayout(); + + return ( + + {({ match }) => ( + + {children} + + )} + + ); +}; + +const OrderedMobileNavigation = styled(MobileNavigation)({ + order: 1, +}); + export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...slots }: Props) => { const { isDesktop, isMobile } = useLayout(); const api = useStorybookApi(); @@ -154,15 +176,15 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s showPanel={showPanel} > {showPages && {slots.slotPages}} - - {({ match }) => {slots.slotMain}} - {isDesktop && ( <> {slots.slotSidebar} + + {slots.slotMain} + {showPanel && ( )} + {isMobile && ( <> - - + {slots.slotMain} + )} diff --git a/code/core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx b/code/core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx index e88820cf5df7..1475f799e0ee 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileAddonsDrawer.tsx @@ -5,8 +5,8 @@ import { styled } from 'storybook/theming'; interface MobileAddonsDrawerProps { children: ReactNode; + id?: string; } - const Container = styled.div(({ theme }) => ({ position: 'relative', boxSizing: 'border-box', @@ -17,6 +17,15 @@ const Container = styled.div(({ theme }) => ({ overflow: 'hidden', })); -export const MobileAddonsDrawer: FC = ({ children }) => { - return {children}; +export const MobileAddonsDrawer: FC = ({ children, id }) => { + return ( + + {children} + + ); }; diff --git a/code/core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx b/code/core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx index 3f2183c1d5c4..64ddfcdeb41e 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileMenuDrawer.tsx @@ -1,5 +1,5 @@ import type { FC } from 'react'; -import React, { useRef } from 'react'; +import React, { useCallback, useRef } from 'react'; import { Transition } from 'react-transition-group'; import type { TransitionStatus } from 'react-transition-group/Transition'; @@ -8,22 +8,30 @@ import { styled } from 'storybook/theming'; import { MOBILE_TRANSITION_DURATION } from '../../../constants'; import { useLayout } from '../../layout/LayoutProvider'; import { MobileAbout } from '../about/MobileAbout'; +import { useFocusTrap } from './useFocusTrap'; interface MobileMenuDrawerProps { children?: React.ReactNode; + id?: string; } -export const MobileMenuDrawer: FC = ({ children }) => { - const containerRef = useRef(null); +export const MobileMenuDrawer: FC = ({ children, id }) => { const sidebarRef = useRef(null); const overlayRef = useRef(null); const { isMobileMenuOpen, setMobileMenuOpen, isMobileAboutOpen, setMobileAboutOpen } = useLayout(); + // Handler to close the menu + const handleClose = useCallback(() => { + setMobileMenuOpen(false); + }, [setMobileMenuOpen]); + + const containerRef = useFocusTrap(isMobileMenuOpen, handleClose); + return ( <> = ({ children }) => { onExited={() => setMobileAboutOpen(false)} > {(state) => ( - + } + state={state} + id={id} + role="dialog" + aria-modal="true" + aria-label="Navigation menu" + > {(sidebarState) => ( - + {children} )} @@ -58,9 +73,9 @@ export const MobileMenuDrawer: FC = ({ children }) => { setMobileMenuOpen(false)} + onClick={handleClose} aria-label="Close navigation menu" - /> + /> )} diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx index 8804a00ec96e..6748296ae1e6 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx @@ -61,12 +61,7 @@ const meta = { decorators: [ (storyFn) => ( - -
-
- {storyFn()} -
- + {storyFn()} ), ], diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx index 6b6693d691aa..ffc032b80970 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx @@ -19,6 +19,7 @@ interface MobileNavigationProps { showPanel: boolean; } + // Function to combine all indexes function combineIndexes(rootIndex: API_IndexHash | undefined, refs: API_Refs) { // Create a copy of the root index to avoid mutation @@ -72,17 +73,27 @@ export const MobileNavigation: FC = ({ menu, panel, showP return ( - {menu} + {menu} {isMobilePanelOpen ? ( - {panel} + {panel} ) : ( -