Skip to content

Commit b162585

Browse files
castastrophecastastrophe
committed
fix(clear-button,styles): style updates from latest release
1 parent 5bfb3f3 commit b162585

File tree

8 files changed

+152
-348
lines changed

8 files changed

+152
-348
lines changed

‎.changeset/hot-cups-report.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@spectrum-web-components/clear-button': patch
3+
'@spectrum-web-components/styles': patch
4+
---
5+
6+
More details forthcoming

‎packages/button/src/ClearButton.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,16 @@ export class ClearButton extends SizedMixin(StyledButton, {
6666

6767
/**
6868
* The visual variant to apply to this button.
69+
* @deprecated Use `static-color='white'` instead.
6970
*/
7071
@property({ reflect: true })
71-
public variant: 'overBackground' | '' = '';
72+
public variant: 'overBackground' | undefined;
73+
74+
/**
75+
* The visual variant to apply to this button.
76+
*/
77+
@property({ reflect: true })
78+
public staticColor: 'white' | undefined;
7279

7380
protected override get buttonContent(): TemplateResult[] {
7481
return [crossIcon[this.size]()];

‎packages/clear-button/src/clear-button-overrides.css

+4-78
Original file line numberDiff line numberDiff line change
@@ -24,90 +24,16 @@ governing permissions and limitations under the License.
2424
--spectrum-clear-button-background-color-key-focus: var(
2525
--system-clear-button-background-color-key-focus
2626
);
27-
--spectrum-clear-button-height: var(--system-clear-button-height);
28-
--spectrum-clear-button-width: var(--system-clear-button-width);
29-
--spectrum-clear-button-padding: var(--system-clear-button-padding);
30-
--spectrum-clear-button-icon-color: var(--system-clear-button-icon-color);
31-
--spectrum-clear-button-icon-color-hover: var(
32-
--system-clear-button-icon-color-hover
33-
);
34-
--spectrum-clear-button-icon-color-down: var(
35-
--system-clear-button-icon-color-down
36-
);
37-
--spectrum-clear-button-icon-color-key-focus: var(
38-
--system-clear-button-icon-color-key-focus
39-
);
40-
}
41-
42-
:host([size='s']) {
43-
--spectrum-clear-button-height: var(--system-clear-button-size-s-height);
44-
--spectrum-clear-button-width: var(--system-clear-button-size-s-width);
45-
}
46-
47-
:host([size='l']) {
48-
--spectrum-clear-button-height: var(--system-clear-button-size-l-height);
49-
--spectrum-clear-button-width: var(--system-clear-button-size-l-width);
50-
}
51-
52-
:host([size='xl']) {
53-
--spectrum-clear-button-height: var(--system-clear-button-size-xl-height);
54-
--spectrum-clear-button-width: var(--system-clear-button-size-xl-width);
55-
}
56-
57-
:host .spectrum-ClearButton--quiet {
58-
--spectrum-clear-button-background-color: var(
59-
--system-clear-button-quiet-background-color
60-
);
61-
--spectrum-clear-button-background-color-hover: var(
62-
--system-clear-button-quiet-background-color-hover
63-
);
64-
--spectrum-clear-button-background-color-down: var(
65-
--system-clear-button-quiet-background-color-down
66-
);
67-
--spectrum-clear-button-background-color-key-focus: var(
68-
--system-clear-button-quiet-background-color-key-focus
69-
);
7027
}
7128

72-
:host([variant='overBackground']) {
73-
--spectrum-clear-button-icon-color: var(
74-
--system-clear-button-over-background-icon-color
75-
);
76-
--spectrum-clear-button-icon-color-hover: var(
77-
--system-clear-button-over-background-icon-color-hover
78-
);
79-
--spectrum-clear-button-icon-color-down: var(
80-
--system-clear-button-over-background-icon-color-down
81-
);
82-
--spectrum-clear-button-icon-color-key-focus: var(
83-
--system-clear-button-over-background-icon-color-key-focus
84-
);
85-
--spectrum-clear-button-background-color: var(
86-
--system-clear-button-over-background-background-color
87-
);
29+
:host([static-color='white']) {
8830
--spectrum-clear-button-background-color-hover: var(
89-
--system-clear-button-over-background-background-color-hover
31+
--system-clear-button-static-white-background-color-hover
9032
);
9133
--spectrum-clear-button-background-color-down: var(
92-
--system-clear-button-over-background-background-color-down
34+
--system-clear-button-static-white-background-color-down
9335
);
9436
--spectrum-clear-button-background-color-key-focus: var(
95-
--system-clear-button-over-background-background-color-key-focus
96-
);
97-
}
98-
99-
:host([disabled]),
100-
:host([disabled]) {
101-
--spectrum-clear-button-icon-color: var(
102-
--system-clear-button-disabled-icon-color
103-
);
104-
--spectrum-clear-button-icon-color-hover: var(
105-
--system-clear-button-disabled-icon-color-hover
106-
);
107-
--spectrum-clear-button-icon-color-down: var(
108-
--system-clear-button-disabled-icon-color-down
109-
);
110-
--spectrum-clear-button-background-color: var(
111-
--system-clear-button-disabled-background-color
37+
--system-clear-button-static-white-background-color-key-focus
11238
);
11339
}

‎packages/clear-button/src/spectrum-clear-button.css

+61-19
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,15 @@ governing permissions and limitations under the License.
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
15+
--spectrum-clear-button-height: var(--spectrum-component-height-100);
16+
--spectrum-clear-button-width: var(--spectrum-component-height-100);
17+
--spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
18+
--spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
19+
--spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
20+
--spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
21+
--spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
1522
block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
1623
inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
17-
cursor: pointer;
18-
background-color: initial;
1924
background-color: var(--mod-clear-button-background-color, transparent);
2025
padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
2126
color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
@@ -24,47 +29,83 @@ governing permissions and limitations under the License.
2429
margin: 0;
2530
}
2631

32+
:host([size='s']) {
33+
--spectrum-clear-button-height: var(--spectrum-component-height-75);
34+
--spectrum-clear-button-width: var(--spectrum-component-height-75);
35+
}
36+
37+
:host([size='l']) {
38+
--spectrum-clear-button-height: var(--spectrum-component-height-200);
39+
--spectrum-clear-button-width: var(--spectrum-component-height-200);
40+
}
41+
42+
:host([size='xl']) {
43+
--spectrum-clear-button-height: var(--spectrum-component-height-300);
44+
--spectrum-clear-button-width: var(--spectrum-component-height-300);
45+
}
46+
47+
:host([quiet]) {
48+
--mod-clear-button-background-color: transparent;
49+
--mod-clear-button-background-color-hover: transparent;
50+
--mod-clear-button-background-color-down: transparent;
51+
--mod-clear-button-background-color-key-focus: transparent;
52+
}
53+
54+
:host([static-color='white']) {
55+
--mod-clear-button-icon-color: var(--spectrum-white);
56+
--mod-clear-button-icon-color-hover: var(--spectrum-white);
57+
--mod-clear-button-icon-color-down: var(--spectrum-white);
58+
--mod-clear-button-icon-color-key-focus: var(--spectrum-white);
59+
--mod-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
60+
--mod-clear-button-background-color: transparent;
61+
}
62+
63+
:host([disabled]) {
64+
--mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
65+
--mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color);
66+
--mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color);
67+
--mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
68+
}
69+
70+
:host:not(:disabled) {
71+
cursor: pointer;
72+
}
73+
2774
.icon {
2875
margin-block: 0;
2976
margin-inline: auto;
3077
}
3178

3279
@media (hover: hover) {
33-
:host(:hover) {
80+
:host(:hover):not(:disabled) {
3481
color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
3582
}
3683

37-
:host(:hover) .fill {
84+
:host(:hover):not(:disabled) .fill {
3885
background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
3986
}
4087
}
4188

42-
:host(:is(:active, [active])) {
89+
:host(:is(:active, [active])):not(:disabled) {
4390
color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down));
4491
}
4592

46-
:host(:is(:active, [active])) .fill {
93+
:host(:is(:active, [active])):not(:disabled) .fill {
4794
background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down));
4895
}
4996

50-
:host([focus-within]) .js-focus-within,
51-
:host(:focus-visible),
52-
:host:focus-within,
53-
:host([focus-within]) .js-focus-within {
97+
:host:not(:disabled):focus-visible,
98+
:host:not(:disabled):focus-within {
5499
color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus));
55100
}
56101

57-
:host([focus-within]) .js-focus-within .fill,
58-
:host(:focus-visible) .fill,
59-
:host:focus-within .fill,
60-
:host([focus-within]) .js-focus-within .fill {
102+
:host:not(:disabled):focus-visible .fill,
103+
:host:not(:disabled):focus-within .fill {
61104
background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
62105
}
63106

64-
:host([disabled]),
65-
:host([disabled]) {
66-
--spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
67-
--spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
107+
.icon {
108+
color: inherit;
68109
}
69110

70111
.fill {
@@ -77,7 +118,8 @@ governing permissions and limitations under the License.
77118
display: flex;
78119
}
79120

80-
:host([variant='overBackground']:focus-visible) {
121+
:host([variant='overBackground']:focus-visible),
122+
:host([static-color='white']:focus-visible) {
81123
outline: none;
82124
}
83125

‎packages/clear-button/src/spectrum-config.js

+55-16
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,20 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1111
governing permissions and limitations under the License.
1212
*/
1313

14-
import { converterFor } from '../../../tasks/process-spectrum-utils.js';
14+
import {
15+
builder,
16+
converterFor,
17+
} from '../../../tasks/process-spectrum-utils.js';
1518

1619
const converter = converterFor('spectrum-ClearButton');
1720

21+
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
22+
const notDisabled = (type = 'pseudoClass') => ({
23+
type: 'pseudo-class',
24+
kind: 'not',
25+
selectors: builder[type]?.('disabled'),
26+
});
27+
1828
/**
1929
* @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
2030
*/
@@ -24,13 +34,15 @@ const config = {
2434
inPackage: '@spectrum-css/clearbutton',
2535
outPackage: 'clear-button',
2636
fileName: 'clear-button',
37+
excludeByComponents: [
38+
// is-disabled is a duplicate of the :disabled pseudo-class
39+
builder.class('is-disabled'),
40+
],
2741
components: [
2842
converter.classToHost(),
43+
converter.classToAttribute('spectrum-ClearButton--quiet'),
2944
{
30-
find: {
31-
type: 'pseudo-class',
32-
kind: 'active',
33-
},
45+
find: builder.pseudoClass('active'),
3446
replace: {
3547
type: 'pseudo-class',
3648
kind: 'is',
@@ -52,14 +64,12 @@ const config = {
5264
hoist: true,
5365
},
5466
converter.pseudoToAttribute('disabled', 'disabled'),
55-
converter.classToAttribute('is-disabled', 'disabled'),
5667
...converter.enumerateAttributes(
5768
[
58-
['spectrum-ClearButton--cta'],
59-
['spectrum-ClearButton--primary'],
60-
['spectrum-ClearButton--secondary'],
61-
['spectrum-ClearButton--overBackground'],
62-
['spectrum-ClearButton--warning', 'negative'],
69+
[
70+
'spectrum-ClearButton--overBackground',
71+
'overBackground',
72+
],
6373
],
6474
'variant'
6575
),
@@ -75,12 +85,41 @@ const config = {
7585
),
7686
converter.classToClass('spectrum-Icon', 'icon'),
7787
converter.classToClass('spectrum-ClearButton-fill'),
78-
],
79-
excludeByComponents: [
88+
converter.classToClass('spectrum-ClearButton-icon'),
89+
...converter.enumerateAttributes(
90+
[['spectrum-ClearButton--staticWhite', 'white']],
91+
'static-color'
92+
),
93+
{
94+
find: builder.pseudoClass('hover'),
95+
replace: builder.pseudoClass('hover'),
96+
hoist: true,
97+
},
8098
{
81-
type: 'pseudo-element',
82-
kind: 'custom',
83-
name: '-moz-focus-inner',
99+
find: notDisabled(),
100+
replace: notDisabled('attribute'),
101+
hoist: true,
102+
},
103+
{
104+
find: [notDisabled(), builder.pseudoClass('focus-visible')],
105+
replace: [
106+
builder.pseudoClass('focus-visible'),
107+
notDisabled('attribute'),
108+
],
109+
hoist: true,
110+
},
111+
{
112+
find: [notDisabled(), builder.pseudoClass('focus-within')],
113+
replace: [
114+
builder.attribute('focus-within'),
115+
notDisabled('attribute'),
116+
],
117+
hoist: true,
118+
},
119+
{
120+
find: notDisabled(),
121+
replace: notDisabled('attribute'),
122+
hoist: true,
84123
},
85124
],
86125
},

0 commit comments

Comments
 (0)