search

GovAlta / ui-components

ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
Apache License 2.0
16 stars 25 forks source link

Chip: component updates #1943

Closed Spark450 closed 1 week ago

Spark450 commented 5 months ago

Acceptance Criteria:

jim-muirhead commented 3 months ago

@Spark450 Mark - Here are a couple of additional enhancements to consider for the Chip component:

  1. A "hook" for an action related to a specific Chip that would be triggered by clicking/tapping the chip anywhere but on the chip's Delete button and/or selecting the Enter/Return key when in Focused state.
  2. A "Hover" state to serve as an affordance for #1 - could be a 2px border in with the Interactive Blue color.
  3. The option to display a tooltip with the "hover" state.

Happy to discuss these in more detail (including mobile version) when your team gets closer to working on this ticket.

Spark450 commented 3 months ago

Hey @jim-muirhead I did some investigations to followup on our conversation earlier this week:

  1. As part of this story we would allow the chip to be both selectable and removable.
  2. The current chip does have a hover state where the background and close icon change color
  3. Our technical team did a quick POC and you can currently have the tooltip fire on hover of the chip.

Image

jim-muirhead commented 3 months ago

Thanks, Mark.

In the Figma component, the hover state seems to only consist of changing the outlined icon to a filled icon in the same color. Of course, this would seem to indicate to a user that selecting anywhere on the chip would then delete it.

In the future, we would want a separate hover state for the Delete icon and another state for the chip itself that should only trigger if a tooltip is available AND/OR an action is available.

Make sense?

Jim Muirhead Front-end Designer Digital Design & Delivery (DDD) Technology and Innovation @.*** 403.830.1207

[cid:631114e2-57de-4db3-a2bc-751ab9f2e270]

Classification: Protected A

From: Mark E @.> Sent: Wednesday, July 24, 2024 9:29 AM To: GovAlta/ui-components @.> Cc: Jim Muirhead @.>; Mention @.> Subject: Re: [GovAlta/ui-components] Chip: component updates (Issue #1943)

CAUTION: This email has been sent from an external source. Treat hyperlinks and attachments in this email with care.

Hey @jim-muirheadhttps://github.com/jim-muirhead I did some investigations to followup on our conversation earlier this week:

  1. As part of this story we would allow the chip to be both selectable and removable.
  2. The current chip does have a hover state where the background and close icon change color
  3. Our technical team did a quick POC and you can currently have the tooltip fire on hover of the chip.

Screen.Shot.2024-07-23.at.3.29.29.PM.png (view on web)https://github.com/user-attachments/assets/e9a67be0-463f-4fc6-bde3-2b2a060a9fd1

— Reply to this email directly, view it on GitHubhttps://github.com/GovAlta/ui-components/issues/1943#issuecomment-2248308817, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AZSBERKOPLXEYJTCNAM4OBDZN7B6XAVCNFSM6AAAAABJJBVQVGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENBYGMYDQOBRG4. You are receiving this because you were mentioned.Message ID: @.***>

Spark450 commented 3 months ago

Hi @jim-muirhead After further discussion during our backlog grooming session this week, we've decided not to extend our design system's chip component to support two events (close and an additional action). While adding more events would make the chip more versatile, it would also complicate its use for teams that only need the basic "close" functionality currently offered.

Therefore, we will continue to offer just one event on the chip component: "close." This means that if the user clicks anywhere on the chip, it will trigger the close action.

tzuge commented 1 week ago

:tada: This issue has been resolved in version 1.17.0-alpha.120 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 week ago

:tada: This issue has been resolved in version 5.0.0-alpha.12 :tada:

The release is available on:

Your semantic-release bot :package::rocket: