Skip to content

Commit 262d5d7

Browse files
lazdlazd
authored
fix: make SearchWithin use new Textfield markup (#645)
* fix: make SearchWithin use new Textfield markup * fix: don't let SearchWithin dropdown shrink * docs: fix disabled example
1 parent 5bd34dc commit 262d5d7

File tree

2 files changed

+46
-42
lines changed

2 files changed

+46
-42
lines changed

‎components/searchwithin/index.css

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,36 +24,32 @@ governing permissions and limitations under the License.
2424
inline-size: var(--spectrum-searchwithin-width);
2525
display: inline-flex;
2626
position: relative;
27+
}
2728

28-
.spectrum-Dropdown {
29-
inline-size: auto;
30-
min-inline-size: 0;
31-
}
32-
33-
.spectrum-Dropdown-trigger {
34-
border-start-end-radius: var(--spectrum-searchwithin-border-radius);
35-
border-end-end-radius: var(--spectrum-searchwithin-border-radius);
36-
}
29+
.spectrum-SearchWithin-dropdown {
30+
inline-size: auto;
31+
min-inline-size: 0;
32+
flex-shrink: 0;
33+
}
3734

38-
.spectrum-Dropdown-label {
39-
/* Override dropdown's min-width and be tiny */
40-
min-inline-size: var(--spectrum-searchwithin-dropdown-min-width);
41-
}
35+
.spectrum-SearchWithin-dropdownTrigger {
36+
border-start-end-radius: var(--spectrum-searchwithin-border-radius);
37+
border-end-end-radius: var(--spectrum-searchwithin-border-radius);
38+
}
4239

43-
.spectrum-Textfield {
44-
flex: 1;
45-
margin-inline-start: calc(-1 * var(--spectrum-textfield-border-size)); /* hides left border */
46-
border-start-start-radius: var(--spectrum-searchwithin-border-radius);
47-
border-end-start-radius: var(--spectrum-searchwithin-border-radius);
40+
.spectrum-SearchWithin-input {
41+
flex: 1;
42+
margin-inline-start: calc(-1 * var(--spectrum-textfield-border-size)); /* hides left border */
43+
border-start-start-radius: var(--spectrum-searchwithin-border-radius);
44+
border-end-start-radius: var(--spectrum-searchwithin-border-radius);
4845

49-
&:hover, &:focus {
50-
position: relative; /* shows left border */
51-
}
46+
&:hover, &:focus {
47+
position: relative; /* shows left border */
5248
}
49+
}
5350

54-
.spectrum-ClearButton {
55-
position: absolute;
56-
inset-block-start: 0;
57-
inset-inline-end: 0;
58-
}
51+
.spectrum-SearchWithin-clearButton {
52+
position: absolute;
53+
inset-block-start: 0;
54+
inset-inline-end: 0;
5955
}

‎components/searchwithin/metadata/searchwithin.yml

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@ examples:
66
markup: |
77
<h4>Default</h4>
88
<form class="spectrum-SearchWithin">
9-
<div class="spectrum-Dropdown">
10-
<button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
9+
<div class="spectrum-Dropdown spectrum-SearchWithin-dropdown">
10+
<button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger spectrum-SearchWithin-dropdownTrigger" aria-haspopup="true">
1111
<span class="spectrum-Dropdown-label">All</span>
1212
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
1313
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
1414
</svg>
1515
</button>
1616
</div>
17-
<input type="text" placeholder="Search" class="spectrum-Textfield">
18-
<button type="reset" class="spectrum-ClearButton">
17+
<div class="spectrum-Textfield">
18+
<input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-SearchWithin-input" autocomplete="off">
19+
</div>
20+
<button type="reset" class="spectrum-ClearButton spectrum-SearchWithin-clearButton">
1921
<svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
2022
<use xlink:href="#spectrum-css-icon-CrossSmall" />
2123
</svg>
@@ -24,16 +26,18 @@ examples:
2426
2527
<h4>Open</h4>
2628
<form class="spectrum-SearchWithin" style="margin-bottom: 180px;">
27-
<div class="spectrum-Dropdown is-open">
28-
<button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
29+
<div class="spectrum-Dropdown spectrum-SearchWithin-dropdown is-open">
30+
<button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger spectrum-SearchWithin-dropdownTrigger is-selected" aria-haspopup="true">
2931
<span class="spectrum-Dropdown-label">All</span>
3032
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
3133
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
3234
</svg>
3335
</button>
3436
</div>
35-
<input type="text" placeholder="Search" class="spectrum-Textfield">
36-
<button type="reset" class="spectrum-ClearButton">
37+
<div class="spectrum-Textfield">
38+
<input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-SearchWithin-input" autocomplete="off">
39+
</div>
40+
<button type="reset" class="spectrum-ClearButton spectrum-SearchWithin-clearButton">
3741
<svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
3842
<use xlink:href="#spectrum-css-icon-CrossSmall" />
3943
</svg>
@@ -59,16 +63,18 @@ examples:
5963
6064
<h4>Default (Changed Selection)</h4>
6165
<form class="spectrum-SearchWithin">
62-
<div class="spectrum-Dropdown">
63-
<button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
66+
<div class="spectrum-Dropdown spectrum-SearchWithin-dropdown">
67+
<button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger spectrum-SearchWithin-dropdownTrigger" aria-haspopup="true">
6468
<span class="spectrum-Dropdown-label">Campaigns</span>
6569
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
6670
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
6771
</svg>
6872
</button>
6973
</div>
70-
<input type="text" placeholder="Search" class="spectrum-Textfield">
71-
<button type="reset" class="spectrum-ClearButton">
74+
<div class="spectrum-Textfield">
75+
<input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-SearchWithin-input" autocomplete="off">
76+
</div>
77+
<button type="reset" class="spectrum-ClearButton spectrum-SearchWithin-clearButton">
7278
<svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
7379
<use xlink:href="#spectrum-css-icon-CrossSmall" />
7480
</svg>
@@ -77,16 +83,18 @@ examples:
7783
7884
<h4>Disabled</h4>
7985
<form class="spectrum-SearchWithin">
80-
<div class="spectrum-Dropdown is-disabled">
81-
<button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" disabled aria-haspopup="true">
86+
<div class="spectrum-Dropdown spectrum-SearchWithin-dropdown is-disabled">
87+
<button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger spectrum-SearchWithin-dropdownTrigger" disabled aria-haspopup="true">
8288
<span class="spectrum-Dropdown-label">All</span>
8389
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
8490
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
8591
</svg>
8692
</button>
8793
</div>
88-
<input type="text" placeholder="Search" class="spectrum-Textfield" value="Term" disabled>
89-
<button type="reset" class="spectrum-ClearButton" disabled>
94+
<div class="spectrum-Textfield is-disabled">
95+
<input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-SearchWithin-input" autocomplete="off" value="Term" disabled>
96+
</div>
97+
<button type="reset" class="spectrum-ClearButton spectrum-SearchWithin-clearButton" disabled>
9098
<svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
9199
<use xlink:href="#spectrum-css-icon-CrossSmall" />
92100
</svg>

0 commit comments

Comments
 (0)