feat(badge): s2 styling and render #5718

castastrophe · 2025-09-03T17:18:31Z

Description

Using the approach outlined in the styling RFC; brought in the existing S2 stylings from the CSS spectrum-two branch and noted any questions, concerns, and API implications as comments on this PR.

Focused on the badge component.

Motivation and context

Related issue(s)

CSS-1269

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-09-03T17:18:35Z

⚠️ No Changeset found

Latest commit: 8e6f89b

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

github-actions · 2025-09-03T17:20:31Z

📚 Branch Preview

🔍 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-5718

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.

github-actions · 2025-09-03T17:23:39Z

Tachometer results

Currently, no packages are changed by this PR...

second-gen/packages/swc/components/progress-circle/ProgressCircle.ts

second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts

castastrophe · 2025-09-03T18:29:27Z

second-gen/packages/swc/components/badge/Badge.ts

+                        typeof this.fixed !== 'undefined',
+                })}
+            >
+                ${when(


I updated the ternary to use when instead but let me know if there's a reason not to use that here.

castastrophe · 2025-09-03T18:30:21Z

second-gen/packages/swc/components/badge/Badge.ts

+                        </div>
+                    `
+                )}
+                <div class="spectrum-Badge-label">


I tested adding this class to the slot itself and it didn't render padding correctly. Maybe just a case of needing the appropriate display settings but I didn't dig into it too much. Would be good to have a standard "best practice" in place for whether we want to wrap slots to apply styles or style slot containers directly.

second-gen/packages/core/components/badge/Badge.base.ts

castastrophe · 2025-09-03T18:32:36Z

second-gen/packages/core/components/badge/Badge.base.ts

+    @property({ type: Boolean, reflect: true })
+    public subtle: boolean = false;

-    public set fixed(fixed: FixedValues | undefined) {


This seems to me to be how the @Property works by default. I don't see any regressions when I simplify this but let me know if I've missed a nuance here.

second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts

second-gen/packages/swc/components/progress-circle/ProgressCircle.ts

castastrophe · 2025-09-03T19:04:23Z

second-gen/packages/core/components/badge/Badge.base.ts

 import { ObserveSlotText } from '@swc/core/shared/observe-slot-text';

-export const BADGE_VARIANTS = [
+export const BADGE_VARIANTS_SEMANTIC = [


Separating out the semantic variants from the color variants helps us in Storybook (and possibly down the road) because only semantic variants support outline styling.

second-gen/packages/core/components/badge/Badge.base.ts

castastrophe · 2025-09-03T19:06:42Z

second-gen/packages/swc/components/badge/Badge.ts

+    BadgeBase,
+} from '@swc/core/components/badge';
+
+export const BADGE_VARIANTS_COLOR = [


This re-exports the const with the addition of the new colors.

castastrophe · 2025-09-03T19:07:14Z

second-gen/packages/swc/components/badge/Badge.ts

+    ...BADGE_VARIANTS_SEMANTIC,
+    ...BADGE_VARIANTS_COLOR,
+] as const;
+export type BadgeVariant = (typeof BADGE_VARIANTS)[number];


I'm not sure if I need to redefine this since technically it's the same but the content of the BADGE_VARIANTS has changed so I went ahead and did that.

@rubencarvalho Do you know how that works in Typescript? Would it calculate the value of BadgeVariant at the time of use based on the new definition of BADGE_VARIANTS?

castastrophe · 2025-09-03T19:11:57Z

second-gen/packages/core/components/badge/Badge.base.ts


 /**
 * @element sp-badge-base
- * @slot - The text label to display in the badge.


Since this doesn't have a render, should we define these only on the render layer?

second-gen/packages/core/components/progress-circle/ProgressCircle.base.ts

aramos-adobe · 2025-09-10T19:02:21Z

@castastrophe The S2 addition of these are sooooo lovely!! I'd love to contribute to this!!

marissahuysentruyt · 2025-09-18T17:10:02Z

second-gen/packages/swc/components/badge/Badge.ts

 * @status stable
 * @github https://github.com/adobe/spectrum-web-components/tree/main/...
- * @figma https://www.figma.com/design/...
+ * @figma https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=36806-6551


At one point, we talked about not sharing Figma links. Are we concerned at all with committing this link to the repo? I know we have it in CSS, but I thought that ended up being sort of a no-no. Or was that just for in PR descriptions? Or am I misremembering (which could totally be)?

Great question! I'm not sure. I know we don't post Jira links publicly but I thought since the Figma assets are behind a login, it was okay to include them in Storybook. @najikahalsema do you know?

marissahuysentruyt · 2025-09-18T17:11:46Z

second-gen/packages/swc/components/badge/stories/badge.stories.ts

+            gap: 'var(--spectrum-spacing-200)',
+            'flex-wrap': 'wrap',
+            'justify-content': 'center',
+            // Used 80ch because that's generally considered the maximum readable width for text in a web page.


👏 ❤️

castastrophe · 2025-09-19T15:21:43Z

second-gen/packages/core/components/badge/Badge.base.ts

 import { ObserveSlotText } from '@swc/core/shared/observe-slot-text';

-export const BADGE_VARIANTS = [
+export const BADGE_VARIANTS_SEMANTIC = [


@rubencarvalho Initially I started updating these assets per the S2 guidelines before I realized this is the base class being imported into S1 components as well. Would it make sense to hoist this folder to sit between the first- and second-get folders so it's clear that it's a shared resource?

castastrophe force-pushed the castastrophe/feat-styling-rfc branch 2 times, most recently from b2f7410 to 76955a7 Compare September 3, 2025 17:55