Background

In T333144: [EPIC] Migrate DSG resources to Codex we moved all the existing DSG content to Codex and we created the component's guidelines (MVP) for all the existing Codex components. After this MVP task, we will need to solve some pending fixes and/or improve these guidelines.

Open questions

We will need to evaluate/solve the following.

General question concerning all components:
High impact:

• Review the Figma library and make sure the info and use cases documented in Codex match with the ones in the library (See T349020)
• Review the content in each component's demo page and make sure the information is not duplicated in the Guidelines and Demos sections (see T349012)
• Add a new section for "Patterns" in Codex, see also T345904 (See T349044)
• Deal with MediaWiki (wiki) special interaction needs, like “Red Links” How technology agnostic do we make the descriptions? (See T349043)

Medium impact:

• Color's documentation: decide if we want to use the option token's name (e.g. Gray200) or the decision one (e.g. background-color-disabled-subtle) To be discussed in a future DST Design/Eng sync instead of creating a task
• Evaluate if we want to remove the "Interaction states" section from the guidelines (see T349012)
• Evaluate if we want to rename the "Specifications" section to "Anatomy" (see T349012)

Low impact:

• References section: just the components moved from the DSG contain a "References" section. We need to review the new Codex components list and include references when needed (see T349012)
  • Also decide where to put the References, if we continue with it. Right now it's hanging in the air underneath Guidelines, where the more natural expectation would be to have it end of page.
  • If References, then add direct link references, not links to the heading. For satisfying UX and a11y needs: See https://gerrit.wikimedia.org/r/c/design/codex/+/959603/14/packages/codex-docs/component-demos/button/button.md for example. We put in a enumerated list of Reference ids, otherwise the link is no semantic connection. We can leave this for post MVP.
• We could improve the component's guidelines by adding: (see T349012)
  • Do and Don'ts to explain how to use the component
  • Content recommendations for components
  • Keyboard navigation info
• Add title element to component SVG images, while they already feature alt text. [wontfix] Counter-productive for assistive technology and of no benefit for users. Outcome of Design-Engineering sync 2023-10-11
• In the Codex as DS Figma template we're using two different background shades (lighter and darker) for the image asset backgrounds. We need to evaluate how to implement that simply… DST decided not to worry about this unless explicit feedback is provided.
• We need to fix the image in the Tabs > Interaction states section. Lines within the Tabs component should be 1px the gray one and 2 px the blue one. (See T349042)

Component specific questions:
High impact:

• Button: revisit the documentation in the "Types" section. To be covered in T329963
• Card interactive states: This should only describe a fully linked card, which is not the default for Cards. (see T349012)
• Dialog: Think about a different image for specifications-max-width-height. That's 2.8 MB. (See T349041)

Medium impact:

• File input: Add to component's guidelines DST has decided not to add the guidelines for the FileInput. If we do end up adding it adding a FileInput component, then it would naturally include guidelines.
• Checkbox, ChipInput, Field, Radio, Select, ToggleSwitch, TextInput, TextArea: Add the list of interaction states in 2 columns, preferably CSS column layout (See T348608)

Acceptance criteria

• Evaluate each one of the items in the list above and create the necessary tasks