Skip to content
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.

Sign up for GitHub

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

fix(tab-title): tabs center when set to layout='center' #7026

Merged
merged 13 commits into from
May 26, 2023
Merged

fix(tab-title): tabs center when set to layout='center' #7026

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3d9bb3b
fix(tab-title): tabs center when set to layout='center'
Elijbet May 24, 2023
9b1f151
Merge branch 'master' into elijbet/7025-fix-tab-title-regression-cent…
Elijbet May 25, 2023
11758a0
additional preconfigured stories: centeredClosable and centeredBorder…
Elijbet May 25, 2023
18f63c0
add more variations on tab-title to catch andy possible padding issues
Elijbet May 25, 2023
92966a4
centering tab-title and close button within the tab
Elijbet May 25, 2023
4664adb
Merge branch 'master' into elijbet/7025-fix-tab-title-regression-cent…
Elijbet May 25, 2023
d0b914d
Merge branch 'master' into elijbet/7025-fix-tab-title-regression-cent…
Elijbet May 25, 2023
7c36006
center the text visually and not affected by the x button so as to av…
Elijbet May 26, 2023
400201a
apply to layout center only
Elijbet May 26, 2023
006dff3
Merge branch 'master' into elijbet/7025-fix-tab-title-regression-cent…
Elijbet May 26, 2023
704ff62
Merge branch 'master' into elijbet/7025-fix-tab-title-regression-cent…
Elijbet May 26, 2023
de47d0f
ensure correct offset so adding/removing x button does not move the t…
Elijbet May 26, 2023
e2d3a7b
fill in missing scale s bordered closable centered
Elijbet May 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/tab-title/tab-title.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
:host([layout="center"]) {
@apply my-0 mx-5 text-center;
flex-basis: theme("spacing.48");
margin: auto;
.content {
@apply m-auto;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

given that there's no difference between margin: auto and @apply m-auto I'd recommend using margin: auto it's more readable

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we're using tailwind for now, it makes sense to stick to tailwind classes if they are available, for consistency. This is what we've been doing so far. Also, overlapping uses of tailwind and regular css props might create oversight doubling use of both by accident.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, lets keep tailwind for now for consistency. Hopefully we can remove tailwind in the future.

}
}

:host([position="bottom"]) .container {
Expand Down
47 changes: 47 additions & 0 deletions src/components/tabs/tabs.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,53 @@ export const disabledTabsAndMediumIconsForLargeTabsTitle_TestOnly = (): string =
</calcite-tabs>
`;

export const centered_TestOnly = (): string => html`
<calcite-tabs layout="center">
<calcite-tab-nav slot="title-group">
<calcite-tab-title>Tab 1 Title</calcite-tab-title>
<calcite-tab-title icon-start="arrow-left">Tab 2 Title</calcite-tab-title>
<calcite-tab-title icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
<calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" selected>Tab 4 Title</calcite-tab-title>
</calcite-tab-nav>
<calcite-tab><p>Tab 1 Content</p></calcite-tab>
<calcite-tab><p>Tab 2 Content</p></calcite-tab>
<calcite-tab><p>Tab 3 Content</p></calcite-tab>
<calcite-tab><p>Tab 4 Content</p></calcite-tab>
</calcite-tabs>
`;

export const centeredClosable_TestOnly = (): string => html`
<calcite-tabs layout="center">
<calcite-tab-nav slot="title-group">
<calcite-tab-title closable>Tab 1 Title</calcite-tab-title>
<calcite-tab-title icon-start="arrow-left" closable>Tab 2 Title</calcite-tab-title>
<calcite-tab-title icon-end="arrow-right" closable>Tab 3 Title</calcite-tab-title>
<calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" selected>Tab 4 Title</calcite-tab-title>
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
</calcite-tab-nav>
<calcite-tab><p>Tab 1 Content</p></calcite-tab>
<calcite-tab><p>Tab 2 Content</p></calcite-tab>
<calcite-tab><p>Tab 3 Content</p></calcite-tab>
<calcite-tab><p>Tab 4 Content</p></calcite-tab>
</calcite-tabs>
`;

export const centeredBorderedClosable_TestOnly = (): string => html`
<calcite-tabs layout="center" bordered>
<calcite-tab-nav slot="title-group">
<calcite-tab-title closable>Tab 1 Title</calcite-tab-title>
<calcite-tab-title icon-start="arrow-left" closable>Tab 2 Title</calcite-tab-title>
<calcite-tab-title icon-end="arrow-right" closable>Tab 3 Title</calcite-tab-title>
<calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" closable selected
>Tab 4 Title</calcite-tab-title
>
</calcite-tab-nav>
<calcite-tab><p>Tab 1 Content</p></calcite-tab>
<calcite-tab><p>Tab 2 Content</p></calcite-tab>
<calcite-tab><p>Tab 3 Content</p></calcite-tab>
<calcite-tab><p>Tab 4 Content</p></calcite-tab>
</calcite-tabs>
`;

export const TabChildrenWithPercentageHeights = (): string => html`
<calcite-tabs style="height: 250px;">
<calcite-tab-nav slot="title-group">
Expand Down