Skip to content

Commit 48e92d4

Browse files
booc0mtacobooc0mtaco
authored
fix(TabGroup): address QA comments and designs (#1938)
- increase size of highlight bar - round corners of tabs for interactive treatments - add tests
1 parent d96ab79 commit 48e92d4

File tree

4 files changed

+6
-518
lines changed

4 files changed

+6
-518
lines changed

‎src/components/TabGroup/TabGroup.module.css

+5-4
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,8 @@
107107
flex-shrink: 0;
108108
position: relative;
109109
overflow: hidden;
110-
/* border-radius: 0.125rem; */
110+
border-top-left-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
111+
border-top-right-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
111112

112113
&.eds-is-active {
113114
font-weight: 500;
@@ -185,7 +186,7 @@
185186
.tabs__item.eds-is-active & {
186187
position: absolute;
187188
bottom: 0;
188-
height: 0.125rem;
189+
height: 0.25rem;
189190
width: 100%;
190191

191192
background-color: var(--eds-theme-color-text-utility-interactive-primary);
@@ -199,8 +200,8 @@
199200
}
200201

201202
.tabs--has-divider & {
202-
border-top-left-radius: 0.125rem;
203-
border-top-right-radius: 0.125rem;
203+
border-top-left-radius: 0.25rem;
204+
border-top-right-radius: 0.25rem;
204205
border-bottom-left-radius: 0;
205206
border-bottom-right-radius: 0;
206207
}

‎src/components/TabGroup/TabGroup.stories.tsx

-283
Original file line numberDiff line numberDiff line change
@@ -236,289 +236,6 @@ export const WithTabIllustrations: StoryObj<Args> = {
236236
},
237237
};
238238

239-
const IconTab = ({ isActive, title }: { isActive: boolean; title: string }) => (
240-
<div className="flex flex-col items-center">
241-
<div className="fpo h-16 w-16"></div>
242-
<Text className="pt-2" preset="caption-lg">{`${
243-
isActive ? '●' : '◦'
244-
} ${title}`}</Text>
245-
</div>
246-
);
247-
248-
/**
249-
* If you require advanced control over the tab content, you can use a render prop and `Tab.Button` to
250-
* handle the inputs for each tab. This should only be used sparingly.
251-
*/
252-
export const CustomTabGroup: StoryObj<Args> = {
253-
decorators: [(Story) => <div className="p-8">{Story()}</div>],
254-
parameters: {
255-
docs: {
256-
source: {
257-
code: `
258-
<TabGroup>
259-
<TabGroup.Tab title="Tab Title 1">
260-
<TabGroup.Tab.Button>
261-
{({ isActive, title }) => (
262-
<IconTab
263-
icon={active ? 'person' : 'people'}
264-
isActive={isActive}
265-
title={title}
266-
/>
267-
)}
268-
</TabGroup.Tab.Button>
269-
<div className="max-w-xl">
270-
<Heading className="mb-6" size="h3">
271-
Tab 1
272-
</Heading>
273-
<Text>
274-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
275-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
276-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
277-
nisi ut aliquip ex{' '}
278-
</Text>
279-
</div>
280-
</TabGroup.Tab>
281-
282-
<TabGroup.Tab title="Tab Title 2">
283-
<TabGroup.Tab.Button>
284-
{({ isActive, title }) => (
285-
<IconTab
286-
icon={active ? 'person' : 'people'}
287-
isActive={isActive}
288-
title={title}
289-
/>
290-
)}
291-
</TabGroup.Tab.Button>
292-
<div className="max-w-xl">
293-
<Heading className="mb-6" size="h3">
294-
Tab 2
295-
</Heading>
296-
<Text>
297-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
298-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
299-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
300-
nisi ut aliquip ex{' '}
301-
</Text>
302-
</div>
303-
</TabGroup.Tab>
304-
305-
<TabGroup.Tab title="Tab Title 3">
306-
<TabGroup.Tab.Button>
307-
{({ isActive, title }) => (
308-
<IconTab
309-
icon={active ? 'person' : 'people'}
310-
isActive={isActive}
311-
title={title}
312-
/>
313-
)}
314-
</TabGroup.Tab.Button>
315-
<div className="max-w-xl">
316-
<Heading className="mb-6" size="h3">
317-
Tab 3
318-
</Heading>
319-
<Text>
320-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
321-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
322-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
323-
nisi ut aliquip ex{' '}
324-
</Text>
325-
</div>
326-
</TabGroup.Tab>
327-
328-
<TabGroup.Tab title="Tab Title 4">
329-
<TabGroup.Tab.Button>
330-
{({ isActive, title }) => (
331-
<IconTab
332-
icon={active ? 'person' : 'people'}
333-
isActive={isActive}
334-
title={title}
335-
/>
336-
)}
337-
</TabGroup.Tab.Button>
338-
<div className="max-w-xl">
339-
<Heading className="mb-6" size="h3">
340-
Tab 4
341-
</Heading>
342-
<Text>
343-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
344-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
345-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
346-
nisi ut aliquip ex{' '}
347-
</Text>
348-
</div>
349-
</TabGroup.Tab>
350-
351-
<TabGroup.Tab title="Tab Title 5">
352-
<TabGroup.Tab.Button>
353-
{({ isActive, title }) => (
354-
<IconTab
355-
icon={active ? 'person' : 'people'}
356-
isActive={isActive}
357-
title={title}
358-
/>
359-
)}
360-
</TabGroup.Tab.Button>
361-
<div className="max-w-xl">
362-
<Heading className="mb-6" size="h3">
363-
Tab 5
364-
</Heading>
365-
<Text>
366-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
367-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
368-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
369-
nisi ut aliquip ex{' '}
370-
</Text>
371-
</div>
372-
</TabGroup.Tab>
373-
374-
<TabGroup.Tab title="Tab Title 6">
375-
<TabGroup.Tab.Button>
376-
{({ isActive, title }) => (
377-
<IconTab
378-
icon={active ? 'person' : 'people'}
379-
isActive={isActive}
380-
title={title}
381-
/>
382-
)}
383-
</TabGroup.Tab.Button>
384-
<div className="max-w-xl">
385-
<Heading className="mb-6" size="h3">
386-
Tab 6
387-
</Heading>
388-
<Text>
389-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
390-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
391-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
392-
nisi ut aliquip ex{' '}
393-
</Text>
394-
</div>
395-
</TabGroup.Tab>
396-
</TabGroup>
397-
`,
398-
},
399-
},
400-
},
401-
args: {
402-
children: (
403-
<>
404-
<TabGroup.Tab title="Tab Title 1">
405-
<TabGroup.Tab.Button>
406-
{({ isActive, title }) => (
407-
<IconTab isActive={isActive} title={title} />
408-
)}
409-
</TabGroup.Tab.Button>
410-
<div className="max-w-xl">
411-
<Heading as="h3" className="mb-6">
412-
Tab 1
413-
</Heading>
414-
<Text>
415-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
416-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
417-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
418-
nisi ut aliquip ex{' '}
419-
</Text>
420-
</div>
421-
</TabGroup.Tab>
422-
423-
<TabGroup.Tab title="Tab Title 2">
424-
<TabGroup.Tab.Button>
425-
{({ isActive, title }) => (
426-
<IconTab isActive={isActive} title={title} />
427-
)}
428-
</TabGroup.Tab.Button>
429-
<div className="max-w-xl">
430-
<Heading as="h3" className="mb-6">
431-
Tab 2
432-
</Heading>
433-
<Text>
434-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
435-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
436-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
437-
nisi ut aliquip ex{' '}
438-
</Text>
439-
</div>
440-
</TabGroup.Tab>
441-
442-
<TabGroup.Tab title="Tab Title 3">
443-
<TabGroup.Tab.Button>
444-
{({ isActive, title }) => (
445-
<IconTab isActive={isActive} title={title} />
446-
)}
447-
</TabGroup.Tab.Button>
448-
<div className="max-w-xl">
449-
<Heading as="h3" className="mb-6">
450-
Tab 3
451-
</Heading>
452-
<Text>
453-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
454-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
455-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
456-
nisi ut aliquip ex{' '}
457-
</Text>
458-
</div>
459-
</TabGroup.Tab>
460-
461-
<TabGroup.Tab title="Tab Title 4">
462-
<TabGroup.Tab.Button>
463-
{({ isActive, title }) => (
464-
<IconTab isActive={isActive} title={title} />
465-
)}
466-
</TabGroup.Tab.Button>
467-
<div className="max-w-xl">
468-
<Heading as="h3" className="mb-6">
469-
Tab 4
470-
</Heading>
471-
<Text>
472-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
473-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
474-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
475-
nisi ut aliquip ex{' '}
476-
</Text>
477-
</div>
478-
</TabGroup.Tab>
479-
480-
<TabGroup.Tab title="Tab Title 5">
481-
<TabGroup.Tab.Button>
482-
{({ isActive, title }) => (
483-
<IconTab isActive={isActive} title={title} />
484-
)}
485-
</TabGroup.Tab.Button>
486-
<div className="max-w-xl">
487-
<Heading as="h3" className="mb-6">
488-
Tab 5
489-
</Heading>
490-
<Text>
491-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
492-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
493-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
494-
nisi ut aliquip ex{' '}
495-
</Text>
496-
</div>
497-
</TabGroup.Tab>
498-
499-
<TabGroup.Tab title="Tab Title 6">
500-
<TabGroup.Tab.Button>
501-
{({ isActive, title }) => (
502-
<IconTab isActive={isActive} title={title} />
503-
)}
504-
</TabGroup.Tab.Button>
505-
<div className="max-w-xl">
506-
<Heading as="h3" className="mb-6">
507-
Tab 6
508-
</Heading>
509-
<Text>
510-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
511-
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
512-
enim ad minim veniam, quis nostrud exercitation ullamco laboris
513-
nisi ut aliquip ex{' '}
514-
</Text>
515-
</div>
516-
</TabGroup.Tab>
517-
</>
518-
),
519-
},
520-
};
521-
522239
/**
523240
* For Chromatic visual regression testing of the masks on both sides of the TabGroup. Currently does not work properly on local.
524241
*/

0 commit comments

Comments
 (0)