[go: up one dir, main page]
Gitiles
Code Review Sign In
gerrit.wikimedia.org / design / codex / main
commit4b8d6fd9d0a35844d7e85beaa6de56600e6df811[log] [tgz]
authorAnne Tomasevich <atomasevich@wikimedia.org>Wed Sep 25 16:19:47 2024 -0400
committerAnne Tomasevich <atomasevich@wikimedia.org>Thu Sep 26 17:01:15 2024 -0400
tree15d7814aed0ab162c39a78a4a465572ae760955f
parent4841648728177493ec972ae0a60a7fdd831e83d2 [diff]
LookupMultiselect: Add WIP component

- Add a new WIP component, LookupMultiselect
- Add a demo page and a Sandbox demo
- Update ChipInput:
  - Add template refs needed by LookupMultiselect to properly use
    the useFloatingMenu composable
  - Allow chips to have a label and a value. This is needed by
    LookupMultiselect since menu items can have both, and a menu
    item can be selected to become a chip.
  - Allow chip text to be a string or a number. This is needed to
    match the MenuItemData type.
  - Inject a new key that indicates whether arbitrary chip text
    is allowed. If set to false, chip text cannot be added via
    the input.

Since this is a WIP component, this patch can be merged without
the following, which will be done in the future:
- Design review to improve UX of the LookupMultiselect
- Create a composable for shared behavior between Lookup and
  LookupMultiselect
- Potentially consolidate similar tests between the two
  components

Bug: T375698
Change-Id: I92a65301d8b09bb45a0beeb22967776c174e3f6e
18 files changed
tree: 15d7814aed0ab162c39a78a4a465572ae760955f
  1. .vscode/
  2. build/
  3. packages/
  4. .browserslistrc
  5. .editorconfig
  6. .eslintignore
  7. .eslintrc.js
  8. .gitignore
  9. .gitreview
  10. .npmrc
  11. .nvmrc
  12. .stylelintignore
  13. .stylelintrc.js
  14. AUTHORS.txt
  15. CHANGELOG.md
  16. CODE_OF_CONDUCT.md
  17. LICENSE
  18. npm-shrinkwrap.json
  19. package.json
  20. README.md
  21. RELEASING.md
README.md

Codex

Codex is the design system for Wikimedia. The Codex repository contains four packages:

Codex features:

  • Wide-ranging support for internationalization and global usage
  • Web accessibility compliant (Web Content Accessibility Guidelines 2.1 level AA)
  • Comprehensive browser and device support

Quick start

Usage

To install:

npm install --save-dev @wikimedia/codex @wikimedia/codex-icons

To use components:

import { CdxButton, CdxTextInput } from '@wikimedia/codex';

To use icons:

import { cdxIconAlert, cdxIconNewWindow } from '@wikimedia/codex-icons';

For more information on how to set up and use the library, see the usage documentation.

Development

Codex development requires the following:

  • Node: the required version is pinned in .nvmrc. To install and use the required version of Node, run nvm install "$(<.nvmrc)" then nvm use in the root of the repository.
  • npm: version 7 or higher is required to support workspaces; it is not included by default in older versions of Node (prior to version 15) and will need to be upgraded manually. You can do this with nvm via nvm install --latest-npm.

Helpful commands:

  • npm install in the root of the repository to install requirements for all workspaces
  • npm run doc:dev to start the docs site
  • npm run dev to start the Vite sandbox
  • npm run test:unit -w @wikimedia/codex to run unit tests for e.g. the codex workspace. Read more about testing.

See the contributing code guidelines for more information.

Contributing

If you'd like to contribute, head over to the contributing docs to learn about our processes and ways you can contribute.

Maintainers

Codex is maintained by the Design System Team of the Wikimedia Foundation. It is designed and developed by contributors from the Wikimedia Foundation, Wikimedia Deutschland, and the Wikimedia volunteer community.

To contact us or to learn more about current and future work, visit our workboard or the Design System Team page on mediawiki.org.