feat(input) - update radio and checkbox components for shine (#2060)

* Update docs - TEMP change

* add checkmark class

* update docs

* Add radio svelte component

* Add Checkbox and Checkmark svelte components

* add changeset

* fix tests

* remove todo

* use black-300 instead of opacity for checkmark

* update a11y and visual tests

* Update site-navigation.json

* update tests

* update based on comments

* update visual regression tests

* visual tests

* Checkbox, radio refactor (#2078)

* Checkbox, radio refactor

* Cleanup

* update based on comments

* update based on comments

* update visual tests

* Update based on comments

* Update Checkmark.test.ts

* Docs updates for checkbox, radio, checkmark, menu (#2090)

* Update menu docs

* Update docs, minor styling fixes

* Update check control tests

* cleanup

* Replace Checkbox/Radio w/ CheckControl, Add CheckGroup

* Modify docs icons class appending to support new icons

* Minor updates

* Create MenuCheckItem

* Make type prop optional

* Add CheckControl, CheckGroup tests

* Update Menu tests

* visual test images

* formatting

* fix lint errors

* revert table test image changes not related to this PR

* revert select test image changes not related to this PR

* Remove .s-check, .s-radio, rename .s-check-control to .s-check

* remove a couple missed .s-checkbox, .s-radio references

* Update table test images that contain checkboxes

* Rename docs page to "Check"

* Fix minor bugs; include disabled input in visual test

* Fix .s-menu > .s-check-group gap; add visual test

* Replace .s-check with .s-checkbox, .s-radio

* Fix validation state border color

* Add Checkbox, Radio Svelte components; hide Check

* Give checkbox and radio independent docs pages

* Split .s-check-group into .s-checkbox-group, .s-radio-group

* Split CheckGroup into CheckboxGroup, RadioGroup

* Rename group files in stacks-classic

* Regenerate visual regresssion test images

* Formatting

* Revert some screenshots to reduce PR noise

* Replace CheckboxGroup, RadioGroup with FormGroup

* Remove Check

* Update Radio, Checkbox

* CheckboxGroup, RadioGroup updates

* Minor docs updates

* target correct classes in menu

* Update table tests

* Consolidate Svelte structure, add/update tests

* Formatting and linting

* Update stacks svelte radio link

* Add stories for change events and bindings

* Lift `onValueChange` up to `FormGroup`

* Update CheckboxGroup story with onValueChange

* Update migration guide, changeset

* Minor fixes

* Minor fixes

* update visual tests

---------

Co-authored-by: Dan Cormier <[email protected]>
Co-authored-by: Dan Cormier <[email protected]>

Author: ttaylor-stack

.changeset/lemon-shoes-tease.md

@@ -0,0 +1,11 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Updated checkbox and radio styling in Stacks Classic and documentation for SHINE
+`.s-check-control` has been removed
+Renamed `.s-check-group` to `.s-form-group`
+`.s-checkbox` and `.s-radio` are now expected to be on the container where `.s-check-control` would previously be applied. They are no longer needed on the input itself
+Added `.s-checkbox__checkmark` and `.s-radio__checkmark` to Stacks Classic
+Added `Checkbox`, `CheckboxGroup`, `Radio`, `RadioGroup` components to Stacks Svelte

MIGRATION_GUIDE.md

@@ -48,6 +48,12 @@
 - The variant `Muted` has been removed, `Tonal` has been added
 - `s-btn__md` has been removed, `s-btn__lg` has been added
 
+#### Checkbox & Radio
+- The `s-checkbox` and `s-radio` classes should now be applied to the container including the `input` and `label`. These classes replace `.s-check-control`
+- The `s-checkbox` and `s-radio` classes are no longer needed on the `input` element itself
+- The `s-check-group` class has been renamed to `s-form-group`
+- Added `.s-checkbox__checkmark` and `.s-radio__checkmark` modifier classes for checkmark-style variants
+
 #### Inputs
 - `s-input__md` removed
 - `s-input__xl` removed

packages/stacks-classic/lib/components/check-control/check-control.a11y.test.ts

@@ -1,35 +1,33 @@
-import { html } from "@open-wc/testing";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const checkboxTemplate = ({ component, testid, id }: any) =>
-    html` <div class="s-check-control" data-testid="${testid}">
-        ${component}
-        <label class="s-label" for="${id}">Label</label>
-    </div>`;
+["s-checkbox", "s-radio"].forEach((atomicClass) => {
+    const type = atomicClass.replace("s-", "");
 
-["checkbox", "radio"].forEach((type) => {
     describe(type, () => {
         // TODO include indeterminate
         ["checked", "unchecked"].forEach((state) => {
             runA11yTests({
-                tag: "input",
-                baseClass: `s-${type}`,
-                attributes: {
-                    name: "test-name",
-                    id: "test-id",
-                    type,
-                    ...(state === "checked" ? { checked: "checked" } : {}),
+                baseClass: atomicClass,
+                modifiers: {
+                    global: ["has-warning", "has-error", "has-success"],
+                    primary: ["checkmark"],
+                },
+                children: {
+                    default: `
+                        <input
+                            type="${type}"
+                            id="test-input"
+                            name=""
+                            ${state === "checked" ? "checked" : ""}/>
+                        <label class="s-label" for="test-input">
+                            Label ${type}
+                            <p class="s-input-message">Description</p>
+                        </label>
+                    `,
                 },
-                template: ({ component, testid }) =>
-                    checkboxTemplate({
-                        component,
-                        testid,
-                        id: "test-id",
-                    }),
                 options: {
-                    testidSuffix: state,
+                    testidSuffix: `${state}-${type}`,
                 },
             });
         });