-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[core] feat(Tabs): new 'fill' prop #5961
Conversation
CPerinet
commented
Feb 20, 2023
•
edited by adidahiya
Loading
edited by adidahiya
@@ -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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
clientHeight
is not needed thanks to align-self: stretch;
on the tab
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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>
</>
}
/>