Revised task description to clarify the reasons around proposed revision to delete is only for responsive specs which are confusing in their existence on components not impacted by responsive grid.

My general take: We should either delete/hide responsive specs, and start documenting them as we progressively define an overarching responsive approach for Codex components. This is initially a design task.

Do we want to represent components in responsive specs for each component via are also impacted by skins (e.g. desktop Vector vs. mobile Minerva)?

Codex is perfect for usage with skins, and thus it can rely on Minerva to achieve responsive consistency. Nevertheless, we shouldn't forget that components should also present inherent responsiveness (e.g. font-size and dimensions should adjust to become touch friendly on mobile devices). This will be essential for their use to compose external tools (see, for example, Wikidata's Query builder SPA).
Achieving this will require making some consistent design decisions (e.g. figuring out padding increases, sizes) and contrasting them with Minerva (do we simply follow our mobile skin design? Should/can we adjust Minerva if we detect any design improvements?). Only then we'll be able to document irrefutably and avoid any confusion.

Do we want to delete responsive specs from Figma library pages on components not impacted by the responsive spec? For example, the ButtonGroup component remains the same regardless of the responsiveness (except for the XS, whereby the font-size changes, but this is due to the Minerva skin and not responsive grid)

All components are actually impacted by responsiveness (beyond layout, font-size and dimensions should uniformly change too). Just to use the same example: button group should reflect the same design decisions applied to make buttons touch-friendly. It would also be great to represent the potential wrapping of the group.

I think it makes sense to represent the responsive behavior of our components in Figma (especially for the ones that have different representations on each breakpoint, e.g. a header). But since at the moment the grid is not implemented T298198 maybe we should hide the responsiveness from the specs (in both OOUI and Codex libraries) and show just a Skin representation of each component.

I've prepared this Figma file and example with the Card component. We could:

1. Hide the responsiveness and show this Skins representation instead. We could create this new Skins spec from all the components since we always have at least the differentiation between base fonts.
2. Represent the following skins (with devices):
   • Vector22 and Vector legacy (desktop and tablet view)
   • Minerva Neue (mobile view). We could represent other devices with this skin but I think with the mobile one would be enough.
3. Grid columns would not be visible until the grid is fully implemented

What do you all think?

After a meeting with DS design folks the agreement with this task is the following:

1. "Responsive behavior" specs will be renamed to "Layout" spec in order to avoid confusion since now we don't represent real responsiveness in Codex at the moment.
2. We'll represent the responsive/layout in all components spec that display differences across devices and components whose width can be resized (e.g. Message, Dialog, TextInput). Responsive will not be represented in small components that don't have differences across devices or whose width can not be resized (e.g. Button, Link).
3. We will document the Desktop and Mobile specs in the Guides section and we will indicate that this is defined by skins (Vector vs. Minerva).
   

@CCiufo-WMF since we have an agreement on this, we will need to move this task to the sprint so we can update the OOUI and Codex Figma libraries.

I've updated the responsive specs in both Codex and OOUI libraries and the following branches are in review and pending to be merged:

• OOUI branch
• Codex branch