8000 feat(CTabs): add enclosed variants · coreui/coreui-react@bee8617 · GitHub
[go: up one dir, main page]
Skip to content

Commit bee8617

Browse files
mrholekmrholek
committed
feat(CTabs): add enclosed variants
1 parent 1ad29c6 commit bee8617

File tree

4 files changed

+96
-14
lines changed

4 files changed

+96
-14
lines changed

‎packages/coreui-react/src/components/tabs/CTabList.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface CTabListProps extends HTMLAttributes<HTMLDivElement> {
1717
/**
1818
* Set the nav variant to tabs or pills.
1919
*/
20-
variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
20+
variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border'
2121
}
2222

2323
export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
@@ -39,7 +39,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
3939
const target = event.target as HTMLElement
4040
// eslint-disable-next-line unicorn/prefer-spread
4141
const items: HTMLElement[] = Array.from(
42-
tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
42+
tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)')
4343
)
4444

4545
let nextActiveElement
@@ -51,7 +51,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
5151
items,
5252
target,
5353
event.key === 'ArrowDown' || event.key === 'ArrowRight',
54-
true,
54+
true
5555
)
5656
}
5757

@@ -65,11 +65,12 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
6565
<div
6666
className={classNames(
6767
'nav',
68+
variant === 'enclosed-pills' && 'nav-enclosed', // Enclosed pills variant required for `.nav-enclosed` class
6869
{
6970
[`nav-${layout}`]: layout,
7071
[`nav-${variant}`]: variant,
7172
},
72-
className,
73+
className
7374
)}
7475
role="tablist"
7576
onKeyDown={handleKeydown}
@@ -79,14 +80,21 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
7980
{children}
8081
</div>
8182
)
82-
},
83+
}
8384
)
8485

8586
CTabList.propTypes = {
8687
children: PropTypes.node,
8788
className: PropTypes.string,
8889
layout: PropTypes.oneOf(['fill', 'justified']),
89-
variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
90+
variant: PropTypes.oneOf([
91+
'enclosed',
92+
'enclosed-pills',
93+
'pills',
94+
'tabs',
95+
'underline',
96+
'underline-border',
97+
]),
9098
}
9199

92100
CTabList.displayName = 'CTabList'

‎packages/docs/content/components/tabs/examples/TabsEnclosedExample.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
3+
4+
export const TabsEnclosedExample = () => {
5+
return (
6+
<CTabs defaultActiveItemKey="profile">
7+
<CTabList variant="enclosed">
8+
<CTab itemKey="home">Home</CTab>
9+
<CTab itemKey="profile">Profile</CTab>
10+
<CTab itemKey="contact">Contact</CTab>
11+
<CTab disabled itemKey="disabled">
12+
Disabled
13+
</CTab>
14+
</CTabList>
15+
<CTabContent>
16+
<CTabPanel className="p-3" itemKey="home">
17+
Home tab content
18+
</CTabPanel>
19+
<CTabPanel className="p-3" itemKey="profile">
20+
Profile tab content
21+
</CTabPanel>
22+
<CTabPanel className="p-3" itemKey="contact">
23+
Contact tab content
24+
</CTabPanel>
25+
<CTabPanel className="p-3" itemKey="disabled">
26+
Disabled tab content
27+
</CTabPanel>
28+
</CTabContent>
29+
</CTabs>
30+
)
31+
}

‎packages/docs/content/components/tabs/examples/TabsEnclosedPillsExample.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import { CTab, CTabContent, CTabList, CTabPanel, CTabs } from '@coreui/react'
3+
4+
export const TabsEnclosedPillsExample = () => {
5+
return (
6+
<CTabs defaultActiveItemKey="profile">
7+
<CTabList variant="enclosed-pills">
8+
<CTab itemKey="home">Home</CTab>
9+
<CTab itemKey="profile">Profile</CTab>
10+
<CTab itemKey="contact">Contact</CTab>
11+
<CTab disabled itemKey="disabled">
12+
Disabled
13+
</CTab>
14+
</CTabList>
15+
<CTabContent>
16+
<CTabPanel className="p-3" itemKey="home">
17+
Home tab content
18+
</CTabPanel>
19+
<CTabPanel className="p-3" itemKey="profile">
20+
Profile tab content
21+
</CTabPanel>
22+
<CTabPanel className="p-3" itemKey="contact">
23+
Contact tab content
24+
</CTabPanel>
25+
<CTabPanel className="p-3" itemKey="disabled">
26+
Disabled tab content
27+
</CTabPanel>
28+
</CTabContent>
29+
</CTabs>
30+
)
31+
}

‎packages/docs/content/components/tabs/index.mdx

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ since: 5.1.0
1010

1111
The basic React tabs example uses the `variant="tabs"` props to generate a tabbed interface.
1212

13-
<ExampleSnippet component="TabsExample" componentName="React Spinner" />
13+
<ExampleSnippet component="TabsExample" componentName="React Tabs" />
1414

1515
## Available styles
1616

@@ -20,35 +20,47 @@ Change the style of `<CTabs>`'s component with modifiers and utilities. Mix and
2020

2121
If you don’t provide the `variant` prop, the component will default to a basic style.
2222

23-
<ExampleSnippet component="TabsUnstyledExample" componentName="React Spinner" />
23+
<ExampleSnippet component="TabsUnstyledExample" componentName="React Tabs" />
2424

2525
### Pills
2626

2727
Take that same code, but use `variant="pills"` instead:
2828

29-
<ExampleSnippet component="TabsPillsExample" componentName="React Spinner" />
29+
<ExampleSnippet component="TabsPillsExample" componentName="React Tabs" />
3030

3131
### Underline
3232

3333
Take that same code, but use `variant="underline"` instead:
3434

35-
<ExampleSnippet component="TabsUnderlineExample" componentName="React Spinner" />
35+
<ExampleSnippet component="TabsUnderlineExample" componentName="React Tabs" />
3636

3737
### Underline border
3838

3939
Take that same code, but use `variant="underline-border"` instead:
4040

41-
<ExampleSnippet component="TabsUnderlineBorderExample" componentName="React Spinner" />
41+
<ExampleSnippet component="TabsUnderlineBorderExample" componentName="React Tabs" />
42+
43+
### Enclosed
44+
45+
Use the `variant="enclosed"` class to give your navigation items a subtle border and rounded styling.
46+
47+
<ExampleSnippet component="TabsEnclosedExample" componentName="React Tabs" />
48+
49+
### Enclosed pills
50+
51+
Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
52+
53+
<ExampleSnippet component="TabsEnclosedPillsExample" componentName="React Tabs" />
4254

4355
### Fill and justify
4456

4557
Force your `<CTabs>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
4658

47-
<ExampleSnippet component="TabsUnstyledFillAndJustifyExample" componentName="React Spinner" />
59+
<ExampleSnippet component="TabsUnstyledFillAndJustifyExample" componentName="React Tabs" />
4860

4961
For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width.
5062

51-
<ExampleSnippet component="TabsUnstyledFillAndJustify2Example" componentName="React Spinner" />
63+
<ExampleSnippet component="TabsUnstyledFillAndJustify2Example" componentName="React Tabs" />
5264

5365
Sure! Here's a polished, production-ready **documentation section** (Markdown-style) explaining the **controlled usage** of the `<CTabs>` component, with a clear example:
5466

@@ -68,7 +80,7 @@ This is useful when you need to synchronize the tab state with your application
6880

6981
> 💡 If you prefer the tabs to manage their own state, use `defaultActiveItemKey` instead.
7082
71-
<ExampleSnippet component="TabsControlledExample" componentName="React Spinner" />
83+
<ExampleSnippet component="TabsControlledExample" componentName="React Tabs" />
7284

7385

7486
## Accessibility

0 commit comments

Comments
 (0)
0