diff --git a/src/components/TabGroup/TabGroup.module.css b/src/components/TabGroup/TabGroup.module.css index 729c6ed58..376297e3f 100644 --- a/src/components/TabGroup/TabGroup.module.css +++ b/src/components/TabGroup/TabGroup.module.css @@ -107,7 +107,8 @@ flex-shrink: 0; position: relative; overflow: hidden; - /* border-radius: 0.125rem; */ + border-top-left-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px); + border-top-right-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px); &.eds-is-active { font-weight: 500; @@ -199,8 +200,8 @@ } .tabs--has-divider & { - border-top-left-radius: 0.125rem; - border-top-right-radius: 0.125rem; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } diff --git a/src/components/TabGroup/TabGroup.stories.tsx b/src/components/TabGroup/TabGroup.stories.tsx index 5f831f00a..41687dd40 100644 --- a/src/components/TabGroup/TabGroup.stories.tsx +++ b/src/components/TabGroup/TabGroup.stories.tsx @@ -236,289 +236,6 @@ export const WithTabIllustrations: StoryObj = { }, }; -const IconTab = ({ isActive, title }: { isActive: boolean; title: string }) => ( -
-
- {`${ - isActive ? '●' : '◦' - } ${title}`} -
-); - -/** - * If you require advanced control over the tab content, you can use a render prop and `Tab.Button` to - * handle the inputs for each tab. This should only be used sparingly. - */ -export const CustomTabGroup: StoryObj = { - decorators: [(Story) =>
{Story()}
], - parameters: { - docs: { - source: { - code: ` - - - - {({ isActive, title }) => ( - - )} - -
- - Tab 1 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 2 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 3 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 4 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 5 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 6 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
-
- `, - }, - }, - }, - args: { - children: ( - <> - - - {({ isActive, title }) => ( - - )} - -
- - Tab 1 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 2 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 3 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 4 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 5 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - - - {({ isActive, title }) => ( - - )} - -
- - Tab 6 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut - enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex{' '} - -
-
- - ), - }, -}; - /** * For Chromatic visual regression testing of the masks on both sides of the TabGroup. Currently does not work properly on local. */ diff --git a/src/components/TabGroup/__snapshots__/TabGroup.test.tsx.snap b/src/components/TabGroup/__snapshots__/TabGroup.test.tsx.snap index 1c67e71a3..8c69a7498 100644 --- a/src/components/TabGroup/__snapshots__/TabGroup.test.tsx.snap +++ b/src/components/TabGroup/__snapshots__/TabGroup.test.tsx.snap @@ -120,236 +120,6 @@ exports[` Centered story renders snapshot 1`] = ` `; -exports[` CustomTabGroup story renders snapshot 1`] = ` -
-
- -
-
-
-

- Tab 1 -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - -

-
-
-
-
-
-`; - exports[` Default story renders snapshot 1`] = `