Codex/Planned Components
< Codex
(Redirected from Design System Team/Codex Planned Components)About planned components
[edit]As part of T313357, the Design System Team developed a list of "planned components" for the Codex component library. Planned components are components that we definitely intend to include in the Codex component library at some point, because they are either:
- A component with multiple use cases across Wikimedia products (e.g. MenuItem)
- A building block that is part of another critical component (e.g. the Thumbnail component that is used inside the MenuItem component)
This list is meant to provide users of Codex with a clear picture of which components we definitely intend to add to Codex. This does not mean that we will only add the components listed below to Codex—see "What about other components?" below for more information.
Planned components list
[edit]There are 2 versions of components in Codex: Vue 3 components and CSS-only implementations that do not require JavaScript. The table below includes the status of both versions of a component in Codex. Some components will likely never have a CSS-only implementation (e.g. Dialog), and some will not have a Vue implementation (e.g. Link).
Components are never really "Done". If they are labelled as 
Done , this means some basic usable version of the component is available in the latest release of the Codex library. There are likely still many improvements planned for these components, and anyone is welcome to suggest more.
Note that some components names may change (e.g. "chip").
| Component | Description | Vue component | CSS-only version | Links |
|---|---|---|---|---|
| Accordion | Expandable and collapsible layout | Done
|
Done
|
Demo |
| Badge | Small indicator of status or count |  Not done
|
Not done
|
T280708 |
| Button | Control that specifies the action that will occur when a user clicks on it | Done
|
Done
|
Demo |
| ButtonGroup | Set of actions made up of two or more buttons | Done
|
Not done
|
Demo |
| Card | Layout for grouping information and actions related to a single topic | Done
|
Done
|
Demo |
| Checkbox | Binary input that can be standalone or in a multiselect group | Done
|
Done
|
Demo |
| ChipInput | Input for selecting chips | Done
|
Not planned | Demo |
| Combobox | Autocomplete text input with an expandable menu of predefined items | Done
|
Not planned | Demo |
| Dialog | Modal element that presents relevant information or actions | Done
|
Not planned | Demo |
| Divider | Visual division of sections within a page or between components | Not done
|
Not done
|
T300659 |
| Field | Form field with a label, an input or control, and validation handling | Done
|
Done
|
Demo |
| FileInput | Input for selecting and submitting a file | Not done
|
Not done
|
|
| Icon | Small graphical representation of an idea | Done
|
Done
|
Demo |
| Image | Image display with sizing and fallback support options | Not done
|
Not done
|
T314514 |
| InfoChip | Non-interactive chip that provides information | Done
|
Done
|
Demo |
| Label | Describes the information requested by a given form field | Done
|
Done
|
Demo |
| Link | Textual element used to navigate between sections or pages | N/A
|
Done
|
Demo |
| ProgressIndicator | Animated signal that a process is occurring or something is loading | Not done
|
Not done
|
T345921 |
| Lookup | Predictive text input with a dropdown menu of items | Done
|
Done
|
Demo |
| Menu | Contextual list of selectable options, often triggered by a control or an input | Done
|
Not done
|
Demo |
| MenuButton | A ToggleButton that, when toggled on, displays a Menu with options. | Done
|
Not done
|
Demo |
| MenuItem | A selectable option included within a Menu | Done
|
Not done
|
Demo |
| Message | System feedback in response to or to inform a user action | Done
|
Done
|
Demo |
| NumberInput | Input for entering a number | Not done
|
Not done
|
T330101 |
| Popup/Popover | Small, contextual overlay that displays additional information or actions when hovering over, focusing or tapping on an element. | Not done
|
Not done
|
T363375 |
| ProgressBar | Linear indicator of progress |  Partially done
|
Partially done
|
Demo |
| Radio | Binary input part of a single-select group | Done
|
Done
|
Demo |
| SearchInput | Input for text search with optional button | Done
|
Done
|
Demo |
| Select | Input with a dropdown menu of predefined selectable items | Done
|
Done
|
Demo |
| Skeleton | Placeholder layout for content that hasn’t loaded yet | Not done
|
Not done
|
T311874 |
| Table | Structure categorical information in rows and columns in order to facilitate the comparative analysis of data | Done
|
Done
|
Demo |
| Tabs | Layout for navigating between sections of content | Done
|
Done
|
Demo |
| Tab | Represents a section of content within a Tabs layout | Done
|
Done
|
Demo |
| TextArea | Multi-line text input that allows manual resizing | Done
|
Done
|
Demo |
| TextInput | Form element that let users input and edit single-line values in the form of text | Done
|
Done
|
Demo |
| Thumbnail | Small preview of an image | Done
|
Done
|
Demo |
| ToastNotification | Temporary pop-in feedback message | Not done
|
Not done
|
T303612 |
| ToggleButton | Button that can be toggled on and off | Done
|
Not done
|
Demo |
| ToggleButtonGroup | Group of toggle buttons for making a selection | Done
|
Not done
|
Demo |
| ToggleChip | Chip that can be selected in order to filter information. | Not done
|
Not done
|
T340110 |
| ToggleSwitch | Sliding boolean input, generally used to enable/disable options | Done
|
Done
|
Demo |
| Tooltip | Floating label with a short description of a user interface element | Done
|
Not planned | Demo |
| TreeView | Hierarchical structure that provides nested levels of navigation | Not done
|
Not done
|
T325351 |
| TypeaheadSearch | Search input that provides a menu with autocomplete suggestions | Done
|
Done
|
Demo |
What about other components?
[edit]The planned components list is not an exhaustive list of all the components that will ever be added to Codex. We are certain that other components, not on this list, will also be added to Codex in the future. If you'd like to suggest another component be added to Codex, please follow these steps:
- First, review the table below of other "known" components, which are components we have discussed but not yet planned to add to Codex. If you want one of these components, please comment on the existing task if there is one, otherwise open a new one via this Phabricator template.
- If there is not yet a task for the component you want to suggest, use this Phabricator template to open one.
Other known components
[edit]| Component | Description | Links |
|---|---|---|
| Avatar | User profile image | T128953 |
| Breadcrumbs | Visual orientation of page location | T361745 |
| Carousel | Scrollable image gallery | T280846 |
| ColorPalette | Color set with configurable options (e.g. dark mode) | (no task) |
| ColorPicker | Visual color selector | (no task) |
| DataVisualization | A component or set of components that enable easy creation of data visualizations (charts, graphs, etc.) | T280847 |
| DatePicker | Calendar-based date selector | Use TextInput with a custom input type instead. |
| DateTimeInput | Input for dates and times with configurable options (e.g. different calendars) | T91148 (old task, need new epic task) |
| Diff | Visualization of the difference between two versions | T280717, T90948 |
| DragAndDrop | List of draggable items | (no task) |
| EmptyState | Information displayed when content is currently empty | T280789 |
| FloatingButton | Button that floats over the rest of the UI | T278134 |
| Handlebar | Grabber for resizing an input | T297805 |
| ImageGallery | (no task) | |
| LanguageSelector | Search and select a language | (no task) |
| List | Lists of items, like pages, with optional media and descriptions | T266031 |
| MediaPlayerControls | Controls for audio and video players | T280725 |
| MenuButton | Button with dropdown menu to display more actions or options. | Demo |
| Module | Containers for content, actions, and components around a single topic or function. Modules may be considered a complex card - a module may contain a card but not vice versa. | T338015 |
| NavigationMenu | Side and bottom nav menus | T280680, T311305 |
| NumberInput | Input for entering a number | DSG,T330101 |
| OfflineState | Information displayed when the user is offline | T280845 |
| PagePreview | Cards with page information displayed on hover | (no task, exists in Vector) |
| PageTypes/ViewTypes | (no task) | |
| Pagination | Controls for navigating through pages or lists. | T368423 |
| PulsatingDot | Pulsating dot used to draw user attention | T280705 |
| Sheets | Provide additional context by sliding in from the bottom (or side) of the screen. | T366048 |
| Slider | Grabbable slider element | T236119 |
| StepIndicator | Set of dots that provides a visual reference of progress. | T333584 |
| TextHighlight | Styles for highlighted text | T280670 |