[Discover] [Unified Tabs] Tabs new design polishes #244179

akowalska622 · 2025-11-25T14:14:19Z

Summary

A-la-carte: https://akowalska622-pr-244179-discover-tabs-add-separators.kbndev.co/

Initially issue focused only on adding separators, however a few more requirements for small polishes/bugfixes were added.

The complete list with requirement can be found in the issue

Most of the commits (apart from small clean ups) are scoped to a single bug/improvement.

Separators

Tabs should have separators, as per design:

Requirements for separators:

a separator should be visible on the right side of the tab, right outermost included (so separator between last tab and + button)
it shouldn't be visible when a tab is selected and the right side adjacent tab is selected (visually no separators around the selected tab)
it shouldn't be visible when a tab is hovered and the right side adjacent tab is hovered (visually no separators around the hovered tab)

It couldn't be done with pure css (targeting sibling element), because of wrappers (draggable wrapper and preview wrapper) the tabs aren't direct siblings. I eventually settled for managing the visibility of the separator from within the parent (tabs bar), based on selected and hovered state of a tab and previous tab to the one which is being hovered/selected.

From my testing it was the cleanest and sturdiest approach, but I'm open to different ones as well.

PR changes:

Loading spinner should respect the tab border radius

Fixed overflowing shadow and layout shift on keyboard navigation

Drag and drop styling (transparent all tabs, but selected and dragged)

Dismissing tab action menu if switched to a different tab

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

elasticmachine · 2025-11-25T14:28:56Z

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

…2/kibana into discover-tabs-add-separators

akowalska622 · 2025-12-01T14:38:17Z

src/platform/packages/shared/kbn-unified-tabs/src/components/tab/tab.tsx

+  // dismisses action popover when the selected tab changes
+  useEffect(() => {
+    if (prevSelectedItemIdRef.current !== selectedItemId && !isSelected && isActionPopoverOpen) {
+      setActionPopover(false);
+    }
+    prevSelectedItemIdRef.current = selectedItemId;
+  }, [selectedItemId, isSelected, isActionPopoverOpen]);


We can also do it simpler, but violating useEffect deps rule, so I went with ref here. I'm open for discussion though

It feels like there should be an easier way to do this, but I'm not sure off the top of my head tbh. So I think it's good for now 👍

davismcphee

Thanks for the updates and fixes! It looks a lot more polished with the separators now 👌

I noticed a few minor things while testing locally and threw together a PR against this branch attempting to address them: akowalska622#3. Would you mind giving it a try and merging if all seems good? I think with these final touches the new tabs styles will feel nice and polished 🙂

davismcphee · 2025-12-03T05:01:59Z

src/platform/packages/shared/kbn-unified-tabs/src/components/tab/tab.tsx

+  // dismisses action popover when the selected tab changes
+  useEffect(() => {
+    if (prevSelectedItemIdRef.current !== selectedItemId && !isSelected && isActionPopoverOpen) {
+      setActionPopover(false);
+    }
+    prevSelectedItemIdRef.current = selectedItemId;
+  }, [selectedItemId, isSelected, isActionPopoverOpen]);


It feels like there should be an easier way to do this, but I'm not sure off the top of my head tbh. So I think it's good for now 👍

davismcphee · 2025-12-03T05:02:43Z

src/platform/packages/shared/kbn-unified-tabs/src/hooks/use_responsive_tabs.tsx

+          rgb(255, 0, 0) ${euiTheme.size.l},
+          rgb(255, 0, 0) calc(100% - ${euiTheme.size.l}),


Why did we change the size of the overflow shadow? It looks a bit big now imo.

Thanks for catching, it's a leftover from testing and playing around with shadow, I'll revert

Addressed in a9b652a

akowalska622 · 2025-12-03T09:10:23Z

Thanks for the review and additional polished @davismcphee! I'll definitely take a look today and update my branch with your suggestions, thanks for your time and effort ❤️

MiloszRadzynski

LGTM great work! 🔥🚀

Tab style touchups

akowalska622 · 2025-12-03T14:53:36Z

/ci

elasticmachine · 2025-12-03T16:29:40Z

⏳ Build in-progress, with failures

Buildkite Build
Commit: ede2461

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #65 / Alerting bulkDisable should bulk disable and untrack
[job] [logs] FTR Configs #73 / Maps endpoints apis search ES|QL should return getValues response in expected shape
[job] [logs] FTR Configs #73 / Maps endpoints apis search ES|QL should return getValues response in expected shape

History

💔 Build #368372 failed d19dc59
💔 Build #368345 failed 06b2a66
💚 Build #368184 succeeded a9b652a
💛 Build #367136 was flaky 224f930
💔 Build #367049 failed 7649e14

cc @akowalska622

akowalska622 added 2 commits November 25, 2025 14:57

add a vertical separator for tabs

696eb6d

adjust border

fbb144d

akowalska622 self-assigned this Nov 25, 2025

akowalska622 marked this pull request as ready for review November 25, 2025 14:28

akowalska622 requested a review from a team as a code owner November 25, 2025 14:28

Changes from node scripts/regenerate_moon_projects.js --update

73c0b6a

elastic-vault-github-plugin-prod bot requested review from a team as code owners November 25, 2025 14:37

akowalska622 and others added 3 commits November 25, 2025 15:42

adjust offset

7311ccf

Merge branch 'discover-tabs-add-separators' of github.com:akowalska62…

29603e3

…2/kibana into discover-tabs-add-separators

Merge branch 'main' into discover-tabs-add-separators

ab81f92

akowalska622 requested review from l-suarez and removed request for a team November 25, 2025 15:18

Changes from node scripts/regenerate_moon_projects.js --update

e5ebfe0

akowalska622 marked this pull request as draft November 25, 2025 15:52

akowalska622 and others added 3 commits November 26, 2025 09:10

Merge branch 'main' into discover-tabs-add-separators

5ee1535

Merge branch 'main' into discover-tabs-add-separators

195c392

fix border radius of loading spinner

6224ef6

akowalska622 force-pushed the discover-tabs-add-separators branch from 2cbfb69 to 6224ef6 Compare November 27, 2025 12:52

akowalska622 and others added 5 commits November 27, 2025 14:00

adjust min tab width

8ac5270

dismiss action popover on tab change

c427459

Merge branch 'main' into discover-tabs-add-separators

fcb4035

fix overflow scroll

9d52c5f

change tabs color on drag-n-drop

b235cf5

akowalska622 and others added 7 commits November 28, 2025 12:31

fix padding

2dc7662

improve drag n drop styles

080a1bc

change color of separators while dragging

6ac19d3

Merge branch 'main' into discover-tabs-add-separators

ad8e86e

increase min tab width

7649e14

revert tab width

f198be0

Merge branch 'main' into discover-tabs-add-separators

224f930

akowalska622 changed the title ~~[Discover] [Unified Tabs] Add separator between tabs~~ [Discover] [Unified Tabs] Tabs new design polishes Dec 1, 2025

akowalska622 commented Dec 1, 2025

View reviewed changes

akowalska622 marked this pull request as ready for review December 1, 2025 14:39

davismcphee added 7 commits December 2, 2025 22:06

Remove border from label width calculation

7391b93

Fix tabs bar overflow behaviour when resizing window

6dfca27

Fix tabs bar menu button right padding

fafdfd1

Adjust separator alignment

2906a35

Account for gaps before and after tabs in width calculations

234f425

Remove bottom padding when dragging

1ddebd5

Improve drag n drop styles

6360151

davismcphee reviewed Dec 3, 2025

View reviewed changes

revert overflow shadow mask position

a9b652a

MiloszRadzynski approved these changes Dec 3, 2025

View reviewed changes

akowalska622 and others added 4 commits December 3, 2025 13:03

Merge pull request #3 from davismcphee/tab-separator-touchups

8b9b568

Tab style touchups

Merge branch 'main' into discover-tabs-add-separators

06b2a66

fix test after types change

d19dc59

fix types

ede2461

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Discover] [Unified Tabs] Tabs new design polishes #244179

[Discover] [Unified Tabs] Tabs new design polishes #244179

akowalska622 commented Nov 25, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Nov 25, 2025

Uh oh!

akowalska622 Dec 1, 2025

Uh oh!

davismcphee Dec 3, 2025

Uh oh!

davismcphee left a comment

Uh oh!

davismcphee Dec 3, 2025

Uh oh!

davismcphee Dec 3, 2025

Uh oh!

akowalska622 Dec 3, 2025

Uh oh!

akowalska622 Dec 3, 2025

Uh oh!

akowalska622 commented Dec 3, 2025

Uh oh!

MiloszRadzynski left a comment

Uh oh!

akowalska622 commented Dec 3, 2025

Uh oh!

elasticmachine commented Dec 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		rgb(255, 0, 0) ${euiTheme.size.l},
		rgb(255, 0, 0) calc(100% - ${euiTheme.size.l}),

[Discover] [Unified Tabs] Tabs new design polishes #244179

Are you sure you want to change the base?

[Discover] [Unified Tabs] Tabs new design polishes #244179

Conversation

akowalska622 commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Separators

Loading spinner should respect the tab border radius

Fixed overflowing shadow and layout shift on keyboard navigation

Drag and drop styling (transparent all tabs, but selected and dragged)

Dismissing tab action menu if switched to a different tab

Checklist

Identify risks

Uh oh!

elasticmachine commented Nov 25, 2025

Uh oh!

akowalska622 Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

davismcphee Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

davismcphee left a comment

Choose a reason for hiding this comment

Uh oh!

davismcphee Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

davismcphee Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

akowalska622 Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

akowalska622 Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

akowalska622 commented Dec 3, 2025

Uh oh!

MiloszRadzynski left a comment

Choose a reason for hiding this comment

Uh oh!

akowalska622 commented Dec 3, 2025

Uh oh!

elasticmachine commented Dec 3, 2025

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

akowalska622 commented Nov 25, 2025 •

edited

Loading