Skip to content

Chips: Fix read-only state #2416

Description

@SergejLust

Detailed description of how to reproduce the problem

  1. Open Storybook and navigate to the Chip component.
  2. Configure the chip to its read-only state (via the readonly prop, either directly in the Storybook Controls panel or through a story that has readonly preset).
  3. Move the mouse cursor over the chip.
  4. Observe the visual state of the chip while hovering.

Actual behavior: When hovering an ifx-chip in its read-only state, the chip renders a hover state (visual style change on mouseover). Since a read-only chip is not interactive, showing a hover state falsely signals affordance and misleads the user into believing the chip can be selected or clicked.

Expected behavior: A read-only chip does not react to hover. Its visual appearance remains identical to its resting read-only styling — no background change, no border change, no cursor change — regardless of mouse position.

Upload a screenshot

Image

Describe the development framework

Infineon Design System (DDS) component library — Stencil-based Web Components authored in TypeScript, with styles written in SCSS. Documented and previewed in Storybook (MDX). Issue affects the ifx-chip component's SCSS state handling for the read-only state.

Expected behavior

  • ifx-chip in read-only state does not trigger the hover style on mouseover — background, border, and any other hover-affected properties stay at their read-only resting values.
  • Cursor over a read-only chip is the default cursor, not the pointer/interactive cursor.
  • The read-only state remains visually inert across all pointer interactions — hover included; focus and active states should follow the same "no visual change" rule to keep the affordance consistent.
  • Behavior applies to all chip variants (outlined, filled-light, filled-dark) and all sizes (small, medium, large).
  • The interactive (non-read-only) chip's hover state is not touched — only the read-only path is fixed.
  • No API changes on the component. readonly remains the same boolean prop.

Additional information

  • Rationale: Read-only communicates "display only, not interactive." Any state change on hover contradicts that semantic and confuses users about whether the chip can be acted on.
  • Assumption to confirm: the input mentions the hover state specifically. Focus and active/pressed states should almost certainly follow the same "no visual state change" rule for read-only, but the ticket should have this explicitly confirmed before implementation — otherwise the same class of bug remains for keyboard users tabbing onto a read-only chip.
  • Assumption to confirm: the input did not name a specific chip variant or size, and the fix likely lives in the shared read-only SCSS path. Please confirm the fix should cover all variants (outlined / filled-light / filled-dark) and all sizes (small / medium / large).

Metadata

Metadata

Labels

bugSomething isn't workingminorminor version bumprequestUser request

Type

No type

Projects

Status
Pending Review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions