From e369c1721929bb45f736fe7a255e1121bf176497 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Tue, 30 Apr 2024 21:06:55 +0000 Subject: [PATCH 1/6] Fix nav top padding --- polaris-react/src/components/Navigation/Navigation.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/polaris-react/src/components/Navigation/Navigation.module.css b/polaris-react/src/components/Navigation/Navigation.module.css index 3901a91bd32..82582486295 100644 --- a/polaris-react/src/components/Navigation/Navigation.module.css +++ b/polaris-react/src/components/Navigation/Navigation.module.css @@ -115,6 +115,7 @@ @media (--p-breakpoints-md-up) { border-top-right-radius: 0; + padding-top: var(--p-space-400); } } From 5e648731b87f0194e527da8425c01368c99c98d0 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Tue, 30 Apr 2024 21:09:27 +0000 Subject: [PATCH 2/6] Add Scrollable container to Frame content --- .changeset/little-plums-try.md | 5 ++ .../components/AppProvider/AppProvider.tsx | 11 +++- .../src/components/Frame/Frame.module.css | 55 +++++++++++-------- polaris-react/src/components/Frame/Frame.tsx | 33 ++++++----- 4 files changed, 68 insertions(+), 36 deletions(-) create mode 100644 .changeset/little-plums-try.md diff --git a/.changeset/little-plums-try.md b/.changeset/little-plums-try.md new file mode 100644 index 00000000000..90be7dbdb57 --- /dev/null +++ b/.changeset/little-plums-try.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Added offset width to reframe `Frame`, passed reframe scroll container to sticky manager in `AppProvider`, fixed "Skip to content" z-index diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index dbed43729fe..5a39b9aa780 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -35,6 +35,7 @@ const MAX_SCROLLBAR_WIDTH = 20; const SCROLLBAR_TEST_ELEMENT_PARENT_SIZE = 30; const SCROLLBAR_TEST_ELEMENT_CHILD_SIZE = SCROLLBAR_TEST_ELEMENT_PARENT_SIZE + 10; +const APP_FRAME_SCROLLABLE = 'AppFrameScollable'; function measureScrollbars() { const parentEl = document.createElement('div'); @@ -105,7 +106,15 @@ export class AppProvider extends Component { componentDidMount() { if (document != null) { - this.stickyManager.setContainer(document); + if (!this.props.features?.dynamicTopBarAndReframe) { + this.stickyManager.setContainer(document); + } else { + const scrollContainerElement = + document.getElementById(APP_FRAME_SCROLLABLE); + + this.stickyManager.setContainer(scrollContainerElement ?? document); + } + this.setBodyStyles(); this.setRootAttributes(); diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css index 3fd19ff4685..4df3f7e6b33 100644 --- a/polaris-react/src/components/Frame/Frame.module.css +++ b/polaris-react/src/components/Frame/Frame.module.css @@ -28,7 +28,7 @@ /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */ @media screen and (min-width: 1200px) { /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */ - width: calc(100% - var(--pc-sidebar-width)); + width: calc(100% - var(--pc-frame-offset)); } @media (prefers-reduced-motion) { @@ -290,27 +290,12 @@ } .Content-TopBarAndReframe { - overflow-y: auto; - /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */ - margin-bottom: var(--pg-top-bar-height); - margin-right: var(--p-space-050); - - .hasSidebar & { - /* Sidebar breakpoint is 1200px */ - /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */ - @media screen and (min-width: 1200px) { - margin-right: unset; - } - } -} - -.ScrollbarSafeArea-TopBarAndReframe { @media (--p-breakpoints-md-up) { transition: width var(--p-motion-duration-250) var(--p-motion-ease); /* stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties */ width: calc( 100vw - var(--pg-navigation-width) - - var(--pc-app-provider-scrollbar-width) - var(--p-space-150) + var(--pc-app-provider-scrollbar-width) ); /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */ @@ -328,9 +313,9 @@ /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */ width: calc( 100vw - var(--pg-navigation-width) - - var(--pc-app-provider-scrollbar-width) - var(--p-space-150) - - var(--pc-sidebar-width) + var(--pc-app-provider-scrollbar-width) - var(--pc-sidebar-width) ); + margin-right: unset; } @media (prefers-reduced-motion) { @@ -392,7 +377,7 @@ /* stylelint-disable-next-line -- Polaris component custom properties */ --pc-frame-skip-vertical-offset: 10px; position: fixed; - z-index: var(--p-z-index-9); + z-index: var(--p-z-index-10); /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */ top: var(--pc-frame-skip-vertical-offset); /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */ @@ -425,8 +410,6 @@ } .ShadowBevel { - width: 100%; - @mixin shadow-bevel var(--p-shadow-100), var(--p-border-radius-300), var(--p-z-index-1); @@ -435,4 +418,32 @@ top: var(--pg-top-bar-height); background-color: var(--p-color-bg); } + position: fixed; + width: 100%; + transition: width var(--p-motion-duration-250) var(--p-motion-ease); + + @media (prefers-reduced-motion) { + transition: none; + } + + .hasSidebar & { + transition: width var(--p-motion-duration-250) var(--p-motion-ease); + + /* Sidebar breakpoint is 1200px */ + /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */ + @media screen and (min-width: 1200px) { + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */ + width: calc(100% - var(--pc-sidebar-width)); + } + + @media (prefers-reduced-motion) { + transition: none; + } + } +} + +.Scrollable { + width: 100%; + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */ + height: calc(100% - var(--pg-top-bar-height)); } diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx index 800ec755fc7..95a6d1d983f 100644 --- a/polaris-react/src/components/Frame/Frame.tsx +++ b/polaris-react/src/components/Frame/Frame.tsx @@ -13,6 +13,7 @@ import {EventListener} from '../EventListener'; import {Backdrop} from '../Backdrop'; import {Text} from '../Text'; import {TrapFocus} from '../TrapFocus'; +import {Scrollable} from '../Scrollable'; import {dataPolarisTopBar, layer} from '../shared'; import {setRootProperty} from '../../utilities/set-root-property'; import {FrameContext} from '../../utilities/frame'; @@ -73,7 +74,10 @@ interface State { showContextualSaveBar: boolean; } +const APP_FRAME = 'AppFrame'; const APP_FRAME_MAIN = 'AppFrameMain'; +const APP_FRAME_CONTENT = 'AppFrameContent'; +const APP_FRAME_SCROLLABLE = 'AppFrameScrollable'; const APP_FRAME_NAV = 'AppFrameNav'; const APP_FRAME_TOP_BAR = 'AppFrameTopBar'; const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar'; @@ -305,7 +309,7 @@ class FrameInner extends PureComponent { {loadingMarkup} {navigationOverlayMarkup} {hasDynamicTopBar ? ( -
+
{navigationMarkup}
{ id={APP_FRAME_MAIN} data-has-global-ribbon={Boolean(globalRibbon)} > -
- {hasDynamicTopBar ? ( + {hasDynamicTopBar ? ( +
{children}
- ) : ( - children - )} -
+ + ) : ( +
{children}
+ )}
) : ( From 2866177ddaf2535f6eda7b99c803272e85b0a94f Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Tue, 30 Apr 2024 23:25:13 +0000 Subject: [PATCH 3/6] Add back in scrollbar safe area --- .../src/components/Frame/Frame.module.css | 18 +++++++++++++++++- polaris-react/src/components/Frame/Frame.tsx | 7 ++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css index 4df3f7e6b33..ce8af8642d4 100644 --- a/polaris-react/src/components/Frame/Frame.module.css +++ b/polaris-react/src/components/Frame/Frame.module.css @@ -290,6 +290,18 @@ } .Content-TopBarAndReframe { + height: 100%; + + .hasSidebar & { + /* Sidebar breakpoint is 1200px */ + /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */ + @media screen and (min-width: 1200px) { + margin-right: unset; + } + } +} + +.ScrollbarSafeArea-TopBarAndReframe { @media (--p-breakpoints-md-up) { transition: width var(--p-motion-duration-250) var(--p-motion-ease); /* stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties */ @@ -426,6 +438,10 @@ transition: none; } + @media (--p-breakpoints-md-up) { + width: calc(100% - var(--pc-frame-offset, 0px)); + } + .hasSidebar & { transition: width var(--p-motion-duration-250) var(--p-motion-ease); @@ -433,7 +449,7 @@ /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */ @media screen and (min-width: 1200px) { /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */ - width: calc(100% - var(--pc-sidebar-width)); + width: calc(100% - var(--pc-sidebar-width) - var(--pc-frame-offset, 0px)); } @media (prefers-reduced-motion) { diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx index 95a6d1d983f..4f850d578d3 100644 --- a/polaris-react/src/components/Frame/Frame.tsx +++ b/polaris-react/src/components/Frame/Frame.tsx @@ -322,6 +322,7 @@ class FrameInner extends PureComponent { {hasDynamicTopBar ? ( @@ -332,7 +333,11 @@ class FrameInner extends PureComponent { )} id={APP_FRAME_CONTENT} > - {children} +
+ {children} +
) : ( From dedd85a3adcff4abc6e8d46646f10a37f04bf316 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Wed, 1 May 2024 01:21:29 +0000 Subject: [PATCH 4/6] Subtract frame offset from width --- polaris-react/src/components/Frame/Frame.module.css | 10 ++++++---- polaris-react/src/components/Frame/Frame.tsx | 5 ++++- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css index ce8af8642d4..bb601673c79 100644 --- a/polaris-react/src/components/Frame/Frame.module.css +++ b/polaris-react/src/components/Frame/Frame.module.css @@ -28,7 +28,7 @@ /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */ @media screen and (min-width: 1200px) { /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */ - width: calc(100% - var(--pc-frame-offset)); + width: calc(100% - var(--pc-frame-offset, 0px)); } @media (prefers-reduced-motion) { @@ -307,7 +307,7 @@ /* stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties */ width: calc( 100vw - var(--pg-navigation-width) - - var(--pc-app-provider-scrollbar-width) + var(--pc-app-provider-scrollbar-width) - var(--pc-frame-offset, 0px) ); /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */ @@ -325,7 +325,8 @@ /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */ width: calc( 100vw - var(--pg-navigation-width) - - var(--pc-app-provider-scrollbar-width) - var(--pc-sidebar-width) + var(--pc-app-provider-scrollbar-width) - var(--pc-sidebar-width) - + var(--pc-frame-offset, 0px) ); margin-right: unset; } @@ -389,7 +390,7 @@ /* stylelint-disable-next-line -- Polaris component custom properties */ --pc-frame-skip-vertical-offset: 10px; position: fixed; - z-index: var(--p-z-index-10); + z-index: var(--p-z-index-9); /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */ top: var(--pc-frame-skip-vertical-offset); /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */ @@ -439,6 +440,7 @@ } @media (--p-breakpoints-md-up) { + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */ width: calc(100% - var(--pc-frame-offset, 0px)); } diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx index 4f850d578d3..da40cd4e105 100644 --- a/polaris-react/src/components/Frame/Frame.tsx +++ b/polaris-react/src/components/Frame/Frame.tsx @@ -309,7 +309,10 @@ class FrameInner extends PureComponent { {loadingMarkup} {navigationOverlayMarkup} {hasDynamicTopBar ? ( -
+
{navigationMarkup}
Date: Wed, 1 May 2024 13:46:57 +0000 Subject: [PATCH 5/6] Update ShadowBevel id --- polaris-react/src/components/Frame/Frame.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx index da40cd4e105..135e8b58ca5 100644 --- a/polaris-react/src/components/Frame/Frame.tsx +++ b/polaris-react/src/components/Frame/Frame.tsx @@ -74,10 +74,9 @@ interface State { showContextualSaveBar: boolean; } -const APP_FRAME = 'AppFrame'; const APP_FRAME_MAIN = 'AppFrameMain'; -const APP_FRAME_CONTENT = 'AppFrameContent'; const APP_FRAME_SCROLLABLE = 'AppFrameScrollable'; +const APP_FRAME_BEVEL = 'AppFrameBevel'; const APP_FRAME_NAV = 'AppFrameNav'; const APP_FRAME_TOP_BAR = 'AppFrameTopBar'; const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar'; @@ -309,10 +308,7 @@ class FrameInner extends PureComponent { {loadingMarkup} {navigationOverlayMarkup} {hasDynamicTopBar ? ( -
+
{navigationMarkup}
{ styles.Content, styles['Content-TopBarAndReframe'], )} - id={APP_FRAME_CONTENT} >
Date: Wed, 1 May 2024 13:52:32 +0000 Subject: [PATCH 6/6] Update changeset --- .changeset/little-plums-try.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/little-plums-try.md b/.changeset/little-plums-try.md index 90be7dbdb57..a4b40304ab8 100644 --- a/.changeset/little-plums-try.md +++ b/.changeset/little-plums-try.md @@ -2,4 +2,4 @@ '@shopify/polaris': patch --- -Added offset width to reframe `Frame`, passed reframe scroll container to sticky manager in `AppProvider`, fixed "Skip to content" z-index +Added offset width to reframe `Frame` and passed reframe scroll container to sticky manager in `AppProvider`