Skip to content

Commit ef2d193

Browse files
lazdlazd
committed
feat: make InputGroup use new Textfield markup
fix: make InputGroup buttons square because @NateBaldwinDesign said so fix: remove double border between input and button in focused InputGroup, related to #224 docs: should not be able to focus on FieldButton in InputGroup examples BREAKING CHANGE: migrated to next Textfield markup BREAKING CHANGE: .spectrum-InputGroup-textfield is now required on Textfields inside of InputGroup BREAKING CHANGE: InputGroup must have .is-keyboardFocused and .is-focused when focused BREAKING CHANGE: .spectrum-Datepicker--rangeDash renamed to .spectrum-Datepicker-rangeDash BREAKING CHANGE: removed .spectrum-Datepicker-focusRing
1 parent fc23c51 commit ef2d193

4 files changed

Lines changed: 364 additions & 247 deletions

File tree

‎components/inputgroup/index.css‎

Lines changed: 75 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,26 @@ governing permissions and limitations under the License.
1717
--spectrum-combobox-quiet-fieldbutton-border-radius: 0;
1818
--spectrum-combobox-field-border-width-right: 0;
1919
--spectrum-combobox-quiet-fieldbutton-padding-right: 0;
20-
--spectrum-datepicker-input-width: calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-padding));
21-
--spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-input-width) + var(--spectrum-global-dimension-size-700) - var(--spectrum-global-dimension-static-font-size-100) / 2);
20+
21+
--spectrum-datepicker-range-input-width-first: calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-padding));
22+
--spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-icon-alert-medium-width));
23+
--spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-global-dimension-size-900) + var(--spectrum-global-dimension-size-200));
24+
--spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-icon-alert-medium-width));
25+
26+
--spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width) + var(--spectrum-global-dimension-size-450));
27+
--spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-icon-alert-medium-width));
28+
29+
--spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width) + var(--spectrum-global-dimension-size-300));
30+
--spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-icon-alert-medium-width));
31+
2232
--spectrum-datepicker-range-dash-margin-left: calc(-0.5 * var(--spectrum-global-dimension-static-font-size-100));
2333
--spectrum-datepicker-range-dash-padding-top: 0;
2434
--spectrum-datepicker-range-dash-line-height: calc(var(--spectrum-textfield-height) - var(--spectrum-global-dimension-size-100));
2535

26-
--spectrum-combobox-button-width: calc(var(--spectrum-global-dimension-size-400) + var(--spectrum-global-dimension-size-25));
36+
/* be square: we're a little ahead of DNA at the time of writing, but Nate said so */
37+
--spectrum-combobox-button-width: calc(var(--spectrum-global-dimension-size-400));
38+
39+
--spectrum-combobox-quiet-button-offset: calc(var(--spectrum-fieldbutton-min-width) / 2 - var(--spectrum-icon-chevron-down-medium-width) / 2);
2740
}
2841

2942
.spectrum-InputGroup {
@@ -34,15 +47,24 @@ governing permissions and limitations under the License.
3447
min-inline-size: var(--spectrum-component-single-line-width);
3548
border-radius: var(--spectrum-border-radius);
3649

37-
.spectrum-FieldButton {
50+
.spectrum-InputGroup-button {
3851
padding: 0;
3952
inline-size: var(--spectrum-combobox-button-width);
4053
border-start-start-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius);
4154
border-end-start-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius);
4255
}
56+
57+
.spectrum-InputGroup-input {
58+
inline-size: auto;
59+
}
4360
}
4461

45-
.spectrum-InputGroup-field {
62+
.spectrum-InputGroup-button {
63+
/* Be above textfield so box shadow shines through */
64+
position: relative;
65+
}
66+
67+
.spectrum-InputGroup-input {
4668
border-start-end-radius: var(--spectrum-combobox-textfield-border-top-right-radius);
4769
border-end-end-radius: var(--spectrum-combobox-textfield-border-bottom-right-radius);
4870
border-inline-end-width: var(--spectrum-combobox-field-border-width-right);
@@ -52,11 +74,11 @@ governing permissions and limitations under the License.
5274
.spectrum-InputGroup--quiet {
5375
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
5476

55-
.spectrum-FieldButton {
77+
.spectrum-InputGroup-button {
5678
inline-size: auto;
5779
position: relative;
5880

59-
padding-inline-start: var(--spectrum-dropdown-padding-x);
81+
padding-inline-start: var(--spectrum-combobox-quiet-button-offset);
6082
padding-inline-end: var(--spectrum-combobox-quiet-fieldbutton-padding-right);
6183

6284
border-block-end: var(--spectrum-textfield-quiet-affixed-border-size) solid;
@@ -67,8 +89,8 @@ governing permissions and limitations under the License.
6789
content: '';
6890
position: absolute;
6991
block-size: 100%;
70-
inline-size: 10px;
71-
inset-inline-end: -10px;
92+
inline-size: var(--spectrum-combobox-quiet-button-offset);
93+
inset-inline-end: calc(var(--spectrum-combobox-quiet-button-offset) * -1);
7294
}
7395
}
7496

@@ -82,31 +104,63 @@ governing permissions and limitations under the License.
82104
/* Input Group */
83105
&.spectrum-InputGroup--quiet {
84106
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
85-
.spectrum-FieldButton {
107+
108+
.spectrum-InputGroup-textfield {
109+
min-inline-size: 0;
110+
inline-size: var(--spectrum-datepicker-input-width-quiet);
111+
112+
&:first-of-type {
113+
inline-size: var(--spectrum-datepicker-range-input-width-quiet-first);
114+
}
115+
}
116+
.spectrum-InputGroup-button {
86117
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
87118
}
88119
}
89120
/* Datetime Range */
90121
&.spectrum-Datepicker--datetimeRange {
91122
/* Inputs */
92-
.spectrum-InputGroup-field {
123+
.spectrum-InputGroup-textfield {
93124
inline-size: var(--spectrum-datepicker-datetime-input-width);
94-
min-inline-size: var(--spectrum-datepicker-datetime-input-width);
125+
min-inline-size: 0;
126+
127+
&:first-of-type {
128+
inline-size: var(--spectrum-datepicker-datetime-input-width-first);
129+
}
130+
}
131+
132+
&.spectrum-InputGroup--quiet {
133+
.spectrum-InputGroup-textfield {
134+
inline-size: var(--spectrum-datepicker-datetime-quiet-input-width);
135+
136+
&:first-of-type {
137+
inline-size: var(--spectrum-datepicker-datetime-quiet-input-width-first);
138+
}
139+
}
95140
}
96141
}
142+
97143
/* Inputs */
98-
.spectrum-InputGroup-field {
99-
inline-size: var(--spectrum-datepicker-input-width);
100-
min-inline-size: var(--spectrum-datepicker-input-width);
144+
.spectrum-InputGroup-textfield {
101145
flex: initial;
146+
min-inline-size: 0;
147+
inline-size: var(--spectrum-datepicker-input-width);
148+
149+
&:first-of-type {
150+
inline-size: var(--spectrum-datepicker-range-input-width-first);
151+
}
152+
&.is-invalid {
153+
.spectrum-InputGroup-input {
154+
padding-inline-end: var(--spectrum-padding);
155+
}
156+
}
157+
}
158+
.spectrum-InputGroup-input {
159+
inline-size: 100%;
160+
102161
&.spectrum-Datepicker-startField {
103162
border-inline-end: 0;
104163
padding-inline-end: var(--spectrum-padding);
105-
&.is-invalid,
106-
&:invalid {
107-
background-image: none;
108-
padding-inline-end: var(--spectrum-padding);
109-
}
110164
}
111165
&.spectrum-Datepicker-endField {
112166
border-inline-start: 0;
@@ -115,7 +169,7 @@ governing permissions and limitations under the License.
115169
}
116170
}
117171
/* Em dash */
118-
.spectrum-Datepicker--rangeDash {
172+
.spectrum-Datepicker-rangeDash {
119173
line-height: var(--spectrum-datepicker-range-dash-line-height);
120174
padding-block-start: var(--spectrum-datepicker-range-dash-padding-top);
121175
flex: initial;
@@ -133,24 +187,7 @@ governing permissions and limitations under the License.
133187
}
134188
}
135189
/* Focus ring */
136-
&.is-focused {
137-
.spectrum-Datepicker-focusRing {
138-
position: absolute;
139-
border-radius: var(--spectrum-border-radius);
140-
inset-block-start: 0;
141-
inset-inline-end: 0;
142-
inset-block-end: 0;
143-
inset-inline-start: 0;
144-
pointer-events: none;
145-
}
146-
}
147190
&.spectrum-InputGroup--quiet {
148-
&.is-focused {
149-
.spectrum-Datepicker-focusRing {
150-
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
151-
inset-block-start: auto;
152-
}
153-
}
154191
.spectrum-Datepicker--rangeDash {
155192
&:before {
156193
margin-inline-start: var(--spectrum-datepicker-range-dash-margin-left);

‎components/inputgroup/metadata/combobox.yml‎

Lines changed: 68 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,47 @@
11
name: Combobox
22
SpectrumSiteSlug: https://spectrum.adobe.com/page/combo-box/
3+
sections:
4+
- name: Migration Guide
5+
description: |
6+
### New Textfield markup
7+
InputGroup now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information.
8+
9+
### Additional clases
10+
The following classes must be added:
11+
12+
* `.spectrum-InputGroup-textfield` is now required on the Textfield outer element (`.spectrum-Textfield`)
13+
* `.spectrum-InputGroup-input` is now required on the `<input>` element inside of Textfields (`.spectrum-Textfield-input`)
14+
* `.spectrum-InputGroup-button` is now required on the FieldButton (`.spectrum-FieldButton`)
15+
16+
### Renamed classes
17+
18+
* `.spectrum-Datepicker--rangeDash` renamed to `.spectrum-Datepicker-rangeDash`
19+
20+
### Removed elements
21+
22+
* `.spectrum-Datepicker-focusRing` is no longer required and should be removed
23+
24+
### Indicating validity and focus
25+
Validity and focus must be bubbled up to the parent so descendants siblings can be styled.
26+
27+
Thus, implementations must add the following classes in the following situations:
28+
29+
* `.spectrum-InputGroup.is-focused` - when the input or button is focused with the mouse
30+
* `.spectrum-InputGroup.is-keyboardFocused` - when the input or button is focused with the keyboard
31+
* `.spectrum-InputGroup.is-valid` - when the input has an explicit valid state
32+
* `.spectrum-InputGroup.is-invalid` - when the input has an explicit invalid state
33+
* `.spectrum-InputGroup.is-disabled` - when the control is disabled. You must also add `.is-disabled` to the `.spectrum-InputGroup-textfield` and `[disabled]` to the `.spectrum-InputGroup-button`.
34+
335
examples:
436
- id: combobox
537
name: Standard
638
markup: |
739
<h4>Default</h4>
840
<div class="spectrum-InputGroup">
9-
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field">
10-
<button class="spectrum-FieldButton spectrum-InputGroup-button" aria-haspopup="true">
41+
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
42+
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
43+
</div>
44+
<button class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
1145
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
1246
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
1347
</svg>
@@ -16,8 +50,10 @@ examples:
1650
1751
<h4>Open</h4>
1852
<div class="spectrum-InputGroup is-open">
19-
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field">
20-
<button class="spectrum-FieldButton spectrum-InputGroup-button is-selected" aria-haspopup="true">
53+
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
54+
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
55+
</div>
56+
<button class="spectrum-FieldButton spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
2157
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
2258
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
2359
</svg>
@@ -45,7 +81,9 @@ examples:
4581
4682
<h4>Disabled</h4>
4783
<div class="spectrum-InputGroup is-disabled">
48-
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field" disabled>
84+
<div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
85+
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
86+
</div>
4987
<button class="spectrum-FieldButton spectrum-InputGroup-button" aria-haspopup="true" disabled>
5088
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
5189
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
@@ -55,8 +93,13 @@ examples:
5593
5694
<h4>Invalid</h4>
5795
<div class="spectrum-InputGroup is-invalid">
58-
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field is-invalid">
59-
<button class="spectrum-FieldButton spectrum-InputGroup-button is-invalid" aria-haspopup="true">
96+
<div class="spectrum-Textfield is-invalid spectrum-InputGroup-textfield">
97+
<svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
98+
<use xlink:href="#spectrum-css-icon-AlertMedium" />
99+
</svg>
100+
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
101+
</div>
102+
<button class="spectrum-FieldButton spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
60103
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
61104
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
62105
</svg>
@@ -67,8 +110,10 @@ examples:
67110
markup: |
68111
<h4>Default</h4>
69112
<div class="spectrum-InputGroup spectrum-InputGroup--quiet">
70-
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field">
71-
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" aria-haspopup="true">
113+
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
114+
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
115+
</div>
116+
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
72117
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
73118
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
74119
</svg>
@@ -77,8 +122,10 @@ examples:
77122
78123
<h4>Open</h4>
79124
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-open">
80-
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field">
81-
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-selected" aria-haspopup="true">
125+
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
126+
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
127+
</div>
128+
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
82129
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
83130
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
84131
</svg>
@@ -106,7 +153,9 @@ examples:
106153
107154
<h4>Disabled</h4>
108155
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-disabled">
109-
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" disabled>
156+
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-disabled">
157+
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
158+
</div>
110159
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
111160
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
112161
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
@@ -116,8 +165,13 @@ examples:
116165
117166
<h4>Invalid</h4>
118167
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-invalid">
119-
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field is-invalid">
120-
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-invalid" aria-haspopup="true">
168+
<div class="spectrum-Textfield spectrum-Textfield--quiet is-invalid spectrum-InputGroup-textfield">
169+
<svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
170+
<use xlink:href="#spectrum-css-icon-AlertMedium" />
171+
</svg>
172+
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
173+
</div>
174+
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
121175
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
122176
<use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
123177
</svg>

0 commit comments

Comments
 (0)