[SWC-1668] feat: migrate poc components to full-fidelity production#6122
Draft
rise-erpelding wants to merge 14 commits intomainfrom
Draft
[SWC-1668] feat: migrate poc components to full-fidelity production#6122rise-erpelding wants to merge 14 commits intomainfrom
rise-erpelding wants to merge 14 commits intomainfrom
Conversation
|
Contributor
📚 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 |
rise-erpelding
force-pushed
the
swc-1668/poc-components
branch
2 times, most recently
from
59b1cda to
2147d55
Compare
marissahuysentruyt
force-pushed
the
swc-1668/poc-components
branch
from
419e8bf to
5038447
Compare
8 tasks
rise-erpelding
force-pushed
the
swc-1668/poc-components
branch
from
a099390 to
06a2855
Compare
* 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
* 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
* 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
* 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>
cdransf
force-pushed
the
swc-1668/poc-components
branch
from
e0d3061 to
b446021
Compare
* 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
* 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Apply the standards and code quality patterns to Badge, Progress Circle, Status Light, and Divider components that were used to establish 2nd-gen POC. We will be disabling Asset from storybook until we can reach alignment with Design on a path forward for that pattern.
DOD for all 4 components:
Includes an a11y migration doc in the component project planning directory of CONTRIBUTOR-DOCS
Meets full s2 visual fidelity
Conform to the code style guides
Includes all necessary tests
includes complete documentation in storybook
Is fully accessible and aligns with a11y patterns
Establishes a starting migration guide in the component source directory
DOD for Asset:
Disable this component from Storybook until we align with design
Motivation and context
Related issue(s)
Issues & tasks in epic
maindocs: accessibility recommendation for proof of concept next-gen migration #6105)@todocomments that say things like "This can be moved to the base class once we are no longer maintaining 1st-gen" - it looks like only Badge has these comments, but there may be similar moveable logic in other componentsOustanding issues related to this work not addressed here
@todocomment would be addressed thereScreenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Descriptive Test Statement
Descriptive Test Statement
Device review
Accessibility testing checklist
Required: Complete each applicable item and document your testing steps (replace the placeholders with your component-specific instructions).
Keyboard (required — document steps below) — What to test for: Focus order is logical; Tab reaches the component and all interactive descendants; Enter/Space activate where appropriate; arrow keys work for tabs, menus, sliders, etc.; no focus traps; Escape dismisses when applicable; focus indicator is visible.
Screen reader (required — document steps below) — What to test for: Role and name are announced correctly; state changes (e.g. expanded, selected) are announced; labels and relationships are clear; no unnecessary or duplicate announcements.