[Top Bar Feature] Remove all references to dynamicTopBarAndReframe feature

.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

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 = {

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<AppProviderProps, State> {
 
   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();
 

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);
-    }
-  }
-}

polaris-react/src/components/Frame/Frame.stories.tsx

@@ -35,18 +35,10 @@ export default {
 } as Meta<typeof Frame>;
 
 export const InAnApplication = {
-  render: (_args: Args, {globals: {dynamicTopBarAndReframe}}) => (
-    <InAnApplicationComponent
-      dynamicTopBarAndReframe={dynamicTopBarAndReframe}
-    />
-  ),
+  render: (_args: Args) => <InAnApplicationComponent />,
 };
 
-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}}
       >
         <Frame
           logo={logo}
@@ -387,16 +378,10 @@ function InAnApplicationComponent({
 }
 
 export const WithAnOffset = {
-  render: (_args: Args, {globals: {dynamicTopBarAndReframe}}) => (
-    <WithAnOffsetComponent dynamicTopBarAndReframe={dynamicTopBarAndReframe} />
-  ),
+  render: (_args: Args) => <WithAnOffsetComponent />,
 };
 
-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}}
       >
         <Frame
           logo={logo}
@@ -743,16 +727,10 @@ function WithAnOffsetComponent({
 }
 
 export const WithSidebar = {
-  render: (_args: Args, {globals: {dynamicTopBarAndReframe}}) => (
-    <WithSidebarEnabled dynamicTopBarAndReframe={dynamicTopBarAndReframe} />
-  ),
+  render: (_args: Args) => <WithSidebarEnabled />,
 };
 
-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}}
       >
         <Frame
           logo={logo}
@@ -1118,18 +1095,10 @@ function WithSidebarEnabled({
 }
 
 export const WithoutATopBar = {
-  render: (_args: Args, {globals: {dynamicTopBarAndReframe}}) => (
-    <WithoutATopBarComponent
-      dynamicTopBarAndReframe={dynamicTopBarAndReframe}
-    />
-  ),
+  render: (_args: Args) => <WithoutATopBarComponent />,
 };
 
-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}}
       >
         <Frame
           logo={logo}