@stackoverflow/stacks 2.1.1 → 2.3.0

package/lib/components/badge/badge.visual.test.ts

@@ -1,15 +1,13 @@
 import { runVisualTests } from "../../test/visual-test-utils";
-// import { Icons } from "@stackoverflow/stacks-icons";
+import { IconEyeSm } from "@stackoverflow/stacks-icons/icons";
 import "../../index";
 import { html } from "@open-wc/testing";
 
 const variants = {
     blings: ["gold", "silver", "bronze"],
     numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
-    states: {
-        filled: ["danger", "muted"],
-        other: ["info", "warning"],
-    },
+    filled: ["danger", "muted"],
+    states: ["danger", "muted", "info", "new", "warning"],
     users: ["admin", "moderator", "staff"],
 };
 
@@ -46,7 +44,6 @@ describe("badge", () => {
             },
             options: {
                 includeNullVariant: false,
-                includeNullModifier: false,
             },
             tag: "span",
             template,
@@ -62,22 +59,52 @@ describe("badge", () => {
         },
         options: {
             includeNullVariant: false,
+        },
+        tag: "span",
+        template,
+    });
+
+    // State badges
+    runVisualTests({
+        baseClass: "s-badge",
+        variants: variants.states,
+        children: {
+            default: `state badge`,
+        },
+        tag: "span",
+        options: {
+            includeNullVariant: false,
+        },
+        template,
+    });
+
+    // State badges w/ filled modifier
+    runVisualTests({
+        baseClass: "s-badge",
+        variants: variants.filled,
+        modifiers: {
+            primary: ["filled"],
+        },
+        children: {
+            default: `filled badge`,
+        },
+        options: {
             includeNullModifier: false,
         },
         tag: "span",
         template,
     });
 
-    // Icon badges
+    // State badges w/ filled modifier and icon
     runVisualTests({
         baseClass: "s-badge",
-        variants: [...variants.states.filled, ...variants.states.other],
+        variants: variants.filled,
         modifiers: {
-            primary: ["icon"],
+            primary: ["filled"],
+            secondary: ["icon"],
         },
         children: {
-            default: "with icon",
-            //     icon: Icons.IconEyeSm,  // TODO fix the icon imports
+            default: `${IconEyeSm} icon badge`,
         },
         options: {
             includeNullModifier: false,
@@ -86,17 +113,18 @@ describe("badge", () => {
         template,
     });
 
-    // Filled badges
+    // State badges w/ icon
     runVisualTests({
         baseClass: "s-badge",
-        variants: variants.states.filled,
+        variants: variants.states.filter((state) => state !== "new"),
+        modifiers: {
+            primary: ["icon"],
+        },
         children: {
-            default: "filled",
-            //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
+            default: `${IconEyeSm} icon badge`,
         },
         options: {
             includeNullModifier: false,
-            includeNullVariant: false,
         },
         tag: "span",
         template,

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

@@ -1,25 +1,21 @@
+import testArgs from "./button.test.setup";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
 describe("button", () => {
     runA11yTests({
-        baseClass: "s-btn",
-        variants: ["danger", "muted"],
-        modifiers: {
-            primary: ["filled", "outlined"],
-            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
-            global: ["is-loading"],
-            standalone: [
-                ...["link", "unset"],
-                ...["facebook", "github", "google"],
-            ],
-        },
-        attributes: {
-            type: "button",
-        },
-        children: {
-            default: "Ask question",
-        },
-        tag: "button",
+        ...testArgs,
+        excludedTestids: [
+            /^s-btn-(?=.*unset).*badge$/, // s-btn with badge and unset variant not supported
+        ],
+        skippedTestids: [
+            // TODO resolve btn badge contrast issues
+            // matches tests with a badge in light and dark modes
+            /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/,
+        ],
     });
 });

package/lib/components/button/button.less

@@ -144,6 +144,10 @@
     // Resets
     &&__link,
     &&__unset {
+        --_bu-baw: 0;
+        --_bu-br: 0;
+        --_bu-p: 0;
+
         &:focus,
         &:focus-visible {
             outline-style: auto;
@@ -151,10 +155,6 @@
     }
 
     &&__link {
-        --_bu-baw: 0;
-        --_bu-br: 0;
-        --_bu-p: 0;
-
         &,
         &:hover,
         &:active,
@@ -180,11 +180,8 @@
         &:hover,
         &:active,
         &:focus {
-            --_bu-baw: 0;
             --_bu-bg: none;
-            --_bu-br: 0;
             --_bu-fc: unset;
-            --_bu-p: 0;
 
             cursor: default;
             font: unset;
@@ -204,12 +201,12 @@
             content: "";
             pointer-events: none;
             position: absolute;
-            right: var(--_bu-p);
+            right: var(--_bu-px, var(--_bu-p));
             top: calc(50% - var(--su-static2));
             z-index: var(--zi-active);
         }
 
-        padding-right: calc(var(--_bu-p) * 2.5);
+        padding-right: calc(var(--_bu-px, var(--_bu-p)) * 2.5);
     }
 
     &&__icon {
@@ -408,24 +405,21 @@
     // INTERACTION
     &:not(&__link):not(&__unset):focus-visible,
     &--radio:focus-visible + & {
-        border-color: var(--theme-secondary-400) !important;
         .focus-styles(true, true);
     }
 
-    &:not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google):not(.is-selected):focus-visible,
-    &--radio:focus-visible + & {
-        &,
-        &.s-btn__filled {
-            &:not(:hover) .s-btn--number {
-                color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
-            }
+    &:not(&--radio:checked + label):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google):not(.is-selected) {
+        &:focus-visible {
+            &.s-btn__filled {
+                &:not(:hover) .s-btn--number {
+                    color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
+                }
 
-            background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
-            color: var(--_bu-fc-focus, var(--_bu-filled-fc));
+                background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
+                color: var(--_bu-fc-focus, var(--_bu-filled-fc));
+            }
         }
-    }
 
-    &:not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google):not(.is-selected) {
         &:hover {
             &.s-btn__filled {
                 background-color: var(--_bu-filled-bg-hover);
@@ -472,7 +466,7 @@
     box-shadow: none;
     color: var(--_bu-fc);
     font-size: var(--_bu-fs);
-    padding: var(--_bu-p);
+    padding: var(--_bu-py, var(--_bu-p)) var(--_bu-px, var(--_bu-p));
 
     cursor: pointer;
     display: inline-block;

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

@@ -0,0 +1,36 @@
+import type { TestVariationArgs } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    switch (child) {
+        case "badge":
+            return `Ask question
+                <span class="s-btn--badge">
+                    <span class="s-btn--number">198</span>
+                </span>`;
+        default:
+            return "Ask question";
+    }
+};
+
+// TODO test disabled states, interaction pseudo-classes
+const testArgs: TestVariationArgs = {
+    baseClass: "s-btn",
+    variants: ["danger", "muted"],
+    modifiers: {
+        primary: ["filled", "outlined"],
+        secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
+        global: ["is-loading"],
+        standalone: [...["link", "unset"], ...["facebook", "github", "google"]],
+    },
+    attributes: {
+        type: "button",
+    },
+    children: {
+        default: getChild(),
+        badge: getChild("badge"),
+    },
+    tag: "button",
+};
+
+export default testArgs;

package/lib/components/button/button.visual.test.ts

@@ -1,41 +1,11 @@
-import { html } from "@open-wc/testing";
+import testArgs from "./button.test.setup";
 import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
-
-const getChild = (child?: string): string => {
-    switch (child) {
-        case "badge":
-            return `Ask question
-                <span class="s-btn--badge">
-                    <span class="s-btn--number">198</span>
-                </span>`;
-        default:
-            return "Ask question";
-    }
-};
+import { html } from "@open-wc/testing";
 
 describe("button", () => {
-    // TODO test disabled states, interaction pseudo-classes
     runVisualTests({
-        baseClass: "s-btn",
-        variants: ["danger", "muted"],
-        modifiers: {
-            primary: ["filled", "outlined"],
-            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
-            global: ["is-loading"],
-            standalone: [
-                ...["link", "unset"],
-                ...["facebook", "github", "google"],
-            ],
-        },
-        attributes: {
-            type: "button",
-        },
-        children: {
-            default: getChild(),
-            badge: getChild("badge"),
-        },
-        tag: "button",
+        ...testArgs,
         template: ({ component, testid }) => html`
             <div
                 class="bg-black-225 d-inline-flex ai-center jc-center hs1 ws2 p8"

package/lib/components/button-group/button-group.a11y.test.ts

@@ -0,0 +1,12 @@
+import { testArgs } from "./button-group.test.setup";
+import { runA11yTests } from "../../test/a11y-test-utils";
+import "../../index";
+
+describe("button group", () => {
+    runA11yTests({
+        ...testArgs,
+        // TODO remove skipped tests once btn badge contrast issues are resolved
+        // see also https://github.com/StackExchange/Stacks/pull/1663
+        skippedTestids: [/s-btn-group-(light|dark|highcontrast-light)-badge/],
+    });
+});

package/lib/components/button-group/button-group.less

@@ -2,82 +2,76 @@
     // CONTEXTUAL STYLES
     #stacks-internals #screen-sm({
         .s-btn {
+            --_bu-px: 0.4em;
+
             &.s-btn__dropdown {
                 padding-right: 1.2em;
 
                 &:after {
-                    right: 0.4em;
+                    right: var(--_bu-px);
                 }
             }
-
-            padding-left: 0.4em;
-            padding-right: 0.4em;
         }
     }, @force-selector: true);
 
-    // VARIANTS
-    &:not(&--radio) .s-btn:not(:first-child):not(:last-child),
-    &&--radio .s-btn:not(:first-of-type):not(:last-of-type) {
-        border-radius: 0;
-    }
-
-    &:not(&--radio) .s-btn:first-child:not(:only-child),
-    &&--radio .s-btn:first-of-type:not(:last-of-type) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    &:not(&--radio) .s-btn:last-child:not(:only-child),
-    &&--radio .s-btn:last-of-type:not(:first-of-type) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+    // CHILD ELEMENTS
+    form {
+        display: flex;
+        margin-right: calc(var(--su-static1) * -1); // -1px
     }
 
-    &:not(&--radio) .s-btn:not(:last-child),
-    &&--radio .s-btn:not(:last-of-type) {
-        margin-right: calc(var(--su-static1) * -1);
-    }
+    .s-btn {
+        --_bu-br: var(--br-sm);
+        --_bu-bc-hover: transparent;
 
-    // CHILD ELEMENTS
-    form {
-        &:not(:first-child):not(:last-child) {
-            .s-btn {
-                border-radius: 0;
-            }
+        &,
+        &.s-btn__md {
+            --_bu-px: var(--su12);
+            --_bu-py: var(--su8);
         }
 
-        &:last-child:not(:only-child) {
-            .s-btn:not(:last-child) {
-                border-radius: 0;
-            }
+        &.s-btn___xs {
+            --_bu-px: var(--su8);
+            --_bu-py: var(--su4);
         }
 
-        &:first-child:not(:only-child) {
-            .s-btn:not(:first-child) {
-                border-radius: 0;
-            }
+        &.s-btn___sm {
+            --_bu-px: calc(var(--su8) + var(--su2));
+            --_bu-py: var(--su6);
         }
 
-        display: flex;
-        margin-right: calc(var(--su-static1) * -1); // -1px
-    }
+        &.is-selected,
+        &--radio:checked + .s-btn {
+            font-weight: bold;
+        }
 
-    .s-btn {
-        &:active {
-            z-index: var(--zi-active);
+        .s-btn--badge {
+            font-weight: normal;
         }
 
-        &.is-selected,
-        &--radio:checked + .s-btn {
-            z-index: var(--zi-selected); // When the button is active or selected, it should pop above its siblings
+        & .s-btn--text {
+            &:before {
+                content: attr(data-text);
+                content: attr(data-text) / "";
+                font-weight: bold;
+                height: 0;
+                pointer-events: none;
+                user-select: none;
+                visibility: hidden;
+            }
+
+            display: inline-flex;
+            flex-direction: column;
         }
 
-        margin-bottom: calc(var(--su-static1) * -1); // When wrapping we need to account for the border
         white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
     }
 
     // STATIC COMPONENT STYLES
-    display: flex;
+    border: var(--su-static1) solid var(--black-300);
+    border-radius: var(--br-md);
+    display: inline-flex; // TODO investigate if changing from flex to inline-flex will be an issue
     flex-wrap: wrap;
     margin-bottom: var(--su-static1); // Compensate for buttons having a margin bottom of -1px to account for row wrapping
+    padding: calc(var(--su-static4) - var(--su-static1));
 }

package/lib/components/button-group/button-group.test.setup.ts

@@ -0,0 +1,77 @@
+import { html } from "@open-wc/testing";
+import type { TestVariationArgs } from "../../test/test-utils";
+
+const btns = [
+    { name: "Newest", isSelected: true },
+    { name: "Frequent" },
+    { name: "Active" },
+];
+
+const getBtn = ({
+    name = "",
+    isRadio,
+    isSelected,
+    hasBadge,
+}: {
+    name: string;
+    isRadio?: boolean;
+    isSelected?: boolean;
+    hasBadge?: boolean;
+}): string => {
+    const baseClasses = "s-btn s-btn__muted";
+    const btnChildren = `
+        <span class="s-btn--text" data-text="${name}">${name}</span>
+        ${
+            hasBadge
+                ? `<span class="s-btn--badge"><span class="s-btn--number">123</span></span>`
+                : ""
+        }
+    `;
+
+    return isRadio
+        ? `<input
+            class="s-btn--radio"
+            type="radio"
+            name="test-btn-radio-group"
+            id="btn-${name}"
+            ${isSelected ? "checked" : ""}/>
+            <label class="${baseClasses}" for="btn-${name}">
+                ${btnChildren}
+            </label>`
+        : `<button
+            class="${baseClasses}${isSelected ? " is-selected" : ""}"
+            ${isSelected ? `aria-current="true"` : ""}
+            type="button">
+                ${btnChildren}
+            </button>`;
+};
+
+const getBtns = (ids: number[]): string => {
+    return ids.map((id) => getBtn(btns[id])).join("");
+};
+
+const testArgs: TestVariationArgs = {
+    baseClass: "s-btn-group",
+    children: {
+        default: getBtns([0, 1, 2]),
+        single: getBtns([0]),
+        form: `
+            ${getBtns([0])}
+            <form class="mb0 p0">
+                ${getBtn(btns[1])}
+            </form>
+            ${getBtns([2])}
+        `,
+        badge: btns.map((btn) => getBtn({ ...btn, hasBadge: true })).join(""),
+        radio: btns.map((btn) => getBtn({ ...btn, isRadio: true })).join(""),
+    },
+    template: ({ component, testid }) =>
+        html`<div
+            class="d-inline-flex ai-center jc-center p8"
+            data-testid="${testid}"
+        >
+            ${component}
+        </div>`,
+};
+
+export { testArgs };

package/lib/components/button-group/button-group.visual.test.ts

@@ -0,0 +1,7 @@
+import { testArgs } from "./button-group.test.setup";
+import { runVisualTests } from "../../test/visual-test-utils";
+import "../../index";
+
+describe("button group", () => {
+    runVisualTests(testArgs);
+});

package/lib/components/input_textarea/input_textarea.less

@@ -102,7 +102,9 @@
     }
 
     // INTERACTION
-    &:focus {
+    // Note: We're applying the focus styles both on `:focus` and `:focus-within` since this component can sometimes be used on the parent of an input such as in our tag selector in Core.
+    &:focus,
+    &:focus-within {
         .focus-styles();
     }
 

package/lib/components/post-summary/post-summary.a11y.test.ts

@@ -0,0 +1,25 @@
+import { runA11yTests } from "../../test/a11y-test-utils";
+import testArgs from "./post-summary.test.setup";
+import "../../index";
+
+describe("post-summary", () => {
+    // Base, sparce
+    runA11yTests({
+        ...testArgs.base,
+        // TODO resolve test failures
+        skippedTestids: [
+            /-deleted/,
+            /-ignored/,
+            /-highcontrast-(light|dark)-watched/,
+        ],
+    });
+
+    // Truncated description sizes
+    runA11yTests(testArgs.sizes);
+
+    // Stats - answers, view hotness
+    runA11yTests(testArgs.stats);
+
+    // Badges
+    runA11yTests(testArgs.badges);
+});