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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy