mi6
Dark mode: look into different appearances for components
Summary
Currently some components have default, light and dark appearances, and a couple are missing either light or dark. We should investigate and design the missing appearances where necessary.
If you haven't done a component before, reach out to @GCHQ-Developer-530 , @ad9242 , @gd2910 or @GCHQ-Developer-741 who can walk you through the process to help you get started.
💬 Description
Components that need looking into are:
- [ ] - Accordion
- [ ] - Alert
- [ ] #2384 @gd2910 - should inherit from ic-button
- [x] - Badge - @GCHQ-Developer-530
- [x] - Breadcrumb - @GCHQ-Developer-530
- [ ] - Button
- [ ] - Card - @GCHQ-Developer-741 In PR
- [ ] - Checkbox
- [x] - Chip @gd2910 @ad9242
- [ ] - Classification banner
- [x] - Data entity - @GCHQ-Developer-530
- [ ] - Data table
- [ ] - Date input
- [ ] - Date picker
- [ ] - Dialog
- [x] #2527 @gd2910 - theme tokens added to old ic-divider, ready to be cherry-picked into new ic-divider
- [x] - Empty state - @GCHQ-Developer-530
- [ ] - Footer
- [ ] - Hero
- [ ] - Horizontal scroll (This is reliant on button, and impacts the work in page header, tabs and top nav, for now do a work around for appearance on horizontal scroll)
- [x] - Link - @GCHQ-Developer-530
- [ ] - Loading indicator - @GCHQ-Developer-741 In PR
- [ ] - Multi-select
- [ ] - Page header
- [ ] - Pagination
- [ ] - Popover menu - @gd2910
- [ ] - Radio button
- [ ] - Search bar - ready for dev
- [ ] - Section container
- [ ] - Select
- [ ] - Side navigation - ready for dev
- [ ] - Skeleton - In PR @GCHQ-Developer-741
- [x] - Status tag - @GCHQ-Developer-530
- [ ] - Stepper - @GCHQ-Developer-530 In PR
- [ ] - Switch
- [x] - Tabs - @GCHQ-Developer-530
- [ ] - Text field
- [ ] - Toast
- [ ] - Toggle button
- [x] - Tooltip - @ad9242
- [ ] - Top navigation
- [ ] - Treeview
- [x] - Typography - partially done -need to validate colours are correct\not changing as part of component review process
This ticket involves working on these parts:
- [x] 1. First, implement the "data-mode"/theme component so dark mode can be set once in a central place - done
- [ ] 2. Implement the pattern of the "Theme" prop and changing to dark mode at a component level (following the list of components above) and add appropriate tests
- [x] 3. Implementing the "Theme" prop and ability for it to recognise dark mode at the global level on each component and the testing that goes with it (mentioned in internal notes) - theme prop is now implemented on ic-theme component
Make sure to reference internal dark modes on implementation
💰 User value
Users will have the same appearances they can apply to all components rather than some having missing options.
Can initially number 1 in it's full, but also make a start with a pattern for point 2
This ticket is reliant on https://github.com/mi6/ic-ui-kit/issues/2289. Before picking up a component, please check that it's been marked as ready to dev.
