Design Systems Team/Codex Planned Components

About planned componentsEdit

As part of T313357, we 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 listEdit

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).

Note that some components names may change (e.g. "chip").

Component Description Vue component CSS-only version Links
Accordion Expandable and collapsible layout   In progress  N Not done T326665
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
Combobox Autocomplete text input with an expandable menu of predefined items   Done  N Not done Demo
Dialog Modal element that presents relevant information or actions   In progress Not planned T284838
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   In progress  N Not done T309239
FileInput Input for selecting and submitting a file  N Not done  N Not done DSG
FilterChip Interactive chip that can be selected, removed, or generated from an input   In progress  N Not done T324223
FilterChipInput Input for selecting filter chips   In progress  N Not done T337095
Icon Small graphical representation of an idea   Done   Done Demo
Image Image display with sizing and fallback support options   In progress  N Not done T314514
InfoChip Non-interactive chip that provides information   Done  N Not done T322524
Label Describes the information requested by a given form field   In progress  N Not done T309246
Link Textual element used to navigate between sections or pages n/a   Done Demo
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 DSG
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
ProgressBar Linear indicator of progress   Partially done   Partially done Demo
ProgressIndicator Animated signal that a process is occurring  N Not done  N Not done T266028
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  N Not done  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   In progress  N Not done T284272
TextInput Form element that let users input and edit single-line values in the form of text   Done   Done Demo, T293271
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
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 T280677, T312899
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?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 componentsEdit

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
NavigationMenu Side and bottom nav menus T280680
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
Stepper T333584
TextHighlight Styles for highlighted text T280670