## 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 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
- [] Design System Team to propose a list of core components, documented in this task
- [] DST to share this list with other front-end contributors to collect feedback
- [] 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 ]] |
| **FloatingButton** | Button with a fixed "floating" position | Not started | T278134 |
| **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 link |
| --- | --- | --- | --- |
| **FilterChip** | Interactive chip that can be selected, removed, or generated from an input | Not started | T280681 |
| **InfoChip** | Non-interactive chip that provides information | Not started | |
### Inputs & controls
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | --- |
| **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** | Text input with an adjoining button and an expandable menu of items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/combobox.html | Demo ]] |
| **DatePicker** | Interface for selecting a date | Not started | T91148 |
| **FileInput** | Input for selecting a file | Not started | [[ https://design.wikimedia.org/style-guide/components/file-inputs.html | DSG ]] |
| **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 ]] |
| **NumberInput** | Input for entering a number | Not started | [[ https://design.wikimedia.org/style-guide/components/number-inputs.html | DSG ]] |
| **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 ]] |
| **Select** | Input with a dropdown menu of items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/select.html | Demo ]] |
| **Textarea** | Multi-line text input | Not started | T284272 |
| **TextInput** | Single-line text input | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/text-input.html | Demo ]] |
| **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 link |
| --- | --- | --- | --- |
| **Menu** | Dropdown menu of items | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/menu.html | Demo ]] |
| **MenuItem** | Item within a menu | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/menu-item.html | Demo ]] |
### Messages
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | --- |
| **Message** | User-facing message with icon | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/message.html | Demo ]] |
| **ValidationMessage** | Feedback on form input validity | Not started | |
| **ToastNotification** | Temporary pop-in message | Not started | T303612 |
### Progress
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | --- |
| **ProgressIndicator** | Animated signal that a process is occurring | Not started | T266028 |
| **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 |
| --- | --- | --- | --- |
| **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 ]] |
| **TypeaheadSearch** | Search form with stylized autocomplete suggestions | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/typeahead-search.html | Demo ]] |
### Tabs
| Component | Description | Status in Codex | Relevant link |
| --- | --- | --- | --- |
| **Tabs** | Layout for navigating sections of content | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/tabs.html | Demo ]] |
| **Tab** | Section of content within a Tabs layout | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/tab.html | Demo ]] |
### Other core components
| 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 |
| **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 ]] |
| **Dialog** | Overlay of information that needs attention | {icon spinner color=orange} In progress | T284838 |
| **Field** | Form field with a label, an input or control, and validation handling | Not started | T309239 |
| **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 with size and loading features | Not started | T314514 |
| **Popup/Popover** | Small overlay of relevant information | Not started | |
| **Thumbnail** | Small preview image | {icon check-square color=green} Done | [[ https://doc.wikimedia.org/codex/main/components/thumbnail.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.
| 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":
Accordion, Avatar, Breadcrumbs, button with dropdown, Carousel, ColorPalette, ColorPicker, data visualizations, DateTimeInput, Diff, drag & drop/teorder, EmptyState, 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