@stackoverflow/stacks 1.7.1 → 1.8.0

package/lib/css/components/labels.less

@@ -23,19 +23,19 @@
     // MODIFIERS
     // Sizes
     &&__sm {
-        --_la-fs: var(--fs-caption);
+        .size-styles(sm; la; @styles: fs);
     }
 
     &&__md {
-        --_la-fs: var(--fs-body3);
+        .size-styles(md; la; @styles: fs);
     }
 
     &&__lg {
-        --_la-fs: var(--fs-title);
+        .size-styles(lg; la; @styles: fs);
     }
 
     &&__xl {
-        --_la-fs: var(--fs-headline1);
+        .size-styles(xl; la; @styles: fs);
     }
 
     // CHILD ELEMENTS

package/lib/css/components/link.less

@@ -83,6 +83,13 @@ a,
         }
     }
 
+    // MODIFIERS
+    fieldset[disabled] & {
+        box-shadow: none !important;
+        opacity: var(--_o-disabled-static);
+        pointer-events: none;
+    }
+
     // INTERACTION
     &:active,
     &:hover {

package/lib/css/components/post-summary.less

@@ -206,8 +206,12 @@
                 margin: 0 !important;
             }
 
-            padding: var(--su8) !important; // To override .s-btn class attributes
-            position: absolute !important; // To override .s-btn class attributes
+            &,
+            &.s-btn { // To override .s-btn class attributes
+                padding: var(--su8);
+                position: absolute;
+            }
+
             right: var(--su8);
             top: var(--su8);
         }

package/lib/css/components/select.less

@@ -0,0 +1,148 @@
+.s-select {
+    --_se-arrow-bc: currentColor transparent;
+    --_se-arrow-size: var(--su-static4); // Constant
+    --_se-select-bc: var(--bc-darker);
+    --_se-select-bc-focus: var(--theme-secondary-300);
+    --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+    --_se-select-bg: var(--white);
+    --_se-select-br: var(--br-sm);
+    --_se-select-fc: var(--black);
+    --_se-select-px: 0.7em;
+    --_se-select-py: 0.6em;
+    --_se-select-fs: var(--fs-body1);
+
+    // CONTEXTUAL STYLES
+    @supports (-webkit-overflow-scrolling: touch) {
+        --_se-select-fs: 16px; // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
+        --_se-select-px: 0.55em; // Compensate for the larger font size so we generally keep the input the same size
+        --_se-select-py: 0.4em; // Compensate for the larger font size so we generally keep the input the same size
+    }
+
+    // MODIFIERS
+    .input-states({
+        position: relative;
+    });
+
+    .validation-states(se-select);
+
+    .is-disabled & {
+        --_se-arrow-bc: var(--bc-darker) transparent;
+    }
+
+    &&__sm {
+        .size-styles(sm; se-select; @styles: fs);
+        // --_se-select-fs: var(--fs-caption);
+    }
+
+    &&__md {
+        .size-styles(md; se-select; @styles: br, fs);
+        --_se-select-py: 0.5em;
+    }
+
+    &&__lg {
+        .size-styles(lg; se-select; @styles: br, fs);
+        --_se-select-px: 0.6em;
+        --_se-select-py: 0.45em;
+    }
+
+    &&__xl {
+        .size-styles(xl; se-select; @styles: br, fs);
+        --_se-select-px: 0.5em;
+        --_se-select-py: 0.4em;
+    }
+
+    // CHILD ELEMENTS
+    select&,
+    & > select {
+        .webkit-autofill();
+    }
+
+    &:before,
+    &:after { // menu arrows
+        border-color: var(--_se-arrow-bc);
+        border-style: solid;
+        border-width: var(--_se-arrow-size);
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        right: calc(var(--su-static12) + var(--su-static1));
+        z-index: var(--zi-selected);
+    }
+
+    &:after {
+        border-bottom-width: 0;
+        top: calc(50% + var(--su-static1));
+    }
+
+    &:before {
+        border-top-width: 0;
+        top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+    }
+
+    > select { // Menu
+        // CONTEXTUAL STYLES
+        fieldset[disabled] &,
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: var(--_o-disabled-static);
+        }
+
+        &[readonly],
+        .is-readonly & { // [1]
+            --_se-select-bc: var(--bc-light);
+            --_se-select-bg: var(--black-050);
+            --_se-select-fc: var(--black-200);
+
+            .highcontrast-mode({
+                --_se-select-fc: var(--fc-light);
+            });
+
+            cursor: not-allowed;
+        }
+
+        // CHILD ELEMENTS
+        &::-moz-focus-inner {
+            outline: none !important;
+        }
+
+        // INTERACTION
+        &:focus {
+            .highcontrast-mode({
+                --_se-select-bc-focus: var(--black);
+            });
+
+            border-color: var(--_se-select-bc-focus);
+            box-shadow: var(--_se-select-bs-focus);
+
+            color: var(--black);
+            outline: 0;
+        }
+
+        background-color: var(--_se-select-bg);
+        border: var(--su-static1) solid var(--_se-select-bc);
+        border-radius: var(--_se-select-br);
+        color: var(--_se-select-fc);
+        font-size: var(--_se-select-fs);
+        padding: var(--_se-select-py) var(--_se-select-px);
+
+        appearance: none;
+        font-family: inherit;
+        height: 100%; // Fill the height of its parent
+        line-height: var(--lh-sm);
+        outline: 0;
+        padding-right: var(--su32);
+        position: relative; // This prevents Firefox from requiring a second click to select options
+        width: 100%;
+    }
+
+    .s-input-icon {
+        right: var(--su32);
+    }
+
+    color: var(--fc-dark);
+    position: relative;
+}
+
+// [1] The readonly attribute is not supported on select elements
+//      See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
+//      and https://github.com/StackExchange/Stacks/pull/1040#discussion_r931144086

package/lib/css/components/tags.less

@@ -42,12 +42,12 @@
     // MODIFIERS
     // Sizes
     &&__xs {
-        --_ta-fs: var(--fs-fine);
+        .size-styles(xs; ta; @styles: fs);
         --_ta-lh: 1.4;
         --_ta-px: var(--su2);
     }
     &&__sm {
-        --_ta-fs: var(--fs-caption);
+        .size-styles(sm; ta; @styles: fs);
         --_ta-lh: 1.5;
     }
     &&__md {
@@ -56,7 +56,7 @@
         --_ta-lh: 1.733333333;
     }
     &&__lg {
-        --_ta-br: calc(var(--br-sm) + 1px);
+        --_ta-br: calc(var(--br-sm) + var(--su-static1));
         --_ta-fs: var(--fs-subheading);
         --_ta-lh: 1.684210526;
         --_ta-px: var(--su6);

package/lib/css/components/toggle-switches.less

@@ -5,6 +5,14 @@
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-500);
 
+    fieldset[disabled] & {
+        &,
+        & label {
+            cursor: not-allowed;
+            opacity: var(--_o-disabled-static);
+        }
+    }
+
     &&__multiple { // TODO split single and multiple toggle into two seperate components
         input[type="radio"] {
             &:checked {

package/lib/css/exports/mixins.less

@@ -88,17 +88,6 @@
     }
 }
 
-//  ===========================================================================
-//  --  APPEARANCE
-//      Use this to overwrite the default appearance properties
-//  ---------------------------------------------------------------------------
-.appearance(@all) {
-    -webkit-appearance: @all;
-    -moz-appearance: @all;
-    appearance: @all;
-}
-
-
 //  ===========================================================================
 //  --  FONT FACE
 //      Used to load hosted, custom webfonts. You must provide the font's
@@ -194,6 +183,79 @@
                   @amountDecimal);
 }
 
+//  =============================================================================
+//  --  SIZE STYLES
+//      The following mixins let us generate pseudo-private custom properties
+//      for common sizes. They expect a size (@size), a prefix for the custom
+//      property (@prefix), and an array of comma-separates abbreviated styles
+//      (@styles).
+//  -----------------------------------------------------------------------------
+
+.size-styles(@size, @prefix, @styles, @index: length(@styles)) {
+    & when (@index > 0) {
+        @style: extract(@styles, @index);
+
+              // xs
+        & when (@size = xs) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-fine);
+        }
+
+        // sm
+        & when (@size = sm) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-caption);
+        }
+
+        // md
+        & when (@size = md) and (@style = br) {
+            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+            }
+        & when (@size = md) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-body3);
+        }
+
+        // lg
+        & when (@size = lg) and (@style = br) {
+            --_@{prefix}-br: calc(var(--br-sm) + var(--su-static1));
+        }
+        & when (@size = lg) and (@style = fs) {
+                --_@{prefix}-fs: var(--fs-title);
+        }
+
+        // xl
+        & when (@size = xl) and (@style = br) {
+            --_@{prefix}-br: var(--br-md);
+        }
+        & when (@size = xl) and (@style = fs) {
+            --_@{prefix}-fs: var(--fs-headline1);
+        }
+
+        .size-styles(@size, @prefix, @styles, @index: @index - 1);
+    }
+}
+
+//  =============================================================================
+//  --  WEBKIT AUTOFILL
+//  -----------------------------------------------------------------------------
+.webkit-autofill() {
+    &:-webkit-autofill {
+        &:focus {
+            border-color: var(--blue-300);
+            // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
+            -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
+        }
+
+        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset; // This acts as a background color by stretching an inset box shadow across the input
+        -webkit-text-fill-color: var(--black);
+        border-color: var(--blue-300);
+        transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser.
+    }
+
+    &::-webkit-contacts-auto-fill-button {
+        background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware
+    }
+
+}
+
 //  ===========================================================================
 //  Internals only beyond this point -- helpers for .font-face()
 //  ---------------------------------------------------------------------------

package/lib/css/input-utils.less

@@ -0,0 +1,44 @@
+.input-states(@rules) {
+    .is-disabled &,
+    .is-readonly &,
+    .has-success &,
+    .has-error &,
+    .has-warning & {
+        @rules();
+    }
+};
+
+.validation-states(@prefix, @error: {}, @success: {}, @warning: {}) {
+    .has-error &,
+    .has-success &,
+    .has-warning & {
+        --_@{prefix}-bc-focus: ~"var(--_@{prefix}-bc)";
+    }
+
+    .has-error & {
+        --_@{prefix}-bc: var(--red-400);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
+        @error();
+    }
+
+    .has-success & {
+        --_@{prefix}-bc: var(--green-400);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
+        @success();
+    }
+
+    .has-warning & {
+        --_@{prefix}-bc: var(--yellow-600);
+        --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
+        @warning();
+    }
+}
+
+.is-disabled,
+.is-readonly,
+.has-success,
+.has-error,
+.has-warning {
+    position: relative;
+}
+

package/lib/css/stacks-static.less

@@ -1,22 +1,11 @@
-//
-//  STACK OVERFLOW
-//  STATIC STACK ELEMENTS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  This is where all the magic happens.
-//
-//  ============================================================================
-//  $   STATIC ELEMENTS
-//      The following items are elements which we DO NOT allow communities
-//      to modify via variables.
-//  ----------------------------------------------------------------------------
+// stacks-static.less contains styles which we DO NOT allow communities to modify via variables
+// BASE
 @import "base/reset.less";
+@import "base/fieldset.less";
 @import "base/icons.less";
+@import "input-utils.less";
 
-//  --  COMPONENTS
+// COMPONENTS
 @import "components/activity-indicator.less";
 @import "components/anchors.less";
 @import "components/award-bling.less";
@@ -28,7 +17,9 @@
 @import "components/breadcrumbs.less";
 @import "components/button-groups.less";
 @import "components/cards.less";
+@import "components/checkboxes-radios.less";
 @import "components/code-blocks.less";
+@import "components/description.less";
 @import "components/expandable.less";
 @import "components/inputs.less";
 @import "components/labels.less";
@@ -44,6 +35,7 @@
 @import "components/post-summary.less";
 @import "components/progress-bars.less";
 @import "components/prose.less";
+@import "components/select.less";
 @import "components/sidebar-widgets.less";
 @import "components/spinner.less";
 @import "components/table.less";
@@ -53,10 +45,10 @@
 @import "components/uploader.less";
 @import "components/user-cards.less";
 
-//  --  LESS CONSTANTS AND MIXINS
+// LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";
 
-//  --  ATOMIC CLASSES
+// ATOMIC CLASSES
 @import "atomic/borders.less";
 @import "atomic/colors.less";
 @import "atomic/flex.less";
@@ -78,20 +70,18 @@
     #stacks-internals-collect-small();
 });
 
-// We need printing styles to be last so they can override all other styles.
-.print\:d-block {
-    @media print {
+@media print { // We need printing styles to be last so they can override all other styles.
+    .print\:d-block & {
         display: block !important;
     }
-}
-
-.print\:d-none {
-    @media print {
+    .print\:d-none & {
         display: none !important;
     }
 }
 /* stylelint-enable */
 
-//  --  CONFIG
+// CONFIG
 @import "base/configuration-static.less";
 @import "base/internals.less";
+
+// [1] The following items are elements which we DO NOT allow communities to modify via variables.

package/lib/test/{s-avatar.test.ts → s-avatar.a11y.test.ts}

@@ -12,7 +12,7 @@ const avatarStyles = {
 };
 
 const makeTest = ({ testid, theme, classes, child = "" }) => {
-    it(`a11y: ${testid} styles in should be accessible`, async () => {
+    it(`a11y: ${testid} should be accessible`, async () => {
         await fixture(html`<a
             href="#"
             class="s-avatar${classes}"
@@ -40,27 +40,30 @@ const makeTest = ({ testid, theme, classes, child = "" }) => {
     });
 };
 
+// TODO move to test utils
+const buildTestid = (arr) => arr.filter(Boolean).join("-");
+
 describe("s-avatar", () => {
     // Test default, high contrast themes
     baseThemes.forEach((baseTheme) => {
         // Test light, dark theme
         colorThemes.forEach((colorTheme) => {
-            const testidBase = `s-avatar-${
-                baseTheme ? `${baseTheme}-` : ""
-            }${colorTheme}`;
             const theme = [baseTheme, colorTheme].filter(Boolean);
+            const testidBase = buildTestid(["s-avatar", ...theme]);
 
             // Test each size
             ["", ...avatarStyles.sizes].forEach((size) => {
                 const sizeClasses = size ? ` s-avatar__${size}` : "";
                 const classesSize = ` ${sizeClasses}`;
-                const testidSize = `${testidBase}-${size}`;
+                const testidSize = buildTestid([testidBase, size]);
 
                 // Test each size with each child
                 ["", ...avatarStyles.children].forEach((child) => {
-                    const testidChildren = `${testidSize}${
-                        child ? `-with-${child}` : ""
-                    }`;
+                    const testidChildren = buildTestid([
+                        testidSize,
+                        `with-${child}`,
+                    ]);
+
                     makeTest({
                         child,
                         classes: classesSize,

package/lib/test/s-btn.a11y.test.ts

@@ -0,0 +1,123 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import "../ts/index";
+
+// TODO abstract to a helper file…
+// TODO reinstate "theme-dark" test once we add ability to skip tests or resolve dark mode contrast issues
+// const colorThemes = ["theme-dark", "theme-light"];
+const colorThemes = ["theme-light"];
+const baseThemes = ["", "theme-highcontrast"];
+
+const btnStyles = {
+    variants: ["danger", "muted", "primary"],
+    modifiers: ["filled", "outlined", "filled-outlined"],
+    secondaryModifiers: ["dropdown", "icon"],
+    globalModifiers: ["is-loading"],
+    sizes: ["xs", "sm", "md"],
+    resets: ["link", "unset"],
+    social: ["facebook", "github", "google"],
+    // TODO reinstate children test once we add ability to skip tests or resolve badge contrast issues
+    // children: ["badge"],
+};
+
+const makeTest = ({ testid, theme, classes, child = "" }) => {
+    it(`a11y: ${testid} should be accessible`, async () => {
+        await fixture(html`<button
+            class="s-btn${classes}"
+            role="button"
+            data-testid="${testid}"
+        >
+            Ask question
+            <span class="${child === "badge" ? "s-btn--badge" : "d-none"}">
+                <span class="s-btn--number">198</span>
+            </span>
+        </button>`);
+
+        document.body.className = "";
+        document.body.classList.add(...theme);
+        const button = screen.getByTestId(testid);
+        // TODO add conditional option for high contrast mode to test against AAA
+        await expect(button).to.be.accessible();
+    });
+};
+
+// TODO move to test utils
+const buildTestid = (arr) => arr.filter(Boolean).join("-");
+
+describe("s-btn", () => {
+    // Test default, high contrast themes
+    baseThemes.forEach((baseTheme) => {
+        // Test light, dark theme
+        colorThemes.forEach((colorTheme) => {
+            const theme = [baseTheme, colorTheme].filter(Boolean);
+            const testidBase = buildTestid(["s-btn", ...theme]);
+
+            // Test each combination of base modifiers
+            ["", ...btnStyles.modifiers].forEach((modifier) => {
+                const modifierClasses = modifier
+                    ? ` s-btn__${modifier.replace("-", " s-btn__")}`
+                    : "";
+
+                // Test each variant
+                ["", ...btnStyles.variants].forEach((variant) => {
+                    const variantClasses = variant ? ` s-btn__${variant}` : "";
+                    const classesVariant = ` ${variantClasses}${modifierClasses}`;
+                    const testidVariant = buildTestid([
+                        testidBase,
+                        variant,
+                        modifier,
+                    ]);
+
+                    // Test each variant with each child
+                    // TODO reinstate children test once we add ability to skip tests or resolve badge contrast issues
+                    // [...btnStyles.children].forEach((child) => {
+                    //     const testidChildren = `${testidVariant}${
+                    //         child ? `-with-${child}` : ""
+                    //     }`;
+                    //     makeTest({
+                    //         child,
+                    //         classes: classesVariant,
+                    //         testid: testidChildren,
+                    //         theme,
+                    //     });
+                    // });
+
+                    [
+                        "", // Test no additional classes
+                        ...btnStyles.sizes, // Test each size
+                        ...btnStyles.resets, // Test each reset
+                        ...btnStyles.social, // Test each social style
+                    ].forEach((style) => {
+                        const testidStyle = buildTestid([testidVariant, style]);
+                        const classesStyle = `${classesVariant}${
+                            style ? ` s-btn__${style}` : ""
+                        }`;
+
+                        makeTest({
+                            classes: classesStyle,
+                            testid: testidStyle,
+                            theme,
+                        });
+                    });
+
+                    // Test each globalModifier
+                    [...btnStyles.globalModifiers].forEach((globalModifier) => {
+                        const testidGlobal = buildTestid([
+                            testidVariant,
+                            globalModifier,
+                        ]);
+                        const classesGlobal = `${classesVariant}${
+                            globalModifier ? ` ${globalModifier}` : ""
+                        }`;
+
+                        makeTest({
+                            classes: classesGlobal,
+                            testid: testidGlobal,
+                            theme,
+                        });
+                    });
+                });
+            });
+        });
+    });
+});

package/lib/test/s-btn.visual.test.ts

@@ -0,0 +1,16 @@
+import { html, fixture } from "@open-wc/testing";
+import { visualDiff } from "@web/test-runner-visual-regression";
+import "../ts/index";
+
+describe("s-btn", () => {
+    it("should not introduce visual regressions for loading button", async () => {
+        // Adding a padded wrapper to avoid GitHub Actions diff discrepancies
+        const btn = await fixture(html`
+            <div style="height: 38px; width: 88px; display: inline-block;">
+                <button class="s-btn is-loading" type="button">Loading</button>
+            </div>
+        `);
+
+        await visualDiff(btn, "s-btn-is-loading");
+    });
+});