@stackoverflow/stacks 1.5.0 → 1.6.0

package/lib/css/components/sidebar-widgets.less

@@ -0,0 +1,251 @@
+.s-sidebarwidget {
+    // 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
+
+    // VARIABLES
+    --_sw-bc: var(--bc-medium);
+    --_sw-after-bc: var(--_sw-bc);
+    --_sw-content-bc: var(--bc-light);
+    --_sw-header-bc: var(--_sw-content-bc);
+
+    // VARIANTS
+    .alternate-color(blue);
+    .alternate-color(yellow);
+    .alternate-color(green);
+
+    // CHILD ELEMENTS
+    & &--action {
+        color: var(--blue);
+        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 {
+        &.s-sidebarwidget__items {
+            &,
+            &.s-sidebarwidget__block-items .s-sidebarwidget--item {
+                display: block;
+            }
+
+            padding: calc(var(--_sw-content-spacing-outer) - var(--_sw-content-spacing-inner)) var(--_sw-content-px); // the items themselves provide part of the spacing, so the content padding needs to account for that
+        }
+
+        &:active {
+            outline: none;
+        }
+
+        &:not(table) {
+            &:not(.s-sidebarwidget__items),
+            &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
+                display: flex;
+            }
+        }
+
+        border-top: var(--su-static1) solid var(--_sw-content-bc);
+        margin: 0;
+        padding: var(--_sw-content-spacing-outer) var(--_sw-content-px);
+    }
+
+    & &--header {
+        &.s-sidebarwidget__expanding-control {
+            &:before {
+                border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
+                border-left-color: var(--bc-darker);
+                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;
+        }
+
+        &.s-sidebarwidget__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;
+        }
+
+        &:first-child {
+            border-top-left-radius: var(--br-sm);
+            border-top-right-radius: var(--br-sm);
+        }
+
+        &:active {
+            outline: none;
+        }
+
+        background: var(--black-025);
+        border-top: var(--su-static1) solid var(--_sw-header-bc);
+        color: var(--black-600);
+        font-size: var(--fs-body2);
+        font-weight: normal;
+        margin: 0;
+        padding: var(--_sw-content-spacing-inner) var(--_sw-content-px);
+    }
+
+    & &--item {
+        &,
+        & > :first-child {
+            &[aria-current="true"],
+            &[aria-current="page"] {
+                &:before {
+                    border-left-color: var(--theme-primary-color);
+                    border-left-style: solid;
+                    border-left-width: calc(var(--su-static1) * 3); // 3px
+                    content: '';
+                    height: calc(100% + var(--_sw-content-spacing-inner));
+                    left: 0;
+                    margin-left: calc(var(--_sw-content-px) * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border
+                    margin-top: calc(var(--_sw-content-spacing-inner) / 2 * -1);
+                    position: absolute;
+                }
+
+                a,
+                a:visited { // 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
+                    color: inherit;
+                }
+
+                color: var(--black);
+                font-weight: bold;
+                position: relative;
+            }
+        }
+
+        margin: var(--_sw-content-spacing-inner) 0;
+    }
+
+    & &--subnav {
+        li {
+            &[aria-current="page"],
+            &[aria-current="true"] {
+                a,
+                a:visited {
+                    color: inherit;
+                }
+
+                #stacks-internals #bullet-arrow(var(--theme-primary-color));
+                color: var(--black);
+                font-weight: bold;
+            }
+
+            #stacks-internals #bullet-arrow(var(--black-100));
+            background-position: 0 calc((1.2em - 10px) / 2);
+            background-repeat: no-repeat;
+            background-size: 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: var(--_sw-content-spacing-inner);
+        padding: calc(var(--_sw-content-spacing-outer) - var(--_sw-content-spacing-inner)) calc(var(--_sw-content-px) - var(--_sw-content-spacing-inner));
+    }
+
+    &:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(&--action):not(.s-user-card--link) {
+        &,
+        &:visited {
+            color: var(--black-500);
+        }
+    }
+
+    &: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(2px + 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);
+    box-shadow: var(--bs-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}-200");
+
+        .highcontrast-mode({
+            --_sw-bc: var(~"--@{name}-700");
+        });
+
+        .s-sidebarwidget--header {
+            background-color: var(~"--@{name}-100");
+            color: var(--fc-medium);
+        }
+
+        .s-sidebarwidget--header,
+        .s-sidebarwidget--content,
+        &:after {
+            border-color: var(--_sw-bc);
+        }
+
+        background-color: var(~"--@{name}-050");
+        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/css/components/tables.less

@@ -1,27 +1,3 @@
-//
-//  STACK OVERFLOW
-//  TABLES
-//
-//  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/
-//
-//  TABLE OF CONTENTS
-//  • CONTAINER
-//  • BASE TABLE STYLE
-//  • TABLE ALIGNMENT
-//    - Vertical alignment
-//    - Text alignment
-//  • LAYOUT VARIATIONS
-//    - Stripes
-//    - Spacing
-//    - Borders
-//    - Backgrounds
-//    - Totals row
-//    - Sortable tables
-//  • TABLE CELL SIZES
-//
-
 //  ============================================================================
 //  $    CONTAINER
 //  Give tables an optional container for responsive scrolling

package/lib/css/components/topbar.less

@@ -1,14 +1,3 @@
-//
-//  STACK OVERFLOW
-//  TOPBAR
-//
-//  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/
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
 .topbar-notice-styles(@border: transparent, @background: transparent, @color: inherit) {
     border-color: @border;
     background-color: @background;
@@ -252,6 +241,15 @@
 //  ===========================================================================
 //  $   CONTENT & CTAS
 //  ---------------------------------------------------------------------------
+.s-topbar--navigation {
+    display: flex;
+    height: 100%;
+
+    overflow-x: auto; // Allow this content to scroll if it gets too long
+    @scrollbar-styles(); // Style the scrollbars
+    margin-left: auto; // Push this section as far to the right as possible
+}
+
 .s-topbar .s-topbar--content {
     display: flex;
     height: 100%;
@@ -261,6 +259,7 @@
         display: inline-flex;
     }
 
+    // TODO remove once all topbars include necessary nav.s-topbar--navigation wrapper elements
     overflow-x: auto; // Allow this content to scroll if it gets too long
     @scrollbar-styles(); // Style the scrollbars
     margin-left: auto; // Push this section as far to the right as possible

package/lib/css/stacks-dynamic.less

@@ -24,7 +24,6 @@
 @import "components/notices.less";
 @import "components/tags.less";
 @import "components/pagination.less";
-@import "components/widget-dynamic.less";
 
 //  --  LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";

package/lib/css/stacks-static.less

@@ -37,13 +37,13 @@
 @import "components/post-summary.less";
 @import "components/progress-bars.less";
 @import "components/prose.less";
+@import "components/sidebar-widgets.less";
 @import "components/spinner.less";
 @import "components/tables.less";
 @import "components/toggle-switches.less";
 @import "components/topbar.less";
 @import "components/uploader.less";
 @import "components/user-cards.less";
-@import "components/widget-static.less";
 
 //  --  LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.5.0",
+  "version": "1.6.0",
   "files": [
     "dist",
     "lib"
@@ -38,16 +38,16 @@
     "@highlightjs/cdn-assets": "^11.6.0",
     "@stackoverflow/stacks-editor": "^0.8.2",
     "@stackoverflow/stacks-icons": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.40.1",
-    "backstopjs": "^6.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "backstopjs": "^6.1.4",
     "concurrently": "^7.5.0",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.7.2",
     "cssnano": "^5.1.14",
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^1.1.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.26.0",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-no-unsanitized": "^4.0.1",
     "jquery": "^3.6.1",
@@ -58,14 +58,14 @@
     "postcss-less": "^6.0.0",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
-    "stylelint": "^14.13.0",
+    "stylelint": "^14.15.0",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-standard": "^29.0.0",
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.4.1",
     "typescript": "^4.8.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
     "webpack-merge": "^5.8.0"
   },
   "browserslist": [

package/lib/css/components/_styles-template.less

@@ -1,78 +0,0 @@
-// This is an example of the expected structure for component-specific styles
-// In some cases, deviations from this structure are warranted if we need to maintain a legacy structure
-.s-component-name {
-    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    // --_{component-abbreviation}-{property-shorthand}: {value};
-    --_cn-bg: var(--blue-500);
-    --_cn-h: var(--su-static16);
-    --_cn-fd: row-reverse;
-    // VARIANT CUSTOM PROPERTIES
-    // --_{component-abbreviation}-{property-shorthand}-{variant-name}: {value};
-    --_cn-fc-filled: var(--green-500);
-    // CHILD COMPONENT CUSTOM PROPERTIES
-    // --_{component-abreviation}-{child-component-name}-{property-shorthand}: {value};
-    --_cn-image-bg: var(--red-500);
-
-    // CONTEXTUAL STYLES
-    // These may include themes/modes, responsive styles, or modifications based on parent containers
-    .highcontrast-mode({
-        --_cn-bg: var(--black-400);
-
-        .s-avatar--letter {
-            --_cn-image-bg: var(--white);
-        }
-    });
-    .s-special-parent & {
-        --_cn-bg: transparent;
-    }
-
-    // STATES
-    // These are generally classes prefixed with `.is-` or `.has-`
-    &.is-selected {
-        --_cn-bg: var(--orange-200);
-    }
-
-    // MODIFIERS
-    // Modifiers are considered to be classes that can be combined with other modifiers outside of their respective groupings without collisions
-    // Sizes
-    &&__xs {
-        --_cn-h: var(--su-static2);
-    }
-    &&__sm {
-        --_cn-h: var(--su-static12);
-    }
-    // Orientation
-    &&__vertical {
-        --_cn-fd: column;
-    }
-
-    // VARIANTS
-    // Variants are expected to be used exclusive of one another. In other words, you should only use one variant class at a time
-    &&__info {
-        --_cn-bg: var(--yellow-100);
-
-        &.s-component-name__filled {
-            --_cn-bg-filled: var(--yellow-800);
-        }
-    }
-
-    // CHILD ELEMENTS
-    & &--image {
-        background-color: var(--_cn-image-bg);
-    }
-
-    // INTERACTION
-    &:hover {
-        --_cn-bg: var(--_black-050);
-    }
-
-    // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    background-color: var(--_cn-bg-filled, var(--_cn-bg));
-    flex-direction: var(--_cn-fd);
-    height: var(--_cn-h);
-
-    // STATIC COMPONENT STYLES
-    display: flex;
-    position: relative;
-    vertical-align: bottom;
-}

package/lib/css/components/widget-dynamic.less

@@ -1,33 +0,0 @@
-//
-//  STACK OVERFLOW
-//  SIDEBAR WIDGET -- DYNAMIC PARTS
-//
-//  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 file only sets the colors for the "current color" highlight when the
-//  widget is used for navigation. This is the only part of the widget that is
-//  dynamically configurable; the rest can be served in the static part of Stacks
-//  and is in widget-static.less.
-
-.s-sidebarwidget--item {
-    &,
-    & > :first-child {
-        &[aria-current="true"],
-        &[aria-current="page"] {
-            &:before {
-                border-left-color: var(--theme-primary-color);
-            }
-        }
-    }
-}
-
-.s-sidebarwidget--subnav {
-    li {
-        &[aria-current="true"],
-        &[aria-current="page"] {
-            #stacks-internals #bullet-arrow(var(--theme-primary-color));
-        }
-    }
-}