@stackoverflow/stacks 2.1.0 → 2.2.0

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

@@ -0,0 +1,72 @@
+import { html } from "@open-wc/testing";
+import { runVisualTests } from "../../test/visual-test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid, className }: any) => html`
+    <div class="d-inline-flex p8 ${className}" data-testid="${testid}">
+        ${component}
+    </div>
+`;
+
+const child = (attr?: string): string => {
+    return `<select id="select-menu" ${attr}>
+        <option value="" selected>Please select one…</option>
+        <option value="walk">Walk</option>
+        <option value="bike">Bicycle</option>
+        <option value="car">Automobile</option>
+        <option value="rail">Train</option>
+        <option value="fly">Plane</option>
+    </select>`;
+};
+
+describe("select", () => {
+    // default, sizes
+    runVisualTests({
+        baseClass: "s-select",
+        modifiers: {
+            primary: ["sm", "md", "lg", "xl"],
+        },
+        children: {
+            default: child(),
+        },
+        template,
+    });
+
+    // modifier classes
+    [
+        {
+            class: "is-disabled",
+            attr: 'disabled=""',
+        },
+        {
+            class: "is-readonly",
+            attr: 'readonly=""',
+        },
+        {
+            class: "has-success",
+        },
+        {
+            class: "has-error",
+        },
+        {
+            class: "has-warning",
+        },
+    ].forEach((state) => {
+        runVisualTests({
+            baseClass: "s-select",
+            modifiers: {
+                global: [`state-${state.class}`],
+            },
+            children: {
+                selected: child(state.attr),
+            },
+            template: ({ component, testid }) =>
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                template({ component, testid, className: state.class }),
+            options: {
+                includeNullModifier: false,
+            },
+        });
+    });
+});

package/lib/exports/__snapshots__/color.less.test.ts.snap

@@ -249,12 +249,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --yellow-400: hsl(43, 90%, 75%);
     --yellow-500: hsl(43, 90%, 82%);
     --yellow-600: hsl(43, 90%, 91%);
-    --purple-100: hsl(237, 43%, 37%);
-    --purple-200: hsl(237, 51%, 52%);
-    --purple-300: hsl(237, 63%, 62%);
-    --purple-400: hsl(237, 89%, 83%);
-    --purple-500: hsl(237, 89%, 89%);
-    --purple-600: hsl(237, 89%, 94%);
+    --purple-100: hsl(237, 26%, 23%);
+    --purple-200: hsl(237, 26%, 44%);
+    --purple-300: hsl(237, 26%, 56%);
+    --purple-400: hsl(237, 98%, 87%);
+    --purple-500: hsl(237, 98%, 92%);
+    --purple-600: hsl(237, 98%, 96%);
     --gold-100: hsl(45, 29%, 24%);
     --gold-200: hsl(45, 47%, 37%);
     --gold-300: hsl(45, 92%, 62%);
@@ -382,12 +382,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
         --yellow-400: hsl(43, 90%, 75%);
         --yellow-500: hsl(43, 90%, 82%);
         --yellow-600: hsl(43, 90%, 91%);
-        --purple-100: hsl(237, 43%, 37%);
-        --purple-200: hsl(237, 51%, 52%);
-        --purple-300: hsl(237, 63%, 62%);
-        --purple-400: hsl(237, 89%, 83%);
-        --purple-500: hsl(237, 89%, 89%);
-        --purple-600: hsl(237, 89%, 94%);
+        --purple-100: hsl(237, 26%, 23%);
+        --purple-200: hsl(237, 26%, 44%);
+        --purple-300: hsl(237, 26%, 56%);
+        --purple-400: hsl(237, 98%, 87%);
+        --purple-500: hsl(237, 98%, 92%);
+        --purple-600: hsl(237, 98%, 96%);
         --gold-100: hsl(45, 29%, 24%);
         --gold-200: hsl(45, 47%, 37%);
         --gold-300: hsl(45, 92%, 62%);
@@ -630,12 +630,12 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --yellow-400: hsl(43, 75%, 75%);
     --yellow-500: hsl(48, 74%, 91%);
     --yellow-600: hsl(44, 74%, 91%);
-    --purple-100: hsl(237, 24%, 23%);
-    --purple-200: hsl(237, 24%, 23%);
-    --purple-300: hsl(237, 60%, 82%);
-    --purple-400: hsl(237, 60%, 82%);
-    --purple-500: hsl(237, 62%, 96%);
-    --purple-600: hsl(237, 62%, 96%);
+    --purple-100: hsl(237, 26%, 23%);
+    --purple-200: hsl(237, 26%, 23%);
+    --purple-300: hsl(237, 98%, 87%);
+    --purple-400: hsl(237, 98%, 87%);
+    --purple-500: hsl(237, 98%, 96%);
+    --purple-600: hsl(237, 98%, 96%);
     --gold-100: hsl(45, 22%, 25%);
     --gold-200: hsl(45, 22%, 25%);
     --gold-300: hsl(45, 92%, 62%);
@@ -745,12 +745,12 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
         --yellow-400: hsl(43, 75%, 75%);
         --yellow-500: hsl(48, 74%, 91%);
         --yellow-600: hsl(44, 74%, 91%);
-        --purple-100: hsl(237, 24%, 23%);
-        --purple-200: hsl(237, 24%, 23%);
-        --purple-300: hsl(237, 60%, 82%);
-        --purple-400: hsl(237, 60%, 82%);
-        --purple-500: hsl(237, 62%, 96%);
-        --purple-600: hsl(237, 62%, 96%);
+        --purple-100: hsl(237, 26%, 23%);
+        --purple-200: hsl(237, 26%, 23%);
+        --purple-300: hsl(237, 98%, 87%);
+        --purple-400: hsl(237, 98%, 87%);
+        --purple-500: hsl(237, 98%, 96%);
+        --purple-600: hsl(237, 98%, 96%);
         --gold-100: hsl(45, 22%, 25%);
         --gold-200: hsl(45, 22%, 25%);
         --gold-300: hsl(45, 92%, 62%);

package/lib/exports/color-sets.less

@@ -264,12 +264,12 @@
     600: hsl(237, 50%, 32%);
 }
 .set-purple-dark() {
-    100: hsl(237, 43%, 37%);
-    200: hsl(237, 51%, 52%);
-    300: hsl(237, 63%, 62%);
-    400: hsl(237, 89%, 83%);
-    500: hsl(237, 89%, 89%);
-    600: hsl(237, 89%, 94%);
+    100: hsl(237, 26%, 23%);
+    200: hsl(237, 26%, 44%);
+    300: hsl(237, 26%, 56%);
+    400: hsl(237, 98%, 87%);
+    500: hsl(237, 98%, 92%);
+    600: hsl(237, 98%, 96%);
 }
 .set-purple-hc() {
     100: hsl(237, 83%, 98%);
@@ -280,12 +280,12 @@
     600: hsl(237, 50%, 32%);
 }
 .set-purple-hc-dark() {
-    100: hsl(237, 24%, 23%);
-    200: hsl(237, 24%, 23%);
-    300: hsl(237, 60%, 82%);
-    400: hsl(237, 60%, 82%);
-    500: hsl(237, 62%, 96%);
-    600: hsl(237, 62%, 96%);
+    100: hsl(237, 26%, 23%);
+    200: hsl(237, 26%, 23%);
+    300: hsl(237, 98%, 87%);
+    400: hsl(237, 98%, 87%);
+    500: hsl(237, 98%, 96%);
+    600: hsl(237, 98%, 96%);
 }
 
 // gold

package/lib/test/test-utils.ts

@@ -215,10 +215,14 @@ const generatePrimitiveVariations = ({
                         : modifiers.primary
                     : [""];
                 const secondaryModifiers = modifiers?.secondary
-                    ? ["", ...(<[]>modifiers.secondary)]
+                    ? opts.includeNullModifier
+                        ? ["", ...(<[]>modifiers.secondary)]
+                        : modifiers.secondary
                     : [""];
                 const globalModifiers = modifiers?.global
-                    ? ["", ...(<[]>modifiers.global)]
+                    ? opts.includeNullModifier
+                        ? ["", ...(<[]>modifiers.global)]
+                        : modifiers.global
                     : [""];
 
                 primaryModifiers.forEach((primaryModifier) => {

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.1.0",
+    "version": "2.2.0",
     "files": [
         "dist",
         "lib"
@@ -47,8 +47,8 @@
         "@open-wc/testing": "^4.0.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-replace": "^5.0.5",
-        "@stackoverflow/stacks-editor": "^0.9.1",
-        "@stackoverflow/stacks-icons": "^6.0.0",
+        "@stackoverflow/stacks-editor": "^0.10.1",
+        "@stackoverflow/stacks-icons": "^6.0.1",
         "@testing-library/dom": "^9.3.4",
         "@testing-library/user-event": "^14.5.2",
         "@types/cssbeautify": "^0.3.5",
@@ -56,7 +56,7 @@
         "@types/mocha": "^10.0.6",
         "@typescript-eslint/eslint-plugin": "^6.20.0",
         "@typescript-eslint/parser": "^6.21.0",
-        "@web/dev-server-esbuild": "^1.0.1",
+        "@web/dev-server-esbuild": "^1.0.2",
         "@web/dev-server-rollup": "^0.6.1",
         "@web/test-runner": "^0.18.0",
         "@web/test-runner-playwright": "^0.11.0",
@@ -77,12 +77,12 @@
         "less-loader": "^12.2.0",
         "list.js": "^2.3.1",
         "markdown-it": "^14.0.0",
-        "mini-css-extract-plugin": "^2.7.7",
+        "mini-css-extract-plugin": "^2.8.0",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^8.0.0",
         "prettier": "^3.2.4",
         "rollup-plugin-postcss": "^4.0.2",
-        "stylelint": "^16.2.0",
+        "stylelint": "^16.2.1",
         "stylelint-config-recommended": "^14.0.0",
         "stylelint-config-standard": "^36.0.0",
         "terser-webpack-plugin": "^5.3.10",