Skip to content

Commit 60685ce

Browse files
castastrophecastastrophe
authored
fix(search): update icon sizing calculation in the quiet variant (#3297)
1 parent 469f731 commit 60685ce

File tree

6 files changed

+47
-52
lines changed

6 files changed

+47
-52
lines changed

‎.changeset/dirty-suits-mix.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/search": patch
3+
---
4+
5+
Deprecated `--mod-workflow-icon-size-100` from the `.spectrum-Search--quiet` calculation of the `--spectrum-search-quiet-button-offset`. Use `--mod-search-icon-size` instead. Deprecated property will be removed in the next breaking change release.

‎components/clearbutton/index.css

+11-13
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,17 @@
2323
--spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
2424
--spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
2525
--spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
26+
27+
block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
28+
inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
29+
border-radius: 100%;
30+
31+
background-color: var(--mod-clear-button-background-color, transparent);
32+
margin: 0;
33+
padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
34+
35+
border: none;
36+
color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
2637

2738
&.spectrum-ClearButton--sizeS {
2839
--spectrum-clear-button-height: var(--spectrum-component-height-75);
@@ -71,24 +82,11 @@
7182
&.spectrum-ClearButton--staticWhite {
7283
--spectrum-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
7384
}
74-
}
75-
76-
.spectrum-ClearButton {
77-
block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
78-
inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
79-
border-radius: 100%;
8085

8186
&:not(:disabled) {
8287
cursor: pointer;
8388
}
8489

85-
background-color: var(--mod-clear-button-background-color, transparent);
86-
margin: 0;
87-
padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
88-
89-
border: none;
90-
color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
91-
9290
> .spectrum-Icon {
9391
/* @safari10 Workaround for https://bugs.webkit.org/show_bug.cgi?id=169700 */
9492
margin-block: 0;

‎components/search/index.css

+24-34
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,15 @@
8080
--mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color));
8181
--mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled));
8282
/* @passthrough end */
83+
84+
display: inline-block;
85+
position: relative;
86+
inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size));
87+
min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size));
88+
89+
.spectrum-HelpText {
90+
margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text));
91+
}
8392
}
8493

8594
.spectrum-Search--sizeS {
@@ -100,19 +109,6 @@
100109
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
101110
}
102111

103-
.spectrum-Search--quiet {
104-
--spectrum-search-quiet-button-offset: calc((var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2) - (var(--mod-workflow-icon-size-100, var(--spectrum-workflow-icon-size-100)) / 2));
105-
--spectrum-search-background-color: transparent;
106-
--spectrum-search-background-color-disabled: transparent;
107-
--spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
108-
109-
/* Added specificity, otherwise they are overridden by system specific themes. */
110-
&.spectrum-Search {
111-
--spectrum-search-border-radius: 0;
112-
--spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
113-
}
114-
}
115-
116112
@media (forced-colors: active) {
117113
.spectrum-Search .spectrum-Search-textfield,
118114
.spectrum-Search .spectrum-Search-textfield .spectrum-Search-input {
@@ -131,18 +127,6 @@
131127
}
132128
}
133129

134-
/* Standard / Default */
135-
.spectrum-Search {
136-
display: inline-block;
137-
position: relative;
138-
inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size));
139-
min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size));
140-
141-
.spectrum-HelpText {
142-
margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text));
143-
}
144-
}
145-
146130
.spectrum-Search-clearButton {
147131
position: absolute;
148132
inset-inline-end: 0;
@@ -198,18 +182,18 @@
198182
/* Without this, it gets overridden by .spectrum-Textfield */
199183
appearance: none;
200184

201-
/* Remove the inner padding and cancel buttons for input[type="search"] in Chrome and Safari on macOS. */
202-
&::-webkit-search-cancel-button,
203-
&::-webkit-search-decoration {
204-
appearance: none;
205-
}
206-
207185
block-size: var(--mod-search-block-size, var(--spectrum-search-block-size));
208186
padding-block-start: calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
209187
padding-block-end: calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
210188

211189
font-style: var(--mod-search-font-style, var(--spectrum-search-font-style));
212190
line-height: var(--mod-search-line-height, var(--spectrum-search-line-height));
191+
192+
/* Remove the inner padding and cancel buttons for input[type="search"] in Chrome and Safari on macOS. */
193+
&::-webkit-search-cancel-button,
194+
&::-webkit-search-decoration {
195+
appearance: none;
196+
}
213197
}
214198

215199
/* Standard / Default Only */
@@ -226,14 +210,20 @@
226210

227211
/* Quiet Variant */
228212
.spectrum-Search--quiet {
229-
.spectrum-Search-clearButton .spectrum-ClearButton-icon {
230-
transform: translateX(var(--mod-search-quiet-button-offset, var(--spectrum-search-quiet-button-offset)));
213+
--spectrum-search-background-color: transparent;
214+
--spectrum-search-background-color-disabled: transparent;
215+
--spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
216+
217+
/* Added specificity, otherwise they are overridden by system specific themes. */
218+
&.spectrum-Search {
219+
--spectrum-search-border-radius: 0;
220+
--spectrum-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
231221
}
232222

233223
&.spectrum-Search .spectrum-Search-input {
234224
border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
235225
padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)));
236-
padding-inline-end: calc(var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - var(--mod-search-quiet-button-offset, var(--spectrum-search-quiet-button-offset)));
226+
padding-inline-end: calc(var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - var(--mod-search-quiet-button-offset, calc(var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / 2)));
237227
padding-block-start: var(--mod-search-top-to-text, var(--spectrum-search-top-to-text));
238228
}
239229
}

‎components/search/metadata/metadata.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
".spectrum-Search .spectrum-Search-textfield",
88
".spectrum-Search .spectrum-Search-textfield .spectrum-Search-input",
99
".spectrum-Search--quiet",
10-
".spectrum-Search--quiet .spectrum-Search-clearButton .spectrum-ClearButton-icon",
1110
".spectrum-Search--quiet.spectrum-Search",
1211
".spectrum-Search--quiet.spectrum-Search .spectrum-Search-input",
1312
".spectrum-Search--sizeL",
@@ -65,8 +64,7 @@
6564
"--mod-search-quiet-button-offset",
6665
"--mod-search-text-to-icon",
6766
"--mod-search-to-help-text",
68-
"--mod-search-top-to-text",
69-
"--mod-workflow-icon-size-100"
67+
"--mod-search-top-to-text"
7068
],
7169
"component": [
7270
"--spectrum-search-background-color",
@@ -101,7 +99,6 @@
10199
"--spectrum-search-inline-size",
102100
"--spectrum-search-line-height",
103101
"--spectrum-search-min-inline-size",
104-
"--spectrum-search-quiet-button-offset",
105102
"--spectrum-search-text-to-icon",
106103
"--spectrum-search-to-help-text",
107104
"--spectrum-search-top-to-text"

‎components/search/metadata/mods.md

-1
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,3 @@
3434
| `--mod-search-text-to-icon` |
3535
| `--mod-search-to-help-text` |
3636
| `--mod-search-top-to-text` |
37-
| `--mod-workflow-icon-size-100` |

‎components/search/stories/search.stories.js

+6
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,9 @@ HelpText.args = {
8383
hasDescription: true,
8484
};
8585
HelpText.tags = ["!dev"];
86+
HelpText.parameters = {
87+
chromatic: { disableSnapshot: true },
88+
};
8689

8790
/**
8891
* A quiet search field can be used when searching isn’t a high priority action on the page. These search fields have no visible background, and this style works best when a clear layout makes the field easy to recognize. Too many quiet components in a small space can be hard to read.
@@ -92,6 +95,9 @@ Quiet.args = {
9295
isQuiet: true,
9396
};
9497
Quiet.tags = ["!dev"];
98+
Quiet.parameters = {
99+
chromatic: { disableSnapshot: true },
100+
};
95101

96102

97103
/**

0 commit comments

Comments
 (0)