Skip to content

Commit 66f5c8d

Browse files
sam-b-rosesam-b-rose
committed
[Avatar] Remove se23 styles and code (#9906)
Related to #9899 <!-- Context about the problem that’s being addressed. --> Removes beta flag logic and merge override styles for Avatar component.
1 parent 3a2b6f6 commit 66f5c8d

File tree

5 files changed

+49
-122
lines changed

5 files changed

+49
-122
lines changed

‎.changeset/tall-chicken-repeat.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': major
3+
---
4+
5+
Removed Summer Editions experimental styles and code for the following components: Avatar

‎.github/workflows/major-version-check.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ name: Major version in changeset
22

33
on:
44
pull_request:
5+
branches:
6+
- main
57
types:
68
- labeled
79
- unlabeled

‎polaris-react/.storybook/manager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const featureFlagOptions = {
7575
polarisSummerEditions2023: {
7676
name: 'polarisSummerEditions2023',
7777
description: 'Toggle the summer editions feature flag',
78-
defaultValue: false,
78+
defaultValue: true,
7979
control: {type: 'boolean'},
8080
},
8181
polarisSummerEditions2023ShadowBevelOptOut: {

‎polaris-react/src/components/Avatar/Avatar.scss‎

Lines changed: 40 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
.Avatar {
44
// stylelint-disable -- Polaris component custom properties
5-
--pc-avatar-extra-small-size: 24px;
6-
--pc-avatar-small-size: 32px;
7-
--pc-avatar-medium-size: 40px;
8-
--pc-avatar-large-size: 60px;
5+
--pc-avatar-extra-small-size: 20px;
6+
--pc-avatar-small-size: 24px;
7+
--pc-avatar-medium-size: 28px;
8+
--pc-avatar-large-size: 32px;
99
--pc-avatar-xl-size-experimental: 40px;
1010
--pc-avatar-2xl-size-experimental: 54px;
1111
// stylelint-enable
@@ -15,21 +15,10 @@
1515
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
1616
min-width: var(--pc-avatar-extra-small-size);
1717
max-width: 100%;
18-
background: var(--p-color-bg-strong);
19-
color: var(--p-color-icon-subdued);
18+
background: var(--p-color-avatar-background-experimental);
19+
color: var(--p-color-avatar-color-experimental);
2020
user-select: none;
2121

22-
#{$se23} & {
23-
// stylelint-disable -- se23 overrides
24-
--pc-avatar-extra-small-size: 20px;
25-
--pc-avatar-small-size: 24px;
26-
--pc-avatar-medium-size: 28px;
27-
--pc-avatar-large-size: 32px;
28-
// stylelint-enable
29-
background: var(--p-color-avatar-background-experimental);
30-
color: var(--p-color-avatar-color-experimental);
31-
}
32-
3322
@media (forced-colors: active) {
3423
border: var(--p-border-width-1) solid transparent;
3524
}
@@ -52,23 +41,15 @@
5241
}
5342

5443
.shapeRound {
55-
border-radius: var(--p-border-radius-full);
56-
57-
#{$se23} & {
58-
border-radius: var(--p-border-radius-05);
59-
}
44+
border-radius: var(--p-border-radius-05);
6045
}
6146

6247
.shapeSquare {
6348
border-radius: var(--p-border-radius-05);
6449

6550
.Text {
6651
font-size: var(--p-font-size-200);
67-
font-weight: var(--p-font-weight-semibold);
68-
69-
#{$se23} & {
70-
font-weight: var(--p-font-weight-regular);
71-
}
52+
font-weight: var(--p-font-weight-regular);
7253
}
7354

7455
.long {
@@ -83,144 +64,91 @@
8364
.sizeExtraSmall {
8465
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
8566
width: var(--pc-avatar-extra-small-size);
86-
87-
#{$se23} & {
88-
// stylelint-disable-next-line -- se23 overrides
89-
border-radius: 4px;
90-
}
67+
// stylelint-disable-next-line -- se23 overrides
68+
border-radius: 4px;
9169
}
9270

9371
.sizeSmall {
9472
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
9573
width: var(--pc-avatar-small-size);
96-
97-
#{$se23} & {
98-
// stylelint-disable-next-line -- se23 overrides
99-
border-radius: 6px;
100-
}
74+
// stylelint-disable-next-line -- se23 overrides
75+
border-radius: 6px;
10176
}
10277

10378
.sizeMedium {
10479
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
10580
width: var(--pc-avatar-medium-size);
106-
107-
#{$se23} & {
108-
// stylelint-disable-next-line -- se23 overrides
109-
border-radius: 6px;
110-
}
81+
// stylelint-disable-next-line -- se23 overrides
82+
border-radius: 6px;
11183
}
11284

11385
.sizeLarge {
11486
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
11587
width: var(--pc-avatar-large-size);
116-
117-
#{$se23} & {
118-
// stylelint-disable-next-line -- se23 overrides
119-
border-radius: 8px;
120-
}
88+
// stylelint-disable-next-line -- se23 overrides
89+
border-radius: 8px;
12190
}
12291

12392
.sizeXl-experimental {
12493
// stylelint-disable-next-line -- se23 overrides
12594
width: var(--pc-avatar-xl-size-experimental);
126-
127-
#{$se23} & {
128-
// stylelint-disable-next-line -- se23 overrides
129-
border-radius: 8px;
130-
}
95+
// stylelint-disable-next-line -- se23 overrides
96+
border-radius: 8px;
13197
}
13298

13399
.size2xl-experimental {
134100
// stylelint-disable-next-line -- se23 overrides
135101
width: var(--pc-avatar-2xl-size-experimental);
136-
137-
#{$se23} & {
138-
// stylelint-disable-next-line -- se23 overrides
139-
border-radius: 10px;
140-
}
102+
// stylelint-disable-next-line -- se23 overrides
103+
border-radius: 10px;
141104
}
142105

143106
.styleOne {
144-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
145-
color: rgba(61, 40, 0, 1);
146-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
147-
background: rgba(255, 201, 107, 1);
148-
149-
#{$se23} & {
150-
background: var(--p-color-avatar-style-one-background-experimental);
151-
color: var(--p-color-avatar-style-one-color-experimental);
152-
}
107+
background: var(--p-color-avatar-style-one-background-experimental);
108+
color: var(--p-color-avatar-style-one-color-experimental);
153109

154-
#{$se23} & svg,
155-
#{$se23} & text {
110+
svg,
111+
text {
156112
color: var(--p-color-avatar-style-one-color-experimental);
157113
}
158114
}
159115

160116
.styleTwo {
161-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
162-
color: rgba(73, 11, 28, 1);
163-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
164-
background: rgba(255, 196, 176, 1);
117+
background: var(--p-color-avatar-style-two-background-experimental);
118+
color: var(--p-color-avatar-style-two-color-experimental);
165119

166-
#{$se23} & {
167-
background: var(--p-color-avatar-style-two-background-experimental);
168-
color: var(--p-color-avatar-style-two-color-experimental);
169-
}
170-
171-
#{$se23} & svg,
172-
#{$se23} & text {
120+
svg,
121+
text {
173122
color: var(--p-color-avatar-style-two-color-experimental);
174123
}
175124
}
176125

177126
.styleThree {
178-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
179-
color: rgba(0, 47, 25, 1);
180-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
181-
background: rgba(146, 230, 181, 1);
182-
183-
#{$se23} & {
184-
background: var(--p-color-avatar-style-three-background-experimental);
185-
color: var(--p-color-avatar-style-three-color-experimental);
186-
}
127+
background: var(--p-color-avatar-style-three-background-experimental);
128+
color: var(--p-color-avatar-style-three-color-experimental);
187129

188-
#{$se23} & svg,
189-
#{$se23} & text {
130+
svg,
131+
text {
190132
color: var(--p-color-avatar-style-three-color-experimental);
191133
}
192134
}
193135

194136
.styleFour {
195-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
196-
color: rgba(0, 45, 45, 1);
197-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
198-
background: rgba(145, 224, 214, 1);
199-
200-
#{$se23} & {
201-
background: var(--p-color-avatar-style-four-background-experimental);
202-
color: var(--p-color-avatar-style-four-color-experimental);
203-
}
137+
background: var(--p-color-avatar-style-four-background-experimental);
138+
color: var(--p-color-avatar-style-four-color-experimental);
204139

205-
#{$se23} & svg,
206-
#{$se23} & text {
140+
svg,
141+
text {
207142
color: var(--p-color-avatar-style-four-color-experimental);
208143
}
209144
}
210145

211146
.styleFive {
212-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
213-
color: rgba(79, 14, 31, 1);
214-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
215-
background: rgba(253, 201, 208, 1);
216-
217-
#{$se23} & {
218-
background: var(--p-color-avatar-style-five-background-experimental);
219-
color: var(--p-color-avatar-style-five-color-experimental);
220-
}
147+
background: var(--p-color-avatar-style-five-background-experimental);
148+
color: var(--p-color-avatar-style-five-color-experimental);
221149

222-
#{$se23} & svg,
223-
#{$se23} & text {
150+
svg,
151+
text {
224152
color: var(--p-color-avatar-style-five-color-experimental);
225153
}
226154
}

‎polaris-react/src/components/Avatar/Avatar.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, {useState, useCallback, useEffect} from 'react';
22

33
import type {Experimental} from '../../types';
44
import {classNames, variationName} from '../../utilities/css';
5-
import {useFeatures} from '../../utilities/features';
65
import {useI18n} from '../../utilities/i18n';
76
import {useIsAfterInitialMount} from '../../utilities/use-is-after-initial-mount';
87
import {Image} from '../Image';
@@ -95,8 +94,6 @@ export function Avatar({
9594

9695
const [status, setStatus] = useState<Status>(Status.Pending);
9796

98-
const {polarisSummerEditions2023} = useFeatures();
99-
10097
// If the source changes, set the status back to pending
10198
useEffect(() => {
10299
setStatus(Status.Pending);
@@ -163,7 +160,7 @@ export function Avatar({
163160
// Use `dominant-baseline: central` instead of `dy` when Edge supports it.
164161
const verticalOffset = '0.35em';
165162

166-
const avatarPath = polarisSummerEditions2023 ? (
163+
const avatarPath = (
167164
<>
168165
<path
169166
fill="none"
@@ -180,11 +177,6 @@ export function Avatar({
180177
stroke-linejoin="round"
181178
/>
182179
</>
183-
) : (
184-
<path
185-
fill="currentColor"
186-
d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
187-
/>
188180
);
189181

190182
const avatarBody =

0 commit comments

Comments
 (0)