feat(Tabs): allow dismissable tabs to have descriptive icons

[francinelucca]

Closes #12845

Changelog

New

-Dismissable tabs with icons story + VRT

• Test cases for dismissable tabs with icons
• CSS for new $prefix}--tabs__nav-item--icon-left class

Changed

• Render tab icon to the left when tab is dismissable

Testing / Reviewing

Check that deployment story matches spec
*Added a temporary "contained" toggle to switch between line/contained tabs for review purposes

TODO:

• remove contained control in dismissable with icons story

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	ea2f4cb
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/646697bb333c500008fa7b46
😎 Deploy Preview	https://deploy-preview-13830--carbon-components-react.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 settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	ea2f4cb
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/646697bb13b5000007b75f5d
😎 Deploy Preview	https://deploy-preview-13830--carbon-elements.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 settings.

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	5e2f535
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6479016f28030f00086c3238
😎 Deploy Preview	https://deploy-preview-13830--carbon-components-react.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 settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	5e2f535
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6479016f21651a00089eedec
😎 Deploy Preview	https://deploy-preview-13830--carbon-elements.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 settings.

[kingtraceyj]

Looks good to go! 💥

[laurenmrice]

Looks good to me. Unrelated, but I noticed that on the disabled state for dismissable tabs, the close icon still gets a pointer mouse cursor. It should be the disabled mouse cursor. I can open a separate issue for this if you want.

[francinelucca]

Looks good to me. Unrelated, but I noticed that on the disabled state for dismissable tabs, the close icon still gets a pointer mouse cursor. It should be the disabled mouse cursor. I can open a separate issue for this if you want.

@laurenmrice I made the cursos a pointer since the close button is actually clickable because disabled tabs are dismissable (Ref: #13529 (comment))

I can definitely change the cursor to a disabled mouse if that's the intended behavior though 🤔

[guidari]

I tested locally and LGTM!

[tw15egan]

LGTM 👍 ✅

[laurenmrice]

@francinelucca Yes, it is the intended behavior that if a dismissable tab is disabled, you can not actively close that tab by using the close icon, so the mouse indicator should be the disabled one. I would say if someone has a different use case for this they could change it on their end.

[francinelucca]

@francinelucca Yes, it is the intended behavior that if a dismissable tab is disabled, you can not actively close that tab by using the close icon, so the mouse indicator should be the disabled one. I would say if someone has a different use case for this they could change it on their end.

#13897