## 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 planned critical components
**Important notes:**
- 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.
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | --- |
| **Accordion** | Expandable and collapsible layout | Not started | T280785 |
| **Badge** | Small indicator of status or count | Not started | T280708 |
| **Button** | 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 ]] |
| **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 ]] |
| **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 ]] |
| **ChipInput** | Input for selecting filter chips | Not started | T280701 |
| **Combobox** | Autocomplete 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 ]] |
| **Dialog** | Modal element that presents relevant information or actions | {icon spinner color=orange} In progress | T284838 |
| **Divider** | Visual division of sections within a page or between components | {icon spinner color=orange} In progress | T300659 |
| **Field** | Form field with a label, an input or control, and validation handling | Not started | T309239 |
| **FileInput** | Input for selecting and submitting a file | Not started | [[ https://design.wikimedia.org/style-guide/components/file-inputs.html | DSG ]] |
| **FilterChip** | Interactive chip that can be selected, removed, or generated from an input | Not started | T280681 |
| **Icon** | Small graphical representation of an idea | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/icon.html | Demo ]] |
| **Image** | Image display with sizing and fallback support options | Not started | T314514 |
| **InfoChip** | Non-interactive chip that provides information | Not started | |
| **Label** | Describes the information requested by a given form field | Not started | T309246 |
| **Link** | Textual element used to navigate between sections or pages | {icon spinner color=orange} In progress | T309248 |
| **Lookup** | Predictive text input with a dropdown menu of items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/lookup.html | Demo ]] |
| **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 ]] |
| **MenuItem** | A selectable option included within a Menu | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/menu-item.html | Demo ]] |
| **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 ]] |
| **NumberInput** | Input for entering a number | Not started | [[ https://design.wikimedia.org/style-guide/components/number-inputs.html | DSG ]] |
| **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 ]] |
| **ProgressIndicator** | Animated signal that a process is occurring | Not started | T266028 |
| **Radio** | Binary input part of a single-select group | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/radio.html | Demo ]] |
| **SearchInput** | Input for text search with optional button | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/search-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 |
| **Table** | Structure categorical information in rows and columns in order to facilitate the comparative analysis of data | Not started | T303320 |
| **Tabs** | Layout for navigating between sections of content | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/tabs.html | Demo ]] |
| **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 ]] |
| **Textarea** | Multi-line text input that allows manual resizing | Not started | T284272 |
| **TextInput** | 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 ]], T293271 |
| **Thumbnail** | Small preview of an image | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/thumbnail.html | Demo ]] |
| **ToastNotification** | Temporary pop-in feedback message | Not started | T303612 |
| **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 for making a selection | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/toggle-button-group.html | Demo ]] |
| **ToggleSwitch** | 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 ]] |
| **Tooltip** | Floating label with a short description of a user interface element | Not started | T280677, T312899 |
| **TypeaheadSearch** | Search input that provides a menu with autocomplete suggestions | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/typeahead-search.html | Demo ]] |
| **ValidationMessage** | Feedback on form input validity | Not started | |
### 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