Skip to content

Commit 80671c9

Browse files
gwyneplainekyledurand
gwyneplaine
authored and
kyledurand
committed
[Checkbox] consolidates se23 styles and logic (#10015)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Fixes #9927 <!-- link to issue if one exists --> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [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) <!-- Give as much information as needed to experiment with the component in the playground. --> <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> - Consolidate se23 logic - Consolidate se23 styles - Consolidate se23 logic in control-backdrop mixin ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] 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 01d479b commit 80671c9

File tree

3 files changed

+72
-159
lines changed

3 files changed

+72
-159
lines changed

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

Lines changed: 68 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,29 @@
66
}
77

88
.ChoiceLabel .Backdrop {
9-
#{$se23} & {
10-
border-width: 0;
11-
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
12-
var(--p-color-border-input);
13-
transition: border-color var(--p-motion-duration-100)
14-
var(--p-motion-ease-out),
15-
border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
16-
box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
17-
18-
// This fixes artifacts caused by box-shadow in some browsers
19-
transform: translate3d(0, 0, 0);
20-
}
9+
border-width: 0;
10+
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
11+
var(--p-color-border-input);
12+
transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out),
13+
border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
14+
box-shadow var(--p-motion-duration-100) var(--p-motion-ease-out);
15+
16+
// This fixes artifacts caused by box-shadow in some browsers
17+
transform: translate3d(0, 0, 0);
2118
}
2219

2320
.ChoiceLabel:hover .Backdrop {
2421
border-color: var(--p-color-border-input-hover);
25-
26-
#{$se23} & {
27-
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
28-
var(--p-color-border-input-hover);
29-
background-color: var(--p-color-bg-input-hover-experimental);
30-
}
22+
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
23+
var(--p-color-border-input-hover);
24+
background-color: var(--p-color-bg-input-hover-experimental);
3125
}
3226

3327
.ChoiceLabel:active .Backdrop,
3428
.ChoiceLabel:checked .Backdrop {
35-
#{$se23} & {
36-
border-color: var(--p-color-bg-primary);
37-
border-width: 0;
38-
box-shadow: inset 0 0 0 var(--p-space-05) var(--p-color-bg-primary);
39-
}
29+
border-color: var(--p-color-bg-primary);
30+
border-width: 0;
31+
box-shadow: inset 0 0 0 var(--p-space-05) var(--p-color-bg-primary);
4032
}
4133

4234
// stylelint-disable selector-max-specificity, selector-max-class -- Much easier to read the rules when written like this
@@ -64,29 +56,18 @@
6456
+ .Backdrop {
6557
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
6658
@include control-backdrop(active);
67-
68-
#{$se23} & {
69-
border-color: var(--p-color-bg-primary);
70-
background-color: var(--p-color-bg-primary);
71-
box-shadow: inset 0 0 0 var(--p-space-8) var(--p-color-bg-primary);
72-
}
59+
border-color: var(--p-color-bg-primary);
60+
background-color: var(--p-color-bg-primary);
61+
box-shadow: inset 0 0 0 var(--p-space-8) var(--p-color-bg-primary);
7362
}
7463

7564
~ .Icon {
76-
transition: opacity var(--p-motion-duration-150) var(--p-motion-ease),
77-
transform var(--p-motion-duration-150) var(--p-motion-ease);
78-
transform: translate3d(-50%, -50%, 0) scale(1);
65+
transition: opacity var(--p-motion-duration-150) var(--p-motion-ease-out),
66+
transform var(--p-motion-duration-150) var(--p-motion-ease-out);
7967
opacity: 1;
8068

81-
#{$se23} & {
82-
transition: opacity var(--p-motion-duration-150)
83-
var(--p-motion-ease-out),
84-
transform var(--p-motion-duration-150) var(--p-motion-ease-out);
85-
86-
// stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 override
87-
&.animated {
88-
transition: initial;
89-
}
69+
&.animated {
70+
transition: initial;
9071
}
9172
}
9273
}
@@ -95,39 +76,29 @@
9576
+ .Backdrop {
9677
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
9778
@include control-backdrop(disabled);
98-
#{$se23} & {
99-
// We set the border-color to transparent here
100-
// in order for the background color to bleed all the way to the edge of the element.
101-
border-color: transparent;
102-
background-color: var(
103-
--p-color-bg-transparent-secondary-disabled-experimental
104-
);
105-
box-shadow: none;
106-
107-
// stylelint-disable-next-line max-nesting-depth, selector-max-combinators -- se23
108-
&::before {
109-
background-color: transparent;
110-
}
79+
// We set the border-color to transparent here
80+
// in order for the background color to bleed all the way to the edge of the element.
81+
border-color: transparent;
82+
background-color: var(
83+
--p-color-bg-transparent-secondary-disabled-experimental
84+
);
85+
box-shadow: none;
86+
87+
&::before {
88+
background-color: transparent;
11189
}
11290
}
11391
}
11492

11593
&:disabled:checked,
11694
&:disabled.Input-indeterminate {
11795
+ .Backdrop {
118-
background: var(--p-color-border-disabled);
96+
background-color: var(
97+
--p-color-bg-transparent-secondary-disabled-experimental
98+
);
11999

120100
&::before {
121-
background: var(--p-color-border-disabled);
122-
}
123-
#{$se23} & {
124-
background-color: var(
125-
--p-color-bg-transparent-secondary-disabled-experimental
126-
);
127-
// stylelint-disable-next-line max-nesting-depth, selector-max-combinators -- pse23 override
128-
&::before {
129-
background-color: transparent;
130-
}
101+
background-color: transparent;
131102
}
132103
}
133104
}
@@ -141,15 +112,8 @@
141112
display: block;
142113
width: 100%;
143114
height: 100%;
144-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
145-
@include focus-ring($border-width: var(--p-border-width-2));
146115

147-
#{$se23} & {
148-
/* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 override */
149-
@include no-focus-ring;
150-
border: var(--p-border-width-1-experimental) solid
151-
var(--p-color-border-input);
152-
}
116+
border: var(--p-border-width-1-experimental) solid var(--p-color-border-input);
153117

154118
&:hover {
155119
border-color: var(--p-color-border-input-hover);
@@ -158,48 +122,34 @@
158122

159123
.Icon {
160124
position: absolute;
161-
top: 50%;
162-
left: 50%;
163125
transform-origin: 50% 50%;
164126
pointer-events: none;
165-
166-
transform: translate3d(-50%, -50%, 0) scale(0.25);
167127
opacity: 0;
168-
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
169-
transform var(--p-motion-duration-100) var(--p-motion-ease);
170-
171-
#{$se23} & {
172-
top: calc(-1 * var(--p-space-05));
173-
left: calc(-1 * var(--p-space-05));
174-
bottom: calc(-1 * var(--p-space-05));
175-
right: calc(-1 * var(--p-space-05));
176-
/* stylelint-disable-next-line -- se23 override */
177-
transform: none !important;
178-
179-
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
180-
transform var(--p-motion-duration-100) var(--p-motion-ease-out);
181-
182-
&.animated {
183-
top: 0;
184-
left: 0;
185-
bottom: 0;
186-
right: 0;
187-
margin: var(--p-space-05);
188-
transform: none;
189-
transition: initial;
190-
}
128+
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
129+
transform var(--p-motion-duration-100) var(--p-motion-ease-out);
130+
131+
top: calc(-1 * var(--p-space-05));
132+
left: calc(-1 * var(--p-space-05));
133+
bottom: calc(-1 * var(--p-space-05));
134+
right: calc(-1 * var(--p-space-05));
135+
136+
&.animated {
137+
top: 0;
138+
left: 0;
139+
bottom: 0;
140+
right: 0;
141+
margin: var(--p-space-05);
142+
transition: initial;
191143
}
192144

193145
svg {
194146
fill: var(--p-color-icon-on-color);
195147

196-
#{$se23} & {
197-
position: absolute;
198-
top: 0;
199-
left: 0;
200-
bottom: 0;
201-
right: 0;
202-
}
148+
position: absolute;
149+
top: 0;
150+
left: 0;
151+
bottom: 0;
152+
right: 0;
203153
}
204154

205155
@media (-ms-high-contrast: active) {
@@ -217,53 +167,41 @@
217167
+ .Backdrop {
218168
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
219169
@include control-backdrop(error);
220-
#{$se23} & {
221-
background-color: var(--p-color-bg-critical-subdued);
222-
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
223-
var(--p-color-bg-critical-strong-active);
224-
}
170+
background-color: var(--p-color-bg-critical-subdued);
171+
box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
172+
var(--p-color-bg-critical-strong-active);
225173
}
226174
}
227175

228176
.Backdrop {
229177
&:active {
230-
#{$se23} & {
231-
box-shadow: inset 0 0 0 var(--p-space-05)
232-
var(--p-color-bg-critical-strong-active);
233-
}
178+
box-shadow: inset 0 0 0 var(--p-space-05)
179+
var(--p-color-bg-critical-strong-active);
234180
}
235181
}
236182

237183
.Input:checked,
238184
.Input.Input-indeterminate {
239185
+ .Backdrop {
240186
background-color: var(--p-color-border-critical);
241-
#{$se23} & {
242-
// stylelint-disable declaration-no-important -- se23
243-
box-shadow: inset 0 0 0 var(--p-space-3)
244-
var(--p-color-bg-critical-strong-active) !important;
245-
// stylelint-enable declaration-no-important
246-
}
187+
box-shadow: inset 0 0 0 var(--p-space-3)
188+
var(--p-color-bg-critical-strong-active);
247189
}
248190
}
249191

250192
.Input:active {
251193
+ .Backdrop {
252194
background-color: var(--p-color-border-critical);
253-
#{$se23} & {
254-
box-shadow: inset 0 0 0 var(--p-space-05)
255-
var(--p-color-bg-critical-strong-active);
256-
}
195+
box-shadow: inset 0 0 0 var(--p-space-05)
196+
var(--p-color-bg-critical-strong-active);
257197
}
258198
}
259199

260200
.Input:focus-visible + .Backdrop {
261201
&,
262202
.ChoiceLabel:hover & {
263-
#{$se23} & {
264-
border-color: var(--p-color-border-critical-strong-experimental);
265-
background-color: var(--p-color-bg-critical-subdued);
266-
}
203+
border-color: var(--p-color-border-critical-strong-experimental);
204+
background-color: var(--p-color-bg-critical-subdued);
267205
}
268206
}
269207
}

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React, {
55
useContext,
66
useId,
77
} from 'react';
8-
import {MinusMinor, TickSmallMinor} from '@shopify/polaris-icons';
8+
import {MinusMinor} from '@shopify/polaris-icons';
99

1010
import {classNames} from '../../utilities/css';
1111
import type {ResponsiveProp} from '../../utilities/css';
@@ -15,7 +15,6 @@ import {errorTextID} from '../InlineError';
1515
import {Icon} from '../Icon';
1616
import type {Error, CheckboxHandles} from '../../types';
1717
import {WithinListboxContext} from '../../utilities/listbox/context';
18-
import {useFeatures} from '../../utilities/features';
1918

2019
import styles from './Checkbox.scss';
2120

@@ -85,7 +84,6 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
8584
const uniqId = useId();
8685
const id = idProp ?? uniqId;
8786
const isWithinListbox = useContext(WithinListboxContext);
88-
const {polarisSummerEditions2023} = useFeatures();
8987

9088
useImperativeHandle(ref, () => ({
9189
focus: () => {
@@ -131,11 +129,7 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
131129
? {indeterminate: 'true', 'aria-checked': 'mixed' as const}
132130
: {'aria-checked': isChecked};
133131

134-
const iconSource = isIndeterminate ? MinusMinor : TickSmallMinor;
135-
136-
const animatedTickIcon = polarisSummerEditions2023 && !isIndeterminate;
137-
138-
const iconSourceSe23 = (
132+
const iconSource = (
139133
<svg
140134
viewBox="0 0 16 16"
141135
shapeRendering="geometricPrecision"
@@ -209,10 +203,10 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
209203
<span
210204
className={classNames(
211205
styles.Icon,
212-
animatedTickIcon && styles.animated,
206+
!isIndeterminate && styles.animated,
213207
)}
214208
>
215-
{animatedTickIcon ? iconSourceSe23 : <Icon source={iconSource} />}
209+
{isIndeterminate ? <Icon source={MinusMinor} /> : iconSource}
216210
</span>
217211
</span>
218212
</Choice>

‎polaris-react/src/styles/shared/_controls.scss‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,6 @@
1313
background-color: var(--p-color-bg);
1414
border-radius: var(--p-border-radius-1);
1515

16-
&::before {
17-
content: '';
18-
position: absolute;
19-
top: calc(-1 * var(--p-border-width-2));
20-
right: calc(-1 * var(--p-border-width-2));
21-
bottom: calc(-1 * var(--p-border-width-2));
22-
left: calc(-1 * var(--p-border-width-2));
23-
border-radius: var(--p-border-radius-1);
24-
background-color: var(--p-color-bg-interactive);
25-
opacity: 0;
26-
transform: scale(0.25);
27-
transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
28-
transform var(--p-motion-duration-100) var(--p-motion-ease);
29-
30-
#{$se23} & {
31-
content: none;
32-
}
33-
}
34-
3516
&.hover,
3617
&:hover {
3718
cursor: pointer;

0 commit comments

Comments
 (0)