chore: clean up patterns #5935

caseyisonit · 2025-12-12T21:34:34Z

Description

Motivation and context

Related issue(s)

fixes [Issue Number]

Screenshots (if appropriate)

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Descriptive Test Statement
1. Go here
2. Do this action
3. Expect this result
Descriptive Test Statement
1. Go here
2. Do this action
3. Expect this result

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

changeset-bot · 2025-12-12T21:34:38Z

⚠️ No Changeset found

Latest commit: de8be4b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

2nd-gen/packages/swc/components/divider/stories/divider.stories.ts

2nd-gen/packages/swc/components/badge/stories/badge.stories.ts

2nd-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts

github-actions · 2025-12-16T21:41:18Z

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When 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: pr-5935

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

caseyisonit · 2025-12-17T04:06:56Z

2nd-gen/packages/swc/.storybook/about-swc/first-gen-vs-second-gen.mdx

-        </sp-table-row>
-    </sp-table-body>
-</sp-table>
+| Area              | 1st-gen SWC                                 | 2nd-gen SWC                                           |


s1 styles/variables arent loaded in 2nd gen so it was rendering odd, i switched to markdown table which has some nice borders and subtle color diff between rows. (we absolutely can revisit using our components in docs)

caseyisonit · 2025-12-17T04:07:51Z

2nd-gen/packages/swc/.storybook/learn-about-swc/when-to-use-swc.mdx


-### You want built-in accessibility
+<sp-accordion allow-multiple size="m" class="docs-accordion">


i override the border color with this class so match the hr under the h2. same issue with s1 variables not mapping

caseyisonit · 2025-12-17T04:10:37Z

2nd-gen/packages/swc/.storybook/decorators/flex-layout.ts

i modified this decorator to have some set flex styles to unlock its scalability. we can continue to add layout styles to this new pattern as we come across odd layouts

caseyisonit · 2025-12-17T04:11:37Z

2nd-gen/packages/swc/.storybook/guides/contributor-guides/using-the-issue-tracker.mdx

 Providing the correct issue severity classification helps us adequately assess and prioritize your issue. We reserve the right to adjust the severity of your bug during triage.
 Below is our issue severity classification criteria:

-<sp-table size="m">


same comment about the table as above

caseyisonit · 2025-12-17T04:12:27Z

...t-planning/workstreams/2nd-gen-component-migration/add-stories-for-2nd-gen-swc-component.mdx


 Create `stories/[component].usage.mdx` to display stories organized by section.

-```mdx


this section is dynamically generated with the GettingStarted doc block

caseyisonit · 2025-12-17T04:15:47Z

2nd-gen/packages/swc/components/asset/stories/asset.stories.ts

-            subtitle: `Assets visually represent a file, folder or image in your application.`,
+            subtitle: `Visually represent files, folders, or images in your application`,
        },
+        flexLayout: 'row-nowrap',


now we can set the most common flex layout in the meta and then overwrite it at the storylevel if you need. i found most stories lean in to row-wrap or column-stretch

LOVE THIS!!!!

caseyisonit · 2025-12-17T04:18:17Z

2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts


-type StatusLightVariant = typeof StatusLight.prototype.variant;
-type StatusLightSize = typeof StatusLight.prototype.size;
+const semanticLabels = {


this is the pattern for custom labeling when using type consts to generate templates in a story

caseyisonit · 2025-12-17T04:18:59Z

2nd-gen/packages/swc/.storybook/preview.ts

-                type: 'dynamic',
+                type: 'auto',
                language: 'html',
+                transform: async (source: string) => {


SOURCE BLOCK LINTING....... SOOOOOO GOOOOODDDD

…b-components into caseyisonit/addon-party

.cursor/rules/stories-documentation.mdc

nikkimk · 2025-12-17T14:16:44Z

2nd-gen/packages/swc/components/asset/stories/asset.stories.ts

-            subtitle: `Assets visually represent a file, folder or image in your application.`,
+            subtitle: `Visually represent files, folders, or images in your application`,
        },
+        flexLayout: 'row-nowrap',


LOVE THIS!!!!

nikkimk · 2025-12-17T14:17:52Z

2nd-gen/packages/swc/components/asset/stories/asset.stories.ts

+ * ### Visual structure
+ *


Suggested change

* ### Visual structure

*

nikkimk · 2025-12-17T14:20:07Z

2nd-gen/packages/swc/components/asset/stories/asset.stories.ts

+ * An asset consists of:
+ *
+ * 1. **Icon or image content** - Either a file/folder icon or custom slotted content
+ * 2. **Accessible label** - Provides context for assistive technologies
+ *
+ * The asset automatically centers its content both horizontally and vertically within the available space.
+ *
+ * ### Technical structure
+ *
+ * #### Slots
+ *
+ * - **Default slot**: Custom content to display (typically an image) when variant is not set
+ *
+ * #### Properties


Suggested change

* An asset consists of:

*

* 1. **Icon or image content** - Either a file/folder icon or custom slotted content

* 2. **Accessible label** - Provides context for assistive technologies

*

* The asset automatically centers its content both horizontally and vertically within the available space.

*

* ### Technical structure

*

* #### Slots

*

* - **Default slot**: Custom content to display (typically an image) when variant is not set

*

* #### Properties

* An asset consists of:

*

* 1. **Icon or image content** - Either a file/folder icon or custom slotted content

* 2. **Accessible label** - Provides context for assistive technologies

nikkimk · 2025-12-17T14:20:23Z

2nd-gen/packages/swc/components/asset/stories/asset.stories.ts

+ * Properties that control the asset's appearance:
+ *
+ * - [**Variant**](#variants): Controls which built-in icon to display (`file`, `folder`, or unset for custom content)
+ * - **Label**: Accessible label for screen readers (used as `aria-label` on the icon SVGs)


Suggested change

* Properties that control the asset's appearance:

*

* - [**Variant**](#variants): Controls which built-in icon to display (`file`, `folder`, or unset for custom content)

* - **Label**: Accessible label for screen readers (used as `aria-label` on the icon SVGs)

nikkimk · 2025-12-17T14:39:08Z

2nd-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts

+ * A progress circle consists of:
+ *
+ * 1. **Track** - Background ring showing the full progress range
+ * 2. **Fill** - Colored ring segment showing current progress
+ * 3. **Label** - Accessible text describing the operation (not visually rendered)
+ *
+ * ### Technical structure
+ *
+ * #### Slots
+ *
+ * - **Default slot**: Alternative way to provide an accessible label (the `label` attribute is preferred)
+ *
+ * #### Properties
+ *
+ * - [**Progress**](#progress-values): Numeric value from 0-100 controlling the fill amount
+ * - [**Label**](#progress-values): Accessible text describing what is loading or progressing
+ * - [**Indeterminate**](#indeterminate): Boolean controlling animated vs. determinate state
+ * - [**Size**](#sizes): Visual size (s, m, or l)
+ * - [**Static color**](#static-colors): Color variant for use on different backgrounds (white or black)


Suggested change

* A progress circle consists of:

*

* 1. **Track** - Background ring showing the full progress range

* 2. **Fill** - Colored ring segment showing current progress

* 3. **Label** - Accessible text describing the operation (not visually rendered)

*

* ### Technical structure

*

* #### Slots

*

* - **Default slot**: Alternative way to provide an accessible label (the `label` attribute is preferred)

*

* #### Properties

*

* - [**Progress**](#progress-values): Numeric value from 0-100 controlling the fill amount

* - [**Label**](#progress-values): Accessible text describing what is loading or progressing

* - [**Indeterminate**](#indeterminate): Boolean controlling animated vs. determinate state

* - [**Size**](#sizes): Visual size (s, m, or l)

* - [**Static color**](#static-colors): Color variant for use on different backgrounds (white or black)

* A progress circle consists of:

*

* 1. **Track** - Background ring showing the full progress range

* 2. **Fill** - Colored ring segment showing current progress, via `progress` attribute

* 3. **Label** - Accessible text, via `label` attribute, describing the operation (not visually rendered)

nikkimk · 2025-12-17T14:39:27Z

2nd-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts

+        ${template({
+            ...args,
+            progress: 0,
+            size: 'l',
+            label: 'Starting upload',
+        })}
+        ${template({
+            ...args,
+            progress: 50,
+            size: 'l',
+            label: 'Uploading document',
+        })}
+        ${template({
+            ...args,
+            progress: 100,
+            size: 'l',
+            label: 'Upload complete',
+        })}


Love this example!

nikkimk · 2025-12-17T14:42:27Z

2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts


-type StatusLightVariant = typeof StatusLight.prototype.variant;
-type StatusLightSize = typeof StatusLight.prototype.size;
+const semanticLabels = {


nikkimk · 2025-12-17T14:43:31Z

2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts

+ * ### Visual structure
+ *
+ * A status light consists of:
+ *
+ * 1. **Colored dot indicator** - Visual representation of status or category
+ * 2. **Text label** - Descriptive text providing context
+ *
+ * ### Technical structure
+ *
+ * #### Slots
+ *
+ * - **Default slot**: Text label describing the status (required)
+ *
+ * #### Properties
+ *
+ * Properties that control visual appearance:
+ *
+ * - **Variant**: Controls the color of the status dot ([semantic](#semantic-variants) or [non-semantic](#non-semantic-variants) variants)
+ * - [**Size**](#sizes): Controls the overall size of the component


Suggested change

* ### Visual structure

*

* A status light consists of:

*

* 1. **Colored dot indicator** - Visual representation of status or category

* 2. **Text label** - Descriptive text providing context

*

* ### Technical structure

*

* #### Slots

*

* - **Default slot**: Text label describing the status (required)

*

* #### Properties

*

* Properties that control visual appearance:

*

* - **Variant**: Controls the color of the status dot ([semantic](#semantic-variants) or [non-semantic](#non-semantic-variants) variants)

* - [**Size**](#sizes): Controls the overall size of the component

* A status light consists of:

*

* 1. **Colored dot indicator** - Visual representation of status or category

* 2. **Text label** - Descriptive text providing context, via the default slot (required)

nikkimk · 2025-12-17T14:43:46Z

2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts

+ * - **Small (`s`)**: Used for inline indicators or space-constrained areas
+ * - **Medium (`m`)**: Default size, used for typical use cases
+ * - **Large (`l`)**: Used for prominent displays or primary content areas
+ * - **Extra-large (`xl`)**: Maximum visibility for high-priority statuses


Co-authored-by: Nikki Massaro <[email protected]>

caseyisonit added 5 commits December 11, 2025 16:14

chore: fix weird react error, remove unused assets

96e554d

chore: removed unused helper and update docs

6a24b0f

chore: merge base

f36f647

chore: clean up a little, test the template pattern with slots

c6a3541

chore: adobt size arg fix from ruben and clean up

8ed187d

caseyisonit requested a review from a team as a code owner December 12, 2025 21:34

caseyisonit added 4 commits December 12, 2025 15:08

chore: direction addon in toolbar and some global controls

c4eb76c

chore: status light story cleanup

458da4d

chore: story clean up

0aedbfc

chore: clean up and stories with types

1a5463b

caseyisonit changed the title ~~chore: clean up patterns and add direction addon~~ chore: clean up patterns Dec 16, 2025

caseyisonit added 2 commits December 15, 2025 20:29

Merge branch 'garage-week/docs-rocks' into caseyisonit/addon-party

baafc62

chore: applying cleaner pattern

023ed17