chore(testing): review and complete test suites#6178
Conversation
|
📚 Branch Preview Links🔍 First Generation Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
6287e20 to
f862330
Compare
f862330 to
7540980
Compare
| @@ -240,9 +290,15 @@ export const NonSemanticVariantsTest: Story = { | |||
| BADGE_VARIANTS_COLOR.map(async (variant) => { | |||
| const badge = canvasElement.querySelector( | |||
| `swc-badge[variant="${variant}"]` | |||
| ) as Badge; | |||
| await badge.updateComplete; | |||
| expect(badge.variant).toBe(variant); | |||
| ) as Badge | null; | |||
| expect( | |||
| badge, | |||
| `badge with variant="${variant}" is rendered` | |||
| ).toBeTruthy(); | |||
| await badge?.updateComplete; | |||
| expect(badge?.variant, `badge variant property is "${variant}"`).toBe( | |||
| variant | |||
| ); | |||
| }) | |||
| ); | |||
There was a problem hiding this comment.
Nit: . The existing NonSemanticVariantsTest was updated to add null-safety but kept the Promise.all(BADGE_VARIANTS_COLOR.map(...)) pattern. This is inconsistent — within this same file, the semantic test uses for...of while the non-semantic test uses map. It should be aligned:
// Before (inconsistent with rest of file)
await Promise.all(
BADGE_VARIANTS_COLOR.map(async (variant) => { ... })
);
// After (matches SemanticVariantsTest pattern)
for (const variant of BADGE_VARIANTS_COLOR) {
const badge = ...
await badge?.updateComplete;
...
}
| play: async ({ canvasElement, step }) => { | ||
| await step('renders and reflects each size correctly', async () => { | ||
| StatusLight.VALID_SIZES.forEach((size) => { | ||
| for (const size of StatusLight.VALID_SIZES) { |
There was a problem hiding this comment.
Nit: every other size/variant loop in this PR imports constants from the component's types file (e.g., DIVIDER_VALID_SIZES, BADGE_VARIANTS_SEMANTIC, STATUS_LIGHT_VARIANTS_SEMANTIC). The SizesTest is the only one that uses a static class property. This should be consistent:
// Current
StatusLight.VALID_SIZES.forEach(...) // → was forEach, now for...of but still class prop
// Preferred — matches project pattern
import { STATUS_LIGHT_VALID_SIZES } from '../../../../core/components/status-light/StatusLight.types.js';
for (const size of STATUS_LIGHT_VALID_SIZES) { ... }
I would reference the variant tests below, there should be a sizes story so not sure why we would need the custom render?
| const dividers = await getComponents<Divider>(canvasElement, 'swc-divider'); | ||
|
|
||
| await step('reflects vertical orientation attributes', async () => { | ||
| dividers.forEach((divider) => { |
There was a problem hiding this comment.
Nit: forEach is technically correct, but they're inconsistent with the rest of the PR's updated tests. A for...of refactor would make the whole file consistent:
// Before
dividers.forEach((divider) => {
expect(divider.hasAttribute('vertical'), 'divider has vertical attribute').toBe(true);
});
// After
for (const divider of dividers) {
expect(divider.hasAttribute('vertical'), 'divider has vertical attribute').toBe(true);
}
| @@ -81,8 +154,11 @@ export const StaticColorsTest: Story = { | |||
| await step('reflects expected static-color attribute values', async () => { | |||
| dividers.forEach((divider) => { | |||
There was a problem hiding this comment.
Nit: forEach is technically correct, but they're inconsistent with the rest of the PR's updated tests. A for...of refactor would make the whole file consistent:
// Before
dividers.forEach((divider) => {
expect(divider.hasAttribute('vertical'), 'divider has vertical attribute').toBe(true);
});
// After
for (const divider of dividers) {
expect(divider.hasAttribute('vertical'), 'divider has vertical attribute').toBe(true);
}
caseyisonit
left a comment
There was a problem hiding this comment.
Left a few nit comments for consistency but not blocking
Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
* chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com>
…6122) * chore(full-fidelity): revise @status property in docblocks * style(badge): clean up code styles (#6125) * docs(divider): follows a11y rec for real content in stories (#6123) * docs(divider): follows a11y rec for real content in stories * docs(divider): define default size and add todo for chromatic - adds a todo comment to capture vrts for WHCM and more sizes in the static color dividers - adds medium as the default in the control table * docs(divider): update content with realistic text * feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * style(divider): clean up code styles (#6135) * fix(badge): use correct line-height tokens (#6153) * feat(statuslight): ensure visual fidelity for status light (#6133) * feat(statuslight): export status light type for sizes * feat(statuslight): map through status light sizes in story * fix(statuslight): padding block uses padding-vertical tokens * docs(status-light): add argType defaults and clean up story args - Declare defaultValue summaries in argTypes for variant and size so Storybook's controls table shows the defaults - Remove redundant hardcoded args from Playground, Overview, and Anatomy now that defaults are reflected through argTypes - Add semantic variant usage note to SemanticVariants story * docs(statuslight): extra a11y explanations * style(statuslight): fixes according to style guides * docs: update status light contributor examples * docs: update more status light examples in guides * fix(statuslight): use new line-height tokens * docs(statuslight): clarify where to see i18n status light story * docs(statuslight): remove tags from i18n story * fix(statuslight): remove exposed color prop and redundant properties * style(progress-circle): clean up code styles (#6146) * style(status-light): clean up code styles (#6157) * refactor: rename STATUSLIGHT to STATUS_LIGHT type * refactor: reorg types file * refactor: standardized debug warnings * refactor: update jsdoc comments --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(core): remove 1st-gen type references from 2nd-gen core (#6168) * chore(core): remove 1st-gen type references from 2nd-gen core * chore(badge): move properties to badge base * chore(badge): update badge todo * chore(status-light): restore removed comments * chore(status-light): remove doc block line in status light * chore: turn off asset from SB prod build (#6175) * feat(progresscircle): ensure s2 visual fidelity (#6151) * feat(progresscircle): ensure s2 visual fidelity - Exports `ProgressCircleSize` type from core - Adds `prefers-reduced-motion` CSS media query - Adds `dashOffset` variable to ensure contrast at 0% progress - Replaces hardcoded size templates with `PROGRESS_CIRCLE_VALID_SIZES.map()` - Removes sizing antipattern in render - Removes canvas WHCM track color - Implements a11y improvements per migration analysis Also includes minor cross-component cleanup: - Renames `STATUSLIGHT_*` constants to `STATUS_LIGHT_*` convention - Adds `{ type: String }` to `@property()` decorators in Asset and Icon base classes - Fixes `customElements` path in swc package.json - Tags icon internal stories as migrated - Updates Storybook source type from auto to dynamic - Minor avatar stories and status-light stories updates fixes swc-1670 * chore(testing): review and complete test suites (#6178) * chore(testing): review and complete test suites * fix(testing): correct failing tests in 2nd gen * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/divider/test/divider.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * Update 2nd-gen/packages/swc/components/asset/test/asset.test.ts Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(testing): address feedback --------- Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore(storybook): review and complete storybook docs (#6180) * feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * style(progress-circle): clean up code styles (#6146) * chore(storybook): review and complete storybook docs * fix(storybook): revert icon test change to debug test failures * fix(storybook): changes to align w/progress circle being set to indeterminate by default * fix(storybook): correct test failure caused by string mismatch * fix(storybook): correct test failures * fix(testing): correct failing tests in 2nd gen * fix(storybook): correct test failures * chore(storybook): address feedback * chore(storybook): address feedback --------- Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> * chore(full-fidelity): remove duplicate story * fix(full-fidelity): asset lint violations * chore(full-fidelity): update todo comment in progress circle based on feedback * chore(full-fidelity): update private property names * chore(full-fidelity): update progress circle design to align w/pending button * chore(full-fidelity): update progress circle todo ticket number * chore(full-fidelity): consistently rename status light css properties * docs: add consumer migration guides for S2 components (#6169) * feat(badge): ensure visual s2 fidelity (#6114) * docs(badge): update rendering-and-styling migration analysis Clarify that fixed positioning is documented in design system guidance and note new S2 badge variants (notification, indicator) tracked in SWC-1831. * feat(badge): add no-label CSS class when label slot is empty Add `swc-Badge--no-label` class via classMap when the default slot has no text content, enabling CSS targeting of icon-only badges. * fix(badge): updates padding block tokens and icon-only gap * feat(badge): support for swc-icon internal * feat(badge): icon only accessibility examples * fix(badge): size types passing into swc-icon * docs(badge): adds todo for missing variants * fix(badge): dynamically passes size to slotted icon * test(badge): anatomy test checks for children elements previously, we were checking for text content when the badge icon slot was just accepting strings. Now the anatomy story is using the swc-icon internal component, so it never has text content (it's got HTML). the badge test now checks for children.length instead. * fix(badge): disabled text control for icon-slot * fix(badge): a11y roles for icon only badges * fix(badge): inline padding - adds new --swc-badge-padding-inline-start custom prop to control the inline padding start of a badge. it changes when there's an icon + label vs. just the text label - also fixes the gap property so that we just redefine the custom prop for the badge gap instead * docs(badge): add todo for icon only badge size story * docs(rules): update docs on template vs custom html rendering * docs: badge examples updated * fix(badge): correct fallbacks for sized badge padding Without this fallback, the start padding on a badge without an icon would always resolve to the 75-scale token regardless of size, because --swc-badge-padding-inline-start was never set in the size override blocks. Adding --swc-badge-padding-inline as an intermediate fallback means size overrides propagate to both sides automatically, while the :has() rules can still override --swc-badge-padding-inline-start for the icon case. * revert(badge): medium stays default size; neutral is default variant * test(badge): update new default assertions * docs(badge): adds @todo to default sizing discrepancy comment * fix(badge): reduce selector specificity and refactor private padding tokens * fix(badge): padding block properties corrected * docs: correct updated css style guides with badge examples * docs: fix typo * docs(badge): use different badge variants per design docs * docs(badge): adds tickets to todo comments * docs: add consumer migration guides for 7 S2 components * docs: additional migration refinements * docs: migration css info refinement * docs: a11y updates for migration docs * chore(migration-guides): add ai skill and contributor docs for migrations * chore(migration-guides): add @cssprop to doc blocks * chore(migration-guides): address pr feedback * chore(migration-guides): fix badge tests * chore(migration-guides): refactor using migration skill * fix(migration-docs): remove deprecated files * fix(migration-docs): remove deprecated ai skill reference * fix(migration-docs): address pr feedback * chore(storybook): update preview nav for new accessibility analysis docs * fix(migration-docs): update progress circle docs * fix(migration-docs): address missing properties to badge table * fix(migration-docs): revert application of Canvas to progress circle track in forced colors * fix(migration-docs): consistently rename status light properties * Update 2nd-gen/packages/swc/components/badge/consumer-migration-guide.mdx Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> * fix(migration-docs): badge fallbacks and consistency * chore(migration-docs): add missing mods --------- Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> * fix(badge): style default color as neutral, not accent * fix(statuslight): style default dot color as neutral * fix(statuslight): style neutral text * docs: align style guide with updated css * fix(badge,divider): default sizing (swc-1847) * fix(statuslight): default variant changed to neutral * fix(statuslight): text color is same for all variants * fix(statuslight): lint fixes * chore: changeset * chore(full-fidelity): revise changese to include updated components * chore(full-fidelity): status-light deprecation warns * chore(full-fidelity): progress-circle deprecation warns * chore(full-fidelity): icon deprecation warns * fix(full-fidelity): status-light test failure * chore(full-fidelity): avatar deprecation warns * chore(full-fidelity): add non-interactive section to avatar docs * chore(full-fidelity): add note explaining visual fill w/progress set to 0 in progress circle * chore(full-fidelity): add a11y tests for badge + avatar * chore(full-fidelity): add a11y tests for divider * chore(full-fidelity): add a11y tests for progress circle * fix: lintfix & preview.ts updates * fix: remove text-box: cap alphabetic; * fix: remove status for POC components + avatar * chore(full-fidelity): improvide divider examples * chore(full-fidelity): improvide divider docs * chore(full-fidelity): note on separator focus interactions * chore(full-fidelity): remove unnecessary progress-circle story * fix(full-fidelity): update styles based on feedback + remove duplicate header * chore(full-fidelity): move todo out of docblock * fix(divider): needs inline or block size to render * fix(full-fidelity): correct lint violation in divider stories --------- Co-authored-by: Cory Dransfeldt <cdransfeldt@adobe.com> Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> Co-authored-by: cdransf <445732+cdransf@users.noreply.github.com>
Description
Completes and standardizes the test suites for the 2nd-gen POC components (badge, divider, status-light,
progress-circle, asset, icon, and typography). Changes include:
expect()call per the testing styleguideas Type | null) with optional chaining to all loop-basedquerySelectorcallswithWarningSpyfor invalid variants and missing accessible namestypography.template.ts(coerceSizefallback andheavyfilter paths)icon.a11y.spec.tswith Playwright ARIA snapshot teststypography.a11y.spec.tswith a localgotoTypographyStoryhelper (required because typography isCSS-only and has no custom element to wait on)
Motivation and context
SWC-1672 requires complete, styleguide-compliant test suites for all POC components before this branch is ready
for full review. The tests establish a baseline for automated regression coverage and accessibility validation.
Related issue(s)
Author's checklist
I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed the Accessibility Practices for this feature, see: Aria
Practices
I have added automated tests to cover my changes.
I have included updated documentation if my change required it.
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Interaction tests pass in the Storybook dev environment
yarn storybook:devin2nd-gen/Playwright a11y tests pass
yarn test:a11yin2nd-gen/icon.a11y.spec.tsandtypography.a11y.spec.tspass with correct ARIA snapshotsAccessibility testing checklist
These components (badge, divider, status-light, progress-circle, asset, icon, typography) are all
non-interactive — none receive keyboard focus. Manual keyboard and screen reader testing is not applicable.
Accessibility coverage is provided by the automated ARIA snapshot tests in
icon.a11y.spec.tsandtypography.a11y.spec.ts, and by the axe WCAG checks run viatest-storybook.