Skip to content

Add an option to make Tabs responsive

Sarah German requested to merge responsive-tabs into main

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):

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. 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.
  3. Optionally, change the value of the responsive prop in default.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.

Edited by Sarah German

Merge request reports