feat(components): Add onClick to Chip Suffix

[taylorvnoj]

Motivations

Chip.Suffix should have an onClick so that a custom event can be triggered, separate from clicking the Chip itself

Changes

Added

1. onClick optional prop to Chip.Suffix If <Chip.Suffix /> receives an onClick, the element becomes a button. If no onClick is provided, the suffix remains a span element. I decided on this solution to maintain a semantically correct element whether there's an onClick or not.

2. testID optional prop to Chip.Suffix I think it's safe to assume that if any consumer of Chip wants to add a clickable suffix, they'll also want to test that interaction.

3. ariaLabel optional prop to Chip.Suffix To provide as much flexibility as possible, we're passing an ariaLabel for clarity to screen readers. For example:

   

4. a new web story for ClickableSuffix, while keeping a Suffix story without the onClick

5. more tests for Chip.Suffix:

   • renders suffix as button when onClick is passed
   • renders suffix as span when onClick is not passed
   • should call onClick when suffix is clicked and onClick is passed

Testing

Draft PR here to test onClick within Chip.Suffix

Use the Clickable Suffix and Suffix stories to test:

• [ ] an onClick can be passed to the Chip.Suffix
• [ ] onClick behaviour on the suffix does not affect onClick behaviour of the parent Chip
• [ ] when the suffix is clickable it is announced via screenreader, has the correct role & can receive focus

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages[bot]]

Deploying atlantis with    Cloudflare Pages

Latest commit:	85c21f7
Status:	✅  Deploy successful!
Preview URL:	https://adfc85cd.atlantis.pages.dev
Branch Preview URL:	https://taylor-chip.atlantis.pages.dev

View logs

[github-actions[bot]]

Could not publish Pre-release for 9ab340194198399a34a0ef06bfb83feaa6582da8. View Logs The problem is likely in the NPM Publish or NPM CI step in the Trigger Pre-release Build Job.

Previous build information:

Published Pre-release for 9ab340194198399a34a0ef06bfb83feaa6582da8 with versions:

  - @jobber/components@5.20.8-TAYLORchi.17+9ab34019

To install the new version(s) for Web run:

npm install @jobber/components@5.20.8-TAYLORchi.17+9ab34019
```.

[taylorvnoj]

@chris-at-jobber we definitely need to get Storybook to show us that - I remember that happened with Combobox 😭

Here are the updates in product. No more blue focus state and using --color-surface--hover on hover