Skip to content

Commit aa4347b

Browse files
laurkimlaurkim
authored
[Tabs] Consolidate se23 logic and styles (Shopify#10158)
### WHY are these changes introduced? Resolves Shopify#9969. ### WHAT is this pull request doing? Consolidates se23 beta styles and logic for `Tabs`. ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-wlmykaxxmr.chromatic.com/?path=/story/all-components-tabs--all) [Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-tabs--all&globals=polarisSummerEditions2023:true) 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent 6edda68 commit aa4347b

File tree

2 files changed

+55
-135
lines changed

2 files changed

+55
-135
lines changed

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

Lines changed: 51 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,16 @@
1010
@media #{$p-breakpoints-md-down} {
1111
max-width: 100%;
1212
overflow: hidden;
13-
height: 56px;
13+
height: unset;
1414
padding: 0;
15-
16-
#{$se23} & {
17-
height: unset;
18-
}
1915
}
2016
}
2117

2218
.Wrapper {
2319
@media #{$p-breakpoints-md-down} {
2420
overflow: auto;
2521
-webkit-overflow-scrolling: touch;
26-
padding: var(--p-space-3) var(--p-space-3) var(--p-space-3) var(--p-space-4);
27-
28-
#{$se23} & {
29-
padding: var(--p-space-2);
30-
}
22+
padding: var(--p-space-2);
3123
}
3224
}
3325

@@ -65,19 +57,19 @@
6557

6658
.Tab {
6759
// stylelint-disable-next-line -- no way to set focus ring without mixin currently
68-
@include focus-ring;
60+
@include focus-ring($size: 'wide');
6961
// stylelint-disable-next-line -- required to reset button styles on touch screens
7062
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
7163
position: relative;
7264
display: inline-flex;
7365
justify-content: center;
7466
align-items: center;
75-
height: var(--p-space-8);
76-
padding: 0 var(--p-space-3);
67+
height: 2rem;
68+
padding: var(--p-space-1_5-experimental) var(--p-space-3);
7769
border: 0;
78-
border-radius: var(--p-border-radius-1);
79-
background: var(--p-color-bg);
80-
color: var(--p-color-text-subdued);
70+
border-radius: var(--p-border-radius-2);
71+
background-color: transparent;
72+
color: var(--p-color-text-primary);
8173
cursor: pointer;
8274
text-decoration: none;
8375
width: 100%;
@@ -91,14 +83,29 @@
9183
&[aria-disabled='true'] {
9284
cursor: default;
9385
color: var(--p-color-text-disabled);
86+
87+
path {
88+
fill: var(--p-color-icon-disabled);
89+
}
90+
}
91+
92+
&:not([aria-disabled='true']):hover {
93+
background-color: var(--p-color-bg-transparent-hover-experimental);
94+
color: var(--p-color-text-primary);
9495
}
9596

96-
&:not([aria-disabled='true']):hover,
9797
&:not([aria-disabled='true']):focus {
9898
background-color: var(--p-color-bg-hover);
9999
color: var(--p-color-text);
100100
}
101101

102+
&:not([aria-disabled='true']):focus-visible {
103+
background-color: transparent;
104+
color: var(--p-color-text-primary);
105+
// stylelint-disable-next-line -- set focus ring using mixin
106+
@include focus-ring($size: 'wide', $style: 'focused');
107+
}
108+
102109
// stylelint-disable-next-line selector-max-specificity -- specificity required to override focus ring
103110
&:not([aria-disabled='true']):focus-visible:not(:active) {
104111
// stylelint-disable-next-line -- no way to set focus ring without mixin currently
@@ -107,61 +114,26 @@
107114
}
108115

109116
&:not([aria-disabled='true']):active {
110-
background-color: var(--p-color-bg-active);
111-
color: var(--p-color-text);
117+
background-color: var(--p-color-bg-secondary-experimental);
118+
color: var(--p-color-text-primary);
112119
z-index: var(--p-z-index-1);
113120
}
114121

115122
path {
116123
fill: currentColor;
117124
}
118125

119-
&[aria-disabled='true'] path {
120-
fill: var(--p-color-icon-disabled);
121-
}
122-
123-
#{$se23} & {
124-
// stylelint-disable-next-line -- no way to set focus ring without mixin currently
125-
@include focus-ring($size: 'wide');
126-
color: var(--p-color-text-primary);
127-
background-color: transparent;
128-
border-radius: var(--p-border-radius-2);
129-
padding: var(--p-space-1_5-experimental) var(--p-space-3);
130-
height: 2rem;
131-
132-
&[aria-disabled='true'] {
133-
color: var(--p-color-text-disabled);
134-
}
135-
136-
&:not([aria-disabled='true']):hover {
137-
background-color: var(--p-color-bg-transparent-hover-experimental);
138-
color: var(--p-color-text-primary);
139-
}
140-
141-
&:not([aria-disabled='true']):focus-visible {
142-
background-color: transparent;
143-
color: var(--p-color-text-primary);
144-
// stylelint-disable-next-line -- sshhh
145-
@include focus-ring($size: 'wide', $style: 'focused');
146-
}
147-
148-
&:not([aria-disabled='true']):active {
149-
background-color: var(--p-color-bg-secondary-experimental);
150-
color: var(--p-color-text-primary);
151-
z-index: var(--p-z-index-1);
152-
}
153-
154-
@media #{$p-breakpoints-md-up} {
155-
font-size: var(--p-font-size-75);
156-
line-height: var(--p-font-line-height-1);
157-
height: 1.75rem;
158-
}
126+
@media #{$p-breakpoints-md-up} {
127+
font-size: var(--p-font-size-75);
128+
line-height: var(--p-font-line-height-1);
129+
height: 1.75rem;
159130
}
160131
}
161132

162133
.Tab-active {
163-
background: var(--p-color-bg-primary-subdued-hover);
164-
color: var(--p-color-text-primary);
134+
background: var(--p-color-bg-transparent-active-experimental);
135+
border-radius: var(--p-border-radius-2);
136+
color: var(--p-color-text);
165137

166138
&[aria-disabled='true'] {
167139
background: var(--p-color-bg-disabled);
@@ -170,43 +142,18 @@
170142

171143
&:not([aria-disabled='true']):hover,
172144
&:not([aria-disabled='true']):focus {
173-
background-color: var(--p-color-bg-primary-subdued-hover);
174-
color: var(--p-color-text-primary-hover);
145+
background-color: var(--p-color-bg-transparent-hover-experimental);
146+
color: var(--p-color-text-primary);
175147
}
176148

177149
&:not([aria-disabled='true']):active {
178-
background-color: var(--p-color-bg-success-subdued-active);
150+
background-color: var(--p-color-bg-transparent-active-experimental);
179151
color: var(--p-color-text-primary);
180152
}
181-
182-
#{$se23} & {
183-
background: var(--p-color-bg-transparent-active-experimental);
184-
color: var(--p-color-text);
185-
border-radius: var(--p-border-radius-2);
186-
187-
&[aria-disabled='true'] {
188-
background: var(--p-color-bg-disabled);
189-
color: var(--p-color-text-disabled);
190-
}
191-
192-
&:not([aria-disabled='true']):hover,
193-
&:not([aria-disabled='true']):focus {
194-
background-color: var(--p-color-bg-transparent-hover-experimental);
195-
color: var(--p-color-text-primary);
196-
}
197-
198-
&:not([aria-disabled='true']):active {
199-
background-color: var(--p-color-bg-transparent-active-experimental);
200-
}
201-
}
202153
}
203154

204155
.Tab-hasActions {
205156
padding-right: var(--p-space-2);
206-
207-
#{$se23} & {
208-
padding-right: var(--p-space-2);
209-
}
210157
}
211158

212159
.Tab-iconOnly {
@@ -299,25 +246,34 @@
299246
@include unstyled-button;
300247
height: 100%;
301248
background-color: transparent;
302-
color: var(--p-color-text-subdued);
249+
color: var(--p-color-text-primary);
303250
display: flex;
304251
align-items: center;
305252
justify-content: center;
306253
cursor: pointer;
307-
border-radius: var(--p-border-radius-1);
254+
border-radius: var(--p-border-radius-2);
308255
padding: 0 var(--p-space-2) 0 var(--p-space-3);
309256
margin-top: var(--p-space-025);
310257
border: none;
311258
outline: none;
312259

260+
svg {
261+
fill: var(--p-color-icon);
262+
}
263+
313264
&:hover svg,
314265
&:focus svg {
315266
fill: var(--p-color-icon);
316267
}
317268

318-
&:not([aria-disabled='true']):hover,
269+
&:not([aria-disabled='true']):hover {
270+
background-color: var(--p-color-bg-transparent-hover-experimental);
271+
color: var(--p-color-text-primary);
272+
}
273+
319274
&:not([aria-disabled='true']):focus {
320-
background-color: var(--p-color-bg-hover);
275+
background-color: transparent;
276+
color: var(--p-color-text-primary);
321277
}
322278

323279
&:not([aria-disabled='true']):focus-visible {
@@ -327,48 +283,19 @@
327283
}
328284

329285
&:not([aria-disabled='true']):active {
330-
background-color: var(--p-color-bg-active);
286+
background-color: var(--p-color-bg-secondary-experimental);
331287
z-index: var(--p-z-index-1);
332288
}
333289

334290
&[aria-disabled='true'] {
335291
cursor: default;
336292
color: var(--p-color-text-disabled);
293+
background: var(--p-color-bg-disabled);
337294

338295
path {
339296
fill: var(--p-color-icon-disabled);
340297
}
341298
}
342-
343-
#{$se23} & {
344-
background-color: transparent;
345-
color: var(--p-color-text-primary);
346-
border-radius: var(--p-border-radius-2);
347-
348-
// stylelint-disable-next-line selector-max-combinators -- Polaris component experimental styles
349-
svg {
350-
fill: var(--p-color-icon);
351-
}
352-
353-
&[aria-disabled='true'] {
354-
background: var(--p-color-bg-disabled);
355-
color: var(--p-color-text-disabled);
356-
}
357-
358-
&:not([aria-disabled='true']):hover {
359-
background-color: var(--p-color-bg-transparent-hover-experimental);
360-
color: var(--p-color-text-primary);
361-
}
362-
363-
&:not([aria-disabled='true']):focus {
364-
background-color: transparent;
365-
color: var(--p-color-text-primary);
366-
}
367-
368-
&:not([aria-disabled='true']):active {
369-
background-color: var(--p-color-bg-secondary-experimental);
370-
}
371-
}
372299
}
373300

374301
.TabsMeasurer {

‎polaris-react/src/components/Tabs/components/Tab/Tab.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,11 @@ import {
1717
Columns3Minor,
1818
EditMinor,
1919
DeleteMinor,
20-
CaretDownMinor,
2120
ChevronDownMinor,
2221
} from '@shopify/polaris-icons';
2322

2423
import {classNames} from '../../../../utilities/css';
2524
import {useI18n} from '../../../../utilities/i18n';
26-
import {useFeatures} from '../../../../utilities/features';
2725
import {
2826
focusFirstFocusableNode,
2927
handleMouseUpByBlurring,
@@ -75,7 +73,6 @@ export const Tab = forwardRef(
7573
null,
7674
);
7775
const {mdDown} = useBreakpoints();
78-
const {polarisSummerEditions2023: se23} = useFeatures();
7976

8077
const wasSelected = useRef(selected);
8178
const panelFocused = useRef(false);
@@ -281,21 +278,17 @@ export const Tab = forwardRef(
281278
selected && actions?.length && styles['Tab-hasActions'],
282279
);
283280

284-
const badgeStatusSelected = !se23 ? 'success' : undefined;
285281
const badgeMarkup = badge ? (
286-
<Badge status={selected ? badgeStatusSelected : 'new'}>{badge}</Badge>
282+
<Badge status={selected ? undefined : 'new'}>{badge}</Badge>
287283
) : null;
288284

289285
const disclosureMarkup =
290286
selected && actions?.length ? (
291287
<div className={classNames(styles.IconWrap)}>
292-
<Icon source={se23 ? ChevronDownMinor : CaretDownMinor} />
288+
<Icon source={ChevronDownMinor} />
293289
</div>
294290
) : null;
295291

296-
const se23LabelVariant = mdDown && se23 ? 'bodyLg' : 'bodySm';
297-
const labelVariant = mdDown ? 'bodyMd' : 'bodySm';
298-
299292
const activator = (
300293
<BaseComponent
301294
id={id}
@@ -315,8 +308,8 @@ export const Tab = forwardRef(
315308
<InlineStack gap="2" align="center" blockAlign="center" wrap={false}>
316309
<Text
317310
as="span"
318-
variant={se23 ? se23LabelVariant : labelVariant}
319-
fontWeight={se23 ? 'medium' : 'semibold'}
311+
variant={mdDown ? 'bodyLg' : 'bodySm'}
312+
fontWeight="medium"
320313
>
321314
{icon ?? content}
322315
</Text>

0 commit comments

Comments
 (0)