From 226128cc332ad8f84adb1e2fc3c072d5cb8f66e8 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Mon, 4 Nov 2024 13:00:15 +0100 Subject: [PATCH 1/5] Make active Tab look less like a primary Button --- packages/css/src/components/tabs/tabs.scss | 7 ++++++- .../tokens/src/components/ams/tabs.tokens.json | 15 ++++++++++----- storybook/src/components/Tabs/Tabs.stories.tsx | 4 +++- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 4c51d07bf2..0a5a4764df 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -22,6 +22,7 @@ .ams-tabs__list { background-color: var(--ams-tabs-list-background-color); border-block-end: var(--ams-tabs-list-border-block-end); + box-shadow: var(--ams-tabs-list-box-shadow); display: flex; overflow-x: auto; } @@ -40,8 +41,9 @@ @include reset-button; &:disabled { + background-color: var(--ams-tabs-button-disabled-background-color); color: var(--ams-tabs-button-disabled-color); - cursor: var(--ams-tab-button-disabled-cursor); + cursor: var(--ams-tabs-button-disabled-cursor); @media (forced-colors: active) { color: GrayText; @@ -49,13 +51,16 @@ } &:hover:not([aria-selected="true"], [disabled]) { + background-color: var(--ams-tabs-button-hover-background-color); box-shadow: var(--ams-tabs-button-hover-box-shadow); color: var(--ams-tabs-button-hover-color); } &[aria-selected="true"] { background-color: var(--ams-tabs-button-selected-background-color); + box-shadow: var(--ams-tabs-button-selected-box-shadow); color: var(--ams-tabs-button-selected-color); + font-weight: var(--ams-tabs-button-selected-font-weight); @media (forced-colors: active) { background-color: SelectedItem; diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index 042814af09..a36d09b9c8 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -3,8 +3,9 @@ "tabs": { "gap": { "value": "{ams.space.md}" }, "list": { - "background-color": { "value": "{ams.brand.color.neutral.0}" }, - "border-block-end": { "value": "{ams.border.width.md} solid {ams.brand.color.blue.60}" } + "background-color": { "value": "initial" }, + "border-block-end": { "value": "initial" }, + "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.neutral.20}" } }, "button": { "color": { "value": "{ams.brand.color.blue.60}" }, @@ -18,13 +19,17 @@ "padding-inline": { "value": "{ams.space.md}" }, "hover": { "color": { "value": "{ams.brand.color.blue.80}" }, - "box-shadow": { "value": "inset 0 -0.125rem 0 0 {ams.brand.color.blue.80}" } + "background-color": { "value": "initial" }, + "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.blue.80}" } }, "selected": { - "background-color": { "value": "{ams.brand.color.blue.60}" }, - "color": { "value": "{ams.brand.color.neutral.0}" } + "background-color": { "value": "initial" }, + "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1) {ams.brand.color.blue.60}" }, + "color": { "value": "{ams.brand.color.blue.60}" }, + "font-weight": { "value": "{ams.text.font-weight.bold}" } }, "disabled": { + "background-color": { "value": "initial" }, "color": { "value": "{ams.brand.color.neutral.60}" }, "cursor": { "value": "{ams.action.disabled.cursor}" } } diff --git a/storybook/src/components/Tabs/Tabs.stories.tsx b/storybook/src/components/Tabs/Tabs.stories.tsx index e7af747a91..d824b4a0de 100644 --- a/storybook/src/components/Tabs/Tabs.stories.tsx +++ b/storybook/src/components/Tabs/Tabs.stories.tsx @@ -54,7 +54,9 @@ const defaultTabs = [ , tabsContent.map(({ id, body, label }) => ( - {label} + + {label} + {body} )), From 4ff5a735e70dd476ff3e4ab15e817311247ff9ed Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 4 Dec 2024 20:44:26 +0100 Subject: [PATCH 2/5] Remove tokens that just set initial values They would be useful for communities that reuse our components and need background and border colours, but we should first consider whether we want to adopt this approach. --- packages/css/src/components/tabs/tabs.scss | 5 ----- proprietary/tokens/src/components/ams/tabs.tokens.json | 5 ----- 2 files changed, 10 deletions(-) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 0a5a4764df..97b153156a 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -20,8 +20,6 @@ } .ams-tabs__list { - background-color: var(--ams-tabs-list-background-color); - border-block-end: var(--ams-tabs-list-border-block-end); box-shadow: var(--ams-tabs-list-box-shadow); display: flex; overflow-x: auto; @@ -41,7 +39,6 @@ @include reset-button; &:disabled { - background-color: var(--ams-tabs-button-disabled-background-color); color: var(--ams-tabs-button-disabled-color); cursor: var(--ams-tabs-button-disabled-cursor); @@ -51,13 +48,11 @@ } &:hover:not([aria-selected="true"], [disabled]) { - background-color: var(--ams-tabs-button-hover-background-color); box-shadow: var(--ams-tabs-button-hover-box-shadow); color: var(--ams-tabs-button-hover-color); } &[aria-selected="true"] { - background-color: var(--ams-tabs-button-selected-background-color); box-shadow: var(--ams-tabs-button-selected-box-shadow); color: var(--ams-tabs-button-selected-color); font-weight: var(--ams-tabs-button-selected-font-weight); diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index a36d09b9c8..06681aaace 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -3,8 +3,6 @@ "tabs": { "gap": { "value": "{ams.space.md}" }, "list": { - "background-color": { "value": "initial" }, - "border-block-end": { "value": "initial" }, "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.neutral.20}" } }, "button": { @@ -19,17 +17,14 @@ "padding-inline": { "value": "{ams.space.md}" }, "hover": { "color": { "value": "{ams.brand.color.blue.80}" }, - "background-color": { "value": "initial" }, "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.brand.color.blue.80}" } }, "selected": { - "background-color": { "value": "initial" }, "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1) {ams.brand.color.blue.60}" }, "color": { "value": "{ams.brand.color.blue.60}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" } }, "disabled": { - "background-color": { "value": "initial" }, "color": { "value": "{ams.brand.color.neutral.60}" }, "cursor": { "value": "{ams.action.disabled.cursor}" } } From 7294df59ef534375a2eb2870111035aa1c4e6628 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Tue, 10 Dec 2024 16:27:29 +0100 Subject: [PATCH 3/5] Prevent bold text in selected tab from affecting layout --- packages/css/src/components/tabs/tabs.scss | 15 +++++++++++++++ packages/react/src/Tabs/TabsButton.tsx | 7 ++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 97b153156a..f9df81959f 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -28,6 +28,7 @@ .ams-tabs__button { color: var(--ams-tabs-button-color); cursor: var(--ams-tabs-button-cursor); + display: grid; font-family: var(--ams-tabs-button-font-family); font-size: var(--ams-tabs-button-font-size); font-weight: var(--ams-tabs-button-font-weight); @@ -62,3 +63,17 @@ } } } + +.ams-tabs__button-label, +.ams-tabs__button-label-hidden { + grid-area: 1 / 1; +} + +// This hidden label is used to prevent a layout shift when the mega menu is opened +// and the button text becomes bold. +.ams-tabs__button-label-hidden { + font-weight: var(--ams-tabs-button-selected-font-weight); + pointer-events: none; + user-select: none; + visibility: hidden; +} diff --git a/packages/react/src/Tabs/TabsButton.tsx b/packages/react/src/Tabs/TabsButton.tsx index 9c41b9d214..d0f495bdd0 100644 --- a/packages/react/src/Tabs/TabsButton.tsx +++ b/packages/react/src/Tabs/TabsButton.tsx @@ -33,7 +33,12 @@ export const TabsButton = forwardRef( role="tab" tabIndex={activeTab === tab ? 0 : -1} > - {children} + + ) }, From fb2c9c2b6f6bfca43768f1566db85a120587b9c6 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 11 Dec 2024 09:56:34 +0100 Subject: [PATCH 4/5] =?UTF-8?q?Let=E2=80=99s=20not=20hide=20both=20labels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react/src/Tabs/TabsButton.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react/src/Tabs/TabsButton.tsx b/packages/react/src/Tabs/TabsButton.tsx index d0f495bdd0..d73f15c3ef 100644 --- a/packages/react/src/Tabs/TabsButton.tsx +++ b/packages/react/src/Tabs/TabsButton.tsx @@ -36,9 +36,7 @@ export const TabsButton = forwardRef( - + {children} ) }, From 316118723431c52085ec7866d86863663ffef696 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 11 Dec 2024 09:58:08 +0100 Subject: [PATCH 5/5] Fix copied comment in stylesheet Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/components/tabs/tabs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index f9df81959f..3c4b8f10b2 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -69,7 +69,7 @@ grid-area: 1 / 1; } -// This hidden label is used to prevent a layout shift when the mega menu is opened +// This hidden label is used to prevent a layout shift when the tab is selected // and the button text becomes bold. .ams-tabs__button-label-hidden { font-weight: var(--ams-tabs-button-selected-font-weight);