[core] feat(Tabs): new 'fill' prop #5961
Conversation
CPerinet
commented
Feb 20, 2023
•
CPerinet
commented
| @@ -285,9 +293,8 @@ export class Tabs extends AbstractPureComponent2<TabsProps, ITabsState> { | |||
|
|
|||
| let indicatorWrapperStyle: React.CSSProperties = { display: "none" }; | |||
| if (selectedTabElement != null) { | |||
| const { clientHeight, clientWidth, offsetLeft, offsetTop } = selectedTabElement; | |||
There was a problem hiding this comment.
clientHeight is not needed thanks to align-self: stretch; on the tab
There was a problem hiding this comment.
it looks like we still need this for vertical tabs.
| @@ -482,10 +482,6 @@ | |||
| margin-top: $pt-grid-size * 0.5; | |||
| } | |||
|
|
|||
| .docs-tabs-example .#{$ns}-navbar .#{$ns}-tab { | |||
There was a problem hiding this comment.
Example of override that wont be necessary after this PR
| @@ -103,6 +111,10 @@ $tab-indicator-width: 3px !default; | |||
| position: relative; | |||
| vertical-align: top; | |||
|
|
|||
| display: flex; | |||
There was a problem hiding this comment.
This is the dangerous bit. If the tab is used with unwrapped content, flex will apply to it. It will align content on a row and vertically centred.
It removes the need for using line-height making the fill implementation much nicer and will allow for adding icon and tag prop in this pr
| color: $pt-text-color; | ||
| cursor: pointer; | ||
| display: flex; |
There was a problem hiding this comment.
It looks like this does cause some issues for existing code which is inserting tags into tab titles (red border added for extra clarity):
Edit: nevermind, we're good. the align-items style seems to fix things
| Before | After (without align-items: center) |
After (with align-items: center) |
|---|---|---|
 |
 |
 |
the code for this is something like:
<Tab
title={
<>
Pull requests
{" "}
<span className={classNames(Classes.TAG, Classes.MINIMAL, Classes.ROUND)}>0</span>
</>
}
/>
