feat(tabs): Add new tab variant for draggable tabs #74867

MichaelSun48 · 2024-07-24T17:26:54Z

This PR makes non-visible changes to the tabs component in anticipation of future changes being made for custom views. Specifically, it separates the <Tab/> and <BaseTab/> variants and adds a new variant prop that controls which group of styles are being applied to the baseTab component.

It also reorganizes the component structure of the <TabList> to allow for the overflow menu to be reusable, since it will be used in the future draggable tabs component.

static/app/components/tabs/tab.tsx

codecov · 2024-07-24T17:38:48Z

Codecov Report

Attention: Patch coverage is 71.87500% with 9 lines in your changes missing coverage. Please review.

Project coverage is 78.11%. Comparing base (071f728) to head (4e3a182).
Report is 192 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #74867      +/-   ##
==========================================
- Coverage   78.16%   78.11%   -0.05%     
==========================================
  Files        6733     6740       +7     
  Lines      300307   300637     +330     
  Branches    51649    51726      +77     
==========================================
+ Hits       234729   234842     +113     
- Misses      59255    59501     +246     
+ Partials     6323     6294      -29

Files	Coverage Δ
static/app/components/interactionStateLayer.tsx	`100.00% <100.00%> (ø)`
static/app/components/tabs/tabList.tsx	`88.88% <83.33%> (+0.31%)`	⬆️
static/app/components/tabs/tab.tsx	`81.63% <68.00%> (-15.34%)`	⬇️

... and 293 files with indirect coverage changes

malwilley

Could you add a section to the .stories file so we can see what the new variant looks like?

static/app/components/tabs/tab.tsx

MichaelSun48 · 2024-07-24T19:53:58Z

Could you add a section to the .stories file so we can see what the new variant looks like?

Done!

…pectively

malwilley

Is it purposeful that there is a large gap between tabs?

static/app/components/tabs/tab.tsx

MichaelSun48 · 2024-07-24T20:59:03Z

Is it purposeful that there is a large gap between tabs?

@malwilley
Nope, this was caused by the fact that the padding is still applied to the tab names even if they are not selected. This is fixed in the next commit!

MichaelSun48 · 2024-07-25T00:00:16Z

static/app/components/interactionStateLayer.tsx

+InteractionStateLayer.defaultProps = {
+  hasSelectedBackground: true,
+};


This is how default props have to be defined apparently 🫠 (setting hasSelectedBackground=true in the destructed props does not work)

Oh I see, because it's a styled component I guess

static/app/components/interactionStateLayer.tsx

malwilley · 2024-07-25T19:43:28Z

static/app/components/interactionStateLayer.tsx

+InteractionStateLayer.defaultProps = {
+  hasSelectedBackground: true,
+};


Oh I see, because it's a styled component I guess

malwilley · 2024-07-25T19:47:52Z

static/app/components/tabs/tab.tsx

+   * Additional props to be merged with `tabProps`. This is used
+   * by <DraggableTab> to pass in props used for drag-and-drop functionality.
+   */
+  additionalProps?: React.HTMLAttributes<HTMLElement>;


Can we remove additionalProps by merging these in DraggableTab instead?

I remember trying to do that but I vaguely remember there being an issue that forced me to pass in props here. I think a good temporary solution would be to remove additionalProps for now and revisit that problem as part of merging in the changes I made a couple weeks ago.

malwilley

Looks good!

This PR makes non-visible changes to the tabs component in anticipation of future changes being made for custom views. Specifically, it separates the `<Tab/>` and `<BaseTab/>` variants and adds a new `variant` prop that controls which group of styles are being applied to the baseTab component. It also reorganizes the component structure of the `<TabList>` to allow for the overflow menu to be reusable, since it will be used in the future draggable tabs component.

This PR creates the `<DraggableTabs/>` component along with many supporting components. It utilizes the new tab variant [recently introduced](#74867), and adds support for reordering them via dragging (implemented w/ Framer motion). This PR contains a subset of changes from a previous [PR](#73543) that contained a lot of new changes to the draggable tabs component, and it will be the first in a series of PRs that break up that PR into smaller chunks. This PR _should_ be the largest of them all, since it creates all of the draggable tabs components. I have tried to pare the old PR down to _only_ contain the changes necessary to get the draggable tabs to be actually draggable (using Framer motion), but please feel free to comment on anything that looks like it may be an artifact of these changes. Known issues in this current implementation that will be fixed in subsequent PRs: - There are no tests for this component - Overflow tabs interact with the tab dividers very weirdly - Tab names wrap very weirdly https://github.com/user-attachments/assets/329fe197-b6af-47af-8faa-4d34ef65181f

Add prop to tab for new tab styles

66ad96a

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jul 24, 2024

MichaelSun48 commented Jul 24, 2024

View reviewed changes

static/app/components/tabs/tab.tsx Show resolved Hide resolved

MichaelSun48 commented Jul 24, 2024

View reviewed changes

static/app/components/tabs/tab.tsx Outdated Show resolved Hide resolved

MichaelSun48 marked this pull request as ready for review July 24, 2024 17:29

MichaelSun48 requested a review from a team July 24, 2024 17:29

malwilley reviewed Jul 24, 2024

View reviewed changes

static/app/components/tabs/tab.tsx Outdated Show resolved Hide resolved

static/app/components/tabs/tab.tsx Outdated Show resolved Hide resolved

Fix minor style issues

5ac2ab8

vercel bot deployed to Preview July 24, 2024 18:52 View deployment

Bubble variant prop up and add storybook entry

d78cd4b

vercel bot deployed to Preview July 24, 2024 19:05 View deployment

Rename variant options from vanilla & draggable to flat & filled, res…

285009f

…pectively

MichaelSun48 force-pushed the msun/addNewTabVariant branch from 52c1102 to 285009f Compare July 24, 2024 19:54

MichaelSun48 requested a review from malwilley July 24, 2024 19:55

vercel bot deployed to Preview July 24, 2024 19:58 View deployment

malwilley reviewed Jul 24, 2024

View reviewed changes

static/app/components/tabs/tab.tsx Outdated Show resolved Hide resolved

static/app/components/tabs/tab.tsx Outdated Show resolved Hide resolved

Tighten the gap between tabs. use space instead of hard coded pixel vals

6b97593

vercel bot deployed to Preview July 24, 2024 21:04 View deployment

MichaelSun48 requested a review from malwilley July 24, 2024 21:14

Fix padding for filled and flat tabs

e1a5d4e

vercel bot deployed to Preview July 24, 2024 21:38 View deployment

MichaelSun48 force-pushed the msun/addNewTabVariant branch from e27e901 to a39e103 Compare July 24, 2024 23:43

vercel bot deployed to Preview July 24, 2024 23:46 View deployment

MichaelSun48 force-pushed the msun/addNewTabVariant branch from a39e103 to 932362f Compare July 24, 2024 23:50

vercel bot deployed to Preview July 24, 2024 23:52 View deployment

Add interaction state layer and focus layer for filled variant

f59efbc

MichaelSun48 force-pushed the msun/addNewTabVariant branch from 932362f to f59efbc Compare July 24, 2024 23:59

MichaelSun48 commented Jul 25, 2024

View reviewed changes

vercel bot deployed to Preview July 25, 2024 00:02 View deployment

malwilley reviewed Jul 25, 2024

View reviewed changes

MichaelSun48 added 2 commits July 25, 2024 13:08

Add annotation for hasSelectedBackground prop

75954c7

Remove additional props from tab component

4e3a182

vercel bot deployed to Preview July 25, 2024 20:12 View deployment

MichaelSun48 requested a review from malwilley July 25, 2024 20:15

malwilley approved these changes Jul 25, 2024

View reviewed changes

MichaelSun48 merged commit fc893af into master Jul 25, 2024

MichaelSun48 deleted the msun/addNewTabVariant branch July 25, 2024 20:23

MichaelSun48 mentioned this pull request Jul 25, 2024

feat(draggableTabs): Add new draggable tabs component #75025

Merged

github-actions bot locked and limited conversation to collaborators Aug 10, 2024

Uh oh!

feat(tabs): Add new tab variant for draggable tabs #74867

feat(tabs): Add new tab variant for draggable tabs #74867

Uh oh!

Conversation

MichaelSun48 commented Jul 24, 2024

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Jul 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

malwilley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MichaelSun48 commented Jul 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

malwilley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MichaelSun48 commented Jul 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelSun48 Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

malwilley Jul 25, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

malwilley Jul 25, 2024

Choose a reason for hiding this comment

Uh oh!

malwilley Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MichaelSun48 Jul 25, 2024

Choose a reason for hiding this comment

Uh oh!

malwilley left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Jul 24, 2024 •

edited

Loading

MichaelSun48 commented Jul 24, 2024 •

edited

Loading

MichaelSun48 commented Jul 24, 2024 •

edited

Loading

MichaelSun48 Jul 25, 2024 •

edited

Loading

malwilley Jul 25, 2024 •

edited

Loading