Skip to content

Commit 89a3f2b

Browse files
mdt2Melissa Thompson
mdt2
and
Melissa Thompson
authored
feat(search): s2 search field migration (#2673)
* chore: move forced colors to bottom for cascade * feat: token value adjustments and design spec alignment - rearranges where some of the textfield mods are (passthroughs) - adds styles for focus+hover in testing - clarifies where the custom properties are in the files - adds some missing tokens for block-start/block-end - removes whitespace in some of the style and/or mod declarations - reimplements custom --spectrum-corner-rounding-full token in global.vars after rebase - removes selectors that are not needed for the border color in key- boardFocus+hover, and colors in mouseFocus+hover states * chore: previous versions for migration guide - removes a stray isQuiet arg from stories * chore: update component name to align with design spec - also updates component name case * docs(search): show new options - remove quiet variant - adds help text story - adds inputValue to control table and corresponding behavior - fixes Search icon - clarify clear button language - add chromatic test coverage - adds aria-label based on guidance page in template - adds headings to SearchOptions template containers - hotfix for textfield's displayLabel arg - adds documentation from guidance page - clarifies some descriptions for args - adds default undefined string to inputValue * fix: token fix and removal of unused, keyboardfocus hover * docs(clearbutton): option to remove from focus for searchfield - remove unnecessary variant control * chore: update stylelint ignore comments - add stylelint disable comments & descriptions * chore(search,tokens): add changeset * chore(searchfield): update metadata * fix(search): fix focus+hover border in WHCM Co-authored-by: Melissa Thompson <mthompson@heysparkbox.com>
1 parent e587031 commit 89a3f2b

File tree

10 files changed

+297
-161
lines changed

10 files changed

+297
-161
lines changed

‎.changeset/old-goats-chew.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/tokens": patch
3+
---
4+
5+
Adds `--spectrum-corner-radius-1000: 9999px;` to global-vars.css to override value of 0.5. This should ensure our components that use this custom property are properly rounded (i.e. the fully rounded swatch or search field)

‎.changeset/shaggy-schools-sing.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
"@spectrum-css/search": major
3+
---
4+
5+
#### Search S2 migration
6+
7+
Search now uses Spectrum 2 tokens and specifications. The following items have been adjusted:
8+
9+
- Quiet variant has been deprecated and code removed (including removal of the custom property `--mod-search-quiet-button-offset`).
10+
- Updates to colors, corner rounding, and spacing.
11+
- Custom property mod adjustments:
12+
- Added `--mod-search-top-to-icon`.
13+
- Removed `--mod-workflow-icon-size-100`.

‎components/clearbutton/stories/clearbutton.stories.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ export default {
5151
...staticColor,
5252
options: ["white"],
5353
},
54+
isFocusable: {
55+
table: { disable: true },
56+
type: { name: "boolean" },
57+
},
5458
},
5559
args: {
5660
rootClass: "spectrum-ClearButton",

‎components/clearbutton/stories/template.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const Template = ({
1212
isDisabled = false,
1313
size = "m",
1414
isQuiet = false,
15+
isFocusable = true,
1516
staticColor,
1617
id = getRandomId("clearbutton"),
1718
customClasses = [],
@@ -35,6 +36,8 @@ export const Template = ({
3536
id=${ifDefined(id)}
3637
style=${styleMap(customStyles)}
3738
?disabled=${isDisabled}
39+
tabindex=${isFocusable ? 0 : -1}
40+
aria-hidden=${isFocusable}
3841
>
3942
<div class="${rootClass}-fill">
4043
${Icon({

‎components/search/dist/metadata.json

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
".spectrum-Search .spectrum-Search-clearButton .spectrum-ClearButton-fill",
77
".spectrum-Search .spectrum-Search-textfield",
88
".spectrum-Search .spectrum-Search-textfield .spectrum-Search-input",
9-
".spectrum-Search--quiet",
10-
".spectrum-Search--quiet .spectrum-Search-input",
119
".spectrum-Search--sizeL",
1210
".spectrum-Search--sizeS",
1311
".spectrum-Search--sizeXL",
@@ -25,8 +23,9 @@
2523
".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon",
2624
".spectrum-Search-textfield:hover .spectrum-Search-icon",
2725
".spectrum-Search.is-disabled .spectrum-Search-clearButton",
28-
".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon",
29-
".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input"
26+
".spectrum-Search:lang(ja)",
27+
".spectrum-Search:lang(ko)",
28+
".spectrum-Search:lang(zh)"
3029
],
3130
"modifiers": [
3231
"--mod-search-background-color",
@@ -61,6 +60,7 @@
6160
"--mod-search-min-inline-size",
6261
"--mod-search-text-to-icon",
6362
"--mod-search-to-help-text",
63+
"--mod-search-top-to-icon",
6464
"--mod-search-top-to-text"
6565
],
6666
"component": [
@@ -98,32 +98,47 @@
9898
"--spectrum-search-min-inline-size",
9999
"--spectrum-search-text-to-icon",
100100
"--spectrum-search-to-help-text",
101+
"--spectrum-search-top-to-icon",
101102
"--spectrum-search-top-to-text"
102103
],
103104
"global": [
104-
"--spectrum-border-width-100",
105+
"--spectrum-border-width-200",
106+
"--spectrum-cjk-line-height-100",
105107
"--spectrum-component-bottom-to-text-100",
106-
"--spectrum-component-edge-to-visual-100",
107-
"--spectrum-component-edge-to-visual-200",
108-
"--spectrum-component-edge-to-visual-300",
109-
"--spectrum-component-edge-to-visual-75",
108+
"--spectrum-component-bottom-to-text-200",
109+
"--spectrum-component-bottom-to-text-300",
110+
"--spectrum-component-bottom-to-text-75",
110111
"--spectrum-component-height-100",
111112
"--spectrum-component-height-200",
112113
"--spectrum-component-height-300",
113114
"--spectrum-component-height-75",
115+
"--spectrum-component-pill-edge-to-visual-100",
116+
"--spectrum-component-pill-edge-to-visual-200",
117+
"--spectrum-component-pill-edge-to-visual-300",
118+
"--spectrum-component-pill-edge-to-visual-75",
114119
"--spectrum-component-top-to-text-100",
115-
"--spectrum-corner-radius-100",
120+
"--spectrum-component-top-to-text-200",
121+
"--spectrum-component-top-to-text-300",
122+
"--spectrum-component-top-to-text-75",
123+
"--spectrum-component-top-to-workflow-icon-100",
124+
"--spectrum-component-top-to-workflow-icon-200",
125+
"--spectrum-component-top-to-workflow-icon-300",
126+
"--spectrum-component-top-to-workflow-icon-75",
127+
"--spectrum-corner-radius-full",
116128
"--spectrum-default-font-style",
117129
"--spectrum-disabled-border-color",
118130
"--spectrum-disabled-content-color",
119-
"--spectrum-field-edge-to-visual-quiet",
120131
"--spectrum-field-width",
121132
"--spectrum-focus-indicator-color",
122133
"--spectrum-focus-indicator-gap",
123134
"--spectrum-focus-indicator-thickness",
135+
"--spectrum-font-size-100",
136+
"--spectrum-font-size-200",
137+
"--spectrum-font-size-300",
138+
"--spectrum-font-size-75",
124139
"--spectrum-gray-25",
125-
"--spectrum-gray-500",
126-
"--spectrum-gray-600",
140+
"--spectrum-gray-300",
141+
"--spectrum-gray-400",
127142
"--spectrum-gray-800",
128143
"--spectrum-gray-900",
129144
"--spectrum-help-text-to-component",
@@ -160,6 +175,7 @@
160175
"--mod-textfield-focus-indicator-width",
161176
"--mod-textfield-font-family",
162177
"--mod-textfield-font-weight",
178+
"--mod-textfield-placeholder-font-size",
163179
"--mod-textfield-text-color-default",
164180
"--mod-textfield-text-color-disabled",
165181
"--mod-textfield-text-color-focus",

‎components/search/index.css

Lines changed: 73 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Copyright 2024 Adobe. All rights reserved.
2+
* Copyright 2025 Adobe. All rights reserved.
33
*
44
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License. You may obtain a copy
@@ -12,7 +12,17 @@
1212
*/
1313

1414
.spectrum-Search {
15+
/* Background / Border */
16+
/* stylelint-disable spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */
1517
--spectrum-search-background-color: var(--spectrum-gray-25);
18+
--spectrum-search-border-color-default: var(--spectrum-gray-300);
19+
--spectrum-search-border-color-hover: var(--spectrum-gray-400);
20+
--spectrum-search-border-color-focus: var(--spectrum-gray-800);
21+
--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
22+
--spectrum-search-border-color-key-focus: var(--spectrum-gray-800);
23+
--spectrum-search-border-width: var(--spectrum-border-width-200);
24+
--spectrum-search-border-radius: var(--spectrum-corner-radius-full);
25+
/* stylelint-enable spectrum-tools/no-unused-custom-properties */
1626

1727
/* Size / Spacing */
1828
--spectrum-search-inline-size: var(--spectrum-field-width);
@@ -25,41 +35,47 @@
2535
--spectrum-search-to-help-text: var(--spectrum-help-text-to-component);
2636
--spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100);
2737
--spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
28-
--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
29-
--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
38+
--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100);
39+
--spectrum-search-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
3040

3141
/* Focus Indicator */
42+
/* stylelint-disable spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */
3243
--spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
3344
--spectrum-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
3445
--spectrum-search-focus-indicator-color: var(--spectrum-focus-indicator-color);
46+
/* stylelint-enable spectrum-tools/no-unused-custom-properties */
3547

3648
/* Font / Color */
49+
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */
3750
--spectrum-search-font-family: var(--spectrum-sans-font-family-stack);
51+
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */
3852
--spectrum-search-font-weight: var(--spectrum-regular-font-weight);
3953
--spectrum-search-font-style: var(--spectrum-default-font-style);
4054
--spectrum-search-line-height: var(--spectrum-line-height-100);
41-
4255
--spectrum-search-color-default: var(--spectrum-neutral-content-color-default);
4356
--spectrum-search-color-hover: var(--spectrum-neutral-content-color-hover);
4457
--spectrum-search-color-focus: var(--spectrum-neutral-content-color-focus);
4558
--spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover);
4659
--spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
4760

48-
--spectrum-search-border-color-default: var(--spectrum-gray-500);
49-
--spectrum-search-border-color-hover: var(--spectrum-gray-600);
50-
--spectrum-search-border-color-focus: var(--spectrum-gray-800);
51-
--spectrum-search-border-color-focus-hover: var(--spectrum-gray-900);
52-
--spectrum-search-border-color-key-focus: var(--spectrum-gray-900);
53-
54-
/* Background and Border */
55-
--spectrum-search-border-width: var(--spectrum-border-width-100);
56-
5761
/* Disabled */
5862
--spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
5963

60-
/* @passthrough start -- settings for nested Textfield component */
64+
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */
65+
--spectrum-search-background-color-disabled: var(--spectrum-gray-25);
66+
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Textfield mods */
67+
--spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
68+
69+
&:lang(ja),
70+
&:lang(zh),
71+
&:lang(ko) {
72+
--spectrum-search-line-height: var(--spectrum-cjk-line-height-100);
73+
}
74+
75+
/* /* @passthrough start: nested Textfield component. */
6176
--mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family));
6277
--mod-textfield-font-weight: var(--mod-search-font-weight, var(--spectrum-search-font-weight));
78+
--mod-textfield-placeholder-font-size: var(--spectrum-font-size-100);
6379

6480
--mod-textfield-corner-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
6581
--mod-textfield-border-width: var(--mod-search-border-width, var(--spectrum-search-border-width));
@@ -85,53 +101,53 @@
85101
--mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color));
86102
--mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled));
87103
/* @passthrough end */
88-
89-
display: inline-block;
90-
position: relative;
91-
inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size));
92-
min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size));
93-
94-
.spectrum-HelpText {
95-
margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text));
96-
}
97104
}
98105

99106
.spectrum-Search--sizeS {
100107
--spectrum-search-block-size: var(--spectrum-component-height-75);
101108
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75);
102109
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75);
103-
--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
110+
--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
111+
--spectrum-search-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
112+
--spectrum-search-top-to-text: var(--spectrum-component-top-to-text-75);
113+
--spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
114+
115+
--mod-textfield-placeholder-font-size: var(--spectrum-font-size-75);
104116
}
105117

106118
.spectrum-Search--sizeL {
107119
--spectrum-search-block-size: var(--spectrum-component-height-200);
108120
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200);
109121
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200);
110-
--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
122+
--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
123+
--spectrum-search-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200);
124+
--spectrum-search-top-to-text: var(--spectrum-component-top-to-text-200);
125+
--spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
126+
127+
--mod-textfield-placeholder-font-size: var(--spectrum-font-size-200);
111128
}
112129

113130
.spectrum-Search--sizeXL {
114131
--spectrum-search-block-size: var(--spectrum-component-height-300);
115132
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
116133
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
117-
--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
134+
--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
135+
--spectrum-search-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300);
136+
--spectrum-search-top-to-text: var(--spectrum-component-top-to-text-300);
137+
--spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
138+
139+
--mod-textfield-placeholder-font-size: var(--spectrum-font-size-300);
118140
}
119141

120-
@media (forced-colors: active) {
121-
.spectrum-Search .spectrum-Search-textfield,
122-
.spectrum-Search .spectrum-Search-textfield .spectrum-Search-input {
123-
--highcontrast-search-color-default: CanvasText;
124-
--highcontrast-search-color-hover: CanvasText;
125-
--highcontrast-search-color-focus: CanvasText;
126-
--highcontrast-search-color-disabled: GrayText;
127-
}
142+
/* Standard / Default */
143+
.spectrum-Search {
144+
display: inline-block;
145+
position: relative;
146+
inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size));
147+
min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size));
128148

129-
.spectrum-Search .spectrum-Search-clearButton {
130-
.spectrum-ClearButton-fill {
131-
/* Avoid button background color overlapping on border. */
132-
forced-color-adjust: none;
133-
background-color: transparent;
134-
}
149+
.spectrum-HelpText {
150+
margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text));
135151
}
136152
}
137153

@@ -160,7 +176,8 @@
160176
display: block;
161177
position: absolute;
162178
inset-block: 0;
163-
margin-block: auto;
179+
inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual));
180+
margin-block-start: var(--mod-search-top-to-icon, var(--spectrum-search-top-to-icon));
164181
color: var(--spectrum-search-color);
165182

166183
.spectrum-Search-textfield:hover & {
@@ -193,6 +210,8 @@
193210
block-size: var(--mod-search-block-size, var(--spectrum-search-block-size));
194211
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)));
195212
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)));
213+
padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)));
214+
padding-inline-end: calc(var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));
196215

197216
font-style: var(--mod-search-font-style, var(--spectrum-search-font-style));
198217
line-height: var(--mod-search-line-height, var(--spectrum-search-line-height));
@@ -204,32 +223,20 @@
204223
}
205224
}
206225

207-
/* Standard / Default Only */
208-
.spectrum-Search:not(.spectrum-Search--quiet) {
209-
.spectrum-Search-icon {
210-
inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual));
211-
}
212-
213-
.spectrum-Search-input {
214-
padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)));
215-
padding-inline-end: var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size));
226+
@media (forced-colors: active) {
227+
.spectrum-Search .spectrum-Search-textfield,
228+
.spectrum-Search .spectrum-Search-textfield .spectrum-Search-input {
229+
--highcontrast-search-color-default: CanvasText;
230+
--highcontrast-search-color-hover: CanvasText;
231+
--highcontrast-search-color-focus: CanvasText;
232+
--highcontrast-search-color-disabled: GrayText;
216233
}
217-
}
218-
219-
/* Quiet Variant */
220-
.spectrum-Search--quiet {
221-
--spectrum-search-background-color: transparent;
222-
--spectrum-search-background-color-disabled: transparent;
223-
--spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
224234

225-
/* Added specificity, otherwise they are overridden by system specific themes. */
226-
--mod-search-border-radius: 0;
227-
--mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet);
228-
229-
.spectrum-Search-input {
230-
border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius));
231-
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)));
232-
padding-inline-end: var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size));
233-
padding-block-start: var(--mod-search-top-to-text, var(--spectrum-search-top-to-text));
235+
.spectrum-Search .spectrum-Search-clearButton {
236+
.spectrum-ClearButton-fill {
237+
/* Avoid button background color overlapping on border. */
238+
forced-color-adjust: none;
239+
background-color: transparent;
240+
}
234241
}
235242
}

0 commit comments

Comments
 (0)