Skip to content

Commit

Permalink
[Badge] Consolidate se23 logic and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophschneider
sophschneider committed Aug 11, 2023
1 parent d901d92 commit 6f4775a
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 271 deletions.
4 changes: 4 additions & 0 deletions .changeset/tall-chicken-repeat.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
192 changes: 39 additions & 153 deletions polaris-react/src/components/Badge/Badge.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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);

Expand All @@ -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);

Expand All @@ -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);

Expand All @@ -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);

Expand All @@ -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);

Expand All @@ -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;

Expand All @@ -210,76 +134,38 @@
}
}

.statusRead-only-experimental {
@include statusRead-only;

#{$se23} & {
@include statusRead-only;
}
}

@mixin statusEnabled {
.statusEnabled-experimental {
color: var(--p-color-text);

svg {
fill: var(--p-color-icon-success);
}
}

.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 {
border-radius: var(--p-border-radius-1);
}

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

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

Expand Down
15 changes: 4 additions & 11 deletions polaris-react/src/components/Badge/Badge.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
} from '@shopify/polaris';

import type {Entries} from '../../types';
import {useFeatures} from '../../utilities/features';

export default {
component: Badge,
Expand Down Expand Up @@ -131,12 +130,6 @@ const sizes: {
const sizeEntries = Object.entries(sizes) as Entries<typeof sizes>;

export function All() {
const {polarisSummerEditions2023} = useFeatures();

const filteredStatusEntries = polarisSummerEditions2023
? statusEntries
: statusEntries.filter(([status]) => !status.endsWith('-experimental'));

return (
<LegacyCard sectioned>
{sizeEntries.map(([size, sizeLabel]) => (
Expand All @@ -150,7 +143,7 @@ export function All() {
Status only
</Text>
<HorizontalStack gap="2">
{filteredStatusEntries.map(([status, statusLabel]) => (
{statusEntries.map(([status, statusLabel]) => (
<Badge
key={status}
size={size}
Expand All @@ -167,7 +160,7 @@ export function All() {
</Text>
{progressEntries.map(([progress]) => (
<HorizontalStack key={progress} gap="2">
{filteredStatusEntries.map(([status, statusLabel]) => (
{statusEntries.map(([status, statusLabel]) => (
<Badge
key={status}
size={size}
Expand All @@ -187,7 +180,7 @@ export function All() {
Status with icon
</Text>
<HorizontalStack gap="2">
{filteredStatusEntries.map(([status, statusLabel]) => (
{statusEntries.map(([status, statusLabel]) => (
<Badge
key={status}
size={size}
Expand All @@ -206,7 +199,7 @@ export function All() {
Status with icon only
</Text>
<HorizontalStack gap="2">
{filteredStatusEntries.map(([status]) => (
{statusEntries.map(([status]) => (
<Badge
key={status}
size={size}
Expand Down
Loading

0 comments on commit 6f4775a

Please sign in to comment.