paragon
paragon copied to clipboard
`Chip` implementation updates
The Chip was previously updated to reflect the chip-like UI within the spec'd Multiselect component (WIP). However, this decision had the unfortunate consequence of changing the Chip to something we didn't actually want it to be for majority of existing use cases.
Now, design has some capacity to go back to the drawing board for Chip to ensure its design spec reflects the intent we have for the Chip component moving forward. The Chip used in the Multiselect component's spec remains unchanged, but the intent is that Multiselect will adopt the pattern spec'd for Chip as is in the future.
The spec updates for Chip lives here: https://github.com/openedx/paragon/issues/2645
Dismissable Chip in this work remains largely deferred from a design perspective, but we will still need to support it for existing use cases by some product teams. The Chip component accepts onIconBeforeClick and onIconAfterClick props to allow consumers to interact with clicks on the icon.
Based on the WIP dismissable Chip specs in the above Figma spec, I would recommend updating to conditionally use an IconButton for the icon passed to iconAfter and/or iconBefore when the associated onIconBeforeClick and/or onIconAfterClick is passed.
### Tasks
- [ ] Implement `Chip` based on the Figma spec linked above.
- [ ] There should be some way for consumers to persist a `Chip` as "selected".
- [ ] Consider making the icons rendered within `IconButton` when `onIconBeforeClick` and/or `onIconAfterClick` are passed.
- [ ] On docs site today, it looks like `onIconBeforeClick` may not be doing anything. Verify its behavior is working as intended.