Skip to content

ALFMOB-273: Source Chip styling from semantic Theme tokens#94

Open
khoinguyen-mindera wants to merge 4 commits into
mainfrom
ALFMOB-273-refactor-chip-tokens
Open

ALFMOB-273: Source Chip styling from semantic Theme tokens#94
khoinguyen-mindera wants to merge 4 commits into
mainfrom
ALFMOB-273-refactor-chip-tokens

Conversation

@khoinguyen-mindera

@khoinguyen-mindera khoinguyen-mindera commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Ticket

ALFMOB-273

Summary

  • Extract ChipStyle value type from Chip (mirrors the BadgeHelper pattern) so the state→style mapping is unit-testable without snapshots
  • Source Chip's colors from the semantic Theme.* layer instead of raw primitives: borderSoft / contentContentPrimary / surfaceForegroundPrimary (border), contentContentPrimaryDisabled (text), surfaceBackgroundPrimary / surfaceForegroundPrimary (background)
  • Source the normal border width from Primitives.Border.borderWeightDefault instead of a hardcoded 1.0 (consistent with Badge ALFMOB-269)
  • Default text stays on raw neutrals600 — no Theme alias exists at that value
  • Purely a token/naming refactor: every alias resolves to the same primitive, so rendering is unchanged for all selected/unselected/disabled states
  • Add ChipStyleTests (21 XCTest cases) covering every state→token mapping plus counter-label boundaries

Screenshot

Copilot AI review requested due to automatic review settings July 10, 2026 04:14

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the SharedUI Chip component’s styling to be driven by semantic Theme.* tokens where available, and extracts the state→style resolution into a testable value type (ChipStyle). It also adds unit tests to cover the state→token mapping and counter-label logic.

Changes:

  • Extract ChipStyle from Chip and rewire Chip.body to consume ChipStyle properties.
  • Replace hardcoded normal border width (1.0) with CGFloat(Primitives.Border.borderWeightDefault) and map eligible colors through semantic Theme.* aliases.
  • Add ChipStyleTests to cover border/text/background color mapping, border width, height, and counter label boundaries.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file
File Description
Docs/Plans/ALFMOB-273-refactor-chip-tokens/scope.md Scout report documenting existing token usage and remaining hardcoded constants.
Docs/Plans/ALFMOB-273-refactor-chip-tokens/plan.md Plan defining semantic token mapping decisions and test strategy for ChipStyle.
Docs/Plans/ALFMOB-273-refactor-chip-tokens/phase-1-chip-tokens.md Execution steps and acceptance criteria for the single-slice refactor + tests.
Docs/Plans/ALFMOB-273-refactor-chip-tokens/grill.md Recorded decisions for semantic aliases and the ChipStyle extraction approach.
Docs/Plans/ALFMOB-273-refactor-chip-tokens/_status.md Status tracking for the ticket workflow and verification checkpoints.
Alfie/AlfieKit/Sources/SharedUI/Components/Chips/Chip.swift Implements ChipStyle, migrates styling to semantic tokens + border token, rewires Chip rendering.
Alfie/AlfieKit/Tests/SharedUITests/ChipStyleTests.swift Adds unit coverage for state→style/token mapping and counter label formatting.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants