feat: replace all FieldButton with ActionButton

BREAKING CHANGE: markup now requires spectrum-ActionButton where all uses of spectrum-FieldButton were
adobe · Dec 1, 2020 · 2fcbaaf · 2fcbaaf
1 parent 6dcde84
commit 2fcbaaf
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 84 deletions.
diff --git a/components/fieldlabel/metadata/form.yml b/components/fieldlabel/metadata/form.yml
@@ -26,7 +26,7 @@ examples:
  <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
  <div class="spectrum-Form-itemField">
  <div class="spectrum-Picker" style="width: 195px;">
- <button class="spectrum-FieldButton spectrum-Picker-trigger" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Picker-trigger" aria-haspopup="true">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -110,7 +110,7 @@ examples:
  <label class="spectrum-Form-itemLabel spectrum-FieldLabel--right" for="spectrum-textinput-instance">Country</label>
  <div class="spectrum-Form-itemField">
  <div class="spectrum-Picker" style="width: 195px;">
- <button class="spectrum-FieldButton spectrum-Picker-trigger" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Picker-trigger" aria-haspopup="true">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
@@ -194,7 +194,7 @@ examples:
  <label class="spectrum-Form-itemLabel" for="spectrum-textinput-instance">Country</label>
  <div class="spectrum-Form-itemField">
  <div class="spectrum-Picker" style="width: 195px;">
- <button class="spectrum-FieldButton spectrum-Picker-trigger" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Picker-trigger" aria-haspopup="true">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />

diff --git a/components/inputgroup/metadata/combobox.yml b/components/inputgroup/metadata/combobox.yml
@@ -11,7 +11,7 @@ sections:
 
  * `.spectrum-InputGroup-textfield` is now required on the Textfield outer element (`.spectrum-Textfield`)
  * `.spectrum-InputGroup-input` is now required on the `<input>` element inside of Textfields (`.spectrum-Textfield-input`)
- * `.spectrum-InputGroup-button` is now required on the FieldButton (`.spectrum-FieldButton`)
+ * `.spectrum-InputGroup-button` is now required on the FieldButton (`.spectrum-ActionButton spectrum-ActionButton--sizeM`)
 
  ### Renamed classes
 
@@ -41,7 +41,7 @@ examples:
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
  </div>
- <button class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
@@ -53,7 +53,7 @@ examples:
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
  </div>
- <button class="spectrum-FieldButton spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
@@ -84,7 +84,7 @@ examples:
  <div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
  </div>
- <button class="spectrum-FieldButton spectrum-InputGroup-button" aria-haspopup="true" disabled>
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" aria-haspopup="true" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
@@ -99,7 +99,7 @@ examples:
  </svg>
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
  </div>
- <button class="spectrum-FieldButton spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
@@ -113,7 +113,7 @@ examples:
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
  </div>
- <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
@@ -125,7 +125,7 @@ examples:
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
  </div>
- <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button is-selected" tabindex="-1" aria-haspopup="true">
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
@@ -156,7 +156,7 @@ examples:
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-disabled">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
  </div>
- <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
@@ -171,7 +171,7 @@ examples:
  </svg>
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
  </div>
- <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
+ <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>

diff --git a/components/inputgroup/metadata/datepicker.yml b/components/inputgroup/metadata/datepicker.yml
@@ -18,7 +18,7 @@ examples:
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1">
+ <button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -31,7 +31,7 @@ examples:
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input" aria-invalid="false" placeholder="Choose a date" value="">
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1">
+ <button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -48,7 +48,7 @@ examples:
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="">
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+ <button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -68,7 +68,7 @@ examples:
  </svg>
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" aria-invalid="true" placeholder="mm/dd/yyyy" name="end" value="">
  </div>
- <button type="button" class="spectrum-FieldButton is-invalid spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+ <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">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -85,7 +85,7 @@ examples:
  <div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="" disabled>
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
+ <button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" disabled tabindex="-1" aria-label="Calendar">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -102,7 +102,7 @@ examples:
  <div class="spectrum-Textfield spectrum-InputGroup-textfield">
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+ <button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -121,7 +121,7 @@ examples:
  </svg>
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy hh:mm a" name="end" value="">
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-InputGroup-button is-invalid" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+ <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">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -138,7 +138,7 @@ examples:
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
+ <button type="button" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-label="Calendar">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -158,7 +158,7 @@ examples:
  </svg>
  <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">
  </div>
- <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">
+ <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">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -175,7 +175,7 @@ examples:
  <div class="spectrum-Textfield spectrum-Textfield--quiet is-disabled spectrum-InputGroup-textfield">
  <input type="text" class="spectrum-Textfield-input spectrum-InputGroup-input spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30" disabled>
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" disabled aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+ <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">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -191,7 +191,7 @@ examples:
  <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
  <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="">
  </div>
- <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" tabindex="-1" aria-expanded="false" aria-haspopup="dialog" aria-label="Calendar">
+ <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">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>
@@ -210,7 +210,7 @@ examples:
  </svg>
  <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="">
  </div>
- <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">
+ <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">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Calendar">
  <use xlink:href="#spectrum-icon-18-Calendar" />
  </svg>