Skip to content

Commit 2fcbaaf

Browse files
lazdGarthDB
lazd
authored and
GarthDB
committed
feat: replace all FieldButton with ActionButton
BREAKING CHANGE: markup now requires spectrum-ActionButton where all uses of spectrum-FieldButton were
1 parent 6dcde84 commit 2fcbaaf

File tree

12 files changed

+84
-84
lines changed

12 files changed

+84
-84
lines changed

‎components/fieldlabel/metadata/form.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ examples:
2626
<label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
2727
<div class="spectrum-Form-itemField">
2828
<div class="spectrum-Picker" style="width: 195px;">
29-
<button class="spectrum-FieldButton spectrum-Picker-trigger" aria-haspopup="true">
29+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Picker-trigger" aria-haspopup="true">
3030
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
3131
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-icon" focusable="false" aria-hidden="true">
3232
<use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -110,7 +110,7 @@ examples:
110110
<label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Country</label>
111111
<div class="spectrum-Form-itemField">
112112
<div class="spectrum-Picker" style="width: 195px;">
113-
<button class="spectrum-FieldButton spectrum-Picker-trigger" aria-haspopup="true">
113+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Picker-trigger" aria-haspopup="true">
114114
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
115115
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-icon" focusable="false" aria-hidden="true">
116116
<use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -194,7 +194,7 @@ examples:
194194
<label class="spectrum-Form-itemLabel" for="spectrum-textinput-instance">Country</label>
195195
<div class="spectrum-Form-itemField">
196196
<div class="spectrum-Picker" style="width: 195px;">
197-
<button class="spectrum-FieldButton spectrum-Picker-trigger" aria-haspopup="true">
197+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Picker-trigger" aria-haspopup="true">
198198
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
199199
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-icon" focusable="false" aria-hidden="true">
200200
<use xlink:href="#spectrum-css-icon-Chevron100" />

‎components/inputgroup/metadata/combobox.yml‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ sections:
1111
1212
* `.spectrum-InputGroup-textfield` is now required on the Textfield outer element (`.spectrum-Textfield`)
1313
* `.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`)
14+
* `.spectrum-InputGroup-button` is now required on the FieldButton (`.spectrum-ActionButton spectrum-ActionButton--sizeM`)
1515
1616
### Renamed classes
1717
@@ -41,7 +41,7 @@ examples:
4141
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
4242
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
4343
</div>
44-
<button class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
44+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
4545
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
4646
<use xlink:href="#spectrum-css-icon-Chevron100" />
4747
</svg>
@@ -53,7 +53,7 @@ examples:
5353
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
5454
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
5555
</div>
56-
<button class="spectrum-FieldButton spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
56+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
5757
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
5858
<use xlink:href="#spectrum-css-icon-Chevron100" />
5959
</svg>
@@ -84,7 +84,7 @@ examples:
8484
<div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
8585
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
8686
</div>
87-
<button class="spectrum-FieldButton spectrum-InputGroup-button" aria-haspopup="true" disabled>
87+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" aria-haspopup="true" disabled>
8888
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
8989
<use xlink:href="#spectrum-css-icon-Chevron100" />
9090
</svg>
@@ -99,7 +99,7 @@ examples:
9999
</svg>
100100
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
101101
</div>
102-
<button class="spectrum-FieldButton spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
102+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
103103
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
104104
<use xlink:href="#spectrum-css-icon-Chevron100" />
105105
</svg>
@@ -113,7 +113,7 @@ examples:
113113
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
114114
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
115115
</div>
116-
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
116+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
117117
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
118118
<use xlink:href="#spectrum-css-icon-Chevron100" />
119119
</svg>
@@ -125,7 +125,7 @@ examples:
125125
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
126126
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
127127
</div>
128-
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
128+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
129129
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
130130
<use xlink:href="#spectrum-css-icon-Chevron100" />
131131
</svg>
@@ -156,7 +156,7 @@ examples:
156156
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-disabled">
157157
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
158158
</div>
159-
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
159+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
160160
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
161161
<use xlink:href="#spectrum-css-icon-Chevron100" />
162162
</svg>
@@ -171,7 +171,7 @@ examples:
171171
</svg>
172172
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
173173
</div>
174-
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
174+
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
175175
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
176176
<use xlink:href="#spectrum-css-icon-Chevron100" />
177177
</svg>

‎components/inputgroup/metadata/datepicker.yml‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ examples:
1818
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
1919
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
2020
</div>
21-
<button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1">
21+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1">
2222
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
2323
<use xlink:href="#spectrum-icon-18-Calendar" />
2424
</svg>
@@ -31,7 +31,7 @@ examples:
3131
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
3232
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
3333
</div>
34-
<button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1">
34+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1">
3535
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
3636
<use xlink:href="#spectrum-icon-18-Calendar" />
3737
</svg>
@@ -48,7 +48,7 @@ examples:
4848
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
4949
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="">
5050
</div>
51-
<button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
51+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
5252
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
5353
<use xlink:href="#spectrum-icon-18-Calendar" />
5454
</svg>
@@ -68,7 +68,7 @@ examples:
6868
</svg>
6969
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="">
7070
</div>
71-
<button type="button" class="spectrum-FieldButton is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
71+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
7272
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
7373
<use xlink:href="#spectrum-icon-18-Calendar" />
7474
</svg>
@@ -85,7 +85,7 @@ examples:
8585
<div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
8686
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="" disabled>
8787
</div>
88-
<button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
88+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
8989
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
9090
<use xlink:href="#spectrum-icon-18-Calendar" />
9191
</svg>
@@ -102,7 +102,7 @@ examples:
102102
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
103103
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
104104
</div>
105-
<button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
105+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
106106
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
107107
<use xlink:href="#spectrum-icon-18-Calendar" />
108108
</svg>
@@ -121,7 +121,7 @@ examples:
121121
</svg>
122122
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
123123
</div>
124-
<button type="button" class="spectrum-FieldButton spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
124+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
125125
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
126126
<use xlink:href="#spectrum-icon-18-Calendar" />
127127
</svg>
@@ -138,7 +138,7 @@ examples:
138138
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
139139
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
140140
</div>
141-
<button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
141+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
142142
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
143143
<use xlink:href="#spectrum-icon-18-Calendar" />
144144
</svg>
@@ -158,7 +158,7 @@ examples:
158158
</svg>
159159
<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">
160160
</div>
161-
<button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
161+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
162162
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
163163
<use xlink:href="#spectrum-icon-18-Calendar" />
164164
</svg>
@@ -175,7 +175,7 @@ examples:
175175
<div class="spectrum-Textfield spectrum-Textfield--quiet is-disabled spectrum-InputGroup-textfield">
176176
<input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30" disabled>
177177
</div>
178-
<button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
178+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
179179
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
180180
<use xlink:href="#spectrum-icon-18-Calendar" />
181181
</svg>
@@ -191,7 +191,7 @@ examples:
191191
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
192192
<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="">
193193
</div>
194-
<button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
194+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
195195
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
196196
<use xlink:href="#spectrum-icon-18-Calendar" />
197197
</svg>
@@ -210,7 +210,7 @@ examples:
210210
</svg>
211211
<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="">
212212
</div>
213-
<button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
213+
<button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
214214
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
215215
<use xlink:href="#spectrum-icon-18-Calendar" />
216216
</svg>

0 commit comments

Comments
 (0)