Skip to content

Commit 35bf08f

Browse files
GarthDBlazd
GarthDB
authored and
lazd
committed
feat: added t-shirt sizes to picker
BREAKING CHANGES: picker requires t-shirt size. closes #940.
1 parent ce8e77f commit 35bf08f

6 files changed

Lines changed: 112 additions & 48 deletions

File tree

‎components/fieldlabel/metadata/form.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ examples:
2525
<div class="spectrum-Form-item">
2626
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
2727
<div class="spectrum-Form-itemField">
28-
<button class="spectrum-Picker" aria-haspopup="true">
28+
<button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
2929
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
3030
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
3131
<use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -107,7 +107,7 @@ examples:
107107
<div class="spectrum-Form-item">
108108
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Country</label>
109109
<div class="spectrum-Form-itemField">
110-
<button class="spectrum-Picker" aria-haspopup="true">
110+
<button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
111111
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
112112
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
113113
<use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -189,7 +189,7 @@ examples:
189189
<div class="spectrum-Form-item">
190190
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel" for="spectrum-textinput-instance">Country</label>
191191
<div class="spectrum-Form-itemField">
192-
<button class="spectrum-Picker" aria-haspopup="true">
192+
<button class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="true">
193193
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
194194
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
195195
<use xlink:href="#spectrum-css-icon-Chevron100" />

‎components/inputgroup/metadata/combobox.yml‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ examples:
4444
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
4545
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
4646
</div>
47-
<button class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
47+
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
4848
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
4949
<use xlink:href="#spectrum-css-icon-Chevron100" />
5050
</svg>
@@ -56,7 +56,7 @@ examples:
5656
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
5757
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
5858
</div>
59-
<button class="spectrum-Picker spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
59+
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
6060
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
6161
<use xlink:href="#spectrum-css-icon-Chevron100" />
6262
</svg>
@@ -87,7 +87,7 @@ examples:
8787
<div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
8888
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
8989
</div>
90-
<button class="spectrum-Picker spectrum-InputGroup-button" aria-haspopup="true" disabled>
90+
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" aria-haspopup="true" disabled>
9191
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
9292
<use xlink:href="#spectrum-css-icon-Chevron100" />
9393
</svg>
@@ -102,7 +102,7 @@ examples:
102102
</svg>
103103
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
104104
</div>
105-
<button class="spectrum-Picker spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
105+
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
106106
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
107107
<use xlink:href="#spectrum-css-icon-Chevron100" />
108108
</svg>
@@ -116,7 +116,7 @@ examples:
116116
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
117117
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
118118
</div>
119-
<button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
119+
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
120120
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
121121
<use xlink:href="#spectrum-css-icon-Chevron100" />
122122
</svg>
@@ -128,7 +128,7 @@ examples:
128128
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
129129
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
130130
</div>
131-
<button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
131+
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
132132
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
133133
<use xlink:href="#spectrum-css-icon-Chevron100" />
134134
</svg>
@@ -159,7 +159,7 @@ examples:
159159
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-disabled">
160160
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
161161
</div>
162-
<button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
162+
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
163163
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
164164
<use xlink:href="#spectrum-css-icon-Chevron100" />
165165
</svg>
@@ -174,7 +174,7 @@ examples:
174174
</svg>
175175
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
176176
</div>
177-
<button class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
177+
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
178178
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
179179
<use xlink:href="#spectrum-css-icon-Chevron100" />
180180
</svg>

‎components/inputgroup/metadata/datepicker.yml‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ examples:
2020
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
2121
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
2222
</div>
23-
<button type="button" class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1">
23+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1">
2424
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
2525
<use xlink:href="#spectrum-icon-18-Calendar" />
2626
</svg>
@@ -33,7 +33,7 @@ examples:
3333
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
3434
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
3535
</div>
36-
<button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1">
36+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1">
3737
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
3838
<use xlink:href="#spectrum-icon-18-Calendar" />
3939
</svg>
@@ -50,7 +50,7 @@ examples:
5050
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
5151
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="">
5252
</div>
53-
<button type="button" class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
53+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
5454
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
5555
<use xlink:href="#spectrum-icon-18-Calendar" />
5656
</svg>
@@ -70,7 +70,7 @@ examples:
7070
</svg>
7171
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="">
7272
</div>
73-
<button type="button" class="spectrum-Picker is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
73+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
7474
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
7575
<use xlink:href="#spectrum-icon-18-Calendar" />
7676
</svg>
@@ -87,7 +87,7 @@ examples:
8787
<div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
8888
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="" disabled>
8989
</div>
90-
<button type="button" class="spectrum-Picker spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
90+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
9191
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
9292
<use xlink:href="#spectrum-icon-18-Calendar" />
9393
</svg>
@@ -104,7 +104,7 @@ examples:
104104
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
105105
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
106106
</div>
107-
<button type="button" class="spectrum-Picker spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
107+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
108108
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
109109
<use xlink:href="#spectrum-icon-18-Calendar" />
110110
</svg>
@@ -123,7 +123,7 @@ examples:
123123
</svg>
124124
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
125125
</div>
126-
<button type="button" class="spectrum-Picker spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
126+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
127127
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
128128
<use xlink:href="#spectrum-icon-18-Calendar" />
129129
</svg>
@@ -140,7 +140,7 @@ examples:
140140
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
141141
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
142142
</div>
143-
<button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
143+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
144144
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
145145
<use xlink:href="#spectrum-icon-18-Calendar" />
146146
</svg>
@@ -160,7 +160,7 @@ examples:
160160
</svg>
161161
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
162162
</div>
163-
<button type="button" class="spectrum-Picker spectrum-Picker--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
163+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
164164
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
165165
<use xlink:href="#spectrum-icon-18-Calendar" />
166166
</svg>
@@ -177,7 +177,7 @@ examples:
177177
<div class="spectrum-Textfield spectrum-Textfield--quiet is-disabled spectrum-InputGroup-textfield">
178178
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30" disabled>
179179
</div>
180-
<button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
180+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
181181
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
182182
<use xlink:href="#spectrum-icon-18-Calendar" />
183183
</svg>
@@ -193,7 +193,7 @@ examples:
193193
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
194194
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
195195
</div>
196-
<button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
196+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
197197
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
198198
<use xlink:href="#spectrum-icon-18-Calendar" />
199199
</svg>
@@ -212,7 +212,7 @@ examples:
212212
</svg>
213213
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="false" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
214214
</div>
215-
<button type="button" class="spectrum-Picker spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
215+
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
216216
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
217217
<use xlink:href="#spectrum-icon-18-Calendar" />
218218
</svg>

‎components/picker/index.css‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,6 @@ governing permissions and limitations under the License.
1414
@import "../vars/css/components/spectrum-picker.css";
1515

1616
.spectrum-Picker {
17-
@remapvars {
18-
find: /--spectrum-picker-m(.*)/;
19-
filter: color;
20-
replace: --spectrum-picker$1;
21-
}
22-
2317
/* todo: remove when fixed in DNA */
2418
--spectrum-picker-min-width: var(--spectrum-global-dimension-size-400);
2519

@@ -77,6 +71,38 @@ governing permissions and limitations under the License.
7771
}
7872
}
7973

74+
.spectrum-Picker--sizeS {
75+
@remapvars {
76+
find: /--spectrum-picker-s(.*)/;
77+
filter: color;
78+
replace: --spectrum-picker$1;
79+
}
80+
}
81+
82+
.spectrum-Picker--sizeM {
83+
@remapvars {
84+
find: /--spectrum-picker-m(.*)/;
85+
filter: color;
86+
replace: --spectrum-picker$1;
87+
}
88+
}
89+
90+
.spectrum-Picker--sizeL {
91+
@remapvars {
92+
find: /--spectrum-picker-l(.*)/;
93+
filter: color;
94+
replace: --spectrum-picker$1;
95+
}
96+
}
97+
98+
.spectrum-Picker--sizeXL {
99+
@remapvars {
100+
find: /--spectrum-picker-xl(.*)/;
101+
filter: color;
102+
replace: --spectrum-picker$1;
103+
}
104+
}
105+
80106
.spectrum-Picker--quiet {
81107
@remapvars {
82108
find: /--spectrum-picker-quiet-m(.*)/;
@@ -303,4 +329,4 @@ governing permissions and limitations under the License.
303329
background-color: var(--spectrum-picker-quiet-m-background-color-disabled);
304330
color: var(--spectrum-picker-m-text-color-disabled);
305331
}
306-
}
332+
}

0 commit comments

Comments
 (0)