mi6
Separate component guidance into groups
NOTE: Put the groups in alphabetical order on the site
What component is this related to?
All
Description
Organise each component on the components tab into collapsible groups related to their function.
Use overview pages as needed to provide guidance for using that type of component, guidance for choosing between them or linking to relevant patterns/styles
Groups
Inputs
- Checkbox
- Radio
- Date/time/date-time input
- Date/time/date-time picker
- Search bar
- Select
- Switch
- Text field
- Toggle button
- Button
Navigation
- Back to top
- Breadcrumb
- Hero
- Link
- Page header
- Pagination (bar)
- Side navigation
- Skip link
- Tabs
- Top navigation
- Tree view
- Table of contents
- Popover menu
Theme and customisation
- Theme Note: new content for this group will be created in #1663
Layout
- Horizontal card
- Vertical card
- Accordion
- Divider
- Footer
- Section container
- Grid (link to fluid/fixed column grid guidance and breakpoint/spacing tokens)
Feedback and progress
- Alert
- badge
- Chip
- Dialog
- Empty state
- Loading indicator
- Skeleton
- Status tag
- Stepper
- Toast
- Tooltip
Overview: Link to voice and tone guidance and relevant patterns (e.g. form validation, success messages). Link to components with loading states (e.g. button) and explain when to use this vs skeleton or loading indicator.
Data display
- Data list
- Data table
- AG grid theme (use guidance from Getting started)
Note, AG grid theme guidance is updated in #1669
Utility
- Classification banner
- Typography
Why do we need it?
Placing similar components together makes it easier for users to compare similar components and pick the most appropriate one for their use-case.
🚨 Urgency (low, medium or high)
Priority 4/5
If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.
Related open issues
#1669 #1663
Consider adding a chip to cards on the Components Library page listing the category of each component - allow filtering by category? Maybe split into separate ticket?
This will require changes to the navPriority.sh script that we created recently, to account for the groups.
Which component is in which group isn't set in stone, happy for devs to discuss internally
