Skip to content

experiment: add tabs base styles and visual tests #9481

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

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

experiment: add tabs base styles and visual tests #9481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4b5dd58
base styles for tabs
jouni Jun 17, 2025
4a4f8d7
Reuse padding property instead of introducing a new one
jouni Jun 17, 2025
e4711bc
format tabs.html
jouni Jun 17, 2025
9d53fbf
support anchors within tabs
jouni Jun 17, 2025
8b9e7ed
add visual tests for base styles
jouni Jun 17, 2025
8413e10
Merge remote-tracking branch 'origin/main' into experiment/base-tabs
vursen Jun 18, 2025
0366c8d
Merge remote-tracking branch 'origin/main' into experiment/base-tabs
vursen Jun 18, 2025
c58fc55
Update tabs.html
jouni Jun 18, 2025
1180d2a
fix vertical orientation tab sizing and label alignment
jouni Jun 18, 2025
989fc5b
fix scroll button sizing
jouni Jun 18, 2025
8412895
Update vaadin-tabs-base-styles.js
jouni Jun 22, 2025
757d3f3
Merge branch 'main' into experiment/base-tabs
jouni Jun 23, 2025
f816e3c
test: update tabs visual references
DiegoCardoso Jun 24, 2025
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
130 changes: 107 additions & 23 deletions dev/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,117 @@

<script type="module">
import '@vaadin/tabs';
import '@vaadin/tooltip';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/checkbox-group';
import '@vaadin/checkbox';
import '@vaadin/vaadin-lumo-styles/lumo.css';

const icons = [
'vaadin:home',
'vaadin:folder-open',
'vaadin:chart',
'vaadin:bed',
'vaadin:boat',
'vaadin:calendar',
'vaadin:chat',
'vaadin:cube',
'vaadin:file-o',
'vaadin:laptop',
'vaadin:picture',
];

function addIcon(item) {
const icon = document.createElement('vaadin-icon');
icon.icon = icons[Math.floor(Math.random() * icons.length)];
item.prepend(icon);
}

const tabs = document.querySelector('vaadin-tabs');

document.querySelector('vaadin-checkbox-group').addEventListener('change', (e) => {
if (e.target.value == 'vertical') {
tabs.orientation = e.target.checked ? 'vertical' : 'horizontal';
}

if (e.target.value == 'size') {
tabs.classList.toggle('size', e.target.checked);
}

if (e.target.value == 'hide-scroll-buttons') {
tabs.setAttribute('theme', e.target.checked ? 'hide-scroll-buttons' : '');
}

if (e.target.value == 'show-scroll-buttons') {
tabs.setAttribute('theme', e.target.checked ? 'show-scroll-buttons' : '');
}

if (e.target.value == 'icons') {
document.querySelectorAll('vaadin-tab vaadin-icon').forEach((icon) => icon.remove());
if (e.target.checked) {
document.querySelectorAll('vaadin-tab:not(:has(a)), vaadin-tab a').forEach((item) => addIcon(item));
}
}

if (e.target.value == 'anchors') {
if (e.target.checked) {
document.querySelectorAll('vaadin-tab').forEach((tab) => {
const a = document.createElement('a');
a.href = '#';
a.innerHTML = tab.innerHTML;
tab.innerHTML = '';
tab.append(a);
});
} else {
document.querySelectorAll('vaadin-tab a').forEach((a) => {
a.parentElement.innerHTML = a.innerHTML;
});
}
}
});
</script>

<style>
vaadin-tabs[orientation='horizontal'].size {
width: 300px;
}

vaadin-tabs[orientation='vertical'].size {
height: 100px;
}

@media (pointer: coarse) {
vaadin-checkbox[value='hide-scroll-buttons'] {
opacity: 0.3;
}
}

@media (pointer: fine) {
vaadin-checkbox[value='show-scroll-buttons'] {
opacity: 0.3;
}
}
</style>
</head>

<body>
<vaadin-tabs style="max-width: 100%; width: 400px">
<vaadin-tab>
Analytics
<vaadin-tooltip slot="tooltip" text="Analytics tooltip"></vaadin-tooltip>
</vaadin-tab>
<vaadin-tab>
Customers
<vaadin-tooltip slot="tooltip" text="Customers tooltip"></vaadin-tooltip>
</vaadin-tab>
<vaadin-tab>
Dashboards
<vaadin-tooltip slot="tooltip" text="Dashboards tooltip"></vaadin-tooltip>
</vaadin-tab>
<vaadin-tab>
Documents
<vaadin-tooltip slot="tooltip" text="Documents tooltip"></vaadin-tooltip>
</vaadin-tab>
<vaadin-tab>
Orders
<vaadin-tooltip slot="tooltip" text="Orders tooltip"></vaadin-tooltip>
</vaadin-tab>
</vaadin-tabs>
<vaadin-checkbox-group label="Features" theme="">
<vaadin-checkbox label="Vertical" value="vertical"></vaadin-checkbox>
<vaadin-checkbox label="Scrolling" value="size"></vaadin-checkbox>
<vaadin-checkbox label="Hide Scroll Buttons" value="hide-scroll-buttons"></vaadin-checkbox>
<vaadin-checkbox label="Show Scroll Buttons" value="show-scroll-buttons"></vaadin-checkbox>
<vaadin-checkbox label="Icons" value="icons"></vaadin-checkbox>
<vaadin-checkbox label="Anchors" value="anchors"></vaadin-checkbox>
</vaadin-checkbox-group>

<section>
<vaadin-tabs>
<vaadin-tab> Analytics </vaadin-tab>
<vaadin-tab> Customers </vaadin-tab>
<vaadin-tab disabled> Dashboards </vaadin-tab>
<vaadin-tab> Documents </vaadin-tab>
<vaadin-tab> Orders </vaadin-tab>
</vaadin-tabs>
</section>
</body>
</html>
8 changes: 8 additions & 0 deletions packages/tabs/src/styles/vaadin-tab-base-styles.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* @license
* Copyright (c) 2025 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import type { CSSResult } from 'lit';

export const tabStyles: CSSResult;
93 changes: 93 additions & 0 deletions packages/tabs/src/styles/vaadin-tab-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/**
* @license
* Copyright (c) 2025 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import '@vaadin/component-base/src/style-props.js';
import { css } from 'lit';

export const tabStyles = css`
@layer base {
:host {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--vaadin-tab-gap, var(--_vaadin-gap-container-inline));
padding: var(--vaadin-tab-padding, var(--_vaadin-padding-container));
cursor: var(--vaadin-clickable-cursor);
font-size: var(--vaadin-tab-font-size, 1em);
font-weight: var(--vaadin-tab-font-weight, 500);
line-height: var(--vaadin-tab-line-height, inherit);
color: var(--vaadin-tab-color, inherit);
background: var(--vaadin-tab-background, transparent);
border-radius: var(--vaadin-tab-border-radius, var(--_vaadin-radius-m));
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
position: relative;
}

:host([hidden]) {
display: none !important;
}

:host([orientation='vertical']) {
justify-content: start;
}

:host([selected]) {
--vaadin-tab-background: var(--_vaadin-background-container);
--vaadin-tab-color: var(--_vaadin-color-strong);
}

:host([disabled]) {
cursor: var(--vaadin-disabled-cursor);
opacity: 0.5;
}

:host(:is([focus-ring], :focus-visible)) {
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
}

slot {
gap: inherit;
align-items: inherit;
justify-content: inherit;
}

::slotted(a) {
color: inherit;
cursor: inherit;
text-decoration: inherit;
display: flex;
align-items: inherit;
justify-content: inherit;
gap: inherit;
}

::slotted(a)::before {
content: '';
position: absolute;
inset: 0;
}

@media (forced-colors: active) {
:host {
border: 1px solid Canvas;
}

:host([selected]) {
color: Highlight;
border-color: Highlight;
}

:host([disabled]) {
color: GrayText;
opacity: 1;
}
}
}
`;
8 changes: 8 additions & 0 deletions packages/tabs/src/styles/vaadin-tabs-base-styles.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* @license
* Copyright (c) 2025 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import type { CSSResult } from 'lit';

export const tabsStyles: CSSResult;
108 changes: 108 additions & 0 deletions packages/tabs/src/styles/vaadin-tabs-base-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/**
* @license
* Copyright (c) 2025 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import '@vaadin/component-base/src/style-props.js';
import { css } from 'lit';

export const tabsStyles = css`
@layer base {
:host {
display: flex;
max-width: 100%;
max-height: 100%;
position: relative;
}

:host([hidden]) {
display: none !important;
}

:host([orientation='vertical']) {
flex-direction: column;
}

[part='tabs'] {
flex: 1;
overflow: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: var(--vaadin-tabs-gap, var(--_vaadin-gap-container-inline));
}

:host([orientation='horizontal']) [part='tabs'] {
flex-direction: row;
scrollbar-width: none;
}

/* scrollbar-width is supported in Safari 18.2, use the following for earlier */
:host([orientation='horizontal']) [part='tabs']::-webkit-scrollbar {
display: none;
}

[part='back-button'],
[part='forward-button'] {
position: absolute;
z-index: 1;
pointer-events: none;
opacity: 0;
cursor: var(--vaadin-clickable-cursor);
box-sizing: border-box;
height: 100%;
padding: var(--vaadin-tab-padding, var(--_vaadin-padding-container));
background: var(--_vaadin-background);
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}

[part='forward-button'] {
inset-inline-end: 0;
}

:host([overflow~='start']) [part='back-button'],
:host([overflow~='end']) [part='forward-button'] {
pointer-events: auto;
opacity: 1;
}

:is([part='back-button'], [part='forward-button'])::before {
content: '';
display: block;
width: var(--vaadin-icon-size, 1lh);
height: var(--vaadin-icon-size, 1lh);
background: currentColor;
mask-image: var(--_vaadin-icon-chevron-down);
rotate: 90deg;
}

[part='forward-button']::before {
rotate: -90deg;
}

:host(:is([orientation='vertical'], [theme~='hide-scroll-buttons']))
:is([part='back-button'], [part='forward-button']) {
display: none;
}

@media (pointer: coarse) {
:host(:not([theme~='show-scroll-buttons'])) :is([part='back-button'], [part='forward-button']) {
display: none;
}
}

:host([dir='rtl']) :is([part='back-button'], [part='forward-button'])::before {
scale: 1 -1;
}

@media (forced-colors: active) {
:is([part='back-button'], [part='forward-button'])::before {
background: CanvasText;
}
}
}
`;
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/anchors-horizontal.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/anchors-vertical.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/ltr-horizontal-end.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/ltr-horizontal-middle.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/ltr-horizontal-scroll.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/ltr-horizontal-start.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/ltr-vertical-end.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/ltr-vertical-middle.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/ltr-vertical-scroll.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/ltr-vertical-start.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/rtl-horizontal-end.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/rtl-horizontal-middle.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/rtl-horizontal-scroll.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/rtl-horizontal-start.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/rtl-vertical-end.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/rtl-vertical-middle.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/rtl-vertical-scroll.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/tabs/test/visual/base/screenshots/tabs/baseline/rtl-vertical-start.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading