diff --git a/.changeset/big-crabs-tell.md b/.changeset/big-crabs-tell.md new file mode 100644 index 00000000000..3d81c96edf8 --- /dev/null +++ b/.changeset/big-crabs-tell.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Removed all references to the dynamicTopBarAndReframe feature and revert functionality back to how it was diff --git a/polaris-react/.storybook/addons/global-controls-panel/manager.jsx b/polaris-react/.storybook/addons/global-controls-panel/manager.jsx index 12e94029c82..1efcff94ddd 100644 --- a/polaris-react/.storybook/addons/global-controls-panel/manager.jsx +++ b/polaris-react/.storybook/addons/global-controls-panel/manager.jsx @@ -39,12 +39,6 @@ export const featureFlagOptions = { // defaultValue: false, // control: {type: 'boolean'}, // }, - dynamicTopBarAndReframe: { - name: 'dynamicTopBarAndReframe', - description: 'Toggle the top bar and reframe feature flag', - defaultValue: false, - control: {type: 'boolean'}, - }, }; export const gridOptions = { diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index 5a39b9aa780..dbed43729fe 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -35,7 +35,6 @@ 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'); @@ -106,15 +105,7 @@ export class AppProvider extends Component { componentDidMount() { if (document != null) { - if (!this.props.features?.dynamicTopBarAndReframe) { - this.stickyManager.setContainer(document); - } else { - const scrollContainerElement = - document.getElementById(APP_FRAME_SCROLLABLE); - - this.stickyManager.setContainer(scrollContainerElement ?? document); - } - + this.stickyManager.setContainer(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 be01114ae31..0dac135eb46 100644 --- a/polaris-react/src/components/Frame/Frame.module.css +++ b/polaris-react/src/components/Frame/Frame.module.css @@ -21,35 +21,6 @@ } } -.hasSidebar-TopBarAndReframe { - 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-frame-offset, 0px)); - } - - @media (prefers-reduced-motion) { - transition: none; - } -} - -.Frame-TopBarAndReframe { - /* stylelint-disable -- Polaris component custom properties */ - --pc-sidebar-width: calc(356px + var(--p-space-100)); - --pc-scrollbar-spacer: 0; - - /* stylelint-enable */ - background-color: var(--p-color-bg-inverse); - transition: width var(--p-motion-duration-250) var(--p-motion-ease); - - @media (prefers-reduced-motion) { - transition: none; - } -} - .ScrollbarAlwaysVisible { /* Only apply spacing when scrollbar is set to always visible to create a gutter and prevent layout shifts */ /* stylelint-disable -- Polaris component custom properties */ @@ -258,28 +229,6 @@ } } -.Main-TopBarAndReframe { - border-inline-end: none; - background-color: var(--p-color-bg); - border-top-left-radius: var(--p-border-radius-300); - border-top-right-radius: var(--p-border-radius-300); - height: 100vh; - overflow: hidden; - - @media (--p-breakpoints-sm-up) { - max-width: unset; - } - - .hasTopBar & { - /* stylelint-disable-next-line -- polaris custom global property */ - margin-top: var(--pg-top-bar-height); - padding-top: 0; - @media print { - margin-top: 0; - } - } -} - .Content { position: relative; /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */ @@ -298,55 +247,6 @@ } } -.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 */ - width: calc( - 100vw - var(--pg-navigation-width) - - var(--pc-app-provider-scrollbar-width) - var(--pc-frame-offset, 0px) - - var(--pc-scrollbar-spacer) - ); - /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */ - - @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( - 100vw - var(--pg-navigation-width) - - var(--pc-app-provider-scrollbar-width) - var(--pc-sidebar-width) - - var(--pc-frame-offset, 0px) - var(--pc-scrollbar-spacer) - ); - margin-right: unset; - } - - @media (prefers-reduced-motion) { - transition: none; - } - } -} - .GlobalRibbonContainer { position: fixed; z-index: var(--p-z-index-3); @@ -431,79 +331,3 @@ } } } - -.ShadowBevel { - @mixin shadow-bevel var(--p-shadow-100), var(--p-border-radius-300), - var(--p-z-index-1); - - &::before { - /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */ - 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; - } - - @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)); - } - - .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) - var(--pc-frame-offset, 0px)); - } - - @media (prefers-reduced-motion) { - transition: none; - } - } -} - -.Scrollable { - width: 100%; - - /* Not using the spacer custom property so the space is applied always */ - margin-right: var(--p-space-050); - /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */ - height: calc(100% - var(--pg-top-bar-height)); - - scrollbar-width: thin; - scrollbar-color: var(--p-color-scrollbar-thumb-bg) transparent; - transition: scrollbar-color var(--p-motion-duration-100) - var(--p-motion-ease-in); - - &:hover { - scrollbar-color: var(--p-color-scrollbar-thumb-bg-hover) transparent; - } -} - -.Scrollable-ScrollbarAlwaysVisible { - /* Safari scrollbar styles until it adopts scrollbar-color, scrollbar-width */ - &::-webkit-scrollbar { - /* Matches scrollbar-width: thin */ - width: 11px; - background-color: var(--p-color-bg); - } - - &::-webkit-scrollbar-thumb { - background-color: var(--p-color-scrollbar-thumb-bg); - border: var(--p-border-width-050) solid transparent; - border-radius: var(--p-border-radius-300); - background-clip: content-box; - - &:hover { - background-color: var(--p-color-scrollbar-thumb-bg-hover); - } - } -} diff --git a/polaris-react/src/components/Frame/Frame.stories.tsx b/polaris-react/src/components/Frame/Frame.stories.tsx index 6b72a05ce33..fd8593c1e20 100644 --- a/polaris-react/src/components/Frame/Frame.stories.tsx +++ b/polaris-react/src/components/Frame/Frame.stories.tsx @@ -35,18 +35,10 @@ export default { } as Meta; export const InAnApplication = { - render: (_args: Args, {globals: {dynamicTopBarAndReframe}}) => ( - - ), + render: (_args: Args) => , }; -function InAnApplicationComponent({ - dynamicTopBarAndReframe, -}: { - dynamicTopBarAndReframe: boolean; -}) { +function InAnApplicationComponent() { const defaultState = useRef({ emailFieldValue: 'dharma@jadedpixel.com', nameFieldValue: 'Jaded Pixel', @@ -365,7 +357,6 @@ function InAnApplicationComponent({ }, }, }} - features={{dynamicTopBarAndReframe}} > ( - - ), + render: (_args: Args) => , }; -function WithAnOffsetComponent({ - dynamicTopBarAndReframe, -}: { - dynamicTopBarAndReframe: boolean; -}) { +function WithAnOffsetComponent() { const defaultState = useRef({ emailFieldValue: 'dharma@jadedpixel.com', nameFieldValue: 'Jaded Pixel', @@ -715,7 +700,6 @@ function WithAnOffsetComponent({ }, }, }} - features={{dynamicTopBarAndReframe}} > ( - - ), + render: (_args: Args) => , }; -function WithSidebarEnabled({ - dynamicTopBarAndReframe, -}: { - dynamicTopBarAndReframe: boolean; -}) { +function WithSidebarEnabled() { const defaultState = useRef({ emailFieldValue: 'dharma@jadedpixel.com', nameFieldValue: 'Jaded Pixel', @@ -1080,7 +1058,6 @@ function WithSidebarEnabled({ }, }, }} - features={{dynamicTopBarAndReframe}} > ( - - ), + render: (_args: Args) => , }; -function WithoutATopBarComponent({ - dynamicTopBarAndReframe, -}: { - dynamicTopBarAndReframe: boolean; -}) { +function WithoutATopBarComponent() { const defaultState = useRef({ emailFieldValue: 'dharma@jadedpixel.com', nameFieldValue: 'Jaded Pixel', @@ -1395,7 +1364,6 @@ function WithoutATopBarComponent({ }, }, }} - features={{dynamicTopBarAndReframe}} > ; mediaQuery: ReturnType; - dynamicTopBarAndReframe?: boolean; }; interface State { @@ -76,8 +73,6 @@ interface State { } const APP_FRAME_MAIN = 'AppFrameMain'; -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'; @@ -103,7 +98,6 @@ class FrameInner extends PureComponent { } this.setGlobalRibbonRootProperty(); this.setOffset(); - this.setBodyStyles(); this.setScrollbarAlwaysVisible(); } @@ -112,7 +106,6 @@ class FrameInner extends PureComponent { this.setGlobalRibbonHeight(); } this.setOffset(); - this.setBodyStyles(); } render() { @@ -248,20 +241,16 @@ class FrameInner extends PureComponent { } : {}; - const getFrameClassName = (hasDynamicTopBar?: boolean) => + const getFrameClassName = () => classNames( styles.Frame, - hasDynamicTopBar && styles['Frame-TopBarAndReframe'], navigation && styles.hasNav, topBar && styles.hasTopBar, sidebar && styles.hasSidebar, - sidebar && hasDynamicTopBar && styles['hasSidebar-TopBarAndReframe'], this.state.scrollbarAlwaysVisible && styles.ScrollbarAlwaysVisible, ); - const contextualSaveBarMarkup = this.props.dynamicTopBarAndReframe ? ( - <> - ) : ( + const contextualSaveBarMarkup = ( { contextualSaveBarProps: this.contextualSaveBar, }; - const hasDynamicTopBar = - this.props.dynamicTopBarAndReframe && Boolean(topBar); - return (
{skipMarkup} {topBarMarkup} - {hasDynamicTopBar ? null : navigationMarkup} + {navigationMarkup} {contextualSaveBarMarkup} {loadingMarkup} {navigationOverlayMarkup} - {hasDynamicTopBar ? ( -
- {navigationMarkup} -
- {hasDynamicTopBar ? ( - -
-
- {children} -
-
- - ) : ( -
{children}
- )} -
-
- ) : ( -
-
{children}
-
- )} +
+
{children}
+
{globalRibbonMarkup} @@ -404,17 +348,6 @@ class FrameInner extends PureComponent { ); }; - private setBodyStyles = () => { - if (!document) { - return; - } - if (this.props.dynamicTopBarAndReframe && Boolean(this.props.topBar)) { - document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = ''; - } - }; - private showToast = (toast: ToastPropsWithID) => { this.setState(({toastMessages}: State) => { const hasToastById = @@ -519,16 +452,5 @@ export function Frame(props: FrameProps) { const i18n = useI18n(); const mediaQuery = useMediaQuery(); - return ( - - {({dynamicTopBarAndReframe}) => ( - - )} - - ); + return ; } diff --git a/polaris-react/src/components/Navigation/Navigation.module.css b/polaris-react/src/components/Navigation/Navigation.module.css index bd939e2e7df..cafa980c9b4 100644 --- a/polaris-react/src/components/Navigation/Navigation.module.css +++ b/polaris-react/src/components/Navigation/Navigation.module.css @@ -50,18 +50,6 @@ } } -.NavigationFrame-TopBarAndReframe { - border-top-left-radius: var(--p-border-radius-300); - border-top-right-radius: var(--p-border-radius-300); - /* stylelint-disable-next-line -- polaris custom global property */ - margin-top: var(--pg-top-bar-height); - - @media (--p-breakpoints-md-up) { - border-top-right-radius: 0; - margin-top: 0; - } -} - .PrimaryNavigation { display: flex; overflow: auto; @@ -108,17 +96,6 @@ } } -.PrimaryNavigation-TopBarAndReframe { - padding-top: var(--p-space-500); - border-top-left-radius: var(--p-border-radius-300); - border-top-right-radius: var(--p-border-radius-300); - - @media (--p-breakpoints-md-up) { - border-top-right-radius: 0; - padding-top: var(--p-space-400); - } -} - .LogoContainer { display: none; diff --git a/polaris-react/src/components/Navigation/Navigation.tsx b/polaris-react/src/components/Navigation/Navigation.tsx index 87757fa6b89..f5670d3228d 100644 --- a/polaris-react/src/components/Navigation/Navigation.tsx +++ b/polaris-react/src/components/Navigation/Navigation.tsx @@ -7,7 +7,6 @@ import {UnstyledLink} from '../UnstyledLink'; import {classNames} from '../../utilities/css'; import {getWidth} from '../../utilities/get-width'; import {useFrame} from '../../utilities/frame'; -import {useFeatures} from '../../utilities/features'; import {useBreakpoints} from '../../utilities/breakpoints'; import {NavigationContext} from './context'; @@ -38,7 +37,6 @@ export const Navigation: React.FunctionComponent & { }: NavigationProps) { const {logo} = useFrame(); const width = getWidth(logo, 104); - const features = useFeatures(); const {mdUp} = useBreakpoints(); const logoMarkup = logo ? ( @@ -78,22 +76,9 @@ export const Navigation: React.FunctionComponent & { return ( -