Vonage / vivid-3

Vonage's web UI 🎨 toolbelt
https://vivid.deno.dev
Apache License 2.0
54 stars 11 forks source link

[chips]: research and possibly recreation #958

Closed AyalaBu closed 1 year ago

AyalaBu commented 1 year ago

Chips/Tags component is not present in Vivid Next. In order to create a comfortable Multiple select component such as:

https://atlassian.design/components/select/examples#multi-select

or:

https://atlassian.design/components/select/examples#checkbox-select

chips component needs to be used.

In order to make it so several steps must be taken initially:

  1. Accessibility check up
  2. Other design systems check up
  3. Design
github-actions[bot] commented 1 year ago

This issue is stale because it has been open for 30 days with no activity.

github-actions[bot] commented 1 year ago

This issue was closed because it has been inactive for 14 days since being marked as stale.

AyalaBu commented 1 year ago

@rinaok I found this article about how to make tags/chips accessible https://a11y-guidelines.orange.com/en/articles/tags/

I will start going over design

rachelbt commented 1 year ago

@AyalaBu :

I will start going over design

see the design we have in vivid-2: https://vivid.vonage.com/?path=/story/alpha-components-tag--removable&args=text:Removable;Removable:true

AyalaBu commented 1 year ago

The design we had in Vivid 2 had gone through a few adjustments after some requests from the designers. This is the Figma link to the new design:

https://www.figma.com/file/JJNgZvt1qf3ydYmOwbE3Jg/Vivid-UI-Kit---3.0-WIP?node-id=21462%3A145817&t=nsyDDb8FAymNUryK-1