Background/Goal

Currently we have 2 code demo (OOUI and Codex) but we only have 1 Figma library, where we are mixing components from OOUI and Codex. Also, we are creating new components/variants only in Codex (e.g. closable Message, TypeheadSearch, ToggleButton...).

If we are creating components/variants just for Codex, designers whose projects belong to OOUI shouldn't use the Figma library where we add this new Codex components because we will have many confusions (e.g. a designer using the closable message in his project but then the component is not prepared in OOUI code, so developers can't use it).

Designers should have/maintain the following libraries:

• Codex library: as in the DST we are improving the Codex demo, this library will be the one that design needs to maintain. All new components and variants will be in this library (TypeheadSearch, ToggleButton, closable Message...)
• OOUI library: the one that the rest of designers are using. This library will not need maintenance unless we want to add a specific component/variant to OOUI demo. But, as we are only improving Codex demo, we shouldn't have the need to add new components to OOUI.
• Icon system library: same icons will be used in both Codex and OOUI, so this library will be shared for both libraries and designers will maintain this library for both demos, so if we need to add new icons in the system, we will create the icons in both OOUI and Codex demos.

User stories

• As a designer, I need to design with the same components/variants of the code demo that developers will use to develop the project.
  • I'm a designer creating a project that will be develop with Codex (e.g. Abstract Wikipedia)
  • I'm a designer creating a project that will be develop with OOUI.

Considerations

How long are we going to be using both OOUI and Codex?

Acceptance criteria (or Done)

• Split our WikimediaUI components library into:
  • OOUI library: use current library for OOUI library (since is the one linked by most of the team)
    • Update library name from "WikimediaUI components" to "OOUI components"
    • Publish library with all changes
  • Codex library: Use the duplicated file to create the new Codex library
    • Add last components/variants created (closable message, TypeheadSearch, ToggleButton...) in this file since these components were created only for Codex demo
    • Publish file as library
• Update both libraries to understand in which library you are working on
  • Create different covers for each library T307431
  • Update Figma background with different color in each library
  • Add description in each component explaining which demo it belongs to
  • Add different colors from the main component bg in each library (to differentiate the components when the designer looks for them in the Assets panel)
• Document the use of each library (view Notion page here)
  • When to use each library
  • How to identify which library the components used by the designer belong to