From d48f89987da6be2d51f6ba129d83f24d41d365b0 Mon Sep 17 00:00:00 2001 From: Dusty Greif Date: Mon, 9 May 2022 21:00:25 +0000 Subject: [PATCH 1/7] Fix overflow issues in PageLayout.Content --- src/PageLayout/PageLayout.stories.tsx | 32 +++++++++++++++++++++++---- src/PageLayout/PageLayout.tsx | 7 +++--- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index 93d41a0a459..e3bfb11e87d 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -1,8 +1,18 @@ -import {Meta, Story} from '@storybook/react' import React from 'react' -import {Box, BranchName, Heading, Link, SideNav, StateLabel, TabNav, Text, Button} from '..' -import {Placeholder} from '../Placeholder' -import {PageLayout} from './PageLayout' +import { + Box, + BranchName, + Button, + Heading, + Link, + SideNav, + StateLabel, + TabNav, + Text + } from '..' +import { Meta, Story } from '@storybook/react' +import { PageLayout } from './PageLayout' +import { Placeholder } from '../Placeholder' const meta: Meta = { title: 'Layout/PageLayout', @@ -270,6 +280,20 @@ export const PullRequestPage = () => ( + + This box has really long content. If it is too long, it will cause x overflow and should show a scrollbar. When + this overflows, it should not break to overall page layout! + diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 6a70e4dcfdd..51416a5d188 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -1,6 +1,6 @@ import React from 'react' -import {Box} from '..' -import {BetterSystemStyleObject, merge, SxProp} from '../sx' +import { BetterSystemStyleObject, merge, SxProp } from '../sx' +import { Box } from '..' const REGION_ORDER = { header: 0, @@ -238,7 +238,8 @@ const Content: React.FC = ({width = 'full', children, sx // than the pane region on wide viewports if its contents are too wide. flexBasis: 0, flexGrow: 1, - flexShrink: 1 + flexShrink: 1, + minWidth: 1 }, sx )} From 54711e0d151680a5d736bf9f66ee94d27cb18de3 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 20 May 2022 11:56:51 -0700 Subject: [PATCH 2/7] Update PageLayout story --- src/PageLayout/PageLayout.stories.tsx | 23 +++++++---------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index e3bfb11e87d..e138ea20f2f 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -1,18 +1,8 @@ import React from 'react' -import { - Box, - BranchName, - Button, - Heading, - Link, - SideNav, - StateLabel, - TabNav, - Text - } from '..' -import { Meta, Story } from '@storybook/react' -import { PageLayout } from './PageLayout' -import { Placeholder } from '../Placeholder' +import {Box, BranchName, Button, Heading, Link, SideNav, StateLabel, TabNav, Text} from '..' +import {Meta, Story} from '@storybook/react' +import {PageLayout} from './PageLayout' +import {Placeholder} from '../Placeholder' const meta: Meta = { title: 'Layout/PageLayout', @@ -287,8 +277,9 @@ export const PullRequestPage = () => ( border: '1px solid', whiteSpace: 'nowrap', borderColor: 'border.default', - mt: 1, - p: 1 + mt: 3, + p: 3, + borderRadius: 2 }} > This box has really long content. If it is too long, it will cause x overflow and should show a scrollbar. When From e740fb5435d7aa172b43abbf98493d3ac0b64496 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 20 May 2022 11:58:03 -0700 Subject: [PATCH 3/7] Prettier --- src/PageLayout/PageLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 51416a5d188..cc7a964acba 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { BetterSystemStyleObject, merge, SxProp } from '../sx' -import { Box } from '..' +import {BetterSystemStyleObject, merge, SxProp} from '../sx' +import {Box} from '..' const REGION_ORDER = { header: 0, From 6065669ed58d1d0aed7e5d3d853becc01d366914 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 20 May 2022 11:58:51 -0700 Subject: [PATCH 4/7] Create gentle-countries-rest.md --- .changeset/gentle-countries-rest.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/gentle-countries-rest.md diff --git a/.changeset/gentle-countries-rest.md b/.changeset/gentle-countries-rest.md new file mode 100644 index 00000000000..8ef80059a75 --- /dev/null +++ b/.changeset/gentle-countries-rest.md @@ -0,0 +1,9 @@ +--- +"@primer/react": patch +--- + +Fix overflow issues in `PageLayout.Content` + +| Before | After | +|--------|--------| +| image | image | From 7edea16d56650359a9e840ec771157dd27ac3e77 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 20 May 2022 12:03:16 -0700 Subject: [PATCH 5/7] Fix merge errors --- src/PageLayout/PageLayout.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx index e5effa3797f..0e815fb7987 100644 --- a/src/PageLayout/PageLayout.stories.tsx +++ b/src/PageLayout/PageLayout.stories.tsx @@ -1,8 +1,9 @@ +import {Meta, Story} from '@storybook/react' import React from 'react' import {Box, BranchName, Button, Heading, Link, StateLabel, TabNav, Text} from '..' import {NavList} from '../NavList' -import {PageLayout} from './PageLayout' import {Placeholder} from '../Placeholder' +import {PageLayout} from './PageLayout' const meta: Meta = { title: 'Layout/PageLayout', From ce0193b41d255a4ced4eba07f4db49502f6885f5 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 20 May 2022 12:07:00 -0700 Subject: [PATCH 6/7] Update src/PageLayout/PageLayout.tsx --- src/PageLayout/PageLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index cc7a964acba..b013246e569 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -239,7 +239,7 @@ const Content: React.FC = ({width = 'full', children, sx flexBasis: 0, flexGrow: 1, flexShrink: 1, - minWidth: 1 + minWidth: 1 // Hack to prevent overflowing content from pushing the pane region to the next line }, sx )} From 23b9501415c32fa5685ee8ff63fc76b57947c8e0 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 22 May 2022 20:12:26 -0700 Subject: [PATCH 7/7] Update snapshot --- src/PageLayout/__snapshots__/PageLayout.test.tsx.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap index 109fa24a96d..cfc3a6d898e 100644 --- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap +++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap @@ -28,6 +28,7 @@ exports[`PageLayout renders condensed layout 1`] = ` -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; + min-width: 1px; } .c5 { @@ -246,6 +247,7 @@ exports[`PageLayout renders default layout 1`] = ` -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; + min-width: 1px; } .c5 { @@ -491,6 +493,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = ` -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; + min-width: 1px; } .c5 { @@ -729,6 +732,7 @@ exports[`PageLayout renders with dividers 1`] = ` -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; + min-width: 1px; } .c5 {