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:

  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[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 Yes 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 Yes Done Yes 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 Yes Done Yes Done Demo
ButtonGroup Set of actions made up of two or more buttons Yes Done N Not done Demo
Card Layout for grouping information and actions related to a single topic Yes Done Yes Done Demo
Checkbox Binary input that can be standalone or in a multiselect group Yes Done Yes Done Demo
ChipInput Input for selecting chips Yes Done Not planned Demo
Combobox Autocomplete text input with an expandable menu of predefined items Yes Done Not planned Demo
Dialog Modal element that presents relevant information or actions Yes 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 Yes Done Yes Done Demo
FileInput Input for selecting and submitting a file N Not done N Not done
Icon Small graphical representation of an idea Yes Done Yes 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 Yes Done N Not done Demo
Label Describes the information requested by a given form field Yes Done Yes Done Demo
Link Textual element used to navigate between sections or pages Yes N/A Yes 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 Yes Done Yes Done Demo
Menu Contextual list of selectable options, often triggered by a control or an input Yes Done N Not done Demo
MenuItem A selectable option included within a Menu Yes Done N Not done Demo
Message System feedback in response to or to inform a user action Yes Done Yes 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 Incomplete Partially done Incomplete Partially done Demo
Radio Binary input part of a single-select group Yes Done Yes Done Demo
SearchInput Input for text search with optional button Yes Done Yes Done Demo
Select Input with a dropdown menu of predefined selectable items Yes Done Yes 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 In progress N Not done T303320
Tabs Layout for navigating between sections of content Yes Done Yes Done Demo
Tab Represents a section of content within a Tabs layout Yes Done Yes Done Demo
TextArea Multi-line text input that allows manual resizing Yes Done Yes Done Demo
TextInput Form element that let users input and edit single-line values in the form of text Yes Done Yes Done Demo
Thumbnail Small preview of an image Yes Done Yes Done Demo
ToastNotification Temporary pop-in feedback message N Not done N Not done T303612
ToggleButton Button that can be toggled on and off Yes Done N Not done Demo
ToggleButtonGroup Group of toggle buttons for making a selection Yes 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 Yes Done Yes 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 Yes Done Yes 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:

  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[edit]

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