Skip to content

Commit 2c718dc

Browse files
gwyneplainegwyneplaine
authored
[Filters] consolidate se23 logic and styles (#10178)
<!-- ☝️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 #9934 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? - consolidate se23 logic - consolidate se23 styles ### How to 🎩 - [Storybook](https://5d559397bae39100201eedc1-avqvvftkub.chromatic.com/?path=/story/all-components-filters--with-a-resource-list) - [Prod storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-filters--with-a-resource-list&globals=polarisSummerEditions2023:true) ### 🎩 checklist - [x] 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 2b0cdb2 commit 2c718dc

File tree

7 files changed

+74
-239
lines changed

7 files changed

+74
-239
lines changed

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

Lines changed: 24 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,9 @@
7878
}
7979

8080
.AddFilter {
81-
background: var(--p-color-bg-subdued);
82-
border-radius: var(--p-border-radius-6);
83-
border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
81+
background: var(--p-color-bg);
82+
border-radius: var(--p-border-radius-2);
83+
border: var(--p-color-border) dashed var(--p-border-width-1);
8484
padding: 0 var(--p-space-2) 0 var(--p-space-3);
8585
height: 28px;
8686
cursor: pointer;
@@ -106,22 +106,30 @@
106106

107107
&:hover,
108108
&:focus {
109-
background: var(--p-color-bg-hover);
109+
background: transparent;
110110
border-color: var(--p-color-border-hover);
111111

112112
path {
113113
fill: var(--p-color-icon-hover);
114114
}
115115
}
116116

117+
&:hover {
118+
border-style: solid;
119+
}
120+
121+
&:focus {
122+
outline-offset: var(--p-border-width-2);
123+
}
124+
117125
&:active {
118-
background: var(--p-color-bg-active);
126+
background: var(--p-color-bg-secondary-experimental);
119127
border-color: var(--p-color-border-hover);
120128
}
121129

122130
&[aria-disabled='true'] {
123-
background: var(--p-color-bg-disabled);
124-
border-color: var(--p-color-border-disabled);
131+
background: var(--p-color-bg-transparent-disabled-experimental);
132+
border-color: transparent;
125133
color: var(--p-color-text-disabled);
126134
cursor: default;
127135

@@ -136,7 +144,7 @@
136144
}
137145

138146
&::after {
139-
border-radius: var(--p-border-radius-6);
147+
border-radius: var(--p-border-radius-2);
140148
}
141149

142150
span {
@@ -154,34 +162,6 @@
154162
width: var(--p-space-4);
155163
}
156164
}
157-
158-
#{$se23} & {
159-
background: var(--p-color-bg-secondary-experimental);
160-
border-radius: var(--p-border-radius-2);
161-
border: var(--p-color-border) dashed var(--p-border-width-1);
162-
163-
&:hover {
164-
background: transparent;
165-
border-style: solid;
166-
}
167-
168-
&:focus {
169-
background: transparent;
170-
outline-offset: var(--p-border-width-2);
171-
}
172-
173-
&:active {
174-
background: var(--p-color-bg-subdued);
175-
176-
#{$se23} & {
177-
background: var(--p-color-bg-secondary-experimental);
178-
}
179-
}
180-
181-
&::after {
182-
border-radius: var(--p-border-radius-2);
183-
}
184-
}
185165
}
186166

187167
@media #{$p-breakpoints-md-down} {
@@ -247,32 +227,22 @@
247227
}
248228

249229
.ClearAll {
250-
margin-left: var(--p-space-1);
230+
margin-left: var(--p-space-2);
251231

252-
#{$se23} & {
253-
margin-left: var(--p-space-2);
254-
255-
// stylelint-disable-next-line -- se23 overrides
256-
span {
257-
font-size: var(--p-font-size-75);
258-
font-weight: var(--p-font-weight-medium);
259-
}
232+
span {
233+
font-size: var(--p-font-size-75);
234+
font-weight: var(--p-font-weight-medium);
260235
}
261236
}
262237

263238
@media #{$p-breakpoints-md-down} {
264239
.ClearAll {
265-
margin-left: var(--p-space-2);
240+
margin-left: 0;
266241
padding-right: var(--p-space-4);
267242

268-
#{$se23} & {
269-
margin-left: 0;
270-
271-
// stylelint-disable-next-line -- se23 overrides
272-
span {
273-
font-size: var(--p-font-size-100);
274-
font-weight: var(--p-font-weight-medium);
275-
}
243+
span {
244+
font-size: var(--p-font-size-100);
245+
font-weight: var(--p-font-weight-medium);
276246
}
277247
}
278248

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

Lines changed: 14 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {Text} from '../Text';
1010
import {UnstyledButton} from '../UnstyledButton';
1111
import {classNames} from '../../utilities/css';
1212
import {useBreakpoints} from '../../utilities/breakpoints';
13-
import {useFeatures} from '../../utilities/features';
1413
import type {
1514
ActionListItemDescriptor,
1615
AppliedFilterInterface,
@@ -139,7 +138,6 @@ export function Filters({
139138
}: FiltersProps) {
140139
const i18n = useI18n();
141140
const {mdDown} = useBreakpoints();
142-
const {polarisSummerEditions2023: se23} = useFeatures();
143141
const [popoverActive, setPopoverActive] = useState(false);
144142
const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>([]);
145143
const hasMounted = useRef(false);
@@ -231,8 +229,7 @@ export function Filters({
231229

232230
const hasOneOrMorePinnedFilters = pinnedFilters.length >= 1;
233231

234-
const se23LabelVariant = mdDown && se23 ? 'bodyLg' : 'bodySm';
235-
const labelVariant = mdDown ? 'bodyMd' : 'bodySm';
232+
const labelVariant = mdDown ? 'bodyLg' : 'bodySm';
236233

237234
const addFilterActivator = (
238235
<div>
@@ -247,7 +244,7 @@ export function Filters({
247244
disableFilters
248245
}
249246
>
250-
<Text variant={se23 ? se23LabelVariant : labelVariant} as="span">
247+
<Text variant={labelVariant} as="span">
251248
{i18n.translate('Polaris.Filters.addFilter')}{' '}
252249
</Text>
253250
<PlusMinor />
@@ -273,35 +270,17 @@ export function Filters({
273270
);
274271
}, [loading, children]);
275272

276-
const containerSpacing:
277-
| {
278-
paddingBlockStart: BoxProps['paddingBlockStart'];
279-
paddingBlockEnd: BoxProps['paddingBlockEnd'];
280-
paddingInlineStart: BoxProps['paddingInlineStart'];
281-
paddingInlineEnd: BoxProps['paddingInlineEnd'];
282-
}
283-
| {padding: BoxProps['padding']} = se23
284-
? {
285-
paddingInlineStart: '2',
286-
paddingInlineEnd: '2',
287-
paddingBlockStart: '1_5-experimental',
288-
paddingBlockEnd: '1_5-experimental',
289-
}
290-
: {
291-
paddingBlockStart: {
292-
xs: '3',
293-
md: '2',
294-
},
295-
paddingBlockEnd: {
296-
xs: '3',
297-
md: '2',
298-
},
299-
paddingInlineStart: '2',
300-
paddingInlineEnd: {
301-
xs: '4',
302-
md: '3',
303-
},
304-
};
273+
const containerSpacing: {
274+
paddingBlockStart: BoxProps['paddingBlockStart'];
275+
paddingBlockEnd: BoxProps['paddingBlockEnd'];
276+
paddingInlineStart: BoxProps['paddingInlineStart'];
277+
paddingInlineEnd: BoxProps['paddingInlineEnd'];
278+
} = {
279+
paddingInlineStart: '2',
280+
paddingInlineEnd: '2',
281+
paddingBlockStart: '1_5-experimental',
282+
paddingBlockEnd: '1_5-experimental',
283+
};
305284

306285
const queryFieldMarkup = hideQueryField ? null : (
307286
<div className={styles.Container}>
@@ -414,7 +393,7 @@ export function Filters({
414393
size="micro"
415394
onClick={handleClearAllFilters}
416395
removeUnderline
417-
variant="tertiary"
396+
variant="monochromePlain"
418397
>
419398
{i18n.translate('Polaris.Filters.clearFilters')}
420399
</Button>

‎polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss‎

Lines changed: 22 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@import '../../../../styles/common';
22

33
.FilterButton {
4-
background: var(--p-color-bg-subdued);
5-
border-radius: var(--p-border-radius-6);
6-
border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
4+
background: var(--p-color-bg);
5+
border-radius: var(--p-border-radius-2);
6+
border: var(--p-color-border) dashed var(--p-border-width-1);
77
cursor: pointer;
88
color: var(--p-color-text);
99

@@ -26,8 +26,22 @@
2626
}
2727
}
2828

29+
&:hover,
30+
&:active {
31+
border-style: solid;
32+
}
33+
34+
&:hover,
35+
&:focus {
36+
background: transparent;
37+
}
38+
39+
&:active {
40+
background: var(--p-color-bg-subdued);
41+
}
42+
2943
&.disabledFilterButton {
30-
background: var(--p-color-bg-disabled);
44+
background: var(--p-color-bg-transparent-disabled-experimental);
3145
border-color: var(--p-color-border-disabled);
3246
color: var(--p-color-text-disabled);
3347
cursor: default;
@@ -36,58 +50,14 @@
3650
&.ActiveFilterButton {
3751
background: var(--p-color-bg);
3852
border-style: solid;
39-
}
40-
41-
&::after {
42-
border-radius: var(--p-border-radius-6);
43-
}
44-
45-
#{$se23} & {
46-
background: var(--p-color-bg-secondary-experimental);
47-
border-radius: var(--p-border-radius-2);
48-
border: var(--p-color-border) dashed var(--p-border-width-1);
49-
50-
&:hover,
51-
&:active {
52-
border-style: solid;
53-
}
54-
55-
&:hover,
56-
&:focus {
57-
background: transparent;
58-
}
5953

6054
&:active {
6155
background: var(--p-color-bg-subdued);
62-
63-
#{$se23} & {
64-
background: var(--p-color-bg-secondary-experimental);
65-
}
66-
}
67-
68-
&.disabledFilterButton {
69-
background: var(--p-color-bg-disabled);
70-
border-color: var(--p-color-border-disabled);
71-
color: var(--p-color-text-disabled);
72-
cursor: default;
73-
}
74-
75-
&.ActiveFilterButton {
76-
background: var(--p-color-bg);
77-
border-style: solid;
78-
79-
&:active {
80-
background: var(--p-color-bg-subdued);
81-
82-
#{$se23} & {
83-
background: var(--p-color-bg-secondary-experimental);
84-
}
85-
}
8656
}
57+
}
8758

88-
&::after {
89-
border-radius: var(--p-border-radius-2);
90-
}
59+
&::after {
60+
border-radius: var(--p-border-radius-2);
9161
}
9262
}
9363

@@ -161,7 +131,7 @@
161131
}
162132

163133
.ClearButtonWrapper {
164-
#{$se23} & button {
134+
button {
165135
min-height: 0;
166136
padding: 0;
167137
margin: 0;

‎polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import React, {useState, useEffect, useRef} from 'react';
2-
import {
3-
CancelSmallMinor,
4-
CaretDownMinor,
5-
ChevronDownMinor,
6-
} from '@shopify/polaris-icons';
2+
import {CancelSmallMinor, ChevronDownMinor} from '@shopify/polaris-icons';
73

84
import {useI18n} from '../../../../utilities/i18n';
95
import {useToggle} from '../../../../utilities/use-toggle';
@@ -15,7 +11,6 @@ import {Text} from '../../../Text';
1511
import {InlineStack} from '../../../InlineStack';
1612
import {UnstyledButton} from '../../../UnstyledButton';
1713
import {useBreakpoints} from '../../../../utilities/breakpoints';
18-
import {useFeatures} from '../../../../utilities/features';
1914
import {classNames} from '../../../../utilities/css';
2015
import type {FilterInterface} from '../../../../types';
2116

@@ -52,7 +47,6 @@ export function FilterPill({
5247
}: FilterPillProps) {
5348
const i18n = useI18n();
5449
const {mdDown} = useBreakpoints();
55-
const {polarisSummerEditions2023} = useFeatures();
5650

5751
const elementRef = useRef<HTMLDivElement>(null);
5852
const {
@@ -113,16 +107,11 @@ export function FilterPill({
113107
styles.ToggleButton,
114108
);
115109

116-
const se23LabelVariant =
117-
mdDown && polarisSummerEditions2023 ? 'bodyLg' : 'bodySm';
118-
const labelVariant = mdDown ? 'bodyMd' : 'bodySm';
110+
const labelVariant = mdDown ? 'bodyLg' : 'bodySm';
119111

120112
const wrappedLabel = (
121113
<div className={styles.Label}>
122-
<Text
123-
variant={polarisSummerEditions2023 ? se23LabelVariant : labelVariant}
124-
as="span"
125-
>
114+
<Text variant={labelVariant} as="span">
126115
{label}
127116
</Text>
128117
</div>
@@ -146,14 +135,7 @@ export function FilterPill({
146135
<>
147136
{wrappedLabel}
148137
<div className={styles.IconWrapper}>
149-
<Icon
150-
source={
151-
polarisSummerEditions2023
152-
? ChevronDownMinor
153-
: CaretDownMinor
154-
}
155-
tone="base"
156-
/>
138+
<Icon source={ChevronDownMinor} tone="base" />
157139
</div>
158140
</>
159141
)}

0 commit comments

Comments
 (0)