feat(button): add "featured" variant (#1857)

* feat(button): add "featured" variant

https://stackoverflow.atlassian.net/browse/STACKS-680

* Modify high contrast filled bg color

* Fix button border color quirks

When filled/selected buttons were hovered, the currentColor would be used for the border color. This commit ensures the correct border color is used on filled/selected buttons

* Add featured buttons to docs

* Modify test skipped ids to exclude appropriate featured buttons

* Add visual test images

* Update s-btn-group images

* Revert "Update s-btn-group images"

This reverts commit 0907245.

* Minor muted selected border color fix

* Minor docs fixes

Addresses #1857 (comment) and similar

* Update new test images to .ico extension

* Add featured variant description to docs

Sourced from here #1857 (comment)

* Update purple-400 HC value

* Remove featured HC filled bg override

* Update visual regression test images

docs/_data/buttons.json

@@ -35,6 +35,26 @@
         }
       ]
     }
+  ]
+  ,
+  "featured": [
+    {
+      "title": "Featured",
+      "class": "s-btn__featured",
+      "classes": [
+        {
+          "title": "Clear"
+        },
+        {
+          "title": "Outlined",
+          "class": "s-btn__outlined"
+        },
+        {
+          "title": "Filled",
+          "class": "s-btn__filled"
+        }
+      ]
+    }
   ],
   "muted": [
     {
@@ -85,6 +105,20 @@
           "class": "s-btn__danger",
           "class2": "s-btn__filled"
         },
+        {
+          "title": "Featured, Clear",
+          "class": "s-btn__featured"
+        },
+        {
+          "title": "Featured, Outlined",
+          "class": "s-btn__featured",
+          "class2": "s-btn__outlined"
+        },
+        {
+          "title": "Featured, Filled",
+          "class": "s-btn__featured",
+          "class2": "s-btn__filled"
+        },
         {
           "title": "Muted, Clear",
           "class": "s-btn__muted"
@@ -127,6 +161,20 @@
           "class": "s-btn__danger",
           "class2": "s-btn__filled"
         },
+        {
+          "title": "Featured, Clear",
+          "class": "s-btn__featured"
+        },
+        {
+          "title": "Featured, Outlined",
+          "class": "s-btn__featured",
+          "class2": "s-btn__outlined"
+        },
+        {
+          "title": "Featured, Filled",
+          "class": "s-btn__featured",
+          "class2": "s-btn__filled"
+        },
         {
           "title": "Muted, Clear",
           "class": "s-btn__muted"
@@ -169,6 +217,20 @@
           "class": "s-btn__danger",
           "class2": "s-btn__filled"
         },
+        {
+          "title": "Featured, Clear",
+          "class": "s-btn__featured"
+        },
+        {
+          "title": "Featured, Outlined",
+          "class": "s-btn__featured",
+          "class2": "s-btn__outlined"
+        },
+        {
+          "title": "Featured, Filled",
+          "class": "s-btn__featured",
+          "class2": "s-btn__filled"
+        },
         {
           "title": "Muted, Clear",
           "class": "s-btn__muted"

docs/product/components/buttons.html

@@ -11,6 +11,7 @@
     <ol class="stacks-list">
         <li><a href="#base">Base</a></li>
         <li><a href="#danger">Danger</a></li>
+        <li><a href="#featured">Featured</a></li>
         <li><a href="#muted">Muted</a></li>
     </ol>
     <p class="stacks-copy">Each style is explained below, detailing how and where to use these styles.</p>
@@ -119,6 +120,61 @@
         </div>
     </div>
 
+
+    {% header "h3", "Featured" %}
+    <!-- TODO add featured button description -->
+    <p class="stacks-copy">Featured buttons are a secondary button style, used to visually draw attention to something new or temporary, usually as part of onboarding or to announce a new feature. These should be used sparingly, and permanent placements should be avoided.</p>
+
+    <div class="stacks-preview">
+{% highlight html %}
+<button class="s-btn s-btn__featured" type="button">…</button>
+<button class="s-btn s-btn__outlined s-btn__featured" type="button">…</button>
+<button class="s-btn s-btn__filled s-btn__featured" type="button">…</button>
+{% endhighlight %}
+        <div class="stacks-preview--example">
+            <div class="overflow-x-auto">
+                <table class="wmn5 s-table s-table__bx-simple">
+                    <thead>
+                        <tr>
+                            <th scope="col">Type</th>
+                            <th scope="col" class="s-table--cell4">Class</th>
+                            <th scope="col" class="ta-center">Default State</th>
+                            <th scope="col" class="ta-center">Selected State</th>
+                            <th scope="col" class="ta-center">Disabled State</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for btn in buttons.featured %}
+                            {% assign types = btn.classes %}
+                            {% for class in types %}
+                            <tr>
+                                <th scope="row" class="va-middle">
+                                    {{ class.title }}
+                                </th>
+                                <td class="va-middle">
+                                    <div class="d-flex g4 fw-wrap">
+                                        <code class="flex--item stacks-code">.s-btn</code>
+                                        {% if btn.class != nil %}
+                                            <code class="flex--item stacks-code">.{{ btn.class }}</code>
+                                        {% endif %}
+                                        {% if class.class != nil %}
+                                            <code class="flex--item stacks-code">.{{ class.class }}</code>
+                                        {% endif %}
+                                    </div>
+                                </td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.class }} {{ class.class }}" type="button">Ask question</button></td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.class }} {{ class.class }} is-selected" type="button" aria-pressed="true">Ask question</button></td>
+                                <td class="va-middle ta-center px4"><button class="ws-nowrap s-btn {{ btn.class }} {{ class.class }}" type="button" disabled>Ask question</button></td>
+                            </tr>
+                            {% endfor %}
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>
+
     {% header "h3", "Muted" %}
     <p class="stacks-copy">Muted buttons are a secondary button style, a grayscale visual treatment. Used in layouts for the least important items or currently inactive actions.</p>
 

lib/components/button/button.a11y.test.ts

@@ -14,8 +14,8 @@ describe("button", () => {
             /s-btn-(light|dark).*?badge/,
             // matches tests with a badge in highcontrast-light modes, excluding filled, danger, github, facebook, sm, or xs
             /s-btn-highcontrast-light-(?!.*(filled|danger|github|facebook|sm|xs)).*?badge/,
-            // matches tests with a badge in highcontrast-light modes, are muted and/or outlined, and are sm or xs
-            /s-btn-highcontrast-light-(?:muted-outlined-|muted-|outlined-)?(?:sm|xs).*?badge/,
+            // matches tests with a badge in highcontrast-light modes, are muted or featured and/or outlined, and are sm or xs
+            /s-btn-highcontrast-light-(?:muted-|featured-)?(?:outlined-)?(?:sm|xs).*?badge/,
         ],
     });
 });

lib/components/button/button.less

@@ -59,7 +59,6 @@
     .highcontrast-mode({
         --_bu-bc: currentColor;
         --_bu-outlined-bc: var(--_bu-bc);
-        --_bu-bc-selected: var(--_bu-bc);
         --_bu-fc-selected: var(--white);
         --_bu-outlined-fc-selected: var(--white);
         --_bu-badge-o: 0.8;
@@ -236,6 +235,7 @@
 
     // VARIANTS
     &&__danger,
+    &&__featured,
     &&__muted {
         .highcontrast-mode({
             --_bu-filled-bc: transparent;
@@ -268,6 +268,32 @@
         --_bu-number-fc-filled: var(--black);
     }
 
+    &&__featured {
+        --_bu-bg-active: var(--purple-300);
+        --_bu-bg-hover: var(--purple-200);
+        --_bu-bg-selected: var(--purple-300);
+        --_bu-fc: var(--purple-500);
+        --_bu-fc-active: var(--_bu-fc);
+        --_bu-fc-hover: var(--purple-500);
+        --_bu-fc-selected: var(--purple-600);
+        --_bu-filled-bc: transparent;
+        --_bu-filled-bc-selected: var(--_bu-filled-bc);
+        --_bu-filled-bg: var(--purple-400);
+        --_bu-filled-bg-active: var(--purple-500);
+        --_bu-filled-bg-hover: var(--purple-500);
+        --_bu-filled-bg-selected: var(--purple-600);
+        --_bu-filled-fc: var(--white);
+        --_bu-filled-fc-active: var(--_bu-filled-fc);
+        --_bu-filled-fc-hover: var(--_bu-filled-fc);
+        --_bu-filled-fc-selected: var(--_bu-filled-fc);
+        --_bu-outlined-bc: var(--purple-400);
+        --_bu-outlined-bc-selected: var(--purple-500);
+        --_bu-outlined-bg-selected: var(--_bu-bg-selected);
+        --_bu-outlined-fc-selected: var(--_bu-fc-selected);
+        --_bu-number-fc: var(--white);
+        --_bu-number-fc-filled: var(--black);
+    }
+
     &&__muted {
         --_bu-bc-hover: var(--black-300);
         --_bu-bg-active: var(--black-150);
@@ -300,6 +326,7 @@
         --_bu-number-fc-focus: var(--black-500);
 
         .highcontrast-mode({
+            --_bu-bc-hover: currentColor;
             --_bu-bg-hover: var(--black-225);
             // // The filled modifier on the muted button is deprecated and is to be
             // // removed in Stacks Classic v2
@@ -309,6 +336,7 @@
             --_bu-filled-bg-selected: var(--black-500);
             --_bu-filled-fc: var(--white);
             --_bu-filled-fc-selected: var(--_bu-filled-fc);
+            --_bu-bc-selected: currentColor;
             --_bu-fc-selected: var(--black);
             --_bu-number-fc: var(--white);
             --_bu-number-fc-filled: var(--black);
@@ -408,7 +436,7 @@
                 color: var(--_bu-filled-fc-hover);
             }
 
-            &:not(.s-btn__outlined) {
+            &:not(.s-btn__outlined):not(.s-btn__filled) {
                 border-color: var(--_bu-bc-hover);
             }
 

lib/components/button/button.test.setup.ts

@@ -16,7 +16,7 @@ const getChild = (child?: string): string => {
 // TODO test disabled states, interaction pseudo-classes
 const testArgs: TestVariationArgs = {
     baseClass: "s-btn",
-    variants: ["danger", "muted"],
+    variants: ["danger", "featured", "muted"],
     modifiers: {
         primary: ["filled", "outlined"],
         secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],

lib/exports/__snapshots__/color.less.test.ts.snap

@@ -518,7 +518,7 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --purple-100: hsl(237, 83%, 98%);
     --purple-200: hsl(237, 83%, 98%);
     --purple-300: hsl(237, 55%, 57%);
-    --purple-400: hsl(237, 55%, 57%);
+    --purple-400: hsl(237, 52%, 48%);
     --purple-500: hsl(237, 50%, 32%);
     --purple-600: hsl(237, 50%, 32%);
     --gold-100: hsl(46, 100%, 91%);

lib/exports/color-sets.less

@@ -275,7 +275,7 @@
     100: hsl(237, 83%, 98%);
     200: hsl(237, 83%, 98%);
     300: hsl(237, 55%, 57%);
-    400: hsl(237, 55%, 57%);
+    400: hsl(237, 52%, 48%);
     500: hsl(237, 50%, 32%);
     600: hsl(237, 50%, 32%);
 }