diff --git a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss b/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss deleted file mode 100644 index 2e44bcd5c52..00000000000 --- a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import '../../../../styles/common'; - -.CloseButton { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include unstyled-button; - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring; - margin-left: var(--p-space-5); - margin-right: calc(-1 * var(--p-space-2)); - padding: var(--p-space-2); - border-radius: var(--p-border-radius-2); - - &:hover { - background: var(--p-color-bg-hover); - - svg { - fill: var(--p-color-icon-hover); - } - } - - &:active, - &.pressed { - background: var(--p-color-bg-active); - } - - &:focus-visible:not(:active) { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($style: 'focused'); - } - - &.titleHidden { - margin: var(--p-space-2); - } -} diff --git a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.tsx b/polaris-react/src/components/Modal/components/CloseButton/CloseButton.tsx index 0c9501bd4d7..29f606b6c38 100644 --- 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 ( ); } diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss index d40a3469a44..f0520f7fdb0 100644 --- 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 index 4ea58a24665..4846a054635 100644 --- 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 ( diff --git a/polaris-react/src/components/Modal/components/Header/Header.tsx b/polaris-react/src/components/Modal/components/Header/Header.tsx index f1dfdb049e6..f26c143c716 100644 --- 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 ( - - - ) : ( - - - - + ); } @@ -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" > - + {children} - + ); diff --git a/polaris-react/src/components/Modal/components/Section/Section.scss b/polaris-react/src/components/Modal/components/Section/Section.scss index f15a737a7dc..b72465aa451 100644 --- 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 index b68ea978b99..92e0ebfdd3d 100644 --- 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({
{children}