Codex/Planned Components

About planned components

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:

1. A component with multiple use cases across Wikimedia products (e.g. MenuItem)
2. 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

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	N Not done	N 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	N 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	N Not done	N 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	N Not done	N Not done
Icon	Small graphical representation of an idea	Done	Done	Demo
Image	Image display with sizing and fallback support options	N Not done	N Not done	T314514
InfoChip	Non-interactive chip that provides information	Done	N Not 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
LoadingIndicator	Animated signal that a process is occurring or something is loading	N Not done	N 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	N Not done	Demo
MenuItem	A selectable option included within a Menu	Done	N Not done	Demo
Message	System feedback in response to or to inform a user action	Done	Done	Demo
NumberInput	Input for entering a number	N Not done	N Not done	T330101
Popup/Popover	Small, contextual overlay that displays additional information or actions when hovering over, focusing or tapping on an element.	N Not done	N 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	N Not done	N Not done	T311874
Table	Structure categorical information in rows and columns in order to facilitate the comparative analysis of data	In progress	N Not done	T303320
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	N Not done	N Not done	T303612
ToggleButton	Button that can be toggled on and off	Done	N Not done	Demo
ToggleButtonGroup	Group of toggle buttons for making a selection	Done	N Not done	Demo
ToggleChip	Chip that can be selected in order to filter information.	N Not done	N 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	N Not done	N Not done	T340456
TreeView	Hierarchical structure that provides nested levels of navigation	N Not done	N Not done	T325351
TypeaheadSearch	Search input that provides a menu with autocomplete suggestions	Done	Done	Demo

What about other components?

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:

1. 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.
2. If there is not yet a task for the component you want to suggest, use this Phabricator template to open one.

Other known components

Component	Description	Links
Avatar	User profile image	T128953
Breadcrumbs	Visual orientation of page location	(no task)
ButtonWithDropdown	Button with dropdown menu for navigation or option selection	(no task)
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	(no task)
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
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 scrolling through pages	(no task)
PulsatingDot	Pulsating dot used to draw user attention	T280705
Sheets		(no task)
Slider	Grabbable slider element	T236119
StepIndicator	Set of dots that provides a visual reference of progress.	T333584
TextHighlight	Styles for highlighted text	T280670