@capra/core 1.11.0 → 1.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +59 -95
- package/dist/index.d.cts +26 -17
- package/dist/index.d.mts +26 -17
- package/dist/index.mjs +59 -95
- package/dist/style.css +202 -248
- package/docs/core-menu--usage.md +1 -1
- package/docs/core-tabnav--design.md +2 -0
- package/docs/core-tabnav--usage.md +21 -3
- package/docs/history-changelogs-capra-core--docs.md +22 -0
- package/package.json +4 -4
|
@@ -8,7 +8,8 @@ TabNav provides a horizontal or vertical navigation styled as tabs. Tab items ar
|
|
|
8
8
|
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
|
|
9
9
|
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
|
|
10
10
|
| `activeKey` | `string` | No | `--` | Key of the currently active tab (for visual styling). Typically derived from the current URL. |
|
|
11
|
-
| `
|
|
11
|
+
| `onTabPress` | `(key: string) => void` | No | `--` | Callback when a tab link is pressed (before navigation). |
|
|
12
|
+
| `onTabClick` | `(key: string, event: React.MouseEvent) => void` | No | `--` | Callback when a tab link is clicked (before navigation).<br>@deprecated Use `onTabPress` instead. |
|
|
12
13
|
| `items` | `TabNavItemType[]` | Yes | `--` | Tab items configuration. |
|
|
13
14
|
| `tabPlacement` | `(typeof tabNavPlacements)[number]` | No | 'horizontal' | Orientation of the tab bar: horizontal (bottom) or vertical (left).<br>@default 'horizontal' |
|
|
14
15
|
| `centered` | `boolean` | No | false | Whether to center the tabs.<br>@default false |
|
|
@@ -19,7 +20,7 @@ TabNav provides a horizontal or vertical navigation styled as tabs. Tab items ar
|
|
|
19
20
|
## Usage
|
|
20
21
|
|
|
21
22
|
```tsx
|
|
22
|
-
import { TabNav } from '@capra/core';
|
|
23
|
+
import { RouterProvider, TabNav } from '@capra/core';
|
|
23
24
|
|
|
24
25
|
// Basic usage - tab items are links that redirect to URLs
|
|
25
26
|
<TabNav
|
|
@@ -62,4 +63,21 @@ import { TabNav } from '@capra/core';
|
|
|
62
63
|
{ key: 'settings', name: 'Settings', href: '/settings' },
|
|
63
64
|
]}
|
|
64
65
|
/>
|
|
65
|
-
|
|
66
|
+
|
|
67
|
+
// With client-side routing
|
|
68
|
+
<RouterProvider navigate={navigate}>
|
|
69
|
+
<TabNav
|
|
70
|
+
activeKey={currentPath}
|
|
71
|
+
items={[
|
|
72
|
+
{ key: 'overview', name: 'Overview', href: '/overview' },
|
|
73
|
+
{
|
|
74
|
+
key: 'settings',
|
|
75
|
+
name: 'Settings',
|
|
76
|
+
subItems: [{ key: 'profile', name: 'Profile', href: '/settings/profile' }],
|
|
77
|
+
},
|
|
78
|
+
]}
|
|
79
|
+
/>
|
|
80
|
+
</RouterProvider>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
When the app provides `RouterProvider`, `TabNav` passes `href` and the rest of `RoutedLinkProps` through to navigable tabs and sub-items so routing stays client-side.
|
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# History/Changelogs/@capra-core
|
|
2
2
|
|
|
3
|
+
### 1.12.0
|
|
4
|
+
|
|
5
|
+
#### Minor Changes
|
|
6
|
+
|
|
7
|
+
* [1fdb8d2](https://bitbucket.org/cribl/capra-ui/commits/1fdb8d2): Add `TabNav` `onTabPress` for sub-item client-side routing support.
|
|
8
|
+
|
|
9
|
+
#### Patch Changes
|
|
10
|
+
|
|
11
|
+
* [9550263](https://bitbucket.org/cribl/capra-ui/commits/9550263): Fix Menu submenu viewport clipping by enabling popover flip when nested panels would overflow the screen edge.
|
|
12
|
+
* [9550263](https://bitbucket.org/cribl/capra-ui/commits/9550263): Fix Menu leading icon vertical alignment with item labels.
|
|
13
|
+
* [b4285e0](https://bitbucket.org/cribl/capra-ui/commits/b4285e0): Fix menu description text color when disabled.
|
|
14
|
+
* [9550263](https://bitbucket.org/cribl/capra-ui/commits/9550263): Fix Menu danger item icons so leading icons inherit the same semantic foreground color as the label.
|
|
15
|
+
* Updated dependencies [928c9a8](https://bitbucket.org/cribl/capra-ui/commits/928c9a8) — added new icons: AddressBook, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDownLeftAndArrowUpRightToCenter, ArrowTurnDownLeft, ArrowUpRightAndArrowDownLeftFromCenter, ArrowsMaximize, ArrowsMinimize, At, Backward, BackwardStep, BadgeCheck, BagShopping, Ban, Barcode, Bold, Bolt, Book, BookOpen, BoxArchive, BracketsCurly, BriefcaseMedical, Bug, Bullhorn, Bullseye, Car, CaretDownSolid, CaretLeftSolid, CaretRightSolid, CaretUpSolid, CartShopping, ChartEvents, ChartFunnel, ChartMap, ChartScatter, ChartSingle, Check, CircleCheck, CircleCheckSolid, CircleExclamation, CircleInfo, CircleInfoSolid, CirclePlusSolid, CircleQuestion, CircleR, CircleStopSolid, CircleUpFilled, CircleXmarkSolid, Code, CodeBlock, CodeBranch, CodeFork, CodeMerge, CodePullRequest, Compass, Copyright, CriblOutlined, Crown, CupTogo, Database, DiagramSankey, EmptySet, FaceFrown, FaceMeh, FaceSmile, File, FileLines, FilePlusMinus, Fire, Flask, Forward, ForwardStep, GaugeSimple, Gift, GitAlt, Grid2Plus, GripDotsVertical, HardDrive, Headphones, Heart, HeartSolid, HibernatingCloud, Highlighter, Hourglass, IdCard, Image, Italic, Keyboard, Lightbulb, LinkSlash, ListOrdered, ListTree, Lock, Mars, Message, Messages, Microphone, Mobile, MugHot, Notebook, Outbound, Palette, Paperclip, Pause, Play, Print, Qrcode, Robot, RocketLaunch, Scissors, Share, Shirt, SlashForward, Sliders, SlidersUp, SortAlphaAscending, SortAlphaDescending, SortDown, SortDownSolid, SortNumericAscending, SortNumericDescending, SortOutlined, SortUp, SortUpSolid, SpinnerThird, SquareExclamation, SquareExclamationSolid, Star, StarSolid, Store, Strikethrough, Tablet, Tag, ThumbsDown, ThumbsDownSolid, ThumbsUp, ThumbtackAngleFilled, ThumbtackAngleOutlined, Token, Trash, TriangleExclamation, TriangleExclamationSolid, Trophy, Underline, Venus, Video, Volume
|
|
16
|
+
* Updated dependencies [3572a4f](https://bitbucket.org/cribl/capra-ui/commits/3572a4f) — Updated fill color for HibernatingCloud icon
|
|
17
|
+
* @capra/icons\@1.10.0
|
|
18
|
+
|
|
19
|
+
### 1.11.1
|
|
20
|
+
|
|
21
|
+
#### Patch Changes
|
|
22
|
+
|
|
23
|
+
* [d5f21be](https://bitbucket.org/cribl/capra-ui/commits/d5f21be): Add temporary prop to `VerticalNavigation`
|
|
24
|
+
|
|
3
25
|
### 1.11.0
|
|
4
26
|
|
|
5
27
|
#### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capra/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Core React components for the Capra design system",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"react-aria": "^3.48.0",
|
|
37
37
|
"react-aria-components": "^1.17.0",
|
|
38
|
-
"@capra/icons": "^1.
|
|
38
|
+
"@capra/icons": "^1.10.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"clsx": "^2.1.1",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"antd": "4.24.16",
|
|
44
44
|
"storybook": "^10.4.6",
|
|
45
45
|
"tsdown": "^0.22.7",
|
|
46
|
-
"@capra/theme": "^1.4.0",
|
|
47
|
-
"@private/building": "^0.1.0",
|
|
48
46
|
"@private/linting": "^0.0.1",
|
|
47
|
+
"@private/building": "^0.1.0",
|
|
48
|
+
"@capra/theme": "^1.4.0",
|
|
49
49
|
"@private/stories": "^0.0.0",
|
|
50
50
|
"@private/testing": "^0.0.7"
|
|
51
51
|
},
|