feat!: updating to latest ActionButton with new markup

BREAKING CHANGE: ActionButton changes icon markup
adobe · Jun 16, 2022 · 3eef405 · 3eef405
1 parent d68114a
commit 3eef405
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 47 deletions.
diff --git a/components/actiongroup/metadata/actiongroup.yml b/components/actiongroup/metadata/actiongroup.yml
@@ -3,6 +3,9 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/action-group/
 sections:
 - name: Migration Guide
  description: |
+ ### New Action Button markup
+ Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button.
+
  ### Change workflow icon size to medium
  Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
 examples:
@@ -26,17 +29,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
  <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Copy">
  <use xlink:href="#spectrum-icon-18-Copy" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Delete">
  <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  </button>
@@ -47,17 +50,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--quiet">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
  <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Copy">
  <use xlink:href="#spectrum-icon-18-Copy" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Delete">
  <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  </button>
@@ -83,17 +86,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--compact">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
  <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Copy">
  <use xlink:href="#spectrum-icon-18-Copy" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Delete">
  <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  </button>
@@ -104,17 +107,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--compact spectrum-ActionGroup--quiet">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
  <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Copy">
  <use xlink:href="#spectrum-icon-18-Copy" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Delete">
  <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  </button>
@@ -140,17 +143,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
  <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Copy">
  <use xlink:href="#spectrum-icon-18-Copy" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Delete">
  <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  </button>
@@ -161,17 +164,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--quiet">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
  <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Copy">
  <use xlink:href="#spectrum-icon-18-Copy" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Delete">
  <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  </button>
@@ -197,17 +200,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--compact">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
  <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Copy">
  <use xlink:href="#spectrum-icon-18-Copy" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Delete">
  <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  </button>
@@ -218,17 +221,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--compact spectrum-ActionGroup--quiet">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Edit">
  <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Copy">
  <use xlink:href="#spectrum-icon-18-Copy" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="Delete">
  <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  </button>
@@ -239,13 +242,13 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--justified" style="width: 300px">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View card">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View card">
  <use xlink:href="#spectrum-icon-18-AlignTop" />
  </svg>
  <span class="spectrum-ActionButton-label">Align Top</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View list">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View list">
  <use xlink:href="#spectrum-icon-18-AlignBottom" />
  </svg>
  <span class="spectrum-ActionButton-label">Align Bottom</span>
@@ -257,17 +260,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--justified" style="width: 300px">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View card">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View card">
  <use xlink:href="#spectrum-icon-18-AlignTop" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View list">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View list">
  <use xlink:href="#spectrum-icon-18-AlignBottom" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View grid">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View grid">
  <use xlink:href="#spectrum-icon-18-AlignMiddle" />
  </svg>
  </button>
@@ -278,17 +281,17 @@ examples:
  markup: |
  <div class="spectrum-ActionGroup spectrum-ActionGroup--compact spectrum-ActionGroup--justified" style="width: 300px">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View card">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View card">
  <use xlink:href="#spectrum-icon-18-AlignTop" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View list">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View list">
  <use xlink:href="#spectrum-icon-18-AlignBottom" />
  </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View grid">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View grid">
  <use xlink:href="#spectrum-icon-18-AlignMiddle" />
  </svg>
  </button>

diff --git a/components/actionmenu/metadata/actionmenu.yml b/components/actionmenu/metadata/actionmenu.yml
@@ -3,14 +3,17 @@ description: Simply an action button with a Popover. Note that the `is-selected`
 sections:
 - name: Migration Guide
  description: |
+ ### New Action Button markup
+ Action Button requires `.spectrum-ActionButton-icon` class on icons nested inside of Action Button.
+
  ### Change workflow icon size to medium
  Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
 examples:
  - id: actionmenu
  name: Standard
  markup: |
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
@@ -37,7 +40,7 @@ examples:
  <div class="dummy-spacing"></div>
 
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  </button>
@@ -63,7 +66,7 @@ examples:
  <div class="dummy-spacing"></div>
 
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
- <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
+ <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true">
  <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>