From 4948a0033c92eecac08dd98ae2abe2d02eb75788 Mon Sep 17 00:00:00 2001 From: kostasdano Date: Wed, 18 Dec 2024 14:48:05 +0200 Subject: [PATCH] feat: change paddings --- .../Updated Components/Tabs/Tabs-Playground.snap | 8 ++++---- .../Updated Components/Tabs/Tabs-SimpleTabs.snap | 8 ++++---- .../Updated Components/Tabs/Tabs-TabsOrientation.snap | 8 ++++---- .../Updated Components/Tabs/Tabs-TabsWithContent.snap | 8 ++++---- .../Updated Components/Tabs/Tabs-TabsWithCounter.snap | 8 ++++---- src/components/Tabs/components/Tab/Tab.style.ts | 1 + src/components/Tabs/components/TabList/TabList.style.ts | 8 +++----- 7 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap index 7e1a94295..de5cb07dd 100644 --- a/src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap +++ b/src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap @@ -48,15 +48,14 @@ } .emotion-1[data-orientation='horizontal'] { - gap: 1.25rem; + gap: 0.75rem; } .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after { - inset: -8px -12px; + inset: -3px -8px; } .emotion-1[data-orientation='horizontal'] [role='tab'] { - padding-bottom: 0.5rem; border-bottom: 0.125rem solid rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -90,7 +89,7 @@ } .emotion-1[data-orientation='vertical'] [role='tab'] { - padding: 0.5rem 0.75rem; + padding: 0.75rem 0.5rem; box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -123,6 +122,7 @@ -ms-flex-align: center; align-items: center; gap: 0.5rem; + padding: 0.5rem; } .emotion-7 { diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-SimpleTabs.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-SimpleTabs.snap index 91f86239c..4a19a43e0 100644 --- a/src/__storyshots__/Updated Components/Tabs/Tabs-SimpleTabs.snap +++ b/src/__storyshots__/Updated Components/Tabs/Tabs-SimpleTabs.snap @@ -48,15 +48,14 @@ } .emotion-1[data-orientation='horizontal'] { - gap: 1.25rem; + gap: 0.75rem; } .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after { - inset: -8px -12px; + inset: -3px -8px; } .emotion-1[data-orientation='horizontal'] [role='tab'] { - padding-bottom: 0.5rem; border-bottom: 0.125rem solid rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -90,7 +89,7 @@ } .emotion-1[data-orientation='vertical'] [role='tab'] { - padding: 0.5rem 0.75rem; + padding: 0.75rem 0.5rem; box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -123,6 +122,7 @@ -ms-flex-align: center; align-items: center; gap: 0.5rem; + padding: 0.5rem; }
diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsOrientation.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsOrientation.snap index 7e1a94295..de5cb07dd 100644 --- a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsOrientation.snap +++ b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsOrientation.snap @@ -48,15 +48,14 @@ } .emotion-1[data-orientation='horizontal'] { - gap: 1.25rem; + gap: 0.75rem; } .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after { - inset: -8px -12px; + inset: -3px -8px; } .emotion-1[data-orientation='horizontal'] [role='tab'] { - padding-bottom: 0.5rem; border-bottom: 0.125rem solid rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -90,7 +89,7 @@ } .emotion-1[data-orientation='vertical'] [role='tab'] { - padding: 0.5rem 0.75rem; + padding: 0.75rem 0.5rem; box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -123,6 +122,7 @@ -ms-flex-align: center; align-items: center; gap: 0.5rem; + padding: 0.5rem; } .emotion-7 { diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithContent.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithContent.snap index 7e1a94295..de5cb07dd 100644 --- a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithContent.snap +++ b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithContent.snap @@ -48,15 +48,14 @@ } .emotion-1[data-orientation='horizontal'] { - gap: 1.25rem; + gap: 0.75rem; } .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after { - inset: -8px -12px; + inset: -3px -8px; } .emotion-1[data-orientation='horizontal'] [role='tab'] { - padding-bottom: 0.5rem; border-bottom: 0.125rem solid rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -90,7 +89,7 @@ } .emotion-1[data-orientation='vertical'] [role='tab'] { - padding: 0.5rem 0.75rem; + padding: 0.75rem 0.5rem; box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -123,6 +122,7 @@ -ms-flex-align: center; align-items: center; gap: 0.5rem; + padding: 0.5rem; } .emotion-7 { diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithCounter.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithCounter.snap index 2c4390611..cb2783f42 100644 --- a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithCounter.snap +++ b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithCounter.snap @@ -48,15 +48,14 @@ } .emotion-1[data-orientation='horizontal'] { - gap: 1.25rem; + gap: 0.75rem; } .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after { - inset: -8px -12px; + inset: -3px -8px; } .emotion-1[data-orientation='horizontal'] [role='tab'] { - padding-bottom: 0.5rem; border-bottom: 0.125rem solid rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -90,7 +89,7 @@ } .emotion-1[data-orientation='vertical'] [role='tab'] { - padding: 0.5rem 0.75rem; + padding: 0.75rem 0.5rem; box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0); -webkit-transition: color ease-in-out 0.2s; transition: color ease-in-out 0.2s; @@ -123,6 +122,7 @@ -ms-flex-align: center; align-items: center; gap: 0.5rem; + padding: 0.5rem; } .emotion-3 { diff --git a/src/components/Tabs/components/Tab/Tab.style.ts b/src/components/Tabs/components/Tab/Tab.style.ts index d09d18b81..309acec79 100644 --- a/src/components/Tabs/components/Tab/Tab.style.ts +++ b/src/components/Tabs/components/Tab/Tab.style.ts @@ -8,4 +8,5 @@ export const containerStyles = () => (theme: Theme) => cursor: pointer; ${flexCenterVertical}; gap: ${theme.globals.spacing.get('4')}; + padding: ${theme.globals.spacing.get('4')}; `; diff --git a/src/components/Tabs/components/TabList/TabList.style.ts b/src/components/Tabs/components/TabList/TabList.style.ts index 3d185ccfc..9cce44159 100644 --- a/src/components/Tabs/components/TabList/TabList.style.ts +++ b/src/components/Tabs/components/TabList/TabList.style.ts @@ -28,15 +28,13 @@ export const containerStyles = (sx?: CSSObject) => (theme: Theme) => } &[data-orientation='horizontal'] { - gap: ${theme.globals.spacing.get('7')}; + gap: ${theme.globals.spacing.get('5')}; [role='tab'][data-focus-visible]:after { - inset: -8px -12px; + inset: -3px -8px; } [role='tab'] { - padding-bottom: ${theme.globals.spacing.get('4')}; - border-bottom: ${theme.globals.borderWidth.get('2')} solid ${theme.tokens.colors.get('borderColor.decorative.transparent')}; transition: color ease-in-out 0.2s; @@ -64,7 +62,7 @@ export const containerStyles = (sx?: CSSObject) => (theme: Theme) => } [role='tab'] { - padding: ${theme.globals.spacing.get('4')} ${theme.globals.spacing.get('5')}; + padding: ${theme.globals.spacing.get('5')} ${theme.globals.spacing.get('4')}; box-shadow: inset ${theme.globals.borderWidth.get('2')} 0 0 0 ${theme.tokens.colors.get('borderColor.decorative.transparent')};