Skip to content

Commit 1f15ad6

Browse files
gwyneplainesam-b-rose
authored andcommitted
[Choice] Consolidate se23 logic and styles (#10013)
<!-- ☝️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 #9928 <!-- 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 --> - Consolidate styles in Choice.scss - Consolidates logic in Choice.tsx ### How to 🎩 * [Branch Storybook](https://5d559397bae39100201eedc1-ltqoskeqza.chromatic.com/?path=/story/all-components-checkbox--default) * [Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-checkbox--default&globals=polarisSummerEditions2023:true) ### 🎩 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 3eb4ec6 commit 1f15ad6

File tree

3 files changed

+9
-37
lines changed

3 files changed

+9
-37
lines changed

polaris-react/src/components/Choice/Choice.scss

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
);
3535
@include responsive-props('choice', 'fill', '--pc-choice-fill');
3636
display: inline-flex;
37+
align-items: center;
3738
justify-content: flex-start;
3839
cursor: pointer;
3940
padding-block-start: calc(
@@ -78,10 +79,6 @@
7879
var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) +
7980
var(--pc-choice-bleed-block-end, var(--pc-choice-space-0))
8081
);
81-
82-
#{$se23} & {
83-
align-items: center;
84-
}
8582
}
8683

8784
.labelHidden {
@@ -120,28 +117,18 @@
120117
}
121118

122119
.disabled + .Descriptions {
123-
#{$se23} & {
124-
// the <Text/> component in the HelpText markup in Choice.tsx is set to `undefined` when the disabled prop is true
125-
// Which tells it to inherit whatever color we specify here.
126-
color: var(--p-color-text-disabled);
127-
}
120+
// the <Text/> component in the HelpText markup in Choice.tsx is set to `undefined` when the disabled prop is true
121+
// Which tells it to inherit whatever color we specify here.
122+
color: var(--p-color-text-disabled);
128123
}
129124

130125
.Control {
131126
// stylelint-disable-next-line -- Polaris component custom properties
132-
--pc-choice-size: 20px;
133-
#{$se23} & {
134-
// stylelint-disable-next-line -- PSE23 temporary property overrides
135-
--pc-choice-size: 18px;
136-
}
127+
--pc-choice-size: 18px;
137128

138129
@media #{$p-breakpoints-md-down} {
139130
// stylelint-disable-next-line -- Polaris component custom properties
140-
--pc-choice-size: 22px;
141-
#{$se23} & {
142-
// stylelint-disable-next-line -- PSE23 Polaris component custom properties
143-
--pc-choice-size: 20px;
144-
}
131+
--pc-choice-size: 20px;
145132
}
146133
display: flex;
147134
flex: 0 0 auto;
@@ -167,19 +154,11 @@
167154

168155
.Descriptions {
169156
// stylelint-disable-next-line -- Polaris component custom properties
170-
--pc-choice-size: 20px;
171-
#{$se23} & {
172-
// stylelint-disable-next-line -- PSE23 Polaris component custom properties
173-
--pc-choice-size: 18px;
174-
}
157+
--pc-choice-size: 18px;
175158

176159
@media #{$p-breakpoints-md-down} {
177160
// stylelint-disable-next-line -- Polaris component custom properties
178-
--pc-choice-size: 22px;
179-
#{$se23} {
180-
// stylelint-disable-next-line -- PSE23 Polaris component custom properties
181-
--pc-choice-size: 20px;
182-
}
161+
--pc-choice-size: 20px;
183162
}
184163
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
185164
padding-left: calc(var(--p-space-2) + var(--pc-choice-size));

polaris-react/src/components/Choice/Choice.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import type {ResponsiveProp} from '../../utilities/css';
1111
import type {Error} from '../../types';
1212
import {InlineError} from '../InlineError';
1313
import {Text} from '../Text';
14-
import {useFeatures} from '../../utilities/features';
1514

1615
import styles from './Choice.scss';
1716

@@ -90,7 +89,6 @@ export function Choice({
9089
bleedInlineStart,
9190
bleedInlineEnd,
9291
}: ChoiceProps) {
93-
const {polarisSummerEditions2023} = useFeatures();
9492
const className = classNames(
9593
styles.Choice,
9694
labelHidden && styles.labelHidden,
@@ -158,7 +156,7 @@ export function Choice({
158156
as="span"
159157
// `undefined` means color: inherit
160158
// the nearest ancestor with a specified color is .Descriptions in Choice.scss
161-
color={disabled && polarisSummerEditions2023 ? undefined : 'subdued'}
159+
color={disabled ? undefined : 'subdued'}
162160
>
163161
{helpText}
164162
</Text>

polaris-react/src/components/ResourceItem/ResourceItem.scss

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,6 @@
5858
height: 100%;
5959
}
6060

61-
.CheckboxLabel {
62-
// Pass-through the item alignment to the underlaying label
63-
align-items: inherit;
64-
}
65-
6661
// stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
6762
.focusedInner,
6863
.focusedInner.focused,

0 commit comments

Comments
 (0)