Add an option to make Tabs responsive
What does this MR do and why?
Splitting this off from !4461 (merged) for the sake of streamlining reviews.
This MR adds a prop to the TabsSection
component to optionally make the tabs responsive. Tabs rendered with the responsive option set to true
become accordions at small-width.
We will not be using the responsive option anywhere yet, but it will be used for the tabs on the new homepage in the near future (as part of !4461 (merged)). TBD on if we'd want this behavior for all tabs within regular content.
This change can be merged before !4461 (merged); it will not change the behavior of existing Tabs on the site.
Screenshots, screen recordings, or links to review app
Example tabs (no behavior changes, just validating that the existing tabs are still in fact tabs):
- https://responsive-tabs.docs.gitlab-review.app/ee/update/background_migrations.html#check-for-pending-background-migrations
- https://responsive-tabs.docs.gitlab-review.app/ee/raketasks/x509_signatures.html
- https://responsive-tabs.docs.gitlab-review.app/ee/administration/settings/gitaly_timeouts.html#configure-the-negotiation-timeouts
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md. -
View a page with tabs on it (e.g, http://localhost:3000/ee/update/background_migrations.html#check-for-pending-background-migrations) at wide and small widths. The component will render as Tabs in both cases. -
Optionally, change the value of the responsive
prop indefault.js
, and recompile JS (yarn compile:js
). The component will render as Tabs at large width, and accordions at small width (less than 990px window).
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.