Skip to content

Commit 43909a4

Browse files
lazdGarthDB
lazd
authored and
GarthDB
committed
feat: use new Picker markup
BREAKING CHANGE: DatePicker pattern now uses Picker, not ActionButton
1 parent c3f0a16 commit 43909a4

1 file changed

Lines changed: 12 additions & 12 deletions

File tree

‎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-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1">
21+
<button type="button" class="spectrum-Picker 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-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1">
34+
<button type="button" class="spectrum-Picker spectrum-Picker--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-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
51+
<button type="button" class="spectrum-Picker 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-ActionButton spectrum-ActionButton--sizeM is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
71+
<button type="button" class="spectrum-Picker 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-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
88+
<button type="button" class="spectrum-Picker 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-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
105+
<button type="button" class="spectrum-Picker 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-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
124+
<button type="button" class="spectrum-Picker 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-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
141+
<button type="button" class="spectrum-Picker spectrum-Picker--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-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
161+
<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">
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-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
178+
<button type="button" class="spectrum-Picker spectrum-Picker--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-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
194+
<button type="button" class="spectrum-Picker spectrum-Picker--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-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
213+
<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">
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)