Skip to content

Commit 169204f

Browse files
sam-b-rosesophschneider
sam-b-rose
authored and
sophschneider
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 a340f69 commit 169204f

File tree

5 files changed

+51
-124
lines changed

5 files changed

+51
-124
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: 42 additions & 114 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,23 +15,12 @@
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-
&.imageHasLoaded {
33-
background: transparent;
34-
}
22+
&.imageHasLoaded {
23+
background: transparent;
3524
}
3625

3726
@media (forced-colors: active) {
@@ -56,23 +45,15 @@
5645
}
5746

5847
.shapeRound {
59-
border-radius: var(--p-border-radius-full);
60-
61-
#{$se23} & {
62-
border-radius: var(--p-border-radius-05);
63-
}
48+
border-radius: var(--p-border-radius-05);
6449
}
6550

6651
.shapeSquare {
6752
border-radius: var(--p-border-radius-05);
6853

6954
.Text {
7055
font-size: var(--p-font-size-200);
71-
font-weight: var(--p-font-weight-semibold);
72-
73-
#{$se23} & {
74-
font-weight: var(--p-font-weight-regular);
75-
}
56+
font-weight: var(--p-font-weight-regular);
7657
}
7758

7859
.long {
@@ -87,144 +68,91 @@
8768
.sizeExtraSmall {
8869
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
8970
width: var(--pc-avatar-extra-small-size);
90-
91-
#{$se23} & {
92-
// stylelint-disable-next-line -- se23 overrides
93-
border-radius: 4px;
94-
}
71+
// stylelint-disable-next-line -- se23 overrides
72+
border-radius: 4px;
9573
}
9674

9775
.sizeSmall {
9876
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
9977
width: var(--pc-avatar-small-size);
100-
101-
#{$se23} & {
102-
// stylelint-disable-next-line -- se23 overrides
103-
border-radius: 6px;
104-
}
78+
// stylelint-disable-next-line -- se23 overrides
79+
border-radius: 6px;
10580
}
10681

10782
.sizeMedium {
10883
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
10984
width: var(--pc-avatar-medium-size);
110-
111-
#{$se23} & {
112-
// stylelint-disable-next-line -- se23 overrides
113-
border-radius: 6px;
114-
}
85+
// stylelint-disable-next-line -- se23 overrides
86+
border-radius: 6px;
11587
}
11688

11789
.sizeLarge {
11890
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
11991
width: var(--pc-avatar-large-size);
120-
121-
#{$se23} & {
122-
// stylelint-disable-next-line -- se23 overrides
123-
border-radius: 8px;
124-
}
92+
// stylelint-disable-next-line -- se23 overrides
93+
border-radius: 8px;
12594
}
12695

12796
.sizeXl-experimental {
12897
// stylelint-disable-next-line -- se23 overrides
12998
width: var(--pc-avatar-xl-size-experimental);
130-
131-
#{$se23} & {
132-
// stylelint-disable-next-line -- se23 overrides
133-
border-radius: 8px;
134-
}
99+
// stylelint-disable-next-line -- se23 overrides
100+
border-radius: 8px;
135101
}
136102

137103
.size2xl-experimental {
138104
// stylelint-disable-next-line -- se23 overrides
139105
width: var(--pc-avatar-2xl-size-experimental);
140-
141-
#{$se23} & {
142-
// stylelint-disable-next-line -- se23 overrides
143-
border-radius: 10px;
144-
}
106+
// stylelint-disable-next-line -- se23 overrides
107+
border-radius: 10px;
145108
}
146109

147110
.styleOne {
148-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
149-
color: rgba(61, 40, 0, 1);
150-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
151-
background: rgba(255, 201, 107, 1);
152-
153-
#{$se23} & {
154-
background: var(--p-color-avatar-style-one-background-experimental);
155-
color: var(--p-color-avatar-style-one-color-experimental);
156-
}
111+
background: var(--p-color-avatar-style-one-background-experimental);
112+
color: var(--p-color-avatar-style-one-color-experimental);
157113

158-
#{$se23} & svg,
159-
#{$se23} & text {
114+
svg,
115+
text {
160116
color: var(--p-color-avatar-style-one-color-experimental);
161117
}
162118
}
163119

164120
.styleTwo {
165-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
166-
color: rgba(73, 11, 28, 1);
167-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
168-
background: rgba(255, 196, 176, 1);
121+
background: var(--p-color-avatar-style-two-background-experimental);
122+
color: var(--p-color-avatar-style-two-color-experimental);
169123

170-
#{$se23} & {
171-
background: var(--p-color-avatar-style-two-background-experimental);
172-
color: var(--p-color-avatar-style-two-color-experimental);
173-
}
174-
175-
#{$se23} & svg,
176-
#{$se23} & text {
124+
svg,
125+
text {
177126
color: var(--p-color-avatar-style-two-color-experimental);
178127
}
179128
}
180129

181130
.styleThree {
182-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
183-
color: rgba(0, 47, 25, 1);
184-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
185-
background: rgba(146, 230, 181, 1);
186-
187-
#{$se23} & {
188-
background: var(--p-color-avatar-style-three-background-experimental);
189-
color: var(--p-color-avatar-style-three-color-experimental);
190-
}
131+
background: var(--p-color-avatar-style-three-background-experimental);
132+
color: var(--p-color-avatar-style-three-color-experimental);
191133

192-
#{$se23} & svg,
193-
#{$se23} & text {
134+
svg,
135+
text {
194136
color: var(--p-color-avatar-style-three-color-experimental);
195137
}
196138
}
197139

198140
.styleFour {
199-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
200-
color: rgba(0, 45, 45, 1);
201-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
202-
background: rgba(145, 224, 214, 1);
203-
204-
#{$se23} & {
205-
background: var(--p-color-avatar-style-four-background-experimental);
206-
color: var(--p-color-avatar-style-four-color-experimental);
207-
}
141+
background: var(--p-color-avatar-style-four-background-experimental);
142+
color: var(--p-color-avatar-style-four-color-experimental);
208143

209-
#{$se23} & svg,
210-
#{$se23} & text {
144+
svg,
145+
text {
211146
color: var(--p-color-avatar-style-four-color-experimental);
212147
}
213148
}
214149

215150
.styleFive {
216-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
217-
color: rgba(79, 14, 31, 1);
218-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
219-
background: rgba(253, 201, 208, 1);
220-
221-
#{$se23} & {
222-
background: var(--p-color-avatar-style-five-background-experimental);
223-
color: var(--p-color-avatar-style-five-color-experimental);
224-
}
151+
background: var(--p-color-avatar-style-five-background-experimental);
152+
color: var(--p-color-avatar-style-five-color-experimental);
225153

226-
#{$se23} & svg,
227-
#{$se23} & text {
154+
svg,
155+
text {
228156
color: var(--p-color-avatar-style-five-color-experimental);
229157
}
230158
}

‎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)