feat: Adding start adornment to Chips #1058
Conversation
JonnCharpentier
commented
Aug 6, 2024
JonnCharpentier
commented
JonnCharpentier
requested review from
stephenh,
bdow,
ksk5280 and
chr1sjf0x
as code owners
JonnCharpentier
force-pushed
the
sc-53838/adding-start-adorment
branch
from
c97f852 to
de4a8b0
Compare
src/components/Chip.stories.tsx
Outdated
| export function WithStartAdorment() { | ||
| return ( | ||
| <div css={Css.wPx(200).$}> | ||
| <Chip startAdornment={<span css={Css.smBd.$}>K</span>} text="Kitchen" /> |
There was a problem hiding this comment.
@JonnCharpentier this is fine, but I was thinking maybe we could just change text: string to text: ReactNode, similar to how title: ReactNode.
That way we could do like text=...snippet of html...
Can we change to that instead? It seems lighter weight / more flexible than a new prop.
There was a problem hiding this comment.
For the Chip that could work, but for the ToggleChipGroup we need the options.label to be a string so we can use it for aria-label.
| @@ -109,7 +112,10 @@ function ToggleChip(props: ToggleChipProps) { | |||
| <VisuallyHidden> | |||
| <input {...inputProps} {...focusProps} /> | |||
| </VisuallyHidden> | |||
| {label} | |||
| <div css={Css.df.gap1.$}> | |||
| {startAdornment} | |||
There was a problem hiding this comment.
@JonnCharpentier same push, I think label: ReactNode is a simpler/more extensible change to ToggleChip than a new startAdornment that isn't that complicated / value-adding...
(I.e. we do have things like TextField.startAdornment, but it's more intricate/complicated to place the adornment in "the right spot" of the input field, so it makes more sense for startAdornment to be a pattern there, vs. here where we could just as well send in some raw HTML.)
There was a problem hiding this comment.
@stephenh we need options.label to be a string, because we use it for aria-label.
There was a problem hiding this comment.
Ah I see 🤔 ... that makes sense
## [2.362.0](v2.361.0...v2.362.0) (2024-08-06) ### Features * Adding start adornment to Chips ([#1058](#1058)) ([54fa8f6](54fa8f6))
|
🎉 This PR is included in version 2.362.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
