From 430a203abbe04c273395af67537f4ba59f9950cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arma=C4=9Fan?= Date: Thu, 27 Jul 2023 10:58:18 +1000 Subject: [PATCH] fix(PageLayout): Remove `warning` for the deprecated `position` prop (#3545) * Add deprecated notice and run console warn only in DEV * run when the env is not test * Revert "Toggle switch a11y take3 (#3510)" This reverts commit bdbcfd151d00a7995b07f57e2b37468af0bd0ee5. * take the list changes back for underlinenav * lint and test fix * Add back "Toggle switch a11y take3 (#3510)" This reverts commit 5f94786e60ea76e184222e98287e6200bb51a97c. * Revert "take the list changes back for underlinenav" This reverts commit 843e3045cef75bd1d913034fca08201b5c38b2cf. * fix after revert commit * remove console warning and update docs and changeset * fix changeset and update prop docs --- .changeset/hungry-spies-remember.md | 17 ++++++++++-- docs/content/PageLayout.mdx | 20 +++++++------- docs/content/SplitPageLayout.mdx | 2 +- src/PageLayout/PageLayout.docs.json | 2 +- src/PageLayout/PageLayout.tsx | 26 ++++++++++++++----- src/SplitPageLayout/SplitPageLayout.docs.json | 2 +- src/SplitPageLayout/SplitPageLayout.test.tsx | 4 --- 7 files changed, 47 insertions(+), 26 deletions(-) diff --git a/.changeset/hungry-spies-remember.md b/.changeset/hungry-spies-remember.md index 5ccf73c543f..67f7edc74d2 100644 --- a/.changeset/hungry-spies-remember.md +++ b/.changeset/hungry-spies-remember.md @@ -2,6 +2,19 @@ "@primer/react": patch --- -Deprecates position prop for PageLayout.Pane. Users will receive a console warning when it is used. +Deprecates `position` prop for PageLayout.Pane and SplitPageLayout.Pane. - +```diff +- +- +- +- + ++ ++ ++ ++ + +``` + + diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx index b3a7be5f539..127d72423cb 100644 --- a/docs/content/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -87,12 +87,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page + + + - - - @@ -106,12 +106,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page + - @@ -193,12 +193,12 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along Custom sticky header + + + - - - @@ -221,7 +221,7 @@ navigation container is used for. - + Home diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx index b6f82f4f7fc..3dc7bb4f343 100644 --- a/docs/content/SplitPageLayout.mdx +++ b/docs/content/SplitPageLayout.mdx @@ -167,7 +167,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P - + diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json index fd71e789354..199f7f27edb 100644 --- a/src/PageLayout/PageLayout.docs.json +++ b/src/PageLayout/PageLayout.docs.json @@ -137,7 +137,7 @@ "name": "position", "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }", "defaultValue": "'end'", - "description": "", + "description": "Use source order instead of relying on the `position` prop", "deprecated": true }, { diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 6a81204d3a0..76c7c9eb59d 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -482,6 +482,25 @@ Content.displayName = 'PageLayout.Content' // PageLayout.Pane export type PageLayoutPaneProps = { + /** + * @deprecated Use source order instead of relying on the `position` prop + * + * Before: + * ``` + * + * + * + * + * ``` + * + * After: + * ``` + * + * + * + * + * ``` + */ position?: keyof typeof panePositions | ResponsiveValue /** * @deprecated Use the `position` prop with a responsive value instead. @@ -563,13 +582,6 @@ const Pane = React.forwardRef { - if (responsivePosition !== undefined) { - // eslint-disable-next-line no-console - console.warn( - 'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.', - ) - } - // Combine position and positionWhenNarrow for backwards compatibility const positionProp = !isResponsiveValue(responsivePosition) && positionWhenNarrow !== 'inherit' diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json index b6b70f17f9f..fdd133c71f9 100644 --- a/src/SplitPageLayout/SplitPageLayout.docs.json +++ b/src/SplitPageLayout/SplitPageLayout.docs.json @@ -72,7 +72,7 @@ "name": "position", "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }", "defaultValue": "start'", - "description": "", + "description": "Use source order instead of relying on the `position` prop", "deprecated": true }, { diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx index 27d7cc182fa..3a711dfce86 100644 --- a/src/SplitPageLayout/SplitPageLayout.test.tsx +++ b/src/SplitPageLayout/SplitPageLayout.test.tsx @@ -17,7 +17,6 @@ describe('SplitPageLayout', () => { }) it('renders default layout', () => { - const spy = jest.spyOn(console, 'warn').mockImplementation(() => {}) const {container} = render( @@ -28,13 +27,11 @@ describe('SplitPageLayout', () => { , ) - expect(spy).toHaveBeenCalled() expect(container).toMatchSnapshot() }) it('renders Pane with a custom ID', () => { - const spy = jest.spyOn(console, 'warn').mockImplementation(() => {}) const {getByText} = render( @@ -42,7 +39,6 @@ describe('SplitPageLayout', () => { , ) - expect(spy).toHaveBeenCalled() const pane = getByText('Pane Content')