Skip to content

feat(color-handle): scaffold 2nd-gen core/SWC structure (Phase 2)#6443

Open
blunteshwar wants to merge 1 commit into
mainfrom
color-handle/API-and-styling
Open

feat(color-handle): scaffold 2nd-gen core/SWC structure (Phase 2)#6443
blunteshwar wants to merge 1 commit into
mainfrom
color-handle/API-and-styling

Conversation

@blunteshwar

Copy link
Copy Markdown
Contributor

Description

Phase 2 (Setup) of the sp-color-handle 1st-gen → 2nd-gen migration. Scaffolds the 2nd-gen core/SWC file structure for Color Handle, mirroring the already-migrated color-loupe split. Stub only — no public behavior, styling, tests, or stories yet; those land in Phases 3–7.

Core (@spectrum-web-components/core)2nd-gen/packages/core/components/color-handle/

  • ColorHandle.base.ts: abstract ColorHandleBase declaring the agreed 5-property contract (color, disabled, focused, open, fill) and the pointer/touch open-close behavior ported from 1st-gen.
  • ColorHandle.types.ts: ColorHandleProperties interface (the primitive has no variant/size/treatment enums).
  • index.ts: re-exports base + types. Explicit exports + typesVersions entries added to package.json (badge pattern).

SWC (@adobe/spectrum-wc)2nd-gen/packages/swc/components/color-handle/

  • ColorHandle.ts (swc-color-handle): stub render() composing the inner color swatch over the shared opacity checkerboard plus a built-in swc-color-loupe.
  • color-handle.css: Phase 2 stub; full S2 styling (sizing, adaptive dual-border, grow-on-focus) comes from spectrum-css@spectrum-two in Phase 5.
  • index.ts: class re-export only. swc-color-handle.ts: side-effect defineElement registration + HTMLElementTagNameMap augmentation.
  • Empty stories/ and test/ dirs. Covered by the existing ./components/*.js wildcard exports — no SWC package.json edit needed.

Also updates the migration plan Setup checklist and the workstream status table (Analyze, Factor Component, Move to Core).

Motivation and context

Establishes the foundation for the Color Handle migration so later phases (API, a11y, styling, testing, docs) have a correct core/SWC structure to build on. Part of Epic SWC-2137; the adaptive non-text-contrast a11y work (SWC-2295) is implemented in later phases on top of this scaffold.

Related issue(s)

  • SWC-2137 (Epic)
  • SWC-2295 (adaptive white-first border contrast, WCAG 1.4.11 — later phase)

Screenshots (if appropriate)

N/A — no visual surface in this phase (stub CSS only).

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.

Tests, changeset, and consumer docs are intentionally deferred to later migration phases (6–7); this PR is a non-published scaffold.

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

  • Both packages build

    1. Run yarn workspace @spectrum-web-components/core build
    2. Run yarn workspace @adobe/spectrum-wc build
    3. Expect both to succeed; dist/components/color-handle/swc-color-handle.js and core ColorHandle.base.js emitted.
  • Element registration vs class re-export

    1. import '@adobe/spectrum-wc/components/color-handle/swc-color-handle.js'
    2. Expect customElements.get('swc-color-handle') to be defined.
    3. import { ColorHandle } from '@adobe/spectrum-wc/color-handle' should NOT register the element.

Device review

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

Accessibility testing checklist

Color Handle is a non-interactive visual primitive with no ARIA role/name and is not independently focusable; accessibility is owned by the parent color-area/slider/wheel. This PR is a stub scaffold and introduces no functional behavior, so there is nothing new to test for a11y in this phase. The net-new a11y obligation (WCAG 1.4.11 adaptive border, SWC-2295) is implemented and tested in Phases 4–6.

  • Keyboard (required — document steps below)

    1. No focusable parts in this component (a11y owned by parent pickers).
    2. Confirm no regressions in surrounding examples once the component is rendered in later phases.
  • Screen reader (required — document steps below)

    1. Component exposes no role/name (decorative graphic), mirroring swc-color-loupe.
    2. Verify it is not announced as an interactive element when composed into a parent picker in later phases.

Set up the 2nd-gen file and folder structure for Color Handle, mirroring
the migrated color-loupe core/SWC split. Stub-only; implementation lands
in later phases.

Core (@spectrum-web-components/core):
- ColorHandle.base.ts: abstract ColorHandleBase with the 5-property
  contract (color, disabled, focused, open, fill) and pointer/touch
  open-close behavior ported from 1st-gen.
- ColorHandle.types.ts: ColorHandleProperties interface.
- index.ts re-export; explicit exports + typesVersions wired in
  package.json (badge pattern).

SWC (@adobe/spectrum-wc):
- ColorHandle.ts (swc-color-handle): stub render composing inner swatch
  over the shared opacity checkerboard plus a built-in swc-color-loupe.
- color-handle.css: Phase 2 stub (full S2 styling in Phase 5).
- index.ts class re-export; swc-color-handle.ts side-effect registration.
- empty stories/ and test/ dirs. Covered by existing wildcard exports.

Both package builds succeed and the element registers via
swc-color-handle.js. Updates the migration plan Setup checklist and the
workstream status table.

Refs SWC-2137, SWC-2295
@blunteshwar blunteshwar requested a review from a team as a code owner June 23, 2026 14:52
@changeset-bot

changeset-bot Bot commented Jun 23, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 72aa7a9

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

@coveralls

Copy link
Copy Markdown
Collaborator

Coverage Report for CI Build 28034858084

Warning

No base build found for commit 53f5752 on main.
Coverage changes can't be calculated without a base build.
If a base build is processing, this comment will update automatically when it completes.

Coverage: 96.246%

Details

  • Patch coverage: No coverable lines changed in this PR.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

Requires a base build to compare against. How to fix this →


Coverage Stats

Coverage Status
Relevant Lines: 39173
Covered Lines: 37902
Line Coverage: 96.76%
Relevant Branches: 6458
Covered Branches: 6016
Branch Coverage: 93.16%
Branches in Coverage %: Yes
Coverage Strength: 458.31 hits per line

💛 - Coveralls

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants