Goal
In our current exploration, we are aiming to provide an out-of-the-box responsive solution: We want to allow Codex users to deliver seamless responsive experiences without needing to provide explicit instructions or make adjustments to individual components.
We also want our solution to cover all products' needs, independently of the use of skins.
We need to define the technical implementation that would enable Codex elements to behave responsively by default.
Requirements
- The approach we're exploring relays on the use of media-queries based on standardized breakpoints. Components should be reactive to these and display their desktop-oriented or touch-friendly shape accordingly.
- Users should have the ability to globally configure breakpoints to trigger the responsive or desktop version of Codex components. As a design system, Codex will recommend a set of breakpoints to trigger responsiveness (see breakpoint tokens). Nevertheless, we’ll have to accommodate for skins’ need to define their own breakpoints.
- Relatedly, users should have the ability to limit components to desktop-only or mobile-only behavior: this would facilitate the integration with the Minerva skin, for example.
- Users should have the ability to completely override the responsive behavior of specific components. This will allow system users to maintain sizes regardless of viewport size.
- Responsiveness will be independent of component sizing: The size property will be used to render components in different dimensions in order to create hierarchical compositions. This prop won’t be used to trigger responsiveness.
Open questions
Requirements number 2 and 3 in the section above need to be validated with help from system users. We need to understand whether those requirements would help us integrate our responsive solution with the MediaWiki skin system.
Potential approaches
[⚠️ This section is work in progress ⚠️]
1. Responsive prop (see section 3 in T338163)
This would ensure that skin styles are applied unless the prop is set to true. Users could combine the size and responsive props too (e.g. use an M-button that becomes L on mobile thanks to the responsive prop). The drawback of this approach is that it would operate on a component-by-component basis instead of globally, making the configuration more involved.
2. Responsiveness plugin
Codex could provide this as a global configuration. It would allow users and skins to specify breakpoints and control the appearance of Codex components in general. This is a good solution if we don’t want to complicate Codex too much, but push the needed adjustment onto the skin.
Acceptance criteria
- We define the implementation approach that would allow us to embed responsiveness into Codex components