[Modal] Consolidate se23 styles and logic (#10139)

### WHY are these changes introduced? Resolves #9951. ### WHAT is this pull request doing? Consolidates se23 beta styles and logic for `Modal`. ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-tqhardweqn.chromatic.com/?path=/story/all-components-modal--default) [Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-modal--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 · Sep 18, 2023 · 961c0ae · 961c0ae
1 parent 29deedd
commit 961c0ae
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 118 deletions.
diff --git a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss b/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss
diff --git a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.tsx b/polaris-react/src/components/Modal/components/CloseButton/CloseButton.tsx
@@ -1,29 +1,18 @@
 import React from 'react';
-import {MobileCancelMajor, CancelMajor} from '@shopify/polaris-icons';
+import {CancelMajor} from '@shopify/polaris-icons';
 
-import {classNames} from '../../../../utilities/css';
 import {useI18n} from '../../../../utilities/i18n';
-import {useFeatures} from '../../../../utilities/features';
-import {Icon} from '../../../Icon';
 import {Button} from '../../../Button';
 
-import styles from './CloseButton.scss';
-
 export interface CloseButtonProps {
   pressed?: boolean;
-  titleHidden?: boolean;
   onClick(): void;
 }
 
-export function CloseButton({
-  pressed,
-  titleHidden = false,
-  onClick,
-}: CloseButtonProps) {
+export function CloseButton({pressed, onClick}: CloseButtonProps) {
   const i18n = useI18n();
-  const {polarisSummerEditions2023} = useFeatures();
 
-  return polarisSummerEditions2023 ? (
+  return (
     <Button
       primary
       plain
@@ -32,17 +21,5 @@ export function CloseButton({
       onClick={onClick}
       accessibilityLabel={i18n.translate('Polaris.Common.close')}
     />
-  ) : (
-    <button
-      onClick={onClick}
-      className={classNames(
-        styles.CloseButton,
-        titleHidden && styles.titleHidden,
-        pressed && styles.pressed,
-      )}
-      aria-label={i18n.translate('Polaris.Common.close')}
-    >
-      <Icon source={MobileCancelMajor} color="base" />
-    </button>
   );
 }
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -42,6 +42,7 @@ $large-width: 980px;
   max-height: calc(100vh - #{$vertical-spacing});
   background: var(--p-color-bg);
   box-shadow: var(--p-shadow-2xl);
+  overflow: hidden;
 
   @media (forced-colors: active) {
     border: var(--p-border-width-1) solid transparent;
@@ -56,10 +57,7 @@ $large-width: 980px;
     position: relative;
     max-width: $small-width;
     margin: 0 auto;
-    border-radius: var(--p-border-radius-2);
-    #{$se23} & {
-      border-radius: var(--p-border-radius-4);
-    }
+    border-radius: var(--p-border-radius-4);
   }
 
   &.limitHeight {
@@ -97,12 +95,6 @@ $large-width: 980px;
       height: unset;
     }
   }
-
-  #{$se23} & {
-    /* Setting background color on the header causes it to show through the
-       border radius, so we have to hide the overflow to maintain the radius */
-    overflow: hidden;
-  }
 }
 
 .animateFadeUp {

diff --git a/polaris-react/src/components/Modal/components/Footer/Footer.tsx b/polaris-react/src/components/Modal/components/Footer/Footer.tsx
@@ -4,7 +4,6 @@ import type {ComplexAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
 import {Box} from '../../../Box';
 import {InlineStack} from '../../../InlineStack';
-import {useFeatures} from '../../../../utilities/features';
 
 export interface FooterProps {
   /** Primary action */
@@ -20,8 +19,6 @@ export function Footer({
   secondaryActions,
   children,
 }: FooterProps) {
-  const {polarisSummerEditions2023} = useFeatures();
-
   const primaryActionButton =
     (primaryAction && buttonsFrom(primaryAction, {primary: true})) || null;
   const secondaryActionButtons =
@@ -37,12 +34,9 @@ export function Footer({
   return (
     <InlineStack gap="4" blockAlign="center">
       <Box
-        borderColor={polarisSummerEditions2023 ? 'border' : 'border-subdued'}
+        borderColor="border"
         borderBlockStartWidth="1"
-        minHeight={polarisSummerEditions2023 ? undefined : 'var(--p-space-16)'}
         padding="4"
-        paddingInlineStart={polarisSummerEditions2023 ? undefined : '5'}
-        paddingInlineEnd={polarisSummerEditions2023 ? undefined : '5'}
         width="100%"
       >
         <InlineStack gap="4" blockAlign="center" align="space-between">

diff --git a/polaris-react/src/components/Modal/components/Header/Header.tsx b/polaris-react/src/components/Modal/components/Header/Header.tsx
@@ -5,7 +5,6 @@ import {CloseButton} from '../CloseButton';
 import {InlineGrid} from '../../../InlineGrid';
 import {InlineStack} from '../../../InlineStack';
 import {Text} from '../../../Text';
-import {useFeatures} from '../../../../utilities/features';
 
 export interface HeaderProps {
   id: string;
@@ -22,26 +21,18 @@ export function Header({
   titleHidden,
   onClose,
 }: HeaderProps) {
-  const {polarisSummerEditions2023} = useFeatures();
-
-  const headerPaddingInline = polarisSummerEditions2023 ? '4' : '5';
+  const headerPaddingInline = '4';
   const headerPaddingBlock = '4';
 
   if (titleHidden || !children) {
-    return polarisSummerEditions2023 ? (
+    return (
       <Box
         position="absolute"
         insetInlineEnd={headerPaddingInline}
         insetBlockStart={headerPaddingBlock}
         zIndex="1"
       >
-        <CloseButton titleHidden={titleHidden} onClick={onClose} />
-      </Box>
-    ) : (
-      <Box position="absolute" insetInlineEnd="0" zIndex="1">
-        <InlineStack gap="4" align="end" blockAlign="center">
-          <CloseButton titleHidden={titleHidden} onClick={onClose} />
-        </InlineStack>
+        <CloseButton onClick={onClose} />
       </Box>
     );
   }
@@ -53,27 +44,16 @@ export function Header({
       paddingInlineStart={headerPaddingInline}
       paddingInlineEnd={headerPaddingInline}
       borderBlockEndWidth="1"
-      borderColor={polarisSummerEditions2023 ? 'border' : 'border-subdued'}
-      background={
-        polarisSummerEditions2023 ? 'bg-secondary-experimental' : undefined
-      }
+      borderColor="border"
+      background="bg-secondary-experimental"
     >
       <InlineGrid columns={{xs: '1fr auto'}} gap="4">
         <InlineStack gap="4" blockAlign="center">
-          <Text
-            id={id}
-            as="h2"
-            variant={polarisSummerEditions2023 ? 'headingMd' : 'headingLg'}
-            breakWord
-          >
+          <Text id={id} as="h2" variant="headingMd" breakWord>
             {children}
           </Text>
         </InlineStack>
-        <CloseButton
-          pressed={closing}
-          titleHidden={titleHidden}
-          onClick={onClose}
-        />
+        <CloseButton pressed={closing} onClick={onClose} />
       </InlineGrid>
     </Box>
   );

diff --git a/polaris-react/src/components/Modal/components/Section/Section.scss b/polaris-react/src/components/Modal/components/Section/Section.scss
@@ -11,10 +11,5 @@ $close-button-width: calc(var(--p-space-12) + var(--p-space-1));
 }
 
 .titleHidden {
-  padding-right: $close-button-width;
-
-  #{$se23} & {
-    /* Add a space to account for the button's absolute position offset */
-    padding-right: calc(#{$close-button-width} + var(--p-space-1));
-  }
+  padding-right: calc(#{$close-button-width} + var(--p-space-1));
 }
diff --git a/polaris-react/src/components/Modal/components/Section/Section.tsx b/polaris-react/src/components/Modal/components/Section/Section.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import {Box} from '../../../Box';
 import {classNames} from '../../../../utilities/css';
-import {useFeatures} from '../../../../utilities/features';
 
 import styles from './Section.scss';
 
@@ -19,8 +18,6 @@ export function Section({
   subdued = false,
   titleHidden = false,
 }: SectionProps) {
-  const {polarisSummerEditions2023} = useFeatures();
-
   const className = classNames(
     styles.Section,
     titleHidden && styles.titleHidden,
@@ -30,13 +27,10 @@ export function Section({
     <div className={className}>
       <Box
         as="section"
-        // eslint-disable-next-line no-nested-ternary
-        padding={flush ? '0' : polarisSummerEditions2023 ? '4' : '5'}
+        padding={flush ? '0' : '4'}
         {...(titleHidden && {paddingInlineEnd: '0'})}
         {...(subdued && {
-          background: polarisSummerEditions2023
-            ? 'bg-secondary-experimental'
-            : 'bg-subdued',
+          background: 'bg-secondary-experimental',
         })}
       >
         {children}