diff --git a/.changeset/hungry-spies-remember.md b/.changeset/hungry-spies-remember.md new file mode 100644 index 00000000000..5ccf73c543f --- /dev/null +++ b/.changeset/hungry-spies-remember.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +--- + +Deprecates position prop for PageLayout.Pane. Users will receive a console warning when it is used. + + diff --git a/generated/components.json b/generated/components.json index 0eefafc31a4..36148d57673 100644 --- a/generated/components.json +++ b/generated/components.json @@ -637,7 +637,7 @@ }, { "name": "size", - "type": "number", + "type": "number | { narrow?: number; regular?: number; wide?: number; }", "defaultValue": "20", "description": "The size of the avatar in pixels." }, @@ -697,6 +697,18 @@ "defaultValue": "false", "description": "Align the avatars to the right" }, + { + "name": "disableExpand", + "type": "boolean", + "defaultValue": "false", + "description": "Do not spread the avatars on hover" + }, + { + "name": "size", + "type": "number | { narrow?: number; regular?: number; wide?: number; }", + "defaultValue": "20", + "description": "The size of the avatar children in pixels." + }, { "name": "sx", "type": "SystemStyleObject" @@ -1724,7 +1736,7 @@ "stories": [ { "id": "components-filteredsearch--default", - "code": "() => (\n \n \n Filter\n \n \n Item 1\n Item 2\n Item 3\n \n \n \n \n \n)" + "code": "() => (\n \n \n Filter\n \n \n Item 1\n Item 2\n Item 3\n \n \n \n \n \n)" } ], "props": [ @@ -2797,7 +2809,8 @@ "name": "position", "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }", "defaultValue": "'end'", - "description": "" + "description": "", + "deprecated": true }, { "name": "positionWhenNarrow", @@ -4370,7 +4383,7 @@ "name": "resize", "type": "'both' | 'horizontal' | 'vertical' | 'none'", "defaultValue": "'both'", - "description": "Changes background color to a higher contrast color" + "description": "Changes the resize behavior" }, { "name": "validationStatus", @@ -4382,10 +4395,6 @@ "name": "ref", "type": "React.RefObject" }, - { - "name": "ref", - "type": "React.RefObject" - }, { "name": "as", "type": "React.ElementType", @@ -4708,7 +4717,7 @@ "stories": [ { "id": "components-treeview--default", - "code": "() => (\n \n)" + "code": "() => (\n \n)" }, { "id": "components-treeview-features--files", diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json index dfa273638c5..fd71e789354 100644 --- a/src/PageLayout/PageLayout.docs.json +++ b/src/PageLayout/PageLayout.docs.json @@ -137,7 +137,8 @@ "name": "position", "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }", "defaultValue": "'end'", - "description": "" + "description": "", + "deprecated": true }, { "name": "positionWhenNarrow", diff --git a/src/PageLayout/PageLayout.features.stories.tsx b/src/PageLayout/PageLayout.features.stories.tsx index 9a168985c56..2713af247f4 100644 --- a/src/PageLayout/PageLayout.features.stories.tsx +++ b/src/PageLayout/PageLayout.features.stories.tsx @@ -83,49 +83,42 @@ export const StickyPane: Story = args => ( - + - {Array.from({length: args.numParagraphsInContent}).map((_, i) => { - const testId = `content${i}` + {Array.from({length: args.numParagraphsInPane}).map((_, i) => { + const testId = `paragraph${i}` return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus - in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod - nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + massa purus. ) })} - - + + - {Array.from({length: args.numParagraphsInPane}).map((_, i) => { - const testId = `paragraph${i}` + {Array.from({length: args.numParagraphsInContent}).map((_, i) => { + const testId = `content${i}` return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. + massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus + in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod + nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. ) })} - + @@ -158,32 +151,32 @@ export const NestedScrollContainer: Story = args => ( - + - {Array.from({length: args.numParagraphsInContent}).map((_, i) => ( + {Array.from({length: args.numParagraphsInPane}).map((_, i) => ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus - in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod - nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. + massa purus. ))} - - + + - {Array.from({length: args.numParagraphsInPane}).map((_, i) => ( + {Array.from({length: args.numParagraphsInContent}).map((_, i) => ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec sit amet - massa purus. + massa purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus felis. Ut porttitor auctor tellus + in imperdiet. Ut blandit tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum auctor euismod + nisi. Nullam tincidunt est in mi tincidunt dictum. Sed consectetur aliquet velit ut ornare. ))} - + @@ -228,6 +221,23 @@ export const CustomStickyHeader: Story = args => ( Custom sticky header + + + {Array.from({length: args.numParagraphsInPane}).map((_, i) => { + const testId = `paragraph${i}` + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non + ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius + tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec + sit amet massa purus. + + + ) + })} + + {Array.from({length: args.numParagraphsInContent}).map((_, i) => { @@ -248,30 +258,6 @@ export const CustomStickyHeader: Story = args => ( })} - - - {Array.from({length: args.numParagraphsInPane}).map((_, i) => { - const testId = `paragraph${i}` - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at enim id lorem tempus egestas a non - ipsum. Maecenas imperdiet ante quam, at varius lorem molestie vel. Sed at eros consequat, varius - tellus et, auctor felis. Donec pulvinar lacinia urna nec commodo. Phasellus at imperdiet risus. Donec - sit amet massa purus. - - - ) - })} - - @@ -306,7 +292,7 @@ export const ResizablePane: Story = () => ( - + @@ -323,7 +309,7 @@ export const ScrollContainerWithinPageLayoutPane: Story = () => ( - + diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index 2ec2aaa0f56..d3cc95afd72 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -34,9 +34,6 @@ const meta: Meta = { 'Content.hidden.regular': false, 'Content.hidden.narrow': false, 'Content.hidden.wide': false, - 'Pane.position.regular': 'end', - 'Pane.position.narrow': 'end', - 'Pane.position.wide': 'end', 'Pane.width': 'medium', 'Pane.sticky': false, 'Pane.resizable': false, @@ -205,31 +202,6 @@ const meta: Meta = { table: {category: 'Content props'}, }, - // Pane prop controls - 'Pane.position.regular': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.position.narrow': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, - 'Pane.position.wide': { - type: { - name: 'enum', - value: ['start', 'end'], - }, - control: {type: 'radio'}, - table: {category: 'Pane props'}, - }, 'Pane.width': { type: { name: 'enum', @@ -382,11 +354,6 @@ const Template: Story = args => ( {args['Render pane?'] ? ( { Header - Content - + Pane + Content Footer , diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 48533afc22e..6a81204d3a0 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -107,7 +107,23 @@ const Root: React.FC> = ({ }} > {slots.header} - {rest} + ({ + display: 'flex', + flex: '1 1 100%', + flexWrap: 'wrap', + maxWidth: '100%', + [`@media screen and (max-width: ${theme.breakpoints[2]})`]: { + rowGap: SPACING_MAP[rowGap], + }, + [`@media screen and (min-width: ${theme.breakpoints[1]})`]: { + columnGap: SPACING_MAP[columnGap], + }, + })} + > + {rest} + {slots.footer} @@ -428,7 +444,6 @@ const Content: React.FC> = ({ { display: isHidden ? 'none' : 'flex', flexDirection: 'column', - order: REGION_ORDER.content, // Set flex-basis to 0% to allow flex-grow to control the width of the content region. // Without this, the content region could wrap onto a different line // than the pane region on wide viewports if its contents are too wide. @@ -530,7 +545,7 @@ 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' @@ -678,12 +700,9 @@ const Pane = React.forwardRef
Pane @@ -232,10 +234,10 @@ exports[`PageLayout renders condensed layout 1`] = `