feat(infield-button): migrate CSS and stories for Phase 5 (styling)

[Rajdeepc]

Description

Phase 5 (styling) of the 1st-gen → 2nd-gen swc-infield-button migration, updated to address review feedback.

CSS (infield-button.css)

• Padding-based sizing: the host has no fixed block/inline size. The inner button self-sizes via padding: var(--swc-infield-button-padding, token("accessory-item-padding-medium")) plus icon. Consuming fields control outer dimensions and spacing.
• Per-size overrides on :host([size="*"]) set public custom properties that cascade into the button:
  • S: --swc-infield-button-padding → accessory-item-padding-small (3px)
  • M (default): 5px padding via fallback; no host rule needed
  • L: --swc-infield-button-padding → accessory-item-padding-large (7px); --swc-infield-button-icon-size → workflow-icon-2x-small (12px)
  • XL: --swc-infield-button-padding → accessory-item-padding-extra-large (9px); --swc-infield-button-icon-size → workflow-icon-extra-small (14px)
• Icon sizes (corrected per Spectrum CSS reference): S/M → workflow-icon-3x-small (10px, default), L → workflow-icon-2x-small (12px), XL → workflow-icon-extra-small (14px). Icon size is resolved inside the ::slotted() rule, following the button.css pattern.
• Quiet state: only the base quiet treatment (transparent background and border) is explicit; hover/active/focus-visible states for quiet are handled by the semantic button element and require no overrides.
• Active transform: kept — provides tactile click feedback for interactive uses (e.g., number field stepper). Exposed via --swc-infield-button-down-state-transform.
• Border radius: four individual border-*-radius custom properties so parent fields can zero out inner corners without losing the outer radius.
• Forced colors: system-color tokens at the bottom of the file.

Stories (stories/infield-button.stories.ts)

All stories show swc-infield-button inside a labeled mock field using plain HTML, since 2nd-gen field components are not yet migrated. This enables meaningful axe accessibility testing and models correct consumer usage. Contexts shown:

• Picker/combobox (chevron button at the trailing edge of a text input)
• Search field with a clear button (cross button at the trailing edge)
• Number field stepper (decrement + increment buttons flanking a number input)

InfieldButton.ts

@cssprop documentation updated: --swc-infield-button-height removed (no longer exists); --swc-infield-button-padding added.

Motivation and context

Phase 5 of the infield-button migration workstream translates the 1st-gen sp-infield-button visual layer to 2nd-gen S2 design tokens and SWC CSS conventions, and adds the Storybook stories surface needed for Phase 6 testing.

Related issue(s)

• Part of epic SWC-2105

Screenshots (if appropriate)

N/A — CSS and stories changes; visual verification done in Storybook.

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

• Verify the button sizes correctly at each size attribute value

  1. Open the Sizes story in Storybook
  2. Compare the button at S, M, L, XL inside the mock field
  3. Expect the button to be visually proportional to the field height at each size, with no extra forced padding outside the button

• Verify press-state (downstate) transform animates correctly

  1. Open the States story in Storybook
  2. Click and hold the enabled button inside the mock field
  3. Expect the button to shift slightly into the screen (tactile press effect) and release on pointer-up

• Verify quiet variant has no visible border or background

  1. Open the Quiet story in Storybook
  2. Hover and click the quiet button inside the borderless mock field
  3. Expect background and border remain transparent; hover state uses default interaction colors

• Verify forced-colors (high-contrast) rendering

  1. Enable Windows High Contrast or forced-colors emulation in DevTools
  2. Open any infield-button story
  3. Expect icon color, background, and border use system color tokens correctly

Device review

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

Accessibility testing checklist

• Keyboard (required)

  1. Open the Accessibility story (number field stepper) in Storybook
  2. Tab into the story — the input receives focus; Tab again moves past the field
  3. Expect swc-infield-button is never focused (tabindex="-1"); the parent field owns keyboard behavior

• Screen reader (required)

  1. Open the Accessibility story with VoiceOver (macOS) or NVDA (Windows)
  2. Navigate to the quantity field
  3. Expect: the label "Quantity" is announced on the input; each swc-infield-button announces its role ("button") and its aria-label ("Decrease quantity" / "Increase quantity") when navigated via the accessibility tree

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1c6e5c5

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]

📚 Branch Preview Links

• Storybook (Gen2, dev mode)
• Storybook (Gen2, prod mode)
• Documentation Site (Gen1)
• Storybook (Gen1)

🔍 Gen1 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:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-6499

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.

[5t3ph]

Refactor needed - let me know if you want assistance converting this!

[5t3ph]

More refactor steps are needed to bring this up to S2 expectations, following the example of S2 Number Field.

[nikkimk]

Since an infield button is only ever used in a field and not as a standalone component, the examples should show it used inside fields accessibly. This allows us to fully test for accessibility as well as model to our consumers how to use this component.

[Rajdeepc]

Since an infield button is only ever used in a field and not as a standalone component, the examples should show it used inside fields accessibly. This allows us to fully test for accessibility as well as model to our consumers how to use this component.

Agreed but this depends on swc-picker and swc-numberfield being visually ready. If I add a contrived wrapper that would misrepresent actual usage. I'd like to track this as a follow-up once those components are available. For now, the component's own accessibility contract is narrow by design: accessible-label maps to aria-label on the inner <button>, and tabindex="-1" keeps it out of the tab order. I've verified that contract is wired correctly.

[5t3ph]

The padding and icon size related adjustments look good!

Some remaining cleanup of custom property use.

[5t3ph]

Thanks for working through this!

[nikkimk]

Since an infield button is only ever used in a field and not as a standalone component, the examples should show it used inside fields accessibly. This allows us to fully test for accessibility as well as model to our consumers how to use this component.

Agreed but this depends on swc-picker and swc-numberfield being visually ready. If I add a contrived wrapper that would misrepresent actual usage. I'd like to track this as a follow-up once those components are available. For now, the component's own accessibility contract is narrow by design: accessible-label maps to aria-label on the inner <button>, and tabindex="-1" keeps it out of the tab order. I've verified that contract is wired correctly.

The stories should use a dummy component in these examples to use an existing one anyway, because that shows the users how to implement it accessibly in their own code. See how the FocusgroupNavigationController and LiveSelectionController docs use stories that are not actual SWC components.

I won't be able to sign off without testing these in context.

[Rajdeepc]

Since an infield button is only ever used in a field and not as a standalone component, the examples should show it used inside fields accessibly. This allows us to fully test for accessibility as well as model to our consumers how to use this component.

Agreed but this depends on swc-picker and swc-numberfield being visually ready. If I add a contrived wrapper that would misrepresent actual usage. I'd like to track this as a follow-up once those components are available. For now, the component's own accessibility contract is narrow by design: accessible-label maps to aria-label on the inner <button>, and tabindex="-1" keeps it out of the tab order. I've verified that contract is wired correctly.

The stories should use a dummy component in these examples to use an existing one anyway, because that shows the users how to implement it accessibly in their own code. See how the FocusgroupNavigationController and LiveSelectionController docs use stories that are not actual SWC components.

I won't be able to sign off without testing these in context.

@nikkimk Make sense. I added some demo components to replicate the UI composition of this component. Let me know if this is fine or not.
https://swcpreviews.z13.web.core.windows.net/pr-6499/docs/gen2-storybook-prod/?path=/docs/components-infield-button--docs

[nikkimk]

Thanks for taking this on. LTGM