This task covers implementing a CSS-only version of most of the existing Codex Vue components.
NOTE: The high and medium priority components have been completed, and the low priority components will not be implemented as part of this task. If you find this task and want to request a CSS-only version of a component, please contact the Design Systems Team or open a task on the Codex workboard.
Documentation
We need to document these components in 2 places:
- On the demo page for that component on the Codex docs site. For the MVP version, this will be added to the existing component demo markdown file in a subsection called ## CSS-only version, which will appear below the Vue demos/usage tables. See demo here.
- In the sandbox, maybe on a separate page from the Vue components?
Implementation notes
Some Vue components will be very similar to their CSS-only counterpart, while some will be very different, in order to provide some level of functionality in a no-JS situation. Below are implementation notes for each component, including relative effort, similarity in markup/contents, and implementation details.
| Component | Status | Priority | Effort | Template similarity | Notes |
|---|---|---|---|---|---|
| Button | Done | high | low | 1:1 | Lost in the no-JS version are an accessibility check, the ability to automatically identify an icon-only button, and consistent cross-browser active styles |
| ButtonGroup | Not started | low | low | 1:1 | Users will have to write the markup for all the buttons, rather than passing in button data. |
| Card | Done | high | low | 1:1 | Users will have to manually use the correct root element (span vs link). |
| Checkbox | Done | high | medium | 1:1 | Need to refactor Vue template markup to make the label a sibling of the input, rather than wrapping it. Should be done at the same time as Radio since they share a binary-input mixin. |
| Combobox | Not started | low | ? | ? | There are a couple of ways we could create either a fully working or temporarily less functional CSS-only combobox, need to further evaluate |
| Declined | low | high | Would need to use native <dialog> | Effort to create a working, accessible CSS-only dialog may be too high to justify the lack of expectation of a no-JS dialog | |
| Icon | Done | high | high | 1:1 | Would require scripting on the back end to do what the Vue component does to insert the SVG into the template |
| Lookup | Done | medium | low | Use TextInput instead | In a no-JS environment, we can fall back on a simple TextInput |
| Menu | Not started | low | low | 1:1 | Styles are easily sharable with the same template, but will people use the Menu component in a no-JS context, given we currently only cover the case of a dropdown menu? |
| MenuItem | Not started | low | low | 1:1 | Same as Menu; easy to do, but is it needed? Similar to Card, users would need to specify <span> or <a> element |
| Message | Done | high | low | Same, but without some features | Interactive features will not be included |
| ProgressBar | Done | medium | low | 1:1 | Will only include the indeterminate variant. |
| Radio | Done | high | medium | 1:1 | Like Checkbox, need to refactor Vue template markup to make the label a sibling of the input, rather than wrapping it. |
| SearchInput | Done | low | low | 1:1 | |
| SearchResultTitle | Not started | low | low | 1:1 | The main point of this component is to process a search result label and split it into chunks in order to highlight the search query via bolded text. These styles can be shared, but creating the markup will be on the user. |
| Select | Done | medium | medium | Completely different, will use <select> | Only the select handle will be styled since the native menu can't be. Sharing styles is a bit messy and will rely on mixins. |
| Tab/Tabs | Done | medium | high | ? | Will need to get creative to make this work with no-JS (for MediaSearch, we used anchor links to select the proper tab) |
| TextInput | Done | high | low | 1:1 | |
| Thumbnail | Done | medium | medium | Similar, but maybe without placeholder icon during load | Would be nice to lazy load the image and show the placeholder in the meantime if possible |
| ToggleButton | Not started | low | medium | Would need to add a checkbox | A working no-JS ToggleButton would require a hidden checkbox input. We could implement this only for CSS-only, or for the Vue version as well. |
| ToggleButtonGroup | Not started | low | medium | Same, but might need to think about checkbox group semantics | |
| ToggleSwitch | Done | medium | medium | 1:1 | Vue version already uses a hidden checkbox, but we might want to refactor the markup to make the label element a sibling of the input rather than wrapping it, depending on what's best for UX |
| TypeaheadSearch | Done | high | medium | Use SearchInput instead | Fall back on a simple SearchInput |
Acceptance criteria
A CSS-only component has been added and documented for the following components (low priority components were not completed as part of this task):
- Button
- Card
- Checkbox
- Icon
- Lookup
- Message
- ProgressBar
- Radio
- SearchInput
- Select
- Tabs/Tab
- TextInput
- Thumbnail
- ToggleSwitch
- TypeaheadSearch
