feat(tag): New Tag component

[lily-peng]

Closes #219

A tag component that is used to represent a data table.

Examples:

Features:

• Customize inner text
• Customize left border color
• Displays Carbon Tooltip on hover
• Customize tooltip position & text
• Fires click event

Changelog

New

• {{new thing}}

Changed

• {{change thing}}

Removed

• {{removed thing}}

Testing / Reviewing

{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}

[netlify]

✅ Deploy Preview for carbon-labs ready!

Name	Link
🔨 Latest commit	8868b25
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-labs/deploys/666b1edf4fd5e20008f5698f
😎 Deploy Preview	https://deploy-preview-179--carbon-labs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[annawen1]

if you're passing in a string to the attribute, you can pass it in normally

color=${color}
tooltip-position=${tooltipPosition}
tooltip-text=${tooltipText}

the . is only used when you are passing in an object to the attribute of a lit component

[mjabbink]

— The colors need to be limited to be accessible.
— It needs light and dark theming. We would not want to encourage ALL CAPITAL LETTERING unless this is user-generated content, and we have no control or influence over that content.
— Size (height) and spacing specs. Font size and weight, etc.
— What do the colors mean?
— Would there be any other actions? Can you delete them?

[lily-peng]

The colors need to be limited to be accessible. What do the colors mean?

Hi @mjabbink, we kept the left side color open for the user to input whatever they want for flexibility. The current use case for the Watsonx Proof of Technology is for the Tag to represent a data table, with summary information in the tooltip on hover & when clicked. The left side color would be a way to differentiate different types of tables. I'm not sure about what the different types could be though, @daniel-karl would be better to answer these questions.

ALL CAPITAL LETTERING

The text are database table names, so I believe it's out of our control.

Would there be any other actions? Can you delete them?

No deleting as far as I know, and only actions are hover and click.

[mjabbink]

@lily-peng The colors alone are not accessible. e.g. a color blind person might see the difference between the colors, so they wold need another way to distinguish between the “types” of tags. If the name of the tag does that then ok, but if the name does not make it clear, not will the color help. The user wold also need to know what the color meant and if changing this cold also pose a problem.