From 7c3013fe91530618e0288fde661e7eb7e8f270f9 Mon Sep 17 00:00:00 2001 From: jongomez Date: Fri, 20 Oct 2023 12:11:49 +0100 Subject: [PATCH 1/3] feat: add border bottom to tab items and tabs container --- .../lsd-react/src/components/TabItem/TabItem.styles.ts | 6 ++++++ packages/lsd-react/src/components/Tabs/Tabs.styles.ts | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/lsd-react/src/components/TabItem/TabItem.styles.ts b/packages/lsd-react/src/components/TabItem/TabItem.styles.ts index a1bdf9a..5a2198f 100644 --- a/packages/lsd-react/src/components/TabItem/TabItem.styles.ts +++ b/packages/lsd-react/src/components/TabItem/TabItem.styles.ts @@ -15,6 +15,12 @@ export const TabItemStyles = css` &:hover { text-decoration: underline; } + + &:not(${tabItemClasses.selected}) { + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + } + + box-sizing: border-box; } .${tabItemClasses.text} { diff --git a/packages/lsd-react/src/components/Tabs/Tabs.styles.ts b/packages/lsd-react/src/components/Tabs/Tabs.styles.ts index 0e31590..d1f2080 100644 --- a/packages/lsd-react/src/components/Tabs/Tabs.styles.ts +++ b/packages/lsd-react/src/components/Tabs/Tabs.styles.ts @@ -1,5 +1,6 @@ import { css } from '@emotion/react' import { tabsClasses } from './Tabs.classes' +import { tabItemClasses } from '../TabItem/TabItem.classes' export const TabsStyles = css` .${tabsClasses.root} { @@ -7,9 +8,18 @@ export const TabsStyles = css` flex-direction: row; overflow: auto; + width: fit-content; + max-width: 100%; + & > * { flex-shrink: 0; } + + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + + .${tabItemClasses.root} { + border-bottom: none; + } } .${tabsClasses.fullWidth} { From 8696680345042b104db97df920fc9cf27a12865f Mon Sep 17 00:00:00 2001 From: jongomez Date: Mon, 23 Oct 2023 13:56:48 +0100 Subject: [PATCH 2/3] fix: center tab text when there's no icon --- packages/lsd-react/src/components/TabItem/TabItem.classes.ts | 2 ++ packages/lsd-react/src/components/TabItem/TabItem.styles.ts | 4 ++++ packages/lsd-react/src/components/TabItem/TabItem.tsx | 1 + 3 files changed, 7 insertions(+) diff --git a/packages/lsd-react/src/components/TabItem/TabItem.classes.ts b/packages/lsd-react/src/components/TabItem/TabItem.classes.ts index 0d422d4..47be876 100644 --- a/packages/lsd-react/src/components/TabItem/TabItem.classes.ts +++ b/packages/lsd-react/src/components/TabItem/TabItem.classes.ts @@ -8,4 +8,6 @@ export const tabItemClasses = { small: 'lsd-tab-item--small', medium: 'lsd-tab-item--medium', large: 'lsd-tab-item--large', + + tabWithoutIcon: 'lsd-tab-item--without-icon', } diff --git a/packages/lsd-react/src/components/TabItem/TabItem.styles.ts b/packages/lsd-react/src/components/TabItem/TabItem.styles.ts index 5a2198f..806aaf5 100644 --- a/packages/lsd-react/src/components/TabItem/TabItem.styles.ts +++ b/packages/lsd-react/src/components/TabItem/TabItem.styles.ts @@ -41,6 +41,10 @@ export const TabItemStyles = css` } } + .${tabItemClasses.tabWithoutIcon} { + justify-content: center; + } + .${tabItemClasses.disabled} { cursor: default; opacity: 0.34; diff --git a/packages/lsd-react/src/components/TabItem/TabItem.tsx b/packages/lsd-react/src/components/TabItem/TabItem.tsx index 5d243ff..aa5e950 100644 --- a/packages/lsd-react/src/components/TabItem/TabItem.tsx +++ b/packages/lsd-react/src/components/TabItem/TabItem.tsx @@ -51,6 +51,7 @@ export const TabItem: React.FC & { tabItemClasses[size], selected && tabItemClasses.selected, props.disabled && tabItemClasses.disabled, + !icon && tabItemClasses.tabWithoutIcon, )} onClick={onClick} > From 387b31ffc152d0aca0059424dc899b91984bd800 Mon Sep 17 00:00:00 2001 From: jongomez Date: Tue, 7 Nov 2023 15:30:30 +0000 Subject: [PATCH 3/3] fix: use withIcon modifier instead of withoutIcon --- .../lsd-react/src/components/TabItem/TabItem.classes.ts | 2 +- packages/lsd-react/src/components/TabItem/TabItem.styles.ts | 6 +++--- packages/lsd-react/src/components/TabItem/TabItem.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/lsd-react/src/components/TabItem/TabItem.classes.ts b/packages/lsd-react/src/components/TabItem/TabItem.classes.ts index 47be876..d88afc5 100644 --- a/packages/lsd-react/src/components/TabItem/TabItem.classes.ts +++ b/packages/lsd-react/src/components/TabItem/TabItem.classes.ts @@ -9,5 +9,5 @@ export const tabItemClasses = { medium: 'lsd-tab-item--medium', large: 'lsd-tab-item--large', - tabWithoutIcon: 'lsd-tab-item--without-icon', + withIcon: 'lsd-tab-item--with-icon', } diff --git a/packages/lsd-react/src/components/TabItem/TabItem.styles.ts b/packages/lsd-react/src/components/TabItem/TabItem.styles.ts index 806aaf5..be4eac3 100644 --- a/packages/lsd-react/src/components/TabItem/TabItem.styles.ts +++ b/packages/lsd-react/src/components/TabItem/TabItem.styles.ts @@ -10,7 +10,7 @@ export const TabItemStyles = css` display: flex; flex-direction: row; align-items: center; - justify-content: space-between; + justify-content: center; &:hover { text-decoration: underline; @@ -41,8 +41,8 @@ export const TabItemStyles = css` } } - .${tabItemClasses.tabWithoutIcon} { - justify-content: center; + .${tabItemClasses.withIcon} { + justify-content: space-between; } .${tabItemClasses.disabled} { diff --git a/packages/lsd-react/src/components/TabItem/TabItem.tsx b/packages/lsd-react/src/components/TabItem/TabItem.tsx index aa5e950..1f3a916 100644 --- a/packages/lsd-react/src/components/TabItem/TabItem.tsx +++ b/packages/lsd-react/src/components/TabItem/TabItem.tsx @@ -51,7 +51,7 @@ export const TabItem: React.FC & { tabItemClasses[size], selected && tabItemClasses.selected, props.disabled && tabItemClasses.disabled, - !icon && tabItemClasses.tabWithoutIcon, + !!icon && tabItemClasses.withIcon, )} onClick={onClick} >