## Background
### Purpose
> As a potential user of Codex, I want access to a robust set of consistent, accessible, usable components to help me build a better UI
> As a potential user of Codex, I want to know which components I can expect to have access to if I decide to use Codex
> As a user of Codex, I want access to commonly used components so I don't have to build them myself or delay a project while I wait for a component to be built
> As a user of Codex, I want to understand the status of commonly used components so that I know how it will impact my work
The Design Systems Team would like to provide a list of core components to inform potential and current users of Codex about which components we plan to build and the status of those components.
**A core component is a commonly used component that we almost certainly intend to add to Codex at some point.** Some core components have already been designed and built, some are high priority, and some are lower priority, but they are all components that we will most likely add to Codex at some point. These components may be designed and built by the Design Systems Team or by other contributors to Codex.
Note that we have also identified a number of non-core components: these are components that have been identified as potential Codex components, but have not yet been prioritized for various reasons. Some of these components have only been used in one place and do not yet need to be sharable, some of them require a lot of design conversations before they can be scoped, and some of them are just ideas that don't have a solid use case yet.
### Goals
We aim to propose a list of core components based on our own research and discussions, then share this list with other front-end contributors for review and feedback. At the end of this feedback period, we will document the list of core components. This list does not need to be absolutely final: it could be altered in the future if we decide a component no longer qualifies as a core component, or if we identify a new core component that we want to add to the list.
#### Acceptance criteria
- [x] Design System Team to propose a list of core components, documented in this task
- [x] DST to share this list with other front-end contributors to collect feedback
- [x] DST to incorporate that feedback and update the list
- [] DST to post the list somewhere public and non-ephemeral (i.e. not a Phab task)
---
## Proposed core components
**Important notes:**
- Components are organized by group to logically group similar components together. Not all components are part of a group; some are standalone.
- Component names are not necessarily final (e.g. "chip" vs. "tag"), but these are the working names that we're using
- Relevant links are meant to offer more information about what each component is. That's a Codex demo page, a Design Style Guide page, or a Phab task, depending on what's available.
### Buttons
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | --- |
| **Button** | Themed `<button>` element | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/button.html | Demo ]] |
| **ButtonGroup** | Set of actions made up of two or more buttons | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/button-group.html | Demo ]] |
| **ToggleButton** | Button that can be toggled on and off | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/toggle-button.html | Demo ]] |
| **ToggleButtonGroup** | Group of toggle buttons that allows making a selection | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/toggle-button-group.html | Demo ]] |
### Chips
| Component | Description | Status in Codex | Relevant linkAccordion** | Expandable and collapsible layout | Not started | T280785 |
| --- | --- | --- | --- || **Badge** | Small indicator of status or count | Not started | T280708 |
| **FilterChip** | Interactive chip that can be selected, removed, or generated from an input | Not started | T280681Button** | Control that specifies the action that will occur when a user clicks on it | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/button.html | Demo ]] |
| **InfoChip** | Non-interactive chip that provides information | Not started | |
### Inputs & controls
| Component | Description | Status in Codex | Relevant linkButtonGroup** | Set of actions made up of two or more buttons | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/button-group.html | Demo ]] |
| --- | --- | --- | ---**Card** | Layout for grouping information and actions related to a single topic | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/card.html | Demo ]] |
| **Checkbox** | Binary input that can be standalone or in a multiselect group | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/checkbox.html | Demo ]] |
| **Combobox** | Text input with an adjoining button andAutocomplete text input with an expandable menu of predefined items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/combobox.html | Demo ]] |
| **FileInput** | Input for selecting a file | Not started | [[ https://design.wikimedia.org/style-guide/components/file-inputs.html | DSG ]]Dialog** | Modal element that presents relevant information or actions | {icon spinner color=orange} In progress | T284838 |
| **Lookup** | Text input with a dropdown menu of items, which are based on the current input value | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/lookup.html | Demo ]]Divider** | Visual division of sections within a page or between components | {icon spinner color=orange} In progress | T300659 |
| **NumberInput** | Input for entering a number | Not started | [[ https://design.wikimedia.org/style-guide/components/number-inputs.html | DSG ]]Field** | Form field with a label, an input or control, and validation handling | Not started | T309239 |
| **Radio** | Binary input part of a single-FileInput** | Input for select group | {icon check-square color=green} Doneing and submitting a file | Not started | [[ https://docesign.wikimedia.org/codex/mainstyle-guide/components/radiofile-inputs.html | DemoSG ]] |
| **Select** | Input with a dropdown menu of items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/select.html | Demo ]]FilterChip** | Interactive chip that can be selected, removed, or generated from an input | Not started | T280681 |
| **Textarea** | Multi-line text input | Not started | T284272Icon** | Small graphical representation of an idea | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/icon.html | Demo ]] |
| **TextInput** | Single-line text input | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/text-input.html | Demo ]]Image** | Image display with sizing and fallback support options | Not started | T314514 |
| **ToggleSwitch** | Sliding on/off switch | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/toggle-switch.html | Demo ]] |
### Menu
| Component | Description | Status in Codex | Relevant linkInfoChip** | Non-interactive chip that provides information | Not started | |
| --- | --- | --- | --- || **Label** | Describes the information requested by a given form field | Not started | T309246 |
| **Menu** | Dropdown menu of items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/menu.html | Demo ]]Link** | Textual element used to navigate between sections or pages | {icon spinner color=orange} In progress | T309248 |
| **MenuItemLookup** | ItemPredictive text input within a a dropdown menu of items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/menu-itemlookup.html | Demo ]] |
### Messages
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | ---**Menu** | Contextual list of selectable options, often triggered by a control or an input | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/menu.html | Demo ]] |
| **MessagenuItem** | User-facing messageA selectable option included with iconin a Menu | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/messagenu-item.html | Demo ]] |
| **ValidationMessage** | Feedback on form input validity | Not started |Message** | System feedback in response to or to inform a user action | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/message.html | Demo ]] |
| **ToastNotification** | Temporary pop-in message | Not started | T303612 |
### Progress
| Component | Description | Status in Codex | Relevant linkNumberInput** | Input for entering a number | Not started | [[ https://design.wikimedia.org/style-guide/components/number-inputs.html | DSG ]] |
| --- | --- | --- | --- |
| **ProgressIndicator** | Animated signal that a process is occurring | Not started | T266028**Popup/Popover** | Small, contextual overlay that displays additional information or actions when hovering over, focusing or tapping on an element. | Not started | |
| **ProgressBar** | Linear indicator of progress | {icon hourglass-half color=orange} Partially done | [[ https://doc.wikimedia.org/codex/main/components/progress-bar.html | Demo ]] |
### Search
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | --- || **ProgressIndicator** | Animated signal that a process is occurring | Not started | T266028 |
| **SearchInput** | IRadio** | Binary input for text search with optional buttonpart of a single-select group | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/search-inputradio.html | Demo ]] |
| **TypeaheadSearchSearchInput** | SearchInput form with stylized autocomplete suggestions text search with optional button | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/typeahead-search.html | Demo ]] |
### Tabs
| Component | Description | Status in Codex | Relevant linksearch-input.html | Demo ]]
| **Select** | Input with a dropdown menu of predefined selectable items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/select.html | Demo ]] |
| --- | --- | --- | --- || **Skeleton** | Placeholder layout for content that hasn’t loaded yet | Not started | T311874 |
| **Tabs** | Layout for navigating sections of content | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/tabs.html | Demo ]]le** | Structure categorical information in rows and columns in order to facilitate the comparative analysis of data | Not started | T303320 |
| **Tabs** | Section of content within a Tabs layoutLayout for navigating between sections of content | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/tabs.html | Demo ]] |
### Other core components
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | ---**Tab** | Represents a section of content within a Tabs layout | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/tab.html | Demo ]] |
| **AccordionTextarea** | Expandable and collapsible layoutMulti-line text input that allows manual resizing | Not started | T280785 |T284272 |
| **Badge** | Small indicator of status or count | Not started | T280708TextInput** | Form element that let users input and edit single-line values in the form of text | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/text-input.html | Demo ]] |
| **Card** | Layout for grouping information and actions related to a single topicThumbnail** | Small preview of an image | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/cardthumbnail.html | Demo ]] |
| **Dialog** | Overlay of informToastNotification that needs attention | {icon spinner color=orange} In progress** | Temporary pop-in feedback message | Not started | T284838 |303612 |
| **Field** | Form field with a label, an input or control, and validation handling | Not started | T309239ToggleButton** | Button that can be toggled on and off | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/toggle-button.html | Demo ]] |
| **IconToggleButtonGroup** | Small graphical representation of an ideaGroup of toggle buttons for making a selection | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/icontoggle-button-group.html | Demo ]] |
| **Image** | Image with size and loading features | Not started | T314514ToggleSwitch** | Sliding boolean input, generally used to enable/disable options | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/toggle-switch.html | Demo ]] |
| **Popup/Popover** | Small overlayTooltip** | Floating label with a short description of relevant informationa user interface element | Not started | |T280677, T312899 |
| **ThumbnailypeaheadSearch** | Small preview imageearch input that provides a menu with autocomplete suggestions | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/thumbnailypeahead-search.html | Demo ]] |
| **Tooltip** | Stylized browser `<title>` element | Not started | T280677, T312899 |
### Core patterns
Note that these might be design tokens or mixins rather than full components.ValidationMessage** | Feedback on form input validity | Not started | |
| Pattern | Description | Status in Codex | Relevant link |
| --- | --- | --- | --- |
| **Divider** | Visual division of sections | {icon spinner color=orange} In progress | T300659 |
| **Label** | Semantic form field label | Not started | T309246 |
| **Link** | Anchor element | {icon spinner color=orange} In progress | T309248 |
| **Skeleton** | Placeholder UI used as a loading indicator | Not started | T311874 |
| **Table** | Stylized tabular data | Not started | T303320 |
### Identified non-core components and patterns
These are the components and patterns we've discussed but decided not to include as "core":
Avatar, Breadcrumbs, button with dropdown (the button can either display a contextual navigation menu, allow selection and reflecting it, and/or allow users to make an action upon selection – e.g. "Download small/medium/large size" button with dropdown), Carousel, ChipInput/TagInput, ColorPalette, ColorPicker, data visualizations, DatePicker, DateTimeInput, Diff, drag & drop/teorder, EmptyState, FloatingButton, Grabber/Handlebar, ImageGallery, language selectors, List, lists of pages, media player controls, navigation menu, offline states, page previews, page/view types, Pagination, PulsatingDot, Sheets, Slider, Stepper, text highlight