budibase/packages/standard-components/node_modules/@spectrum-css/actiongroup/metadata/actiongroup.yml

name: Action Group
SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
sections:
- name: Migration Guide
  description: |
    ### Change workflow icon size to medium
    Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.    
examples:
  - id: actiongroup
    name: Horizontal
    markup: |
      <div class="spectrum-ActionGroup">
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
          <span class="spectrum-ActionButton-label">Edit</span>
        </button>
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
          <span class="spectrum-ActionButton-label">Copy</span>
        </button>
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
          <span class="spectrum-ActionButton-label">Delete</span>
        </button>
      </div>      

  - id: actiongroup
    name: Horizontal (icon-only)
    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">
            <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">
            <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">
            <use xlink:href="#spectrum-icon-18-Delete" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Horizontal (quiet, icon-only)
    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">
            <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">
            <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">
            <use xlink:href="#spectrum-icon-18-Delete" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Horizontal (compact)
    markup: |
      <div class="spectrum-ActionGroup spectrum-ActionGroup--compact">
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
          <span class="spectrum-ActionButton-label">Edit</span>
        </button>
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
          <span class="spectrum-ActionButton-label">Copy</span>
        </button>
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
          <span class="spectrum-ActionButton-label">Delete</span>
        </button>
      </div>      

  - id: actiongroup
    name: Horizontal (compact, icon-only)
    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">
            <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">
            <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">
            <use xlink:href="#spectrum-icon-18-Delete" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Horizontal (compact, quiet, icon-only)
    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">
            <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">
            <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">
            <use xlink:href="#spectrum-icon-18-Delete" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Vertical
    markup: |
      <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical">
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
          <span class="spectrum-ActionButton-label">Edit</span>
        </button>
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
          <span class="spectrum-ActionButton-label">Copy</span>
        </button>
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
          <span class="spectrum-ActionButton-label">Delete</span>
        </button>
      </div>      

  - id: actiongroup
    name: Vertical (icon-only)
    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">
            <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">
            <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">
            <use xlink:href="#spectrum-icon-18-Delete" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Vertical (icon-only, quiet)
    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">
            <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">
            <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">
            <use xlink:href="#spectrum-icon-18-Delete" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Vertical (compact)
    markup: |
      <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--compact">
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
          <span class="spectrum-ActionButton-label">Edit</span>
        </button>
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
          <span class="spectrum-ActionButton-label">Copy</span>
        </button>
        <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
          <span class="spectrum-ActionButton-label">Delete</span>
        </button>
      </div>      

  - id: actiongroup
    name: Vertical (compact, icon-only)
    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">
            <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">
            <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">
            <use xlink:href="#spectrum-icon-18-Delete" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Vertical (icon-only, compact, quiet)
    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">
            <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">
            <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">
            <use xlink:href="#spectrum-icon-18-Delete" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Justified
    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">
            <use xlink:href="#spectrum-icon-18-ViewCard" />
          </svg>
          <span class="spectrum-ActionButton-label">Card View</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">
            <use xlink:href="#spectrum-icon-18-ViewList" />
          </svg>
          <span class="spectrum-ActionButton-label">List View</span>
        </button>
      </div>      

  - id: actiongroup
    name: Justified (icon-only)
    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">
            <use xlink:href="#spectrum-icon-18-ViewCard" />
          </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">
            <use xlink:href="#spectrum-icon-18-ViewList" />
          </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">
            <use xlink:href="#spectrum-icon-18-ViewGrid" />
          </svg>
        </button>
      </div>      

  - id: actiongroup
    name: Justified (compact, icon-only)
    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">
            <use xlink:href="#spectrum-icon-18-ViewCard" />
          </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">
            <use xlink:href="#spectrum-icon-18-ViewList" />
          </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">
            <use xlink:href="#spectrum-icon-18-ViewGrid" />
          </svg>
        </button>
      </div>