Skip to content

[6.x] Fix tab font weights #19891

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

Merged
brandonkelly merged 1 commit into from
Oct 7, 2026
Merged

[6.x] Fix tab font weights #19891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 12 additions & 0 deletions packages/craftcms-ui/src/components/tabs/tabs.browser.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,18 @@ it('grows with its panels under a host that was not', async () => {
expect(tabs.getBoundingClientRect().height).toBeGreaterThan(800);
});

it('weights the selected tab the same as its reserved label width', async () => {
const tabs = await fixture('display: block;');
const tab = tabs.querySelector<HTMLElement>('craft-tab')!;
const label = tab.shadowRoot!.querySelector<HTMLElement>('.tab__label')!;

expect(tab.hasAttribute('selected')).toBe(true);
expect(getComputedStyle(tab).fontWeight).toBe(
getComputedStyle(label, '::after').fontWeight
);
expect(getComputedStyle(tab).fontWeight).not.toBe('700');
});

it('scrolls its panels from the keyboard, leaving the strip in place', async () => {
const tabs = await fixture('display: block; block-size: 300px;');
const region = panels(tabs);
Expand Down
6 changes: 6 additions & 0 deletions packages/craftcms-ui/src/components/tabs/tabs.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,12 @@ export default css`
flex: none;
}

/* Overrides LionTabs' bold, which would otherwise beat the tab's own
selected weight and its width-reserving label copy. */
.tabs__tab-group ::slotted([slot='tab'][selected]) {
font-weight: var(--c-tab-font-weight-active, var(--font-weight-semibold));
}

/*
* Unless the strip is asked to divide its width evenly, which is the other
* answer to the same problem: rather than collapsing the tabs that don't
Expand Down
Loading