fix: renamed warning button variant to negative

BREAKING CHANGE: `.spectrum-Button--warning` is now `.spectrum-Button--negative`
adobe · May 10, 2021 · 1e029eb · 1e029eb
1 parent 3faaa75
commit 1e029eb
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 59 deletions.
diff --git a/components/button/metadata/button-warning.yml b/components/button/metadata/button-warning.yml
@@ -1,4 +1,4 @@
-name: Button - Warning
+name: Button - Negative
 status: Verified
 description: The negative button is for high emphasis of negative or destructive actions.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Negative
@@ -19,18 +19,18 @@ sections:
       | `.spectrum-Button--sizeL`  | `.spectrum-Icon--sizeL`           |
       | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL`          |
 examples:
-  - id: button-warning
+  - id: button-negative
     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--warning spectrum-Button--sizeS">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeS">
             <span class="spectrum-Button-label">Delete</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--sizeS">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeS">
             <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
@@ -40,11 +40,11 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--sizeM">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeM">
             <span class="spectrum-Button-label">Delete</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--sizeM">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeM">
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
@@ -55,11 +55,11 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--sizeL">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeL">
             <span class="spectrum-Button-label">Delete</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--sizeL">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeL">
             <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
@@ -70,11 +70,11 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--sizeXL">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeXL">
             <span class="spectrum-Button-label">Delete</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--sizeXL">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeXL">
             <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
@@ -83,32 +83,32 @@ examples:
         </div>
       </div>
 
-  - id: button-warning
+  - id: button-negative
     name: Standard - Disabled
     markup: |
-      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--warning" disabled>
+      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--negative" disabled>
         <span class="spectrum-Button-label">Delete</span>
       </button>
 
-      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--warning" disabled>
+      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--negative" disabled>
         <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
           <use xlink:href="#spectrum-icon-18-Delete" />
         </svg>
         <span class="spectrum-Button-label">Delete</span>
       </button>
 
-  - id: button-quiet-warning
-    name: Warning (quiet)
+  - id: button-quiet-negative
+    name: Negative (quiet)
     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--warning spectrum-Button--quiet spectrum-Button--sizeS">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeS">
             <span class="spectrum-Button-label">Delete</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet spectrum-Button--sizeS">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeS">
             <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
@@ -118,11 +118,11 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet spectrum-Button--sizeM">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeM">
             <span class="spectrum-Button-label">Delete</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet spectrum-Button--sizeM">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeM">
             <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
@@ -133,11 +133,11 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet spectrum-Button--sizeL">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeL">
             <span class="spectrum-Button-label">Delete</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet spectrum-Button--sizeL">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeL">
             <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
@@ -148,11 +148,11 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet spectrum-Button--sizeXL">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeXL">
             <span class="spectrum-Button-label">Delete</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet spectrum-Button--sizeXL">
+          <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeXL">
             <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Delete">
               <use xlink:href="#spectrum-icon-18-Delete" />
             </svg>
@@ -161,14 +161,14 @@ examples:
         </div>
       </div>
 
-  - id: button-quiet-warning
-    name: Warning (quiet) - Disabled
+  - id: button-quiet-negative
+    name: Negative (quiet) - Disabled
     markup: |
-      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--warning spectrum-Button--quiet" disabled>
+      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--negative spectrum-Button--quiet" disabled>
         <span class="spectrum-Button-label">Button</span>
       </button>
 
-      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--warning spectrum-Button--quiet" disabled>
+      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--negative spectrum-Button--quiet" disabled>
         <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
           <use xlink:href="#spectrum-icon-18-Delete" />
         </svg>

diff --git a/components/button/skin.css b/components/button/skin.css
@@ -103,34 +103,34 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Button--warning {
-  background-color: var(--spectrum-button-m-warning-texticon-background-color);
-  border-color: var(--spectrum-button-m-warning-texticon-border-color);
-  color: var(--spectrum-button-m-warning-texticon-text-color);
+.spectrum-Button--negative {
+  background-color: var(--spectrum-button-m-negative-texticon-background-color);
+  border-color: var(--spectrum-button-m-negative-texticon-border-color);
+  color: var(--spectrum-button-m-negative-texticon-text-color);
 
   &:hover {
-    background-color: var(--spectrum-button-m-warning-texticon-background-color-hover);
-    border-color: var(--spectrum-button-m-warning-texticon-border-color-hover);
-    color: var(--spectrum-button-m-warning-texticon-text-color-hover);
+    background-color: var(--spectrum-button-m-negative-texticon-background-color-hover);
+    border-color: var(--spectrum-button-m-negative-texticon-border-color-hover);
+    color: var(--spectrum-button-m-negative-texticon-text-color-hover);
   }
 
   &:focus-ring {
-    background-color: var(--spectrum-button-m-warning-texticon-background-color-key-focus);
-    border-color: var(--spectrum-button-m-warning-texticon-border-color-key-focus);
-    color: var(--spectrum-button-m-warning-texticon-text-color-key-focus);
+    background-color: var(--spectrum-button-m-negative-texticon-background-color-key-focus);
+    border-color: var(--spectrum-button-m-negative-texticon-border-color-key-focus);
+    color: var(--spectrum-button-m-negative-texticon-text-color-key-focus);
   }
 
   &:active {
-    background-color: var(--spectrum-button-m-warning-texticon-background-color-down);
-    border-color: var(--spectrum-button-m-warning-texticon-border-color-down);
-    color: var(--spectrum-button-m-warning-texticon-text-color-down);
+    background-color: var(--spectrum-button-m-negative-texticon-background-color-down);
+    border-color: var(--spectrum-button-m-negative-texticon-border-color-down);
+    color: var(--spectrum-button-m-negative-texticon-text-color-down);
   }
 
   &:disabled,
   &.is-disabled {
-    background-color: var(--spectrum-button-m-warning-texticon-background-color-disabled);
-    border-color: var(--spectrum-button-m-warning-texticon-border-color-disabled);
-    color: var(--spectrum-button-m-warning-texticon-text-color-disabled);
+    background-color: var(--spectrum-button-m-negative-texticon-background-color-disabled);
+    border-color: var(--spectrum-button-m-negative-texticon-border-color-disabled);
+    color: var(--spectrum-button-m-negative-texticon-text-color-disabled);
   }
 }
 
@@ -268,33 +268,33 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Button--warning.spectrum-Button--quiet {
-  background-color: var(--spectrum-button-m-warning-quiet-texticon-background-color);
-  border-color: var(--spectrum-button-m-warning-quiet-texticon-border-color);
-  color: var(--spectrum-button-m-warning-quiet-texticon-text-color);
+.spectrum-Button--negative.spectrum-Button--quiet {
+  background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color);
+  border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color);
+  color: var(--spectrum-button-m-negative-quiet-texticon-text-color);
 
   &:hover {
-    background-color: var(--spectrum-button-m-warning-quiet-texticon-background-color-hover);
-    border-color: var(--spectrum-button-m-warning-quiet-texticon-border-color-hover);
-    color: var(--spectrum-button-m-warning-quiet-texticon-text-color-hover);
+    background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color-hover);
+    border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color-hover);
+    color: var(--spectrum-button-m-negative-quiet-texticon-text-color-hover);
   }
 
   &:focus-ring {
-    background-color: var(--spectrum-button-m-warning-quiet-texticon-background-color-key-focus);
-    border-color: var(--spectrum-button-m-warning-quiet-texticon-border-color-key-focus);
-    color: var(--spectrum-button-m-warning-quiet-texticon-text-color-key-focus);
+    background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color-key-focus);
+    border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color-key-focus);
+    color: var(--spectrum-button-m-negative-quiet-texticon-text-color-key-focus);
   }
 
   &:active {
-    background-color: var(--spectrum-button-m-warning-quiet-texticon-background-color-down);
-    border-color: var(--spectrum-button-m-warning-quiet-texticon-border-color-down);
-    color: var(--spectrum-button-m-warning-quiet-texticon-text-color-down);
+    background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color-down);
+    border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color-down);
+    color: var(--spectrum-button-m-negative-quiet-texticon-text-color-down);
   }
 
   &:disabled,
   &.is-disabled {
-    background-color: var(--spectrum-button-m-warning-quiet-texticon-background-color-disabled);
-    border-color: var(--spectrum-button-m-warning-quiet-texticon-border-color-disabled);
-    color: var(--spectrum-button-m-warning-quiet-texticon-text-color-disabled);
+    background-color: var(--spectrum-button-m-negative-quiet-texticon-background-color-disabled);
+    border-color: var(--spectrum-button-m-negative-quiet-texticon-border-color-disabled);
+    color: var(--spectrum-button-m-negative-quiet-texticon-text-color-disabled);
   }
 }