Nomenclature enhancement for Live demo - Variant selector

[alina-jacob]

Summary

The dropdown for Variant selector under Live demos becomes a long complicated list for components that have too many variants + styles (fluid / AI)

This issue is mainly observed for Form input components like dropdown and other variant heavy components like data table. (Attaching a video scroll for the dropdown component)

https://github.com/carbon-design-system/carbon-website/assets/159760598/89909988-8ea4-4901-966b-045ba3c80103

Relevant information

Good instances: Where variants of components are arranged in an alphabetical or almost alphabetical order

• Button
• Contained list

--

Poor instances: Where variants of components are showing up in a very chaotic order

• Datatable
• Dropdown
• Modal
• Tabs
• Text area
• Tile

--

Neither good, nor poor: Where variants are few but are not arranged alphabetically

• Date picker
• List
• Menu button
• Slider
• UI shell header
• UI shell left panel
• UI shell right panel

Next steps

We could decide on a single solution of representing variants either alphabetically or based on Fluid and AI cases and based on that implement the changes in website.