Skip to content

refactor(tabs): simplify Tabs API and migrate plain-text labels#7386

Draft
talissoncosta wants to merge 2 commits intofeat/storybook-component-storiesfrom
refactor/tabs-cleanup
Draft

refactor(tabs): simplify Tabs API and migrate plain-text labels#7386
talissoncosta wants to merge 2 commits intofeat/storybook-component-storiesfrom
refactor/tabs-cleanup

Conversation

@talissoncosta
Copy link
Copy Markdown
Contributor

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to `docs/` if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Contributes to #6606 (Design System Audit). First in a stack of three Tabs PRs that, taken together, decouple the Tabs component from domain and routing concerns.

This PR is the smallest of the stack — pure cleanup, no new behaviour.

  • `Tabs.tsx` simplifications.
    • Remove the dead `overflowX` prop (declared, never read).
    • Stop applying consumer-provided `className` to both the outer `.tabs` div and the inner `.tabs-nav` div — that was a quiet bug where `className='px-0'` ended up on two wrappers.
    • Add a `getLabelString` helper so `tabLabelString` is only required when `tabLabel` is JSX. Plain-string labels now derive their slug automatically.
    • Extract `toUrlSlug` to dedupe the `label.toLowerCase().replace(/ /g, '-')` pattern.
  • Migrate 11 `Foo` wrappers to plain string `tabLabel='Foo'` across `CreateSAML`, `CreateRole`, `CreateSegment`, `PermissionsTabs`, `InspectPermissions`, `create-feature/index.tsx` (Usage, Links), and `create-experiment/index.js` (Results). Drops 5 redundant `tabLabelString` declarations alongside.
  • Incidental: pre-existing nested-ternary in `CreateRole`'s save button label was hoisted into a `let saveLabel` (lint-staged caught it when the file came into scope).

Stack:

  1. `refactor/tabs-cleanup` — this PR (base `feat/storybook-component-stories`)
  2. `refactor/tabs-isdirty` — closes Fix "unsaved changes" badge positioning on Edit Feature modal tabs #6935 + extracts URL/router from Tabs

How did you test this code?

Manually verified:

  • Open Edit Feature modal → Value, Segment Overrides, Settings tabs render correctly with no badge regression.
  • Edit Group, Create Segment, Create SAML, Create Role tabs render and switch as before.
  • Permission tabs (Org / Project / Environment) align as before.
  • Typecheck and lint pass on touched files.
  • Build succeeds.

Stories already on `feat/storybook-component-stories` cover the basic Tabs / PillTheme variants.

talissoncosta and others added 2 commits April 30, 2026 14:20
- Drop dead overflowX prop and stop applying className twice (outer .tabs and inner .tabs-nav both received the same className)
- Add getLabelString helper so tabLabelString is only required for JSX labels; strings derive automatically
- Migrate 11 sites from `<Row className='justify-content-center'>Foo</Row>` wrappers to plain `tabLabel='Foo'`, dropping 5 redundant tabLabelString declarations alongside

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The IIFE introduced when satisfying lint-staged was hard to read; lift it to a
let so the button body is just {saveLabel}.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Apr 30, 2026 9:48pm
flagsmith-frontend-staging Ready Ready Preview, Comment Apr 30, 2026 9:48pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Apr 30, 2026 9:48pm

Request Review

@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Apr 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

front-end Issue related to the React Front End Dashboard refactor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant