feat(badge, progress-circle): s2 styling and render #5718

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

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

⚠️ No Changeset found

Latest commit: 3924d40

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...

castastrophe · 2025-09-03T18:22:22Z

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

        return html`
-            <slot @slotchange=${this.handleSlotchange}></slot>


For the sake of simplifying this for S2, I've regressed some of this functionality by removing the slot and leveraging our SVG approach. Would love to have a larger conversation around this for S2 but this seemed sufficient for the base requirement of getting the S2 styles and rendering into the component.

castastrophe · 2025-09-03T18:26:44Z

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

     */
    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white';
+    public staticColor?: 'white' | 'black';


This is an example where S1 supports only static color white and S2 has styles for static color white & black. What's the current thinking on handling that?

castastrophe · 2025-09-03T18:28:24Z

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

+     * Stroke width for the progress circle.
+     */
+    @property({ type: Number, reflect: false })
+    public get strokeWidth(): number {


This seems a nicer API than the current but would be good to have a discussion re: handling the evolution of the APIs between S1 & S2. S2 progress circle could have a new strokeWidth customization and eschew the current makeRotation function in favor of letting CSS do the calculations (sans transformation).

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.

castastrophe · 2025-09-03T18:31:39Z

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

@@ -37,6 +37,11 @@ export const BADGE_VARIANTS = [
    'green',
    'cyan',
    'blue',
+    'pink',


Another question here on handling new variant options. S1 badge has variants but not styles for these additional options. How do we want to handle extending this and adding the new options for S2-only?

castastrophe · 2025-09-03T18:31:53Z

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

+ * @property {boolean} subtle - Whether the badge is subtle.
+ * @property {boolean} outline - Whether the badge is outlined.


Subtle & outline are new to S2

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

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


-    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.

castastrophe · 2025-09-03T18:33:46Z

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

@@ -139,7 +139,7 @@ export const Indeterminate: Story = {
 export const StaticWhite: Story = {
    render: () => html`
        <div
-            style="background-color: rgba(0,0,0,0.4); padding: 24px; display: flex; gap: 24px; align-items: center;"
+            style="background: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); padding: 24px; display: flex; gap: 24px; align-items: center;"


Added our pretty gradients here for static white/black which match how design demos these styles. They're meant to be on visually busy backgrounds like gradients or images so that drives home that guidance in Storybook as well.

castastrophe · 2025-09-03T18:34:06Z

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

@@ -189,9 +216,3 @@ export const IndeterminateStaticWhite: Story = {
        </div>
    `,
 };
-
-export const WithSlottedContent: Story = {


I removed the slot for the purposes of my S2 update but we can always bring this back.

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

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


 import { ProgressCircleBase } from '@swc/core/components/progress-circle';

 import progressCircleStyles from './progress-circle.css';

+function capitalize(str?: string): string {


I kind of liked this utility living separately but let me know how you want to handle this in the SWC infrastructure.

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

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

@@ -16,13 +16,16 @@ import { SizedMixin, SpectrumElement } from '@swc/core/shared/base';
 import { ObserveSlotPresence } from '@swc/core/shared/observe-slot-presence';
 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.

castastrophe · 2025-09-03T19:05:09Z

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

@@ -37,11 +40,11 @@ export const BADGE_VARIANTS = [
    'green',
    'cyan',
    'blue',
-    'pink',


Since these don't exist in S1, I removed these additions and moved them into the S2 component file as an extension of the existing base.

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

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

@@ -55,8 +58,6 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
 /**
 * @element sp-badge-base
 * @property {BadgeVariant} variant - The variant of the badge.
- * @property {boolean} subtle - Whether the badge is subtle.


This only exists in S2's new styles so I'm testing out moving these into the S2-only component.

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.

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

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

@@ -49,8 +57,9 @@ export type FixedValues = (typeof FIXED_VALUES)[number];

 /**
 * @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?

aramos-adobe · 2025-09-10T18:51:28Z

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

+    public set strokeWidth(customWidth: unknown) {
+        if (customWidth && customWidth instanceof Number) {
+            this._strokeWidth = customWidth as number;
+        }
+
+        this._strokeWidth = this.size === 's' ? 2 : this.size === 'l' ? 4 : 3;
+    }


public set strokeWidth(customWidth: unknown) { if (customWidth && customWidth instanceof Number) { this._strokeWidth = customWidth as number; this._customStrokeWidth = true; } else { this._strokeWidth = this.size === 's' ? 2 : this.size === 'l' ? 4 : 3; this._customStrokeWidth = false; } }

I like the addition of customWidth, not sure how we'd introduce this concept though.

For now, I'm just exploring how to get the svg to fit within the parent container.

aramos-adobe · 2025-09-10T18:53:03Z

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

+        this._strokeWidth = this.size === 's' ? 2 : this.size === 'l' ? 4 : 3;
+    }
+
+    private _strokeWidth: number = 2;


private _strokeWidth: number = 3; private _customStrokeWidth: boolean = false;

Again, maybe you have a better idea, but trying to figure out why the changes weren't updating.

aramos-adobe · 2025-09-10T19:00:46Z

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

in protected override update I added this to update the stroke width per shirt size:

// Update stroke width when size changes (if no custom width was set) if (changes.has('size') && !this._customStrokeWidth) { // Force recalculation by calling the setter this.strokeWidth = undefined; }

Yes! Great points. We need to be accounting for those changes so we can trigger repaint.

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

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

castastrophe force-pushed the castastrophe/feat-styling-rfc branch from 5bc7ac2 to b2f7410 Compare September 3, 2025 17:29

feat(badge): s2 styling and render brought in

76955a7

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

castastrophe commented Sep 3, 2025

View reviewed changes

castastrophe changed the title ~~feat(badge): s2 styling and render brought in~~ feat(badge): s2 styling and render Sep 3, 2025

castastrophe changed the title ~~feat(badge): s2 styling and render~~ feat(badge, progress-circle): s2 styling and render Sep 3, 2025

castastrophe commented Sep 3, 2025

View reviewed changes

castastrophe added 2 commits September 3, 2025 14:43

fix(badge,progress-circle): remove modifiers

a07d2ca

fix(badge): separate S1/S2 API in alternate approach

48e874d

castastrophe commented Sep 3, 2025

View reviewed changes

chore: adding docs notes and todos to 2nd gen

3924d40

castastrophe force-pushed the castastrophe/feat-styling-rfc branch from e00d4cc to 3924d40 Compare September 3, 2025 20:27

aramos-adobe reviewed Sep 10, 2025

View reviewed changes

		return html`
		<slot @slotchange=${this.handleSlotchange}></slot>

		* @property {boolean} subtle - Whether the badge is subtle.
		* @property {boolean} outline - Whether the badge is outlined.

feat(badge, progress-circle): s2 styling and render #5718

Are you sure you want to change the base?

feat(badge, progress-circle): s2 styling and render #5718

Uh oh!

Conversation

castastrophe commented Sep 3, 2025

Description

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Device review

Uh oh!

changeset-bot bot commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview

🔍 Visual Regression Test Results

Uh oh!

github-actions bot commented Sep 3, 2025

Tachometer results

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

castastrophe Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aramos-adobe commented Sep 10, 2025

Uh oh!

Uh oh!

changeset-bot bot commented Sep 3, 2025 •

edited

Loading

github-actions bot commented Sep 3, 2025 •

edited

Loading

castastrophe Sep 3, 2025 •

edited

Loading