@stackoverflow/stacks 2.5.6 → 2.5.8

package/lib/components/sidebar-widget/sidebar-widget.less

@@ -1,257 +1,257 @@
-.s-sidebarwidget {
-    // COMPONENT-SPECIFIC CONSTANTS
-    @sw-content-px: calc(var(--su16) - var(--su1)); // subtract 1px for border
-    @sw-content-spacing-inner: var(--su12); // the spacing between two adjacent simple items
-    @sw-content-spacing-outer: var(--su16); // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
-    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_sw-bc: var(--bc-medium);
-    --_sw-after-bc: var(--_sw-bc);
-    --_sw-content-bc: var(--bc-light);
-    --_sw-header-bc: var(--_sw-content-bc);
-
-    // MODIFIERS
-    &:not(.s-anchors) {
-        a:not(.button):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
-            &,
-            &:visited {
-                color: var(--black-400);
-            }
-        }
-    }
-
-    // VARIANTS
-    .alternate-color(blue);
-    .alternate-color(yellow);
-    .alternate-color(green);
-
-    // CHILD ELEMENTS
-    & &--action {
-        color: var(--blue-400);
-        float: right;
-        font-size: var(--fs-fine);
-        line-height: calc(var(--fs-body1) * 1.5); // 19.5px - line-height should be the same as in the outside element, so the header and action baselines line up
-        margin: 0 0 var(--su4) var(--su8);
-    }
-
-    & &--content {
-        &:not(table) {
-            &:not(.s-sidebarwidget__items),
-            &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
-                display: flex;
-            }
-        }
-
-        &.s-sidebarwidget__items {
-            &,
-            &.s-sidebarwidget__block-items .s-sidebarwidget--item {
-                display: block;
-            }
-
-            padding: calc(@sw-content-spacing-outer - @sw-content-spacing-inner) @sw-content-px; // the items themselves provide part of the spacing, so the content padding needs to account for that
-        }
-
-        &:active {
-            outline: none;
-        }
-
-        border-top: var(--su-static1) solid var(--_sw-content-bc);
-        margin: 0;
-        padding: @sw-content-spacing-outer @sw-content-px;
-    }
-
-    & &--header {
-        &:first-child {
-            border-top-left-radius: var(--br-sm);
-            border-top-right-radius: var(--br-sm);
-        }
-
-        &.s-sidebarwidget {
-            &__expanding-control {
-                &:before {
-                    border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                    border-left-color: var(--black-400);
-                    border-right-width: 0;
-                    content: '';
-                    float: left;
-                    margin-right: var(--su12);
-                    margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px); // 1.3 is our standard line height
-                    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-                }
-
-                &[aria-expanded='true']:before {
-                    transform: rotate(90deg);
-                }
-
-                cursor: pointer;
-            }
-
-            &__small-bold-text {
-                .s-sidebarwidget--action {
-                    font-weight: normal;
-                    line-height: calc(var(--lh-base) * var(--fs-caption)); // line-height should be the same as in the outside element, so the header and action baselines line up
-                }
-
-                font-size: var(--fs-caption);
-                font-weight: bold;
-            }
-        }
-
-        &:active {
-            outline: none;
-        }
-
-        background: var(--black-100);
-        border-top: var(--su-static1) solid var(--_sw-header-bc);
-        color: var(--black-500);
-        font-size: var(--fs-body2);
-        font-weight: normal;
-        margin: 0;
-        padding: @sw-content-spacing-inner @sw-content-px;
-    }
-
-    & &--item {
-        &,
-        & > :first-child {
-            &[aria-current="true"],
-            &[aria-current="page"] {
-                &:before {
-                    border-left-color: var(--theme-primary);
-                    border-left-style: solid;
-                    border-left-width: calc(var(--su-static1) * 3); // 3px
-                    content: '';
-                    height: calc(100% + @sw-content-spacing-inner);
-                    left: 0;
-                    margin-left: calc(@sw-content-px * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border
-                    margin-top: calc(@sw-content-spacing-inner / 2 * -1);
-                    position: absolute;
-                }
-
-                a { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
-                    &,
-                    &:visited {
-                        color: inherit;
-                    }
-                }
-
-                color: var(--black);
-                font-weight: bold;
-                position: relative;
-            }
-        }
-
-        margin: @sw-content-spacing-inner 0;
-    }
-
-    & &--subnav {
-        li {
-            &[aria-current="page"],
-            &[aria-current="true"] {
-                a {
-                    &,
-                    &:visited {
-                        color: inherit;
-                    }
-                }
-
-                #stacks-internals #bullet-arrow(var(--theme-primary));
-                color: var(--black);
-                font-weight: bold;
-            }
-
-            #stacks-internals #bullet-arrow(var(--black-225));
-            background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
-            background-repeat: no-repeat;
-            background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
-            margin-top: var(--su-static12);
-            padding-left: var(--su-static16);
-        }
-
-        list-style-type: none;
-        margin-left: var(--su8);
-        padding-left: 0;
-    }
-
-    & table&--content&__items {
-        tr.s-sidebarwidget--item {
-            td {
-                padding: 0;
-            }
-
-            display: table-row;
-        }
-
-        border-collapse: separate;
-        border-spacing: @sw-content-spacing-inner;
-        padding: calc(@sw-content-spacing-outer - @sw-content-spacing-inner) calc(@sw-content-px - @sw-content-spacing-inner);
-    }
-
-    &:before { // [1]
-        content: '';
-        display: block;
-        margin-top: calc(var(--su-static1) * -1); // -1px
-    }
-
-    &:after { // [2]
-        border: var(--su-static1) solid var(--_sw-after-bc);
-        border-radius: var(--br-sm);
-        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); // [3]
-        content: '';
-        // TODO: this makes no sense. revisit.
-        height: calc(var(--su-static2) + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
-        left: calc(var(--su-static1) * -1); // -1px
-        pointer-events: none; // if the top item is clickable, then we don't want to prevent clicking the top 2 pixels
-        position: absolute;
-        right: calc(var(--su-static1) * -1); // -1px
-        top: calc(var(--su-static1) * -1); // -1px
-    }
-
-    background-color: var(--white);
-    border: var(--su-static1) solid var(--_sw-bc);
-    border-radius: var(--br-sm);
-    font-size: var(--fs-body1);
-    position: relative; // so that it's the positioning parent for the :after
-}
-
-// COLOR ALTERNATIVES
-.alternate-color(@name) {
-    &.s-sidebarwidget__@{name} {
-        --_sw-bc: var(~"--@{name}-300");
-
-        .highcontrast-mode({
-            --_sw-bc: var(~"--@{name}-500");
-        });
-
-        &:after,
-        .s-sidebarwidget--content,
-        .s-sidebarwidget--header {
-            border-color: var(--_sw-bc);
-        }
-
-        .s-sidebarwidget--header {
-            background-color: var(~"--@{name}-200");
-            color: var(--fc-medium);
-        }
-
-        background-color: var(~"--@{name}-100");
-        border-color: var(--_sw-bc);
-    }
-}
-
-// [1] We must support things like collapsible (in particular invisble) elements, wrapper elements,
-// etc. Therefore every .-content and .-header must stand on its own; we cannot rely on things
-// like :first-child, because the *first* child may not be the first *visible* child, and it may
-// also be the :first-child of some wrapper. This is why every .-header and .-content has a
-// border-top. But because you shouldn't see the first visible item's or header's top border
-// (the widget itself provides for that border), we shift everything up by one pixel with the following pseudo-element.
-
-// [2] The top item's divider line sits above the .s-sidebarwidget's top border.
-//  We could fix this by using overflow: hidden, but that would constrain users of
-// .s-sidebarwidget to never have things like tooltips, autocompletes or the like that reach
-// outside the widget boundaries.
-// What we do instead is re-create the widget's top border in an absolutely positioned :after,
-// which sits above our item's top border. Technically, a tiny corner of the item's border will
-// still be visible, but at its highest point, this corner has a height of 0.27 pixels. And for
-// this sub-pixel issues, we're talking about different shades of gray. So we can live with that.
-
-// [3] In order to perfectly recreate the inner corner shape, our pseudo-element needs
-// the border on all sides. But we can only do that if we're able to hide the bottom part.
+.s-sidebarwidget {
+    // COMPONENT-SPECIFIC CONSTANTS
+    @sw-content-px: calc(var(--su16) - var(--su1)); // subtract 1px for border
+    @sw-content-spacing-inner: var(--su12); // the spacing between two adjacent simple items
+    @sw-content-spacing-outer: var(--su16); // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
+    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    --_sw-bc: var(--bc-medium);
+    --_sw-after-bc: var(--_sw-bc);
+    --_sw-content-bc: var(--bc-light);
+    --_sw-header-bc: var(--_sw-content-bc);
+
+    // MODIFIERS
+    &:not(.s-anchors) {
+        a:not(.button):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
+            &,
+            &:visited {
+                color: var(--black-400);
+            }
+        }
+    }
+
+    // VARIANTS
+    .alternate-color(blue);
+    .alternate-color(yellow);
+    .alternate-color(green);
+
+    // CHILD ELEMENTS
+    & &--action {
+        color: var(--blue-400);
+        float: right;
+        font-size: var(--fs-fine);
+        line-height: calc(var(--fs-body1) * 1.5); // 19.5px - line-height should be the same as in the outside element, so the header and action baselines line up
+        margin: 0 0 var(--su4) var(--su8);
+    }
+
+    & &--content {
+        &:not(table) {
+            &:not(.s-sidebarwidget__items),
+            &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
+                display: flex;
+            }
+        }
+
+        &.s-sidebarwidget__items {
+            &,
+            &.s-sidebarwidget__block-items .s-sidebarwidget--item {
+                display: block;
+            }
+
+            padding: calc(@sw-content-spacing-outer - @sw-content-spacing-inner) @sw-content-px; // the items themselves provide part of the spacing, so the content padding needs to account for that
+        }
+
+        &:active {
+            outline: none;
+        }
+
+        border-top: var(--su-static1) solid var(--_sw-content-bc);
+        margin: 0;
+        padding: @sw-content-spacing-outer @sw-content-px;
+    }
+
+    & &--header {
+        &:first-child {
+            border-top-left-radius: var(--br-sm);
+            border-top-right-radius: var(--br-sm);
+        }
+
+        &.s-sidebarwidget {
+            &__expanding-control {
+                &:before {
+                    border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
+                    border-left-color: var(--black-400);
+                    border-right-width: 0;
+                    content: '';
+                    float: left;
+                    margin-right: var(--su12);
+                    margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px); // 1.3 is our standard line height
+                    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
+                }
+
+                &[aria-expanded='true']:before {
+                    transform: rotate(90deg);
+                }
+
+                cursor: pointer;
+            }
+
+            &__small-bold-text {
+                .s-sidebarwidget--action {
+                    font-weight: normal;
+                    line-height: calc(var(--lh-base) * var(--fs-caption)); // line-height should be the same as in the outside element, so the header and action baselines line up
+                }
+
+                font-size: var(--fs-caption);
+                font-weight: bold;
+            }
+        }
+
+        &:active {
+            outline: none;
+        }
+
+        background: var(--black-100);
+        border-top: var(--su-static1) solid var(--_sw-header-bc);
+        color: var(--black-500);
+        font-size: var(--fs-body2);
+        font-weight: normal;
+        margin: 0;
+        padding: @sw-content-spacing-inner @sw-content-px;
+    }
+
+    & &--item {
+        &,
+        & > :first-child {
+            &[aria-current="true"],
+            &[aria-current="page"] {
+                &:before {
+                    border-left-color: var(--theme-primary);
+                    border-left-style: solid;
+                    border-left-width: calc(var(--su-static1) * 3); // 3px
+                    content: '';
+                    height: calc(100% + @sw-content-spacing-inner);
+                    left: 0;
+                    margin-left: calc(@sw-content-px * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border
+                    margin-top: calc(@sw-content-spacing-inner / 2 * -1);
+                    position: absolute;
+                }
+
+                a { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
+                    &,
+                    &:visited {
+                        color: inherit;
+                    }
+                }
+
+                color: var(--black);
+                font-weight: bold;
+                position: relative;
+            }
+        }
+
+        margin: @sw-content-spacing-inner 0;
+    }
+
+    & &--subnav {
+        li {
+            &[aria-current="page"],
+            &[aria-current="true"] {
+                a {
+                    &,
+                    &:visited {
+                        color: inherit;
+                    }
+                }
+
+                #stacks-internals #bullet-arrow(var(--theme-primary));
+                color: var(--black);
+                font-weight: bold;
+            }
+
+            #stacks-internals #bullet-arrow(var(--black-225));
+            background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
+            background-repeat: no-repeat;
+            background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
+            margin-top: var(--su-static12);
+            padding-left: var(--su-static16);
+        }
+
+        list-style-type: none;
+        margin-left: var(--su8);
+        padding-left: 0;
+    }
+
+    & table&--content&__items {
+        tr.s-sidebarwidget--item {
+            td {
+                padding: 0;
+            }
+
+            display: table-row;
+        }
+
+        border-collapse: separate;
+        border-spacing: @sw-content-spacing-inner;
+        padding: calc(@sw-content-spacing-outer - @sw-content-spacing-inner) calc(@sw-content-px - @sw-content-spacing-inner);
+    }
+
+    &:before { // [1]
+        content: '';
+        display: block;
+        margin-top: calc(var(--su-static1) * -1); // -1px
+    }
+
+    &:after { // [2]
+        border: var(--su-static1) solid var(--_sw-after-bc);
+        border-radius: var(--br-sm);
+        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); // [3]
+        content: '';
+        // TODO: this makes no sense. revisit.
+        height: calc(var(--su-static2) + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
+        left: calc(var(--su-static1) * -1); // -1px
+        pointer-events: none; // if the top item is clickable, then we don't want to prevent clicking the top 2 pixels
+        position: absolute;
+        right: calc(var(--su-static1) * -1); // -1px
+        top: calc(var(--su-static1) * -1); // -1px
+    }
+
+    background-color: var(--white);
+    border: var(--su-static1) solid var(--_sw-bc);
+    border-radius: var(--br-sm);
+    font-size: var(--fs-body1);
+    position: relative; // so that it's the positioning parent for the :after
+}
+
+// COLOR ALTERNATIVES
+.alternate-color(@name) {
+    &.s-sidebarwidget__@{name} {
+        --_sw-bc: var(~"--@{name}-300");
+
+        .highcontrast-mode({
+            --_sw-bc: var(~"--@{name}-500");
+        });
+
+        &:after,
+        .s-sidebarwidget--content,
+        .s-sidebarwidget--header {
+            border-color: var(--_sw-bc);
+        }
+
+        .s-sidebarwidget--header {
+            background-color: var(~"--@{name}-200");
+            color: var(--fc-medium);
+        }
+
+        background-color: var(~"--@{name}-100");
+        border-color: var(--_sw-bc);
+    }
+}
+
+// [1] We must support things like collapsible (in particular invisble) elements, wrapper elements,
+// etc. Therefore every .-content and .-header must stand on its own; we cannot rely on things
+// like :first-child, because the *first* child may not be the first *visible* child, and it may
+// also be the :first-child of some wrapper. This is why every .-header and .-content has a
+// border-top. But because you shouldn't see the first visible item's or header's top border
+// (the widget itself provides for that border), we shift everything up by one pixel with the following pseudo-element.
+
+// [2] The top item's divider line sits above the .s-sidebarwidget's top border.
+//  We could fix this by using overflow: hidden, but that would constrain users of
+// .s-sidebarwidget to never have things like tooltips, autocompletes or the like that reach
+// outside the widget boundaries.
+// What we do instead is re-create the widget's top border in an absolutely positioned :after,
+// which sits above our item's top border. Technically, a tiny corner of the item's border will
+// still be visible, but at its highest point, this corner has a height of 0.27 pixels. And for
+// this sub-pixel issues, we're talking about different shades of gray. So we can live with that.
+
+// [3] In order to perfectly recreate the inner corner shape, our pseudo-element needs
+// the border on all sides. But we can only do that if we're able to hide the bottom part.

package/lib/test/visual-test-utils.ts

@@ -1,58 +1,63 @@
-import { html, fixture } from "@open-wc/testing";
-import { visualDiff } from "@web/test-runner-visual-regression";
-import { screen } from "@testing-library/dom";
-import { generateTestVariations, type TestVariationArgs } from "./test-utils";
-
-type VisualTestArgs = TestVariationArgs;
-
-const scheduleVisualTest = ({
-    element,
-    testid,
-    theme,
-}: {
-    element: ReturnType<typeof html>;
-    testid: string;
-    theme: string[];
-}) => {
-    it(`visual: ${testid} should not introduce visual regressions`, async () => {
-        document.body.className = "";
-
-        if (theme?.length) {
-            const prefixedThemes = theme.map((t) => `theme-${t}`);
-            document.body.classList.add(...prefixedThemes);
-        }
-
-        let retryAttempts = 3;
-
-        do {
-            await fixture(element);
-            const el = screen.getByTestId(testid);
-            try {
-                await visualDiff(el, testid);
-                return;
-            } catch (error) {
-                const e = error as Error;
-                // if the error is not a visual diff failure, retry
-                // this is to prevent flaky tests due to snapshot capturing
-                if (
-                    retryAttempts > 0 &&
-                    !e.message.includes("Visual diff failed.")
-                ) {
-                    retryAttempts--;
-                    continue;
-                } else {
-                    throw e;
-                }
-            } finally {
-                el.remove();
-            }
-        } while (retryAttempts > 0);
-    });
-};
-
-const runVisualTests = (args: VisualTestArgs) => {
-    const testVariations = generateTestVariations(args);
-    testVariations.forEach(scheduleVisualTest);
-};
-
-export { runVisualTests };
+import { html, fixture } from "@open-wc/testing";
+import { visualDiff } from "@web/test-runner-visual-regression";
+import { screen } from "@testing-library/dom";
+import { generateTestVariations, type TestVariationArgs } from "./test-utils";
+
+type VisualTestArgs = TestVariationArgs;
+
+const scheduleVisualTest = ({
+    element,
+    testid,
+    theme,
+}: {
+    element: ReturnType<typeof html>;
+    testid: string;
+    theme: string[];
+}) => {
+    it(`visual: ${testid} should not introduce visual regressions`, async () => {
+        document.body.className = "";
+
+        if (theme?.length) {
+            const prefixedThemes = theme.map((t) => `theme-${t}`);
+            document.body.classList.add(...prefixedThemes);
+        }
+
+        let retryAttempts = 3;
+
+        do {
+            await fixture(element);
+            const el = screen.getByTestId(testid);
+            try {
+                await (
+                    visualDiff as (
+                        element: HTMLElement,
+                        name: string
+                    ) => Promise<void>
+                )(el, testid);
+                return;
+            } catch (error) {
+                const e = error as Error;
+                // if the error is not a visual diff failure, retry
+                // this is to prevent flaky tests due to snapshot capturing
+                if (
+                    retryAttempts > 0 &&
+                    !e.message.includes("Visual diff failed.")
+                ) {
+                    retryAttempts--;
+                    continue;
+                } else {
+                    throw e;
+                }
+            } finally {
+                el.remove();
+            }
+        } while (retryAttempts > 0);
+    });
+};
+
+const runVisualTests = (args: VisualTestArgs) => {
+    const testVariations = generateTestVariations(args);
+    testVariations.forEach(scheduleVisualTest);
+};
+
+export { runVisualTests };