[Page] Consolidate se23 styles and logic (#10187)

### WHY are these changes introduced? Resolves #9954. ### WHAT is this pull request doing? Consolidates se23 beta styles and logic for `Page`. Removes `divider` prop as the styles were modified to reset pre-uplift styles in an earlier [PR](#9537). ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-rojuobnovi.chromatic.com/?path=/story/all-components-page--default) [Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-page--default&globals=polarisSummerEditions2023:true) 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
Shopify · Aug 23, 2023 · 8755b46 · 8755b46
1 parent 3a19bb9
commit 8755b46
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 179 deletions.
diff --git a/polaris-react/src/components/Page/Page.scss b/polaris-react/src/components/Page/Page.scss
@@ -40,13 +40,3 @@ body {
     padding-top: var(--p-space-5);
   }
 }
-
-.divider {
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
-  padding-top: var(--p-space-8);
-
-  #{$se23} & {
-    border-top: 0;
-    padding-top: 0;
-  }
-}
diff --git a/polaris-react/src/components/Page/Page.stories.tsx b/polaris-react/src/components/Page/Page.stories.tsx
@@ -184,7 +184,6 @@ export function WithBackActionOnAction() {
         },
       }}
       title="General"
-      divider
     >
       <LegacyCard title="Credit card" sectioned>
         <p>Credit card information</p>
@@ -369,13 +368,3 @@ export function WithContentAfterTitle() {
     </Page>
   );
 }
-
-export function WithDivider() {
-  return (
-    <Page backAction={{content: 'Settings', url: '#'}} title="General" divider>
-      <LegacyCard title="Credit card" sectioned>
-        <p>Credit card information</p>
-      </LegacyCard>
-    </Page>
-  );
-}
diff --git a/polaris-react/src/components/Page/Page.tsx b/polaris-react/src/components/Page/Page.tsx
@@ -15,17 +15,9 @@ export interface PageProps extends HeaderProps {
   fullWidth?: boolean;
   /** Decreases the maximum layout width. Intended for single-column layouts */
   narrowWidth?: boolean;
-  /** Displays a divider between the page header and the page content */
-  divider?: boolean;
 }
 
-export function Page({
-  children,
-  fullWidth,
-  narrowWidth,
-  divider,
-  ...rest
-}: PageProps) {
+export function Page({children, fullWidth, narrowWidth, ...rest}: PageProps) {
   const pageClassName = classNames(
     styles.Page,
     fullWidth && styles.fullWidth,
@@ -43,10 +35,7 @@ export function Page({
     (rest.actionGroups != null && rest.actionGroups.length > 0) ||
     rest.backAction != null;
 
-  const contentClassName = classNames(
-    !hasHeaderContent && styles.Content,
-    divider && hasHeaderContent && styles.divider,
-  );
+  const contentClassName = classNames(!hasHeaderContent && styles.Content);
 
   const headerMarkup = hasHeaderContent ? <Header {...rest} /> : null;
 

diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss
@@ -16,49 +16,28 @@ $action-menu-rollup-computed-width: 40px;
 .BreadcrumbWrapper {
   grid-area: breadcrumbs;
 
-  #{$se23} & {
-    /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
-    a,
-    button {
-      background-color: transparent;
-      border-radius: var(--p-border-radius-2);
+  a,
+  button {
+    background-color: transparent;
+    border-radius: var(--p-border-radius-2);
+    box-shadow: none;
+
+    &:hover {
       box-shadow: none;
+      background-color: var(--p-color-bg-strong-hover);
+    }
 
-      /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
-      &:hover {
-        box-shadow: none;
-        background-color: var(--p-color-bg-strong-hover);
-      }
-
-      /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
-      &:focus {
-        background-color: var(--p-color-bg-strong-active);
-        /* stylelint-disable-next-line declaration-no-important -- SE23 match button group */
-        box-shadow: var(--p-shadow-inset-md) !important;
-      }
+    &:focus {
+      background-color: var(--p-color-bg-strong-active);
+      /* stylelint-disable-next-line declaration-no-important -- override box shadow */
+      box-shadow: var(--p-shadow-inset-md) !important;
     }
   }
 }
 
 .PaginationWrapper {
-  margin-left: var(--p-space-1);
+  margin-left: var(--p-space-2);
   line-height: 1;
-
-  button {
-    // stylelint-disable declaration-no-important -- generated by polaris-migrator DO NOT COPY
-    box-shadow: none !important;
-
-    &:hover,
-    &:active,
-    &:focus {
-      border: var(--p-border-width-1) solid var(--p-color-border-strong) !important;
-      // stylelint-enable declaration-no-important
-    }
-  }
-
-  #{$se23} & {
-    margin-left: var(--p-space-2);
-  }
 }
 
 .PrimaryActionWrapper {
@@ -76,27 +55,17 @@ $action-menu-rollup-computed-width: 40px;
   line-height: normal;
 
   &:first-child {
-    min-height: 36px;
-
-    #{$se23} & {
-      min-height: 28px;
-    }
+    min-height: 28px;
   }
 
   + .Row {
-    margin-top: var(--p-space-1);
+    margin-top: var(--p-space-05);
 
-    #{$se23} & {
-      margin-top: var(--p-space-05);
-    }
     // stylelint-disable-next-line selector-max-combinators, selector-max-class -- generated by polaris-migrator DO NOT COPY
     .mobileView & {
-      margin-top: var(--p-space-2);
-
-      #{$se23} & {
-        margin-top: var(--p-space-1);
-      }
+      margin-top: var(--p-space-1);
     }
+
     // stylelint-disable-next-line selector-max-combinators, selector-max-class -- generated by polaris-migrator DO NOT COPY
     .RightAlign {
       margin-left: 0;
@@ -125,22 +94,11 @@ $action-menu-rollup-computed-width: 40px;
 
 .AdditionalMetaData {
   @media #{$p-breakpoints-sm-up} {
-    margin-left: calc(
-      var(--p-space-5) * 2 + var(--p-space-2) + var(--p-space-1)
-    );
-    // Because of this line, we need an additional #{$se23} & specificity buster for .noBreadcrumbs below.
-    #{$se23} & {
-      margin-left: calc(var(--p-space-5) + var(--p-space-2) + var(--p-space-1));
-    }
+    margin-left: calc(var(--p-space-5) + var(--p-space-2) + var(--p-space-1));
   }
 
   .noBreadcrumbs & {
     margin-left: 0;
-    // se23 override -- specificity buster for the above margin-left calculation
-    // see https://github.com/Shopify/polaris-summer-editions/issues/918
-    #{$se23} & {
-      margin-left: 0;
-    }
   }
 }
 

diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx
@@ -28,7 +28,6 @@ import {isInterface} from '../../../../utilities/is-interface';
 import {isReactElement} from '../../../../utilities/is-react-element';
 import {Box} from '../../../Box';
 import {InlineStack} from '../../../InlineStack';
-import {useFeatures} from '../../../../utilities/features';
 
 import {Title} from './components';
 import type {TitleProps} from './components';
@@ -87,7 +86,6 @@ export function Header({
   onActionRollup,
 }: HeaderProps) {
   const i18n = useI18n();
-  const {polarisSummerEditions2023} = useFeatures();
   const {isNavigationCollapsed} = useMediaQuery();
 
   if (additionalNavigation && process.env.NODE_ENV === 'development') {
@@ -106,11 +104,7 @@ export function Header({
 
   const breadcrumbMarkup = backAction ? (
     <div className={styles.BreadcrumbWrapper}>
-      <Box
-        maxWidth="100%"
-        paddingInlineEnd={polarisSummerEditions2023 ? '1' : '4'}
-        printHidden
-      >
+      <Box maxWidth="100%" paddingInlineEnd="1" printHidden>
         <Breadcrumbs backAction={backAction} />
       </Box>
     </div>
@@ -187,11 +181,7 @@ export function Header({
 
   const additionalMetadataMarkup = additionalMetadata ? (
     <div className={styles.AdditionalMetaData}>
-      <Text
-        color="subdued"
-        as="span"
-        variant={polarisSummerEditions2023 ? 'bodySm' : undefined}
-      >
+      <Text color="subdued" as="span" variant="bodySm">
         {additionalMetadata}
       </Text>
     </div>
@@ -222,8 +212,8 @@ export function Header({
   return (
     <Box
       position="relative"
-      paddingBlockStart={{xs: '4', md: polarisSummerEditions2023 ? '6' : '5'}}
-      paddingBlockEnd={{xs: '4', md: polarisSummerEditions2023 ? '6' : '5'}}
+      paddingBlockStart={{xs: '4', md: '6'}}
+      paddingBlockEnd={{xs: '4', md: '6'}}
       paddingInlineStart={{xs: '4', sm: '0'}}
       paddingInlineEnd={{xs: '4', sm: '0'}}
       visuallyHidden={titleHidden}

diff --git a/polaris-react/src/components/Page/components/Header/components/Title/Title.scss b/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
@@ -3,36 +3,20 @@
 .Title {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include text-breakword;
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-bold);
   font-size: var(--p-font-size-300);
   line-height: var(--p-font-line-height-3);
-
-  #{$se23} & {
-    font-weight: var(--p-font-weight-bold);
-  }
 }
 
 .TitleWithSubtitle {
-  margin-top: var(--p-space-1);
-
-  #{$se23} & {
-    margin-top: 0;
-  }
+  margin-top: 0;
 }
 
 .SubTitle {
-  margin-top: var(--p-space-1);
+  margin-top: var(--p-space-05);
   color: var(--p-color-text-subdued);
 
   &.SubtitleCompact {
-    margin-top: 0;
-
-    #{$se23} & {
-      margin-top: var(--p-space-05);
-    }
-  }
-
-  #{$se23} & {
     margin-top: var(--p-space-05);
   }
 }
@@ -42,10 +26,7 @@
   flex-wrap: wrap;
   align-items: center;
   row-gap: var(--p-space-2);
-
-  #{$se23} & {
-    padding-block: var(--p-space-05);
-  }
+  padding-block: var(--p-space-05);
 
   .Title {
     display: inline;

diff --git a/polaris-react/src/components/Page/components/Header/components/Title/Title.tsx b/polaris-react/src/components/Page/components/Header/components/Title/Title.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import {classNames} from '../../../../../../utilities/css';
 import {Text} from '../../../../../Text';
-import {useFeatures} from '../../../../../../utilities/features';
 
 import styles from './Title.scss';
 
@@ -23,7 +22,6 @@ export function Title({
   titleMetadata,
   compactTitle,
 }: TitleProps) {
-  const {polarisSummerEditions2023} = useFeatures();
   const className = classNames(
     styles.Title,
     subtitle && styles.TitleWithSubtitle,
@@ -51,7 +49,7 @@ export function Title({
         compactTitle && styles.SubtitleCompact,
       )}
     >
-      <Text as="p" variant={polarisSummerEditions2023 ? 'bodySm' : undefined}>
+      <Text as="p" variant="bodySm">
         {subtitle}
       </Text>
     </div>

diff --git a/polaris-react/src/components/Page/tests/Page.test.tsx b/polaris-react/src/components/Page/tests/Page.test.tsx
@@ -268,32 +268,6 @@ describe('<Page />', () => {
     });
   });
 
-  describe('divider', () => {
-    it('renders border when divider is true and header props exist', () => {
-      const wrapper = mountWithApp(<Page {...mockProps} divider />);
-      expect(wrapper).toContainReactComponent('div', {
-        className: 'divider',
-      });
-    });
-
-    it('does not render border when divider is true and no header props exist', () => {
-      const wrapper = mountWithApp(<Page divider />);
-      expect(wrapper).not.toContainReactComponent('div', {
-        className: 'Content divider',
-      });
-      expect(wrapper).toContainReactComponent('div', {
-        className: 'Content',
-      });
-    });
-
-    it('does not render border when divider is false', () => {
-      const wrapper = mountWithApp(<Page {...mockProps} divider={false} />);
-      expect(wrapper).not.toContainReactComponent('div', {
-        className: 'divider',
-      });
-    });
-  });
-
   describe('<Header />', () => {
     it('is not rendered when there is no header content', () => {
       const page = mountWithApp(<Page title="" />);

diff --git a/polaris.shopify.com/content/components/layout-and-structure/page.md b/polaris.shopify.com/content/components/layout-and-structure/page.md
@@ -60,9 +60,6 @@ examples:
   - fileName: page-with-content-after-title.tsx
     title: With content after title
     description: Title metadata appears immediately after the page’s title. Use it to communicate brief, important and non-interactive status information about an entire page.
-  - fileName: page-with-divider.tsx
-    title: With divider
-    description: Use when the page needs visual separation between the page header and the content.
 ---
 
 ## Best practices

diff --git a/polaris.shopify.com/pages/examples/page-with-divider.tsx b/polaris.shopify.com/pages/examples/page-with-divider.tsx