feat: new Button API

BREAKING CHANGE: CTA was renamed to Accent, Quiet is gone in favor of outline, and Fill is added
adobe · Dec 7, 2021 · 0b9e101 · 0b9e101
1 parent 5938f77
commit 0b9e101
Show file tree

Hide file tree

Showing 10 changed files with 1,267 additions and 504 deletions.
diff --git a/components/button/button-generated.css b/components/button/button-generated.css
diff --git a/components/button/index.css b/components/button/index.css
@@ -15,6 +15,8 @@ governing permissions and limitations under the License.
 @import "../commons/basebutton.css";
 @import "../vars/css/components/spectrum-button.css";
 
+@import "./button-generated.css";
+
 /* include the other button components that have been broken out */
 @import "./logicbutton.css";
 @import "./clearbutton.css";
@@ -91,6 +93,9 @@ governing permissions and limitations under the License.
     box-shadow: none;
   }
 
+  /* let staticColor variants inherit their color */
+  color: inherit;
+
   .spectrum-Icon {
     @inherit: %spectrum-ButtonIcon;
 

diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml
@@ -0,0 +1,151 @@
+name: Button - Accent
+status: Verified
+description: The call to action button communicates strong emphasis and is reserved for encouraging critical actions.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Call-to-action-variant
+sections:
+  - name: Migration Guide
+    description: |
+      ### T-shirt sizing
+      Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
+examples:
+  - id: button-accent
+    name: Sizing
+    markup: |
+      <div class="spectrum-Examples">
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
+
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+              <use xlink:href="#spectrum-icon-18-Edit" />
+            </svg>
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
+
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <use xlink:href="#spectrum-icon-18-Edit" />
+            </svg>
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+        </div>
+
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
+
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
+            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <use xlink:href="#spectrum-icon-18-Edit" />
+            </svg>
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+        </div>
+
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
+
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
+            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <use xlink:href="#spectrum-icon-18-Edit" />
+            </svg>
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+        </div>
+      </div>
+
+  - id: button-accent-disabled
+    name: Disabled
+    markup: |
+      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
+        <span class="spectrum-Button-label">Button</span>
+      </button>
+
+  - id: button-accent-outline
+    name: Outline
+    markup: |
+      <div class="spectrum-Examples">
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
+
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeS">
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeS">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+              <use xlink:href="#spectrum-icon-18-Edit" />
+            </svg>
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
+
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+              <use xlink:href="#spectrum-icon-18-Edit" />
+            </svg>
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+        </div>
+
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
+
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeL">
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeL">
+            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <use xlink:href="#spectrum-icon-18-Edit" />
+            </svg>
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+        </div>
+
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
+
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeXL">
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeXL">
+            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+              <use xlink:href="#spectrum-icon-18-Edit" />
+            </svg>
+            <span class="spectrum-Button-label">Edit</span>
+          </button>
+        </div>
+      </div>
+
+  - id: button-accent-outline-disabled
+    name: Outline- Disabled
+    markup: |
+      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
+        <span class="spectrum-Button-label">Button</span>
+      </button>
diff --git a/components/button/metadata/button-cta.yml b/components/button/metadata/button-cta.yml