@stackoverflow/stacks 2.2.0 → 2.3.0

package/lib/atomic/spacing.less

@@ -1,21 +1,10 @@
-//
-//  STACK OVERFLOW
-//  SPACING
-//
-//  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/
-//
-//  • SPACING UNIT CSS VARIABLES
-//  • MARGIN
-//  • PADDING
-//  • POSITIONING
-//
-//  ============================================================================
-//  $   SPACING UNITS CSS VARIABLES
-//  ----------------------------------------------------------------------------
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/spacing-mixins.less";
+
+// SPACING UNITS CSS CUSTOM PROPERTIES
 body {
     --su-base: 1;
+    --su-static0: 0px;
     --su-static1: 1px;
     --su-static2: 2px;
     --su-static4: 4px;
@@ -30,6 +19,7 @@ body {
     --su-static96: 96px;
     --su-static128: 128px;
 
+    --su0: var(--su-static0);
     // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
     --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base)));
     --su2: calc(var(--su-static2) * var(--su-base));
@@ -46,297 +36,63 @@ body {
     --su128: calc(var(--su-static128) * var(--su-base));
 }
 
-//  ============================================================================
-//  $   MARGIN
-//  ----------------------------------------------------------------------------
-//  $$ 0 margin
-.m0 { margin: 0 !important; }
-.mt0 { margin-top: 0 !important; }
-.mr0 { margin-right: 0 !important; }
-.mb0 { margin-bottom: 0 !important; }
-.ml0 { margin-left: 0 !important; }
-.mx0 { margin-left: 0 !important; margin-right: 0 !important; }
-.my0 { margin-top: 0 !important; margin-bottom: 0 !important; }
-
-//  $$ auto margin
+// MARGIN
+//  Margin
 .m-auto { margin: auto !important; }
+.generate-spacing('.m', margin, true);
+.generate-spacing('.m', margin, true, percent);
+
+//  Margin top
 .mt-auto { margin-top: auto !important; }
+.generate-spacing('.mt', margin-top, true);
+.generate-spacing('.mt', margin-top, true, percent);
+
+//  Margin right
 .mr-auto { margin-right: auto !important; }
+.generate-spacing('.mr', margin-right, true);
+.generate-spacing('.mr', margin-right, true, percent);
+
+//  Margin bottom
 .mb-auto { margin-bottom: auto !important; }
+.generate-spacing('.mb', margin-bottom, true);
+.generate-spacing('.mb', margin-bottom, true, percent);
+
+//  Margin left
 .ml-auto { margin-left: auto !important; }
+.generate-spacing('.ml', margin-left, true);
+.generate-spacing('.ml', margin-left, true, percent);
+
+//  Margin x-axis, y-axis
 .mx-auto { margin-left: auto !important; margin-right: auto !important; }
 .my-auto { margin-top: auto !important; margin-bottom: auto !important; }
-
-// $$ Margin
-#stacks-internals #build-classes(
-    responsive,
-    '.m',
-    { .template(@value) { margin: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.m0', { margin: 0 !important; });
-
-// $$ Margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mn',
-    { .template(@value) { margin: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Top margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mt',
-    { .template(@value) { margin-top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mt0', { margin-top: 0 !important; });
-
-// $$ Top margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mtn',
-    { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Right margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mr',
-    { .template(@value) { margin-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mr0', { margin-right: 0 !important; });
-
-// $$ Right margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mrn',
-    { .template(@value) { margin-right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Bottom margin
-#stacks-internals #build-classes(
-    responsive,
-    '.mb',
-    { .template(@value) { margin-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.mb0', { margin-bottom: 0 !important; });
-
-// $$ Bottom margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mbn',
-    { .template(@value) { margin-bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-// $$ Left margin
-#stacks-internals #build-classes(
-    responsive,
-    '.ml',
-    { .template(@value) { margin-left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.ml0', { margin-left: 0 !important; });
-
-// $$ Left margin negative
-#stacks-internals #build-classes(
-    responsive,
-    '.mln',
-    { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.mx', { .template(@value) { margin-left: var(~"--su@{value}") !important; margin-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.mxn', { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; margin-right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.my', { .template(@value) { margin-top: var(~"--su@{value}") !important; margin-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #build-classes(
-    '.myn', { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; margin-bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  ============================================================================
-//  $   PADDING
-//  ----------------------------------------------------------------------------
-
-//  $$ 0 padding
-.p0 { padding: 0 !important; }
-.pt0 { padding-top: 0 !important; }
-.pr0 { padding-right: 0 !important; }
-.pb0 { padding-bottom: 0 !important; }
-.pl0 { padding-left: 0 !important; }
-.px0 { padding-left: 0 !important; padding-right: 0 !important; }
-.py0 { padding-top: 0 !important; padding-bottom: 0 !important; }
-
-#stacks-internals #build-classes(
-    responsive,
-    '.p', { .template(@value) { padding: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.p0', { padding: 0 !important; });
-
-//  $$  Top Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pt', { .template(@value) { padding-top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pt0', { padding-top: 0 !important; });
-
-//  $$  Right Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pr', { .template(@value) { padding-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$  Bottom Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pb', { .template(@value) { padding-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pr0', { padding-right: 0 !important; });
-
-//  $$  Left Padding
-#stacks-internals #build-classes(
-    responsive,
-    '.pl', { .template(@value) { padding-left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-#stacks-internals #responsify('.pl0', { padding-left: 0 !important; });
-
-//  $$  X-Axis Padding
-#stacks-internals #build-classes(
-    '.px', { .template(@value) { padding-left: var(~"--su@{value}") !important; padding-right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$  Y-Axis Padding
-#stacks-internals #build-classes(
-    '.py', { .template(@value) { padding-top: var(~"--su@{value}") !important; padding-bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  ============================================================================
-//  $   POSITIONING
-//  ----------------------------------------------------------------------------
-
-//  $$ Top
-#stacks-internals #build-classes(
-    responsive,
-    '.t', { .template(@value) { top: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Top 0, percent
-#stacks-internals #build-classes(
-    '.t', { .template(@value) { top: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Top negative
-#stacks-internals #build-classes(
-    responsive,
-    '.tn', { .template(@value) { top: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Right
-#stacks-internals #build-classes(
-    responsive,
-    '.r', { .template(@value) { right: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Right 0, percent
-#stacks-internals #build-classes(
-    '.r', { .template(@value) { right: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Right negative
-#stacks-internals #build-classes(
-    responsive,
-    '.rn', { .template(@value) { right: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Bottom
-#stacks-internals #build-classes(
-    responsive,
-    '.b', { .template(@value) { bottom: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Bottom 0, percent
-#stacks-internals #build-classes(
-    '.b', { .template(@value) { bottom: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Bottom negative
-#stacks-internals #build-classes(
-    responsive,
-    '.bn', { .template(@value) { bottom: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Left
-#stacks-internals #build-classes(
-    responsive,
-    '.l', { .template(@value) { left: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Left 0, percent
-#stacks-internals #build-classes(
-    '.l', { .template(@value) { left: @value !important; } },
-    0 50% -50% 100% -100%
-);
-
-//  $$ Left negative
-#stacks-internals #build-classes(
-    responsive,
-    '.ln', { .template(@value) { left: calc(var(~"--su@{value}") * -1) !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Inset
-#stacks-internals #build-classes(
-    responsive,
-    '.i', { .template(@value) { inset: var(~"--su@{value}") !important; } },
-    1 2 4 6 8 12 16 24 32 48 64 96 128
-);
-
-//  $$ Inset 0
-#stacks-internals #build-classes(
-    '.i', { .template(@value) { inset: @value !important; } },
-    0
-);
+.generate-spacing('.mx'; margin-left, margin-right; true);
+.generate-spacing('.my'; margin-top, margin-bottom; true);
+
+// PADDING
+.generate-spacing('.p', padding);
+.generate-spacing('.pt', padding-top);
+.generate-spacing('.pr', padding-right);
+.generate-spacing('.pb', padding-bottom);
+.generate-spacing('.pl', padding-left);
+.generate-spacing('.px'; padding-left, padding-right);
+.generate-spacing('.py'; padding-top, padding-bottom);
+
+// POSITIONING
+// Inset
+.generate-spacing('.i', inset);
+
+//  Top
+.generate-spacing('.t', top, true);
+.generate-spacing('.t', top, true, percent);
+
+// Right
+.generate-spacing('.r', right, true);
+.generate-spacing('.r', right, true, percent);
+
+// Bottom
+.generate-spacing('.b', bottom, true);
+.generate-spacing('.b', bottom, true, percent);
+
+// Left
+.generate-spacing('.l', left, true);
+.generate-spacing('.l', left, true, percent);

package/lib/atomic/spacing.less.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../test/less-test-utils";
+
+describe("atomic: misc", () => {
+    it("should output all atomic css classes", async () => {
+        const css = await renderLess(`
+            @import "./lib/atomic/spacing.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

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/],
+    });
+});