diff --git a/.changeset/tall-chicken-repeat.md b/.changeset/tall-chicken-repeat.md index a8aa173e6f0..2063906d8f9 100644 --- a/.changeset/tall-chicken-repeat.md +++ b/.changeset/tall-chicken-repeat.md @@ -2,4 +2,8 @@ '@shopify/polaris': major --- +<<<<<<< HEAD Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Breadcrumbs`, `Text`, `KeyboardKey`, `EmptyState` +======= +Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Badge` +>>>>>>> 21283bea1 ([Badge] Consolidate se23 logic and styles) diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss index 3aa9d252f76..2d114e4dd46 100644 --- a/polaris-react/src/components/Badge/Badge.scss +++ b/polaris-react/src/components/Badge/Badge.scss @@ -9,20 +9,13 @@ align-items: center; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding); - background-color: var(--p-color-bg-strong); - border-radius: var(--p-border-radius-5); - color: var(--p-color-text); - - #{$se23} & { - background-color: var(--p-color-bg-transparent-subdued-experimental); - color: var(--p-color-text-subdued); - font-weight: var(--p-font-weight-medium); - border-radius: var(--p-border-radius-2); + background-color: var(--p-color-bg-transparent-subdued-experimental); + border-radius: var(--p-border-radius-2); + color: var(--p-color-text-subdued); + font-weight: var(--p-font-weight-medium); - // stylelint-disable-next-line -- se23 svg fill override - svg { - fill: var(--p-color-text-subdued); - } + svg { + fill: var(--p-color-text-subdued); } @media print { @@ -32,19 +25,14 @@ .statusSuccess { background-color: var(--p-color-bg-success); + color: var(--p-color-text-success); - #{$se23} & { - color: var(--p-color-text-success); - background-color: var(--p-color-bg-success); - - // stylelint-disable-next-line -- se23 svg fill override - svg { - fill: var(--p-color-icon-success); - } + svg { + fill: var(--p-color-icon-success); } } -@mixin statusSuccess-strong { +.statusSuccess-strong-experimental { color: var(--p-color-text-on-color); background-color: var(--p-color-bg-success-strong); @@ -53,29 +41,16 @@ } } -.statusSuccess-strong-experimental { - @include statusSuccess-strong; - - #{$se23} & { - @include statusSuccess-strong; - } -} - .statusInfo { background-color: var(--p-color-bg-info); + color: var(--p-color-text-info); - #{$se23} & { - color: var(--p-color-text-info); - background-color: var(--p-color-bg-info); - - // stylelint-disable-next-line -- se23 svg fill override - svg { - fill: var(--p-color-icon-info); - } + svg { + fill: var(--p-color-icon-info); } } -@mixin statusInfo-strong { +.statusInfo-strong-experimental { color: var(--p-color-text-info-strong); background-color: var(--p-color-bg-info-strong); @@ -84,29 +59,16 @@ } } -.statusInfo-strong-experimental { - @include statusInfo-strong; - - #{$se23} & { - @include statusInfo-strong; - } -} - .statusAttention { background-color: var(--p-color-bg-caution); + color: var(--p-color-text-caution); - #{$se23} & { - color: var(--p-color-text-caution); - background-color: var(--p-color-bg-caution); - - // stylelint-disable-next-line -- se23 svg fill override - svg { - fill: var(--p-color-icon-caution); - } + svg { + fill: var(--p-color-icon-caution); } } -@mixin statusAttention-strong { +.statusAttention-strong-experimental { color: var(--p-color-text-caution-strong); background-color: var(--p-color-bg-caution-strong); @@ -115,29 +77,16 @@ } } -.statusAttention-strong-experimental { - @include statusAttention-strong; - - #{$se23} & { - @include statusAttention-strong; - } -} - .statusWarning { background-color: var(--p-color-bg-warning); + color: var(--p-color-text-warning-experimental); - #{$se23} & { - color: var(--p-color-text-warning-experimental); - background-color: var(--p-color-bg-warning); - - // stylelint-disable-next-line -- se23 svg fill override - svg { - fill: var(--p-color-icon-warning); - } + svg { + fill: var(--p-color-icon-warning); } } -@mixin statusWarning-strong { +.statusWarning-strong-experimental { color: var(--p-color-text-warning-experimental); background-color: var(--p-color-bg-warning-strong-experimental); @@ -146,29 +95,16 @@ } } -.statusWarning-strong-experimental { - @include statusWarning-strong; - - #{$se23} & { - @include statusWarning-strong; - } -} - .statusCritical { background-color: var(--p-color-bg-critical); + color: var(--p-color-text-critical); - #{$se23} & { - color: var(--p-color-text-critical); - background-color: var(--p-color-bg-critical); - - // stylelint-disable-next-line -- se23 svg fill override - svg { - fill: var(--p-color-icon-critical-strong-experimental); - } + svg { + fill: var(--p-color-icon-critical-strong-experimental); } } -@mixin statusCritical-strong { +.statusCritical-strong-experimental { color: var(--p-color-text-on-color); background-color: var(--p-color-bg-critical-strong); @@ -177,31 +113,19 @@ } } -.statusCritical-strong-experimental { - @include statusCritical-strong; - - #{$se23} & { - @include statusCritical-strong; - } -} - .statusNew { border: none; + background-color: var(--p-color-bg-transparent-subdued-experimental); + color: var(--p-color-text-subdued); + font-weight: var(--p-font-weight-bold); + border-radius: var(--p-border-radius-2); - #{$se23} & { - background-color: var(--p-color-bg-transparent-subdued-experimental); - color: var(--p-color-text-subdued); - font-weight: var(--p-font-weight-bold); - border-radius: var(--p-border-radius-2); - - // stylelint-disable-next-line -- se23 svg fill override - svg { - fill: var(--p-color-text-subdued); - } + svg { + fill: var(--p-color-text-subdued); } } -@mixin statusRead-only { +.statusRead-only-experimental { color: var(--p-color-text-subdued); background-color: transparent; @@ -210,15 +134,7 @@ } } -.statusRead-only-experimental { - @include statusRead-only; - - #{$se23} & { - @include statusRead-only; - } -} - -@mixin statusEnabled { +.statusEnabled-experimental { color: var(--p-color-text); svg { @@ -226,24 +142,8 @@ } } -.statusEnabled-experimental { - @include statusEnabled; - - #{$se23} & { - @include statusEnabled; - } -} - -@mixin sizeLarge { - padding: var(--p-space-1) var(--p-space-2); -} - .sizeLarge-experimental { - @include sizeLarge; - - #{$se23} & { - @include sizeLarge; - } + padding: var(--p-space-1) var(--p-space-2); } .withinFilter { @@ -251,16 +151,10 @@ } .Icon { - // This compensates for the typical icon used in badges being inset within - // its bounding box. - margin-left: calc(-1 * (var(--p-space-1))); + margin: calc(-1 * var(--p-space-05)) 0 calc(-1 * var(--p-space-05)) + calc(-1 * var(--p-space-2)); - #{$se23} & { - margin: calc(-1 * var(--p-space-05)) 0 calc(-1 * var(--p-space-05)) - calc(-1 * var(--p-space-2)); - } - - #{$se23} & svg { + svg { // Corrects conflicting alignment with ancestor elements display: inline-block; vertical-align: top; @@ -268,18 +162,10 @@ .sizeLarge-experimental & { margin: 0 var(--p-space-1) 0 calc(-1 * var(--p-space-05)); - - #{$se23} & { - margin: 0 var(--p-space-1) 0 calc(-1 * var(--p-space-05)); - } } + * { - margin-left: var(--p-space-1); - - #{$se23} & { - margin-left: 0; - } + margin-left: 0; } } diff --git a/polaris-react/src/components/Badge/Badge.stories.tsx b/polaris-react/src/components/Badge/Badge.stories.tsx index 28705ecf98b..e8f637bd226 100644 --- a/polaris-react/src/components/Badge/Badge.stories.tsx +++ b/polaris-react/src/components/Badge/Badge.stories.tsx @@ -11,7 +11,6 @@ import { } from '@shopify/polaris'; import type {Entries} from '../../types'; -import {useFeatures} from '../../utilities/features'; export default { component: Badge, @@ -131,12 +130,6 @@ const sizes: { const sizeEntries = Object.entries(sizes) as Entries; export function All() { - const {polarisSummerEditions2023} = useFeatures(); - - const filteredStatusEntries = polarisSummerEditions2023 - ? statusEntries - : statusEntries.filter(([status]) => !status.endsWith('-experimental')); - return ( {sizeEntries.map(([size, sizeLabel]) => ( @@ -150,7 +143,7 @@ export function All() { Status only - {filteredStatusEntries.map(([status, statusLabel]) => ( + {statusEntries.map(([status, statusLabel]) => ( {progressEntries.map(([progress]) => ( - {filteredStatusEntries.map(([status, statusLabel]) => ( + {statusEntries.map(([status, statusLabel]) => ( - {filteredStatusEntries.map(([status, statusLabel]) => ( + {statusEntries.map(([status, statusLabel]) => ( - {filteredStatusEntries.map(([status]) => ( + {statusEntries.map(([status]) => ( - ) : ( - - - ); } diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss index 1036c16967d..f8f84e3b3f6 100644 --- a/polaris-react/src/components/Badge/components/Pip/Pip.scss +++ b/polaris-react/src/components/Badge/components/Pip/Pip.scss @@ -3,7 +3,7 @@ .Pip { // stylelint-disable -- Polaris component custom properties --pc-pip-size: var(--p-space-2); - --pc-pip-color: var(--p-color-icon); + --pc-pip-color: var(--p-color-text-subdued); --pc-border-width: 1.25px; // stylelint-enable display: inline-block; @@ -15,77 +15,41 @@ width: var(--pc-pip-size); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY border: var(--p-border-width-2) solid var(--pc-pip-color); - border-radius: var(--p-border-radius-full); flex-shrink: 0; - - #{$se23} & { - // stylelint-disable-next-line -- se23 3px border radius - border-radius: 3px; - // stylelint-disable-next-line -- se23 1.25px border width - border-width: var(--pc-border-width); - // stylelint-disable-next-line -- se23 override - --pc-pip-color: var(--p-color-text-subdued); - } + // stylelint-disable-next-line -- 3px border radius + border-radius: 3px; + // stylelint-disable-next-line -- 1.25px border width + border-width: var(--pc-border-width); } .statusInfo { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-info); - - #{$se23} & { - // stylelint-disable-next-line -- se23 - --pc-pip-color: var(--p-color-icon-info); - } } .statusSuccess { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-success); - - #{$se23} & { - // stylelint-disable-next-line -- se23 - --pc-pip-color: var(--p-color-icon-success); - } } .statusNew { // stylelint-disable-next-line -- Polaris component custom properties - --pc-pip-color: var(--p-color-icon); - - #{$se23} & { - // stylelint-disable-next-line -- se23 - --pc-pip-color: var(--p-color-text-subdued); - } + --pc-pip-color: var(--p-color-text-subdued); } .statusAttention { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-caution); - - #{$se23} & { - // stylelint-disable-next-line -- se23 - --pc-pip-color: var(--p-color-icon-caution); - } } .statusWarning { // stylelint-disable-next-line -- Polaris component custom properties - --pc-pip-color: var(--p-color-icon-caution); - - #{$se23} & { - // stylelint-disable-next-line -- se23 override - --pc-pip-color: var(--p-color-icon-warning); - } + --pc-pip-color: var(--p-color-icon-warning); } .statusCritical { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-critical); - - #{$se23} & { - // stylelint-disable-next-line -- se23 - --pc-pip-color: var(--p-color-icon-critical); - } } .progressIncomplete { @@ -101,30 +65,28 @@ transparent ); - #{$se23} & { - &.Pip { - background: none; - position: relative; - overflow: hidden; - - &::after { - content: ''; - position: absolute; - /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */ - top: calc(-1 * var(--pc-border-width)); - /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */ - left: calc(-1 * var(--pc-border-width)); - width: 0.25rem; - height: 0.5rem; - /* stylelint-disable-next-line polaris/space/declaration-property-unit-disallowed-list -- se23 */ - margin: 0 0.1275rem; - /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */ - border-right: var(--pc-border-width) solid currentColor; - /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */ - border-left: var(--pc-border-width) solid currentColor; - font-size: 0; - transform: rotate(-45deg); - } + &.Pip { + background: none; + position: relative; + overflow: hidden; + + &::after { + content: ''; + position: absolute; + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom pip */ + top: calc(-1 * var(--pc-border-width)); + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom pip */ + left: calc(-1 * var(--pc-border-width)); + width: 0.25rem; + height: 0.5rem; + /* stylelint-disable-next-line polaris/space/declaration-property-unit-disallowed-list -- custom pip */ + margin: 0 0.1275rem; + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom pip */ + border-right: var(--pc-border-width) solid currentColor; + /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- custom pip */ + border-left: var(--pc-border-width) solid currentColor; + font-size: 0; + transform: rotate(-45deg); } } diff --git a/polaris-react/src/components/Badge/tests/Badge.test.tsx b/polaris-react/src/components/Badge/tests/Badge.test.tsx index 295101e1efb..825aff346fc 100644 --- a/polaris-react/src/components/Badge/tests/Badge.test.tsx +++ b/polaris-react/src/components/Badge/tests/Badge.test.tsx @@ -34,16 +34,12 @@ describe('', () => { }); it('does not add pip styles when progress is not provided', () => { - const badge = mountWithApp(, { - features: {polarisSummerEditions2023: true}, - }); + const badge = mountWithApp(); expect(badge).not.toContainReactComponent(Icon); }); it('renders with pip styles when progress is provided', () => { - const badge = mountWithApp(, { - features: {polarisSummerEditions2023: true}, - }); + const badge = mountWithApp(); expect(badge).toContainReactComponent(Icon); }); @@ -171,27 +167,4 @@ describe('', () => { visuallyHidden: true, }); }); - - // se23 -- css pip replaced with icon pip - describe('polarisSummerEditions2023 false', () => { - it('does not add pip styles when progress is not provided', () => { - const badge = mountWithApp(, { - features: {polarisSummerEditions2023: false}, - }); - - expect(badge).not.toContainReactComponent('span', { - className: 'Pip', - }); - }); - - it('renders with pip styles when progress is provided', () => { - const badge = mountWithApp(, { - features: {polarisSummerEditions2023: false}, - }); - - expect(badge).toContainReactComponent('span', { - className: 'Pip progressIncomplete', - }); - }); - }); });