From eb677d2bb731a649a34496c108d1fbdfe0ddd71e Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Wed, 10 Jul 2024 14:28:38 +0100 Subject: [PATCH 1/5] chore: remove references to polaris top bar feature --- .../addons/global-controls-panel/manager.jsx | 6 - .../components/AppProvider/AppProvider.tsx | 11 +- .../src/components/Frame/Frame.stories.tsx | 48 ++------ polaris-react/src/components/Frame/Frame.tsx | 104 +++--------------- .../Navigation/Navigation.module.css | 23 ---- .../src/components/Navigation/Navigation.tsx | 16 +-- polaris-react/src/utilities/features/types.ts | 1 - 7 files changed, 28 insertions(+), 181 deletions(-) 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.stories.tsx b/polaris-react/src/components/Frame/Frame.stories.tsx index 6b72a05ce33..09b4270d8cf 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 = @@ -520,15 +453,10 @@ export function Frame(props: FrameProps) { const mediaQuery = useMediaQuery(); return ( - - {({dynamicTopBarAndReframe}) => ( - - )} - + ); } 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..a9ae32466de 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 ? ( @@ -79,20 +77,12 @@ export const Navigation: React.FunctionComponent & {