feat(label): update styles to match the new SHINE specs

.changeset/shaggy-rings-agree.md

@@ -0,0 +1,6 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+update label component to new SHINE specs

MIGRATION_GUIDE.md

@@ -72,6 +72,10 @@
 - `s-input__xl` removed
 - **Nested inputs** html will require slight tweaking on consumers' side
 
+#### Labels
+- `s-label__md`, `s-label__xl` removed
+- `s-label--status`, `s-label--status__required`, `s-label--status__new`, `s-label--status__beta` removed. Use the new `s-badge` states instead.
+
 #### Loader
 - `Spinner` component replaced with new `Loader` component
 - `xs` and `xl` sized have been removed, leaving only the default, `sm`, and `lg` sizes

packages/stacks-classic/lib/components/description/description.less

@@ -18,6 +18,7 @@
     }
 
     color: var(--_de-fc);
-    font-size: var(--fs-caption);
+    font-size: var(--fs-body1);
+    margin-bottom: 0;
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }

packages/stacks-classic/lib/components/form-group/form-group.less

@@ -7,6 +7,14 @@
         --_fg-gap: 0;
     }
 
+    &:has(.s-input__sm, .s-textarea__sm, .s-select__sm) {
+        --_fg-gap: var(--su6);
+    }
+
+    &:has(.s-input__lg, .s-textarea__lg, .s-select__lg) {
+        --_fg-gap: calc(var(--su8) + var(--su2));
+    }
+
     // MODIFIERS
     &&__horizontal {
         --_fg-fd: row;
@@ -16,7 +24,12 @@
     legend.s-label {
         margin-bottom: var(--su8);
     }
-
+
+    &:has(.s-input, .s-textarea, .s-select) {
+        .s-label + .s-description {
+            margin-top: var(--sun4);
+        }
+    }
 
     flex-direction: var(--_fg-fd);
 

packages/stacks-classic/lib/components/input-message/input-message.less

@@ -45,5 +45,6 @@
     color: var(--_im-fc);
 
     font-size: var(--fs-caption);
+    margin-bottom: 0;
     padding: var(--su2);
 }

packages/stacks-classic/lib/components/label/label.a11y.test.ts

@@ -1,7 +1,6 @@
-// TODO SPARK reinstate accessibility tests once component styles are updated
-// import { runA11yTests } from "../../test/a11y-test-utils";
-// import getTestArgs from "./label.test.setup";
+import { runA11yTests } from "../../test/a11y-test-utils";
+import getTestArgs from "./label.test.setup";
 
-// describe("label", () => {
-//     runA11yTests(getTestArgs());
-// });
+describe("label", () => {
+    runA11yTests(getTestArgs());
+});

packages/stacks-classic/lib/components/label/label.less

@@ -1,6 +1,6 @@
 .s-label {
     --_la-c: unset;
-    --_la-fs: var(--fs-body2);
+    --_la-fs: var(--fs-body2); // 16
 
     // CONTEXTUAL STYLES
     &[for] {
@@ -28,65 +28,27 @@
     // MODIFIERS
     // Sizes
     &&__sm {
-        .size-styles(sm; la; @styles: fs);
-    }
-
-    &&__md {
-        .size-styles(md; la; @styles: fs);
+        --_la-fs: var(--fs-body1); // 14
     }
 
     &&__lg {
-        .size-styles(lg; la; @styles: fs);
-    }
-
-    &&__xl {
-        .size-styles(xl; la; @styles: fs);
+        --_la-fs: calc(var(--su16) + var(--su6)); // 22
     }
 
     // CHILD ELEMENTS
-    // Label status flag
-    // Is this form item required or optional? Flag the status for users.
-    // Default styling is optional.
-    &--status { // TODO convert to require parent class for styling [1]
-        --_la-status-b: none;
-        --_la-status-bg: var(--black-150);
-        --_la-status-fc: var(--fc-medium);
-
-        .highcontrast-mode({
-            --_la-status-b: var(--su-static1) solid currentColor;
-        });
-
-        // TODO: include child component class (without variant) on selector
-        &__beta {
-            --_la-status-bg: var(--blue-200);
-            --_la-status-fc: var(--blue-500);
-        }
-
-        &__new {
-            --_la-status-bg: var(--green-200);
-            --_la-status-fc: var(--green-500);
-        }
-
-        &__required {
-            --_la-status-bg: var(--red-200);
-            --_la-status-fc: var(--red-500);
-        }
-
-        background-color: var(--_la-status-bg);
-        border: var(--_la-status-b);
-        color: var(--_la-status-fc);
-
-        border-radius: 1000px;
-        font-size: var(--fs-caption);
+    .s-badge {
         font-weight: 400;
-        margin-left: var(--su4);
-        padding: var(--su2) var(--su8);
-        vertical-align: text-bottom;
+        margin-left: var(--su6);
+    }
+    &:has(.s-badge) {
+        display: flex;
+        align-items: center;
     }
 
     // TODO we shouldn't support descriptions and messages within labels
     .s-description,
     .s-input-message {
+        font-size: var(--fs-caption);
         font-weight: normal;
         margin-bottom: 0;
         margin-top: var(--su4);
@@ -95,10 +57,9 @@
 
     cursor: var(--_la-c);
     font-size: var(--_la-fs);
-
-    color: var(--fc-medium);
+    color: var(--black-500);
     font-family: inherit;
-    font-weight: 700;
+    font-weight: 600;
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }
 
@@ -109,8 +70,3 @@
     line-height: 0;
     text-decoration: none !important;
 }
-
-// [1] In Core, we have *many* instances of `.s-label--status` used without the `.s-label` parent.
-//     While I'd prefer to enforce the requirement of the parent class, it's too much of a lift at this moment.
-//     We'll come back to it, hopefully when we have a pill component to replace the current usage of `.s-label--status`
-//     without the base label class.

packages/stacks-classic/lib/components/label/label.test.setup.ts

@@ -2,8 +2,6 @@ import { html } from "@open-wc/testing";
 import type { TestVariationArgs } from "../../test/test-utils";
 import "../../index";
 
-type StatusType = "base" | "beta" | "new" | "required";
-
 const labelTemplate = ({
     component,
     testid,
@@ -24,11 +22,8 @@ const labelTemplate = ({
     `;
 };
 
-const getStatus = (status: StatusType | undefined) => {
-    if (!status) return "";
-    const statusTypeClass =
-        status !== "base" ? `s-label--status__${status}` : "";
-    return `<span class="s-label--status ${statusTypeClass}">${status}</span>`;
+const getStatus = (status: boolean) => {
+    return status ? `<span class="s-badge">Optional</span>` : "";
 };
 
 const getRequiredSymbol = (required: boolean | undefined) => {
@@ -37,7 +32,7 @@ const getRequiredSymbol = (required: boolean | undefined) => {
         : "";
 };
 
-const getChildren = (text: string, status?: StatusType, required?: boolean) => {
+const getChildren = (text: string, status: boolean, required?: boolean) => {
     return `${text}${getRequiredSymbol(required)} ${getStatus(status)}`;
 };
 
@@ -48,15 +43,12 @@ const getTestArgs = (disabled = false): TestVariationArgs => {
     return {
         baseClass: `s-label`,
         modifiers: {
-            primary: ["sm", "md", "lg", "xl"],
+            primary: ["sm", "lg"],
         },
         children: {
-            [`${prefix}default`]: getChildren(text),
-            [`${prefix}required`]: getChildren(text, undefined, true),
-            [`${prefix}status`]: getChildren(text, "base"),
-            [`${prefix}status-beta`]: getChildren(text, "beta"),
-            [`${prefix}status-new`]: getChildren(text, "new"),
-            [`${prefix}status-required`]: getChildren(text, "required"),
+            [`${prefix}default`]: getChildren(text, false, false),
+            [`${prefix}required`]: getChildren(text, false, true),
+            [`${prefix}status`]: getChildren(text, true, false),
         },
         tag: "label",
         template: ({ component, testid }) =>