@stackoverflow/stacks 2.2.0 → 2.3.1

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

@@ -2,82 +2,81 @@
     // 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);
-    }
+    //  --_bu-py values set below to ensure btn-group height matches same-sized button height
+    // See https://github.com/StackEng/StackOverflow/pull/18992#pullrequestreview-1947490680
+    .s-btn {
+        --_bu-br: var(--br-sm);
+        --_bu-bc-hover: transparent;
+        --_bu-px: calc(var(--su12) - var(--su1)); // 11px
+        --_bu-py: calc(var(--su6) + 0.65px); // 6.65px
 
-    // CHILD ELEMENTS
-    form {
-        &:not(:first-child):not(:last-child) {
-            .s-btn {
-                border-radius: 0;
-            }
+        &.s-btn__xs {
+            --_bu-px: calc(var(--su8) - var(--su1)); // 7px
+            --_bu-py: calc(var(--su2) + 0.9px); // 2.9px
         }
 
-        &:last-child:not(:only-child) {
-            .s-btn:not(:last-child) {
-                border-radius: 0;
-            }
+        &.s-btn__sm {
+            --_bu-px: calc(var(--su8) + var(--su1)); // 9px
+            --_bu-py: calc(var(--su4) + (var(--su2) - 0.15px)); // 5.85px
         }
 
-        &:first-child:not(:only-child) {
-            .s-btn:not(:first-child) {
-                border-radius: 0;
-            }
+        &.s-btn__md {
+            --_bu-px: var(--su12);
+            --_bu-py: calc(var(--su8) + 0.15px); // 8.15px
         }
 
-        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 {
+            // set negative margins so button height isn't affect by badge
+            margin-bottom: -100%;
+            margin-top: -100%;
+            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;
     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/notice/notice.a11y.test.ts

@@ -9,7 +9,7 @@ describe("notice", () => {
             primary: ["important"],
         },
         children: {
-            default: `Test notice`,
+            default: `Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a>`,
         },
         tag: "aside",
     });

package/lib/components/notice/notice.less

@@ -1,107 +1,129 @@
+/**
+ * Generate color variables with a given color name
+ *
+ * Usage example:
+ * .generate-variant-variables(purple, important);
+ *
+ * @colorName - The name of the color to use to construct variables values
+ * @modifier - Modifier name to determine variable values for that modifier
+ */
+.generate-variant-variables(@colorName: "", @modifier: "") {
+    & when (@modifier = "") {
+        --_no-bc: ~"var(--@{colorName}-300)";
+        --_no-bg: ~"var(--@{colorName}-100)";
+        --_no-btn-bg-active: ~"var(--@{colorName}-200)";
+        --_no-btn-bg-focus: ~"var(--@{colorName}-200)";
+        --_no-btn-fc: ~"var(--@{colorName}-500)";
+        --_no-code-bc: ~"var(--@{colorName}-300)";
+        --_no-code-bg: ~"var(--@{colorName}-200)";
+    }
+
+    & when (@modifier = important) {
+        --_no-bc: var(--_no-bg);
+        --_no-bg: ~"var(--@{colorName}-400)";
+        --_no-fc: var(--white);
+        --_no-btn-bg-active: ~"var(--@{colorName}-500)";
+        --_no-btn-bg-focus: ~"var(--@{colorName}-500)";
+        --_no-btn-fc: ~"var(--@{colorName}-100)";
+        --_no-code-bc: ~"var(--@{colorName}-300)";
+        --_no-code-bg: ~"var(--@{colorName}-500)";
+
+        .highcontrast-mode({
+            --_no-bg: ~"var(--@{colorName}-500)";
+        });
+    }
+}
+
+/**
+ * Generate styles for a notice-based component
+ *
+ * Usage example:
+ * .construct-notice-component(s-banner);
+ *
+ * @baseClass - The base class name for the notice component
+ */
 .construct-notice-component(@baseClass) {
     --_no-bc: var(--black-225);
     --_no-bg: var(--black-100);
     --_no-fc: var(--black-500);
-    --_no-btn-bg-focus: var(--black-225);
     --_no-btn-bg-active: var(--black-250);
+    --_no-btn-bg-focus: var(--black-225);
     --_no-btn-fc: var(--_no-fc);
+    --_no-code-bc: var(--black-300);
+    --_no-code-bg: var(--black-200);
+    --_no-code-fc: var(--_no-fc);
 
-    // MODIFIERS
-    &:not(&__important) {
-        .dark-mode({
-            --_no-bc: var(--_no-bg);
-        });
-
-        .highcontrast-mode({
-            --_no-bc: currentColor;
-        });
-
-        .highcontrast-dark-mode({
-            --_no-bc: currentColor;
-        });
-    }
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        --_no-bc: var(--_no-bg);
+    });
+
+    .highcontrast-mode({
+        &,
+        &.@{baseClass}__danger,
+        &.@{baseClass}__info,
+        &.@{baseClass}__success,
+        &.@{baseClass}__warning {
+            --_no-code-bc: var(--black-400);
+            --_no-code-bg: var(--white);
+            --_no-code-fc: var(--black);
+
+            &.@{baseClass}__important {
+                --_no-code-bc: var(--black-200);
+                --_no-code-bg: var(--black);
+                --_no-code-fc: var(--white);
+            }
+        }
+    });
 
-    &__important {
+    // MODIFIERS
+    &__important:not(.@{baseClass}__danger):not(.@{baseClass}__info):not(.@{baseClass}__success):not(.@{baseClass}__warning) {
         --_no-bc: var(--_no-bg);
         --_no-bg: var(--black-500);
         --_no-fc: var(--white);
         --_no-btn-bg-focus: var(--black-600);
         --_no-btn-bg-active: var(--black-600);
         --_no-btn-fc: var(--_no-fc);
-        --_no-code-bg: var(--black-300);
+        --_no-code-bc: var(--black-300);
+        --_no-code-bg: var(--black-600);
     }
 
     // VARIANTS
     &__danger {
-        --_no-bc: var(--red-300);
-        --_no-bg: var(--red-100);
-        --_no-btn-bg-active: var(--red-200);
-        --_no-btn-bg-focus: var(--red-200);
-        --_no-btn-fc: var(--red-500);
-        --_no-code-bg: var(--red-300);
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(red);
+        }
 
         &.@{baseClass}__important {
-            --_no-bc: var(--_no-bg);
-            --_no-bg: var(--red-400);
-            --_no-btn-bg-active: var(--red-500);
-            --_no-btn-bg-focus: var(--red-500);
-            --_no-btn-fc: var(--red-100);
-
-            .highcontrast-mode({
-                --_no-bg: var(--red-500);
-            });
+            .generate-variant-variables(red, important);
         }
     }
 
     &__info {
-        --_no-bc: var(--theme-secondary-300);
-        --_no-bg: var(--theme-secondary-100);
-        --_no-btn-bg-focus: var(--theme-secondary-200);
-        --_no-btn-bg-active: var(--theme-secondary-200);
-        --_no-btn-fc: var(--theme-secondary-500);
-        --_no-code-bg: var(--theme-secondary-300);
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(theme-secondary);
+        }
 
         &.@{baseClass}__important {
-            --_no-bc: var(--_no-bg);
-            --_no-bg: var(--theme-secondary-400);
-            --_no-btn-bg-active: var(--theme-secondary-500);
-            --_no-btn-bg-focus: var(--theme-secondary-500);
-            --_no-btn-fc: var(--theme-secondary-100);
-
-            .highcontrast-mode({
-                --_no-bg: var(--theme-secondary-500);
-            });
+            .generate-variant-variables(theme-secondary, important);
         }
     }
 
     &__success {
-        --_no-bc: var(--green-300);
-        --_no-bg: var(--green-100);
-        --_no-btn-bg-active: var(--green-200);
-        --_no-btn-bg-focus: var(--green-200);
-        --_no-btn-fc: var(--green-500);
-        --_no-code-bg: var(--green-300);
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(green);
+        }
 
         &.@{baseClass}__important {
-            --_no-bc: var(--_no-bg);
-            --_no-bg: var(--green-400);
-            --_no-btn-bg-active: var(--green-500);
-            --_no-btn-bg-focus: var(--green-500);
-            --_no-btn-fc: var(--green-100);
-
-            .highcontrast-mode({
-                --_no-bg: var(--green-500);
-            });
+            .generate-variant-variables(green, important);
         }
     }
 
     &__warning {
-        --_no-bc: var(--yellow-300);
-        --_no-bg: var(--yellow-100);
-        --_no-btn-bg-active: var(--yellow-200);
-        --_no-btn-bg-focus: var(--yellow-200);
-        --_no-btn-fc: var(--yellow-600);
-        --_no-code-bg: var(--yellow-300);
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(yellow);
+            --_no-btn-fc: var(--yellow-600);
+        }
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
@@ -110,9 +132,13 @@
             --_no-btn-fc: var(--_no-fc);
             --_no-btn-bg-active: var(--yellow-300);
             --_no-btn-bg-focus: var(--yellow-300);
+            --_no-code-bc: var(--yellow-500);
+            --_no-code-bg: var(--yellow-300);
 
             .dark-mode({
-                --_no-fc: var(--yellow-200);
+                --_no-fc: var(--white);
+                --_no-code-bc: var(--yellow-300);
+                --_no-code-bg: var(--yellow-500);
             });
 
             .highcontrast-mode({
@@ -126,21 +152,24 @@
 
     // CHILD ELEMENTS
     code {
-        background: var(--_no-code-bg, transparent);
+        background-color: var(--_no-code-bg);
+        color: var(--_no-code-fc);
+        outline: var(--su-static1) solid var(--_no-code-bc);
+
+        border-radius: var(--br-sm);
+        padding-left: var(--su2);
+        padding-right: var(--su2);
     }
 
     & &--btn {
         // TODO: decouple .s-notice--btn from .s-btn
-        &:not(:focus) {
-            box-shadow: none; // This will prevent default .s-btn box-shadow from showing
-        }
-
         &:active {
             background-color: var(--_no-btn-bg-active, inherit) !important;
         }
 
-        &:focus,
-        &:hover {
+        &:focus-visible,
+        &:hover,
+        &.focus-inset-bordered {
             background-color: var(--_no-btn-bg-focus, inherit) !important;
         }
 

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

@@ -13,11 +13,11 @@ describe("notice", () => {
             ariaHidden: "false",
         },
         children: {
-            default: `Test notice`,
+            default: `Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a>`,
         },
         tag: "aside",
         template: ({ component, testid }) => html`
-            <div class="d-inline-block p8" data-testid="${testid}">
+            <div class="d-inline-block p8 wmx5" data-testid="${testid}">
                 ${component}
             </div>
         `,

package/lib/components/pagination/pagination.less

@@ -40,9 +40,13 @@
         }
 
         &:focus-visible {
+            .focus-styles(true, true);
+        }
+
+        &:focus-visible,
+        &.focus-inset-bordered {
             background-color: var(--_pa-item-bg-focus);
             color: var(--_pa-item-fc-focus);
-            .focus-styles(true, true);
         }
 
         background-color: var(--_pa-item-bg);

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

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

@@ -67,7 +67,8 @@
                 &,
                 &:active,
                 &:hover,
-                &:focus {
+                &:focus,
+                .focus-bordered {
                     .highcontrast-mode({
                         border-color: currentColor;
                     });