Remove default remove string for Removeable pill
#2968
Labels
Comments
10 tasks
alanbsmith
pushed a commit
that referenced
this issue
Mar 17, 2025
#3104) Fixes: #2394, #2968, #2049 [category:Components] Release Note: We've updated ExternalHyperlink to use our new styling utilities and tokens. - The border color on hover has been updated from `licorice400` to `licorice500` to match our design specs. - We've removed extra elements and leverage [flex box}(https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) to ensure only the label receives overflow styles. When `maxWidth` is set, it is set on the parent `<Pill/>` element and the child elements will be styled accordingly. Before v13, `maxWidth` wasn't calculating the width of all its elements and wasn't a true pixel value. ### BREAKING CHANGES - `maxWidth` has been removed from the `usePillModel`. This config was used to style sub components. With the refactor to use `data-part` and [stencils](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--docs#create-stencil), it is no longer needed on the model. You can still apply `maxWidth` on the parent `<Pill>` element and the child elements will be styled accordingly. - `Pill.Icon` no longer has a default `aria-labe="add"`. You *must* provide an `aria-label` for `Pill.Icon` to ensure proper accessibility. Our examples have been updated to reflect this change. - `Pill.IconButton` no longer has a default `aria-label="remove"`. You *must* provide an `aria-label` for `Pill.IconButton` to ensure proper accessibility. Our examples have been updated to reflect this change. - `Pill.Label` is a required element when using other sub components like `Pill.Icon` to ensure that the label truncates correctly. Co-authored-by: manuel.carrera <manuel.carrera@workday.com> Co-authored-by: @josh-bagwell <44883293+josh-bagwell@users.noreply.github.com> Co-authored-by: @NicholasBoll <nicholas.boll@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
🐛 Bug Report
We should remove
ariaLabel="remove"from the removeable pill and addaria-label="Remove"to our examples where we usePill.IconButtonin our example so that it's obvious that users should provide an aria label. We should never use english words built in to the components.https://github.com/Workday/canvas-kit/blob/master/modules/preview-react/pill/lib/PillIconButton.tsx#L75
The text was updated successfully, but these errors were encountered: