From 158a3e090558617a9c502027a4e0fde75e2da74a Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 27 Jul 2022 14:39:08 -0700 Subject: [PATCH 1/4] Update position prop API --- src/PageLayout/PageLayout.tsx | 42 ++++++++++++++++++++++++++--------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index b317597f12f..edd2953e179 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -1,6 +1,6 @@ import React from 'react' import {Box} from '..' -import {ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue' +import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue' import {BetterSystemStyleObject, merge, SxProp} from '../sx' const REGION_ORDER = { @@ -276,7 +276,21 @@ Content.displayName = 'PageLayout.Content' // PageLayout.Pane export type PageLayoutPaneProps = { - position?: keyof typeof panePositions + position?: keyof typeof panePositions | ResponsiveValue + /** + * @deprecated Use the `position` prop with a responsive value instead. + * + * Before: + * ``` + * position="start" + * positionWhenNarrow="end" + * ``` + * + * After: + * ``` + * position={{regular: 'start', narrow: 'end'}} + * ``` + */ positionWhenNarrow?: 'inherit' | keyof typeof panePositions width?: keyof typeof paneWidths divider?: 'none' | 'line' @@ -305,9 +319,15 @@ const Pane: React.FC> = ({ children, sx = {} }) => { + // Combine position and positionWhenNarrow for backwards compatibility + const positionProp = + !isResponsiveValue(position) && positionWhenNarrow !== 'inherit' + ? {regular: position, narrow: positionWhenNarrow} + : position + + const responsivePosition = useResponsiveValue(positionProp, 'end') const isHidden = useResponsiveValue(hidden, false) const {rowGap, columnGap} = React.useContext(PageLayoutContext) - const computedPositionWhenNarrow = positionWhenNarrow === 'inherit' ? position : positionWhenNarrow const computedDividerWhenNarrow = dividerWhenNarrow === 'inherit' ? divider : dividerWhenNarrow return ( > = ({ sx={(theme: any) => merge( { - order: panePositions[computedPositionWhenNarrow], + order: panePositions[responsivePosition], display: isHidden ? 'none' : 'flex', - flexDirection: computedPositionWhenNarrow === 'end' ? 'column' : 'column-reverse', + flexDirection: responsivePosition === 'end' ? 'column' : 'column-reverse', width: '100%', marginX: 0, - [computedPositionWhenNarrow === 'end' ? 'marginTop' : 'marginBottom']: SPACING_MAP[rowGap], + [responsivePosition === 'end' ? 'marginTop' : 'marginBottom']: SPACING_MAP[rowGap], [`@media screen and (min-width: ${theme.breakpoints[1]})`]: { width: 'auto', - [position === 'end' ? 'marginLeft' : 'marginRight']: SPACING_MAP[columnGap], + [responsivePosition === 'end' ? 'marginLeft' : 'marginRight']: SPACING_MAP[columnGap], marginY: `0 !important`, - flexDirection: position === 'end' ? 'row' : 'row-reverse', - order: panePositions[position] + flexDirection: responsivePosition === 'end' ? 'row' : 'row-reverse', + order: panePositions[responsivePosition] } }, sx @@ -338,12 +358,12 @@ const Pane: React.FC> = ({ {children} From a6a37cd428caea87e57195cb791935a90612c8ef Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 27 Jul 2022 14:47:35 -0700 Subject: [PATCH 2/4] Update snapshots --- .../__snapshots__/PageLayout.test.tsx.snap | 106 +++++++++--------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap index cfc3a6d898e..65cea18e87e 100644 --- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap +++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap @@ -503,24 +503,41 @@ exports[`PageLayout renders pane in different position when narrow 1`] = ` margin-right: auto; } -.c10 { +.c6 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + margin-left: 0; + margin-right: 0; + margin-top: 16px; +} + +.c7 { margin-left: -16px; margin-right: -16px; display: none; margin-bottom: 16px; } -.c7 { +.c8 { height: 100%; display: none; margin-right: 16px; } -.c8 { +.c9 { width: 100%; } -.c9 { +.c10 { -webkit-order: 4; -ms-flex-order: 4; order: 4; @@ -528,23 +545,6 @@ exports[`PageLayout renders pane in different position when narrow 1`] = ` margin-top: 16px; } -.c6 { - -webkit-order: 1; - -ms-flex-order: 1; - order: 1; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column-reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; - width: 100%; - margin-left: 0; - margin-right: 0; - margin-bottom: 16px; -} - @media screen and (min-width:1012px) { .c0 { padding: 24px; @@ -574,69 +574,69 @@ exports[`PageLayout renders pane in different position when narrow 1`] = ` } @media screen and (min-width:768px) { - .c10 { - margin-left: 0 !important; - margin-right: 0 !important; - display: none; + .c6 { + width: auto; + margin-left: 16px; + margin-top: 0 !important; + margin-bottom: 0 !important; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; } } @media screen and (min-width:1012px) { - .c10 { - margin-left: -24px; - margin-right: -24px; - margin-bottom: 24px; + .c6 { + margin-top: 24px; } } @media screen and (min-width:768px) { .c7 { + margin-left: 0 !important; + margin-right: 0 !important; display: none; } } @media screen and (min-width:1012px) { .c7 { - margin-right: 24px; + margin-left: -24px; + margin-right: -24px; + margin-bottom: 24px; } } @media screen and (min-width:768px) { .c8 { - width: 256px; + display: none; } } @media screen and (min-width:1012px) { .c8 { - width: 296px; + margin-right: 24px; } } -@media screen and (min-width:1012px) { +@media screen and (min-width:768px) { .c9 { - margin-top: 24px; + width: 256px; } } -@media screen and (min-width:768px) { - .c6 { - width: auto; - margin-left: 16px; - margin-top: 0 !important; - margin-bottom: 0 !important; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-order: 3; - -ms-flex-order: 3; - order: 3; +@media screen and (min-width:1012px) { + .c9 { + width: 296px; } } @media screen and (min-width:1012px) { - .c6 { - margin-bottom: 24px; + .c10 { + margin-top: 24px; } } @@ -667,23 +667,23 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
Footer
From 71eb48f84a9df6410d390a3b8f3121bbb1687804 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 27 Jul 2022 14:47:42 -0700 Subject: [PATCH 3/4] Update docs --- docs/content/PageLayout.mdx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx index d9ad832f9e7..acdc0f176a0 100644 --- a/docs/content/PageLayout.mdx +++ b/docs/content/PageLayout.mdx @@ -229,15 +229,28 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo Date: Wed, 27 Jul 2022 14:49:22 -0700 Subject: [PATCH 4/4] Create fair-tips-travel.md --- .changeset/fair-tips-travel.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 .changeset/fair-tips-travel.md diff --git a/.changeset/fair-tips-travel.md b/.changeset/fair-tips-travel.md new file mode 100644 index 00000000000..1dd8f13d944 --- /dev/null +++ b/.changeset/fair-tips-travel.md @@ -0,0 +1,19 @@ +--- +"@primer/react": minor +--- + +* Updated the `position` prop in `PageLayout.Pane` to use the new responsive prop API introduced in https://github.com/primer/react/pull/2174. +* Deprecated the `positionWhenNarrow` prop in favor of the new responsive prop API + +**Before** + +``` +position="start" +positionWhenNarrow="end" +``` + +**After** + +``` +position={{regular: 'start', narrow: 'end'}} +```