From 8d5b3021b170c8ea9ef8713acec2fb22a7aef786 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Wed, 19 Jun 2024 11:37:51 +0200 Subject: [PATCH 1/7] add height and display flex to tabs content --- src/lib/components/tabsv2/StyledTabs.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/components/tabsv2/StyledTabs.ts b/src/lib/components/tabsv2/StyledTabs.ts index 15e6d24054..22bf234286 100644 --- a/src/lib/components/tabsv2/StyledTabs.ts +++ b/src/lib/components/tabsv2/StyledTabs.ts @@ -86,8 +86,10 @@ export const TabsContainer = styled.div<{ } `; export const TabContent = styled.div<{ tabContentColor?: string }>` + height: calc(100% - ${spacing.r40}); margin: 0; padding: 0; + display: flex; flex: 1; background-color: ${(props) => props.tabContentColor || props.theme.backgroundLevel4}; From 6468918edf35c0b57289b84e96b41aa2184340f1 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Thu, 20 Jun 2024 11:47:06 +0200 Subject: [PATCH 2/7] change style of tabs to improve display : add width, height, set padding and margin to 0 --- src/lib/components/tabsv2/StyledTabs.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/lib/components/tabsv2/StyledTabs.ts b/src/lib/components/tabsv2/StyledTabs.ts index 22bf234286..639a92242a 100644 --- a/src/lib/components/tabsv2/StyledTabs.ts +++ b/src/lib/components/tabsv2/StyledTabs.ts @@ -1,6 +1,4 @@ import styled from 'styled-components'; - -import { getThemePropSelector } from '../../utils'; import { spacing } from '../../spacing'; export const TabBar = styled.div` @@ -24,7 +22,7 @@ export const TabItem = styled.div<{ &:focus-visible { outline: 0; position: relative; - border: ${spacing.r1} dashed ${getThemePropSelector('selectedActive')}; + border: ${spacing.r1} dashed ${(props) => props.theme.selectedActive}; } &:focus-within { @@ -63,6 +61,7 @@ export const TabsContainer = styled.div<{ separatorColor: string; }>` height: 100%; + width: 100%; display: flex; flex-direction: column; background-color: ${(props) => @@ -86,11 +85,13 @@ export const TabsContainer = styled.div<{ } `; export const TabContent = styled.div<{ tabContentColor?: string }>` - height: calc(100% - ${spacing.r40}); margin: 0; padding: 0; - display: flex; - flex: 1; + display: block; + width: 100%; + height: 100%; + box-sizing: border-box; + overflow: auto; background-color: ${(props) => props.tabContentColor || props.theme.backgroundLevel4}; `; From 8296df885afb47b3d089df631724144184e9971b Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Fri, 21 Jun 2024 15:23:51 +0200 Subject: [PATCH 3/7] test new TabsContainer style with containerType --- src/lib/components/tabsv2/StyledTabs.ts | 2 +- src/lib/components/tabsv2/Tabsv2.component.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/components/tabsv2/StyledTabs.ts b/src/lib/components/tabsv2/StyledTabs.ts index 639a92242a..c1aeb3d86d 100644 --- a/src/lib/components/tabsv2/StyledTabs.ts +++ b/src/lib/components/tabsv2/StyledTabs.ts @@ -60,7 +60,7 @@ export const TabsContainer = styled.div<{ tabLineColor?: string; separatorColor: string; }>` - height: 100%; + height: calc(100% - 6.125rem); width: 100%; display: flex; flex-direction: column; diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx index b7b150df6e..d4244e9d50 100644 --- a/src/lib/components/tabsv2/Tabsv2.component.tsx +++ b/src/lib/components/tabsv2/Tabsv2.component.tsx @@ -181,6 +181,7 @@ function Tabs({ return ( Date: Fri, 21 Jun 2024 15:56:00 +0200 Subject: [PATCH 4/7] add new prop "withOverallSummary" in tabs, style with new prop for tabs --- src/lib/components/tabsv2/StyledTabs.ts | 5 ++++- src/lib/components/tabsv2/Tabsv2.component.tsx | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/lib/components/tabsv2/StyledTabs.ts b/src/lib/components/tabsv2/StyledTabs.ts index c1aeb3d86d..f87bb4243a 100644 --- a/src/lib/components/tabsv2/StyledTabs.ts +++ b/src/lib/components/tabsv2/StyledTabs.ts @@ -59,8 +59,11 @@ export const TabItem = styled.div<{ export const TabsContainer = styled.div<{ tabLineColor?: string; separatorColor: string; + withOverallSummary?: boolean; }>` - height: calc(100% - 6.125rem); + height: ${(props) => + // Overall summary is 6rem + 0.125rem for gap + props.withOverallSummary ? 'calc(100% - 6.125rem)' : '100%'}; width: 100%; display: flex; flex-direction: column; diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx index d4244e9d50..7a5fbd9afd 100644 --- a/src/lib/components/tabsv2/Tabsv2.component.tsx +++ b/src/lib/components/tabsv2/Tabsv2.component.tsx @@ -34,6 +34,7 @@ type TabsProps = { tabHoverColor?: string; children: ChildrenArray>; className?: string; + withOverallSummary: boolean; }; export const TabsContext = createContext(false); @@ -51,6 +52,7 @@ function Tabs({ tabHoverColor, children, className, + withOverallSummary, ...rest }: TabsProps) { const location = useLocation(); @@ -182,6 +184,7 @@ function Tabs({ Date: Fri, 21 Jun 2024 16:53:53 +0200 Subject: [PATCH 5/7] add optional to withOverallSummary prop --- src/lib/components/tabsv2/Tabsv2.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx index 7a5fbd9afd..cbc1d0fe22 100644 --- a/src/lib/components/tabsv2/Tabsv2.component.tsx +++ b/src/lib/components/tabsv2/Tabsv2.component.tsx @@ -34,7 +34,7 @@ type TabsProps = { tabHoverColor?: string; children: ChildrenArray>; className?: string; - withOverallSummary: boolean; + withOverallSummary?: boolean; }; export const TabsContext = createContext(false); From a8c9a235f2dafedeffa936e4b3a842d184839963 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Mon, 24 Jun 2024 11:54:18 +0200 Subject: [PATCH 6/7] remove withOverallSummary prop --- src/lib/components/tabsv2/StyledTabs.ts | 5 +---- src/lib/components/tabsv2/Tabsv2.component.tsx | 3 --- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/lib/components/tabsv2/StyledTabs.ts b/src/lib/components/tabsv2/StyledTabs.ts index f87bb4243a..639a92242a 100644 --- a/src/lib/components/tabsv2/StyledTabs.ts +++ b/src/lib/components/tabsv2/StyledTabs.ts @@ -59,11 +59,8 @@ export const TabItem = styled.div<{ export const TabsContainer = styled.div<{ tabLineColor?: string; separatorColor: string; - withOverallSummary?: boolean; }>` - height: ${(props) => - // Overall summary is 6rem + 0.125rem for gap - props.withOverallSummary ? 'calc(100% - 6.125rem)' : '100%'}; + height: 100%; width: 100%; display: flex; flex-direction: column; diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx index cbc1d0fe22..d4244e9d50 100644 --- a/src/lib/components/tabsv2/Tabsv2.component.tsx +++ b/src/lib/components/tabsv2/Tabsv2.component.tsx @@ -34,7 +34,6 @@ type TabsProps = { tabHoverColor?: string; children: ChildrenArray>; className?: string; - withOverallSummary?: boolean; }; export const TabsContext = createContext(false); @@ -52,7 +51,6 @@ function Tabs({ tabHoverColor, children, className, - withOverallSummary, ...rest }: TabsProps) { const location = useLocation(); @@ -184,7 +182,6 @@ function Tabs({ Date: Mon, 24 Jun 2024 13:50:24 +0200 Subject: [PATCH 7/7] change containerType from inline-size to size to block children expansion in inlin e and block direction --- src/lib/components/tabsv2/Tabsv2.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx index d4244e9d50..50b08d7059 100644 --- a/src/lib/components/tabsv2/Tabsv2.component.tsx +++ b/src/lib/components/tabsv2/Tabsv2.component.tsx @@ -181,7 +181,7 @@ function Tabs({ return (