## Background
- **Description:** We need to add both InfoChip and FilterChip to Codex.
- **History:** FilterChip was previously used in our system (check the [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#:~:text=TagMultiselect%2C%20MenuTagMultiselect | OOUI demo ]]) while InfoChip was no documented.
- **Considerations:** //list any known challenges or blockers, or any other important information//
- **Known use case(s):** all use cases have been captured in this [[ https://www.figma.com/file/nbF5SeHV4mA9DMTaDbeUB2/Chip-component---T280681?node-id=902%3A8134&viewport=314%2C228%2C0.06 | Figma inventory ]]
| [[ https://www.figma.com/file/nbF5SeHV4mA9DMTaDbeUB2/Chip-component---T280681?node-id=902%3A8134&viewport=-121%2C176%2C0.08&t=M2LR8tlXJMTdskgB-11 | Check the Figma inventory with all the use cases captured ]] |
===== Info Chip:
| {F35713477} | {F35713490} | {F35828028} |
| Info Chip in [[ https://www.figma.com/file/uNBSv1e4ceA8tGNr29R9vp/Default-component?node-id=2678%3A31116 | Wikifunctions ]] | InfoChip with feedback states in [[ https://m.wikifunctions.beta.wmflabs.org/wiki/Z10018?useskin=vector-2022 | Wikifunctions ]] | Level chips in [[ https://www.figma.com/file/Pgo6fPGaDDiqXWGfMI8oiF/Growth---features?node-id=2131%3A30419&viewport=12%2C-216%2C0.53&t=QfWbvNwDnIDpTfJ5-11 | Growth ]] |
===== Filter Chip:
| {F35713478} | {F35713498} | {F35713501} | {F35828037} |
| Filter Chip in [[ https://www.figma.com/file/HSxGKC6u2e9iEAYYCs37aj/Function-editor%3A-Aliases?node-id=55%3A7575 | AW Function Editor ]] | Filter Chip in [[ https://en.wikipedia.org/wiki/Special:RecentChanges?hidebots=1&hidecategorization=1&hideWikibase=1&limit=100&days=7&enhanced=1&useskin=vector-2022&urlversion=2 | Recent Changes ]] | Error Input Chip with Filter Chip in [[ https://en.wikipedia.org/wiki/Special:Preferences?useskin=vector-2022#mw-prefsection-echo | user's preferences ]] | Chip with feedback dot in [[ https://en.wikipedia.org/wiki/Special:RecentChanges?damaging=maybebad&hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=7&enhanced=1&damaging__maybebad_color=c3&urlversion=2&useskin=vector-2022 | Recent Changes ]] |
===== Selection Chip
| {F35713512} | {F35713513} | {F35713531} | {F35828047} |
| Newcomer [[ https://www.figma.com/file/Pgo6fPGaDDiqXWGfMI8oiF/Growth---features?node-id=769%3A57192 | Homepage ]] | [[ https://commons.wikimedia.org/wiki/Special:SuggestedTags?useskin=vector-2022#popular | Wikimedia Commons ]] | Filter tabs become selectable item with title and description in [[ https://commons.wikimedia.org/wiki/Special:SuggestedTags?useskin=vector-2022#popular | Wikimedia Commons ]] | Selection chips in Language projects T113257 and T319181 |
===== Clickable / Link chip
| {F35828035} |
| Clickable chip (with link?) in [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1403%3A17899&viewport=-1160%2C-669%2C0.54&t=zxZUkivnSUDyUFAz-11 | Special Search (Quick view) ]] T306630 |
### User stories
- As a designer/developer I need to use InfoChip to inform the user about something with or without a feedback state (notice, success, warning and error).
- As a designer/developer I need to use FilterChip to add chips in a ChipInput T280701
### Previous implementations
These artifacts are listed for historical context. The Figma spec, linked below, is the source of truth for the new component.
- **Design style guide:** //add [[ https://design.wikimedia.org/style-guide/index.html | Design Style Guide ]] link, if applicable//
- **OOUI:** ChipInput with FilterChips in the [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#:~:text=TagMultiselect%2C%20MenuTagMultiselect | OOUI demo ]].
- **Vue:** //add any existing Vue implementations, if applicable. See [[ https://phabricator.wikimedia.org/T272885 | Vue component inventory ]].//
### Open questions
- Will be InfoChip and FilterChip variants of the same Chip component? Or will we separate them into InfoChip component and FilterChip one?
- Name of each Chip:
1. InfoChip / FilterChip / SelectionChip
2. LabelChip / InputChip / SuggestionChip
- Could we create a prop to make the Chip fixed width? We should use it in cases where we have more than one chip in each column to avoid some chips to be wider than others:
{F35732758}
- Maximum example: do we want to use ellipsis or could the chip jump to a second line?
{F35732760}
---
## Codex implementation
-
### Component task owners
- Designer: @bmartinezcalvo
- Developer: //add the main developer's name//
### Design exploration
Some solutions to unify all the different chip use cases with a [[ https://www.figma.com/file/nbF5SeHV4mA9DMTaDbeUB2/Chip-component---T280681?node-id=1128%3A23592&viewport=451%2C4%2C0.65&t=M2LR8tlXJMTdskgB-11 | systematic solution have been created in this exploration Figma file ]]:
{F35828115}
We could have the following chips:
- Type
- Informative (non clickable).
- Feedback: this chip could also display a Feedback status for the user.
- Filter (removable)
- Selection (toggle)
- Clickable (or link)
- Size
- Small: we'll need a 20-24px chip to be included within other components (e.g. chips included within Inputs)
- - Medium / Large: we'll need a large size for toggled chips (e.g. the ones used in [[ https://www.figma.com/file/nbF5SeHV4mA9DMTaDbeUB2/Chip-component---T280681?node-id=906%3A6234&viewport=-3145%2C-63%2C0.33&t=M2LR8tlXJMTdskgB-11 | Growth ]])
### Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
A component spec sheet has not been created yet.
| Component spec sheet |
---
## Stage 1: Minimum viable product (MVP)
MVP includes basic layout, default states, and most important functionality.
### Acceptance criteria
- [] Determine what MVP includes for this component and document this in a subtask. Assign task to designer.
- [] Design MVP. Once complete, assign task to developer.
- [] Implement MVP
---
## Stage 2: Additional states, features, and variants
This might include a disabled state, framed/frameless designs, transitions, supporting different use cases, etc., which will be captured in separate subtasks.
### Acceptance criteria
- [] Document design and implementation of additional states and features in individual subtasks
- [] Complete each additional state/feature subtask
---
## Stage 3: Refinement
This stage includes any final touches or bug fixes needed before the component can be deemed complete, which will be captured in separate subtasks.
### Acceptance criteria
- [] Finalize docs: open and complete a subtask for any additional demos that need to be added or documentation that needs work
- [] Meet accessibility standards: open and complete a subtask for any necessary accessibility improvements
- [] Meet internationalization standards: open and complete a subtask to fix any i18n bugs
- [] Complete testing: open and complete a subtask for any additional unit or functional tests that are needed