@primer/components 29.1.1-rc.0f976d3a → 30.0.0-rc.48fd5c94
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/.eslintrc.json +44 -14
- package/CHANGELOG.md +11 -1
- package/contributor-docs/CONTRIBUTING.md +2 -2
- package/contributor-docs/component-contents-api-patterns.md +5 -4
- package/dist/browser.esm.js +130 -130
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +113 -113
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/BorderBox.md +1 -1
- package/docs/content/Box.md +9 -9
- package/docs/content/Breadcrumbs.md +12 -12
- package/docs/content/Buttons.md +15 -13
- package/docs/content/CircleOcticon.md +1 -1
- package/docs/content/CounterLabel.md +5 -3
- package/docs/content/Flash.md +6 -4
- package/docs/content/Flex.md +6 -6
- package/docs/content/FormGroup.md +11 -9
- package/docs/content/Grid.md +6 -6
- package/docs/content/Label.md +3 -1
- package/docs/content/LabelGroup.md +1 -1
- package/docs/content/Pagination.md +4 -4
- package/docs/content/PointerBox.md +2 -2
- package/docs/content/Portal.mdx +13 -8
- package/docs/content/Position.md +26 -23
- package/docs/content/SelectMenu.md +5 -3
- package/docs/content/SideNav.md +5 -5
- package/docs/content/StateLabel.md +8 -6
- package/docs/content/StyledOcticon.md +4 -2
- package/docs/content/Text.md +5 -3
- package/docs/content/TextInput.md +5 -3
- package/docs/content/Timeline.md +13 -13
- package/docs/content/Tooltip.md +1 -1
- package/docs/content/Truncate.md +3 -4
- package/docs/content/anchoredPosition.mdx +1 -1
- package/docs/content/getting-started.md +6 -2
- package/docs/content/linting.md +1 -1
- package/docs/content/overriding-styles.mdx +15 -13
- package/docs/content/primer-theme.md +1 -1
- package/docs/content/theming.md +5 -5
- package/docs/content/useOnEscapePress.mdx +3 -3
- package/docs/content/useOnOutsideClick.mdx +1 -1
- package/lib/Breadcrumbs.d.ts +40 -0
- package/lib/{Breadcrumb.js → Breadcrumbs.js} +31 -21
- package/lib/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
- package/lib/__tests__/{Breadcrumb.js → Breadcrumbs.js} +7 -9
- package/lib/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
- package/lib/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +6 -6
- package/lib/index.d.ts +2 -2
- package/lib/index.js +8 -2
- package/lib-esm/Breadcrumbs.d.ts +40 -0
- package/lib-esm/{Breadcrumb.js → Breadcrumbs.js} +28 -19
- package/lib-esm/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
- package/lib-esm/__tests__/Breadcrumbs.js +29 -0
- package/lib-esm/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
- package/lib-esm/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +7 -7
- package/lib-esm/index.d.ts +2 -2
- package/lib-esm/index.js +1 -1
- package/migrating.md +4 -4
- package/package-lock.json +561 -280
- package/package.json +6 -5
- package/src/{Breadcrumb.tsx → Breadcrumbs.tsx} +27 -13
- package/src/__tests__/Breadcrumbs.tsx +28 -0
- package/src/__tests__/{BreadcrumbItem.tsx → BreadcrumbsItem.tsx} +7 -7
- package/src/__tests__/__snapshots__/{Breadcrumb.tsx.snap → Breadcrumbs.tsx.snap} +3 -3
- package/src/__tests__/__snapshots__/{BreadcrumbItem.tsx.snap → BreadcrumbsItem.tsx.snap} +3 -3
- package/src/index.ts +2 -2
- package/stats.html +1 -1
- package/lib/Breadcrumb.d.ts +0 -23
- package/lib-esm/Breadcrumb.d.ts +0 -23
- package/lib-esm/__tests__/Breadcrumb.js +0 -31
- package/src/__tests__/Breadcrumb.tsx +0 -31
@@ -9,11 +9,13 @@ TextInput is a form component to add default styling to the native text input.
|
|
9
9
|
## Default example
|
10
10
|
|
11
11
|
```jsx live
|
12
|
-
|
12
|
+
<>
|
13
|
+
<TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
|
13
14
|
|
14
|
-
<TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
|
15
|
+
<TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
|
15
16
|
|
16
|
-
<TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
|
17
|
+
<TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
|
18
|
+
</>
|
17
19
|
```
|
18
20
|
|
19
21
|
## Component props
|
package/docs/content/Timeline.md
CHANGED
@@ -13,13 +13,13 @@ The Timeline.Item component is used to display items on a vertical timeline, con
|
|
13
13
|
<StyledOcticon icon={FlameIcon} />
|
14
14
|
</Timeline.Badge>
|
15
15
|
<Timeline.Body>
|
16
|
-
<Link href="#" sx={{fontWeight: 'bold', color:
|
16
|
+
<Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
|
17
17
|
Monalisa
|
18
18
|
</Link>
|
19
|
-
created one <Link href="#" sx={{fontWeight: 'bold', color:
|
19
|
+
created one <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
|
20
20
|
hot potato
|
21
21
|
</Link>
|
22
|
-
<Link href="#" color="
|
22
|
+
<Link href="#" color="fg.muted" muted>
|
23
23
|
Just now
|
24
24
|
</Link>
|
25
25
|
</Timeline.Body>
|
@@ -50,20 +50,20 @@ of the child `StyledOcticon` if necessary.
|
|
50
50
|
```jsx live
|
51
51
|
<Timeline>
|
52
52
|
<Timeline.Item>
|
53
|
-
<Timeline.Badge sx={{bg:
|
54
|
-
<StyledOcticon icon={FlameIcon} sx={{color:
|
53
|
+
<Timeline.Badge sx={{bg: "danger.emphasis"}}>
|
54
|
+
<StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
|
55
55
|
</Timeline.Badge>
|
56
56
|
<Timeline.Body>Background used when closed events occur</Timeline.Body>
|
57
57
|
</Timeline.Item>
|
58
58
|
<Timeline.Item>
|
59
|
-
<Timeline.Badge sx={{bg:
|
60
|
-
<StyledOcticon icon={FlameIcon} color="
|
59
|
+
<Timeline.Badge sx={{bg: "danger.emphasis"}}>
|
60
|
+
<StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
|
61
61
|
</Timeline.Badge>
|
62
62
|
<Timeline.Body>Background when opened or passed events occur</Timeline.Body>
|
63
63
|
</Timeline.Item>
|
64
64
|
<Timeline.Item>
|
65
|
-
<Timeline.Badge sx={{bg:
|
66
|
-
<StyledOcticon icon={FlameIcon} sx={{color:
|
65
|
+
<Timeline.Badge sx={{bg: "danger.emphasis"}}>
|
66
|
+
<StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
|
67
67
|
</Timeline.Badge>
|
68
68
|
<Timeline.Body>Background used when pull requests are merged</Timeline.Body>
|
69
69
|
</Timeline.Item>
|
@@ -98,15 +98,15 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
|
|
98
98
|
```jsx live
|
99
99
|
<Timeline>
|
100
100
|
<Timeline.Item>
|
101
|
-
<Timeline.Badge sx={{bg:
|
102
|
-
<StyledOcticon icon={FlameIcon} color="
|
101
|
+
<Timeline.Badge sx={{bg: "danger.emphasis"}}>
|
102
|
+
<StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
|
103
103
|
</Timeline.Badge>
|
104
104
|
<Timeline.Body>Background used when closed events occur</Timeline.Body>
|
105
105
|
</Timeline.Item>
|
106
106
|
<Timeline.Break />
|
107
107
|
<Timeline.Item>
|
108
|
-
<Timeline.Badge sx={{bg:
|
109
|
-
<StyledOcticon icon={FlameIcon} sx={{color:
|
108
|
+
<Timeline.Badge sx={{bg: "success.emphasis"}}>
|
109
|
+
<StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
|
110
110
|
</Timeline.Badge>
|
111
111
|
<Timeline.Body>Background when opened or passed events occur</Timeline.Body>
|
112
112
|
</Timeline.Item>
|
package/docs/content/Tooltip.md
CHANGED
@@ -15,7 +15,7 @@ Before adding a tooltip, please consider: Is this information essential and nece
|
|
15
15
|
## Default example
|
16
16
|
|
17
17
|
```jsx live
|
18
|
-
<Box borderWidth="1px" borderStyle="solid" borderColor="border.
|
18
|
+
<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
|
19
19
|
<Tooltip aria-label="Hello, Tooltip!">Text with a tooltip</Tooltip>
|
20
20
|
</Box>
|
21
21
|
```
|
package/docs/content/Truncate.md
CHANGED
@@ -29,10 +29,9 @@ You can override the maximum width of the truncated text with the `maxWidth` pro
|
|
29
29
|
You can use the `inline` boolean prop for inline (or inline-block) elements with a fixed maximum width (default: 125px).
|
30
30
|
|
31
31
|
```jsx live
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
</Truncate>
|
32
|
+
<Truncate as="strong" inline title="branch-name-that-is-really-long">
|
33
|
+
Some text with a branch-name-that-is-really-long
|
34
|
+
</Truncate>
|
36
35
|
```
|
37
36
|
|
38
37
|
## Expandable example
|
@@ -130,7 +130,7 @@ export const AnchoredPositionExample = () => {
|
|
130
130
|
>
|
131
131
|
Floating element
|
132
132
|
</Box>
|
133
|
-
<Box borderWidth='1px' borderStyle='solid' borderColor='border.
|
133
|
+
<Box borderWidth='1px' borderStyle='solid' borderColor='border.default' borderRadius={2} width={400} height={75} ref={anchorElementRef as React.RefObject<HTMLDivElement>}>
|
134
134
|
Anchor Element
|
135
135
|
</Box>
|
136
136
|
</div>
|
@@ -19,7 +19,9 @@ You can now import Primer React from the main package module:
|
|
19
19
|
```javascript
|
20
20
|
// using import syntax
|
21
21
|
import {Box, Flex} from '@primer/components'
|
22
|
+
```
|
22
23
|
|
24
|
+
```javascript
|
23
25
|
// using require syntax
|
24
26
|
const {Box, Flex} = require('@primer/components')
|
25
27
|
```
|
@@ -40,7 +42,9 @@ Module bundlers that use ECMAScript modules (ESM) will automatically tree-shake
|
|
40
42
|
// using import syntax
|
41
43
|
import Box from '@primer/components/lib/Box'
|
42
44
|
import Flex from '@primer/components/lib/Flex'
|
45
|
+
```
|
43
46
|
|
47
|
+
```javascript
|
44
48
|
// using require syntax
|
45
49
|
const Box = require('@primer/components/lib/Box')
|
46
50
|
const Flex = require('@primer/components/lib/Flex')
|
@@ -83,7 +87,7 @@ In order to set baseline color, font-family, and line-heights across your projec
|
|
83
87
|
```jsx
|
84
88
|
import {BaseStyles, Box, Heading} from '@primer/components'
|
85
89
|
|
86
|
-
export default
|
90
|
+
export default () => (
|
87
91
|
<BaseStyles>
|
88
92
|
<Box m={4}>
|
89
93
|
<Heading mb={2}>Hello, world!</Heading>
|
@@ -115,7 +119,7 @@ Ever since `@types/styled-components` version `4.1.19`, it has had a dependency
|
|
115
119
|
|
116
120
|
You may run into this conflict even if you're not importing anything from `react-native` or don't have it installed. This is because some package managers hoist packages to the top-level `node_modules` folder, and the TypeScript compiler automatically includes types from all folders in `node_modules/@types` by default.
|
117
121
|
|
118
|
-
The TypeScript compiler allows you to opt-out of this behavior [using the `typeRoots` and `types` configuration options](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types), and the best solution for this error — for now —
|
122
|
+
The TypeScript compiler allows you to opt-out of this behavior [using the `typeRoots` and `types` configuration options](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types), and the best solution for this error — for now — seems to be to opt out the automatic inclusion of `node_modules/@types` and instead list the types you want to be included individually.
|
119
123
|
|
120
124
|
In your `tsconfig.json`, set the `types` array under the `compilerOptions` like so:
|
121
125
|
|
package/docs/content/linting.md
CHANGED
@@ -23,7 +23,7 @@ description: Primer React offers an ESLint plugin to enforce best practices and
|
|
23
23
|
|
24
24
|
2. In your [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files), extend the recommended Primer React ESLint config:
|
25
25
|
|
26
|
-
```
|
26
|
+
```json
|
27
27
|
{
|
28
28
|
"extends": [
|
29
29
|
// ...
|
@@ -18,17 +18,19 @@ The `sx` prop provides a lot of power, which means it is an easy tool to abuse.
|
|
18
18
|
This example demonstrates applying a bottom border to `Heading`, a component that does not receive `BORDER` system props. The `borderBottomWidth` value comes from `theme.borderWidths` and `borderBottomColor` comes from `theme.colors`.
|
19
19
|
|
20
20
|
```jsx live
|
21
|
-
|
21
|
+
<>
|
22
|
+
<Heading pb={2}>Heading</Heading>
|
22
23
|
|
23
|
-
<Heading
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
</Heading>
|
24
|
+
<Heading
|
25
|
+
pb={2}
|
26
|
+
sx={{
|
27
|
+
borderBottomWidth: 1,
|
28
|
+
borderBottomColor: 'border.primary',
|
29
|
+
borderBottomStyle: 'solid'
|
30
|
+
}}>
|
31
|
+
Heading with bottom border
|
32
|
+
</Heading>
|
33
|
+
</>
|
32
34
|
```
|
33
35
|
|
34
36
|
## Responsive values
|
@@ -39,7 +41,7 @@ Just like [values passed to system props](https://styled-system.com/responsive-s
|
|
39
41
|
<Box
|
40
42
|
borderWidth="1px"
|
41
43
|
borderStyle="solid"
|
42
|
-
borderColor="border.
|
44
|
+
borderColor="border.default"
|
43
45
|
borderRadius={2}
|
44
46
|
p={2}
|
45
47
|
sx={{
|
@@ -59,7 +61,7 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
|
|
59
61
|
sx={{
|
60
62
|
'> *': {
|
61
63
|
borderWidth: 1,
|
62
|
-
borderColor:
|
64
|
+
borderColor: "border.default",
|
63
65
|
borderStyle: 'solid',
|
64
66
|
borderBottomWidth: 0,
|
65
67
|
padding: 2,
|
@@ -67,7 +69,7 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
|
|
67
69
|
borderBottomWidth: 1
|
68
70
|
},
|
69
71
|
':hover': {
|
70
|
-
bg:
|
72
|
+
bg: "neutral.muted"
|
71
73
|
}
|
72
74
|
}
|
73
75
|
}}
|
@@ -51,7 +51,7 @@ There are two ways to change the theme of Primer components:
|
|
51
51
|
import {ThemeProvider} from `styled-components`
|
52
52
|
import {theme} from '@primer/components'
|
53
53
|
|
54
|
-
const customTheme = {
|
54
|
+
const customTheme = {} // Theme overrides
|
55
55
|
|
56
56
|
const App = (props) => {
|
57
57
|
return (
|
package/docs/content/theming.md
CHANGED
@@ -66,8 +66,8 @@ const theme = {
|
|
66
66
|
function App() {
|
67
67
|
return (
|
68
68
|
<ThemeProvider theme={theme}>
|
69
|
-
<Box bg="
|
70
|
-
<Box sx={{bg:
|
69
|
+
<Box bg="canvas.default"></Box>
|
70
|
+
<Box sx={{bg: "canvas.default"}}></Box>
|
71
71
|
</ThemeProvider>
|
72
72
|
)
|
73
73
|
}
|
@@ -84,7 +84,7 @@ import {themeGet} from '@primer/components'
|
|
84
84
|
import styled from 'styled-components'
|
85
85
|
|
86
86
|
const Example = styled.div`
|
87
|
-
background-color: ${themeGet(
|
87
|
+
background-color: ${themeGet("colors.canvas.default")};
|
88
88
|
`
|
89
89
|
```
|
90
90
|
|
@@ -203,8 +203,8 @@ const customTheme = deepmerge(theme, {
|
|
203
203
|
},
|
204
204
|
// Add a new scheme
|
205
205
|
my_scheme_name: {
|
206
|
-
colors: {
|
207
|
-
shadows: {
|
206
|
+
colors: {},
|
207
|
+
shadows: {}
|
208
208
|
}
|
209
209
|
}
|
210
210
|
})
|
@@ -28,11 +28,11 @@ const OverlayDemo = ({onEscape, children}) => {
|
|
28
28
|
function DemoComponent() {
|
29
29
|
const [isOpen, setIsOpen] = React.useState(false)
|
30
30
|
const toggleOverlay = React.useCallback(() => {
|
31
|
-
setIsOpen(!isOpen)
|
32
|
-
})
|
31
|
+
setIsOpen(isOpen => !isOpen)
|
32
|
+
}, [])
|
33
33
|
const closeOverlay = React.useCallback(() => {
|
34
34
|
setIsOpen(false)
|
35
|
-
})
|
35
|
+
}, [])
|
36
36
|
return (
|
37
37
|
<>
|
38
38
|
<Button onClick={toggleOverlay}>toggle</Button>
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import * as History from 'history';
|
2
|
+
import React from 'react';
|
3
|
+
import { SystemCommonProps, SystemFlexProps } from './constants';
|
4
|
+
import { SxProp } from './sx';
|
5
|
+
import { ComponentProps } from './utils/types';
|
6
|
+
declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
|
7
|
+
export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
|
8
|
+
declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
|
9
|
+
declare namespace Breadcrumbs {
|
10
|
+
var displayName: string;
|
11
|
+
}
|
12
|
+
declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
|
13
|
+
to?: History.LocationDescriptor<unknown> | undefined;
|
14
|
+
selected?: boolean | undefined;
|
15
|
+
} & SystemCommonProps & SxProp, never>;
|
16
|
+
export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
|
17
|
+
declare const _default: typeof Breadcrumbs & {
|
18
|
+
Item: import("styled-components").StyledComponent<"a", any, {
|
19
|
+
to?: History.LocationDescriptor<unknown> | undefined;
|
20
|
+
selected?: boolean | undefined;
|
21
|
+
} & SystemCommonProps & SxProp, never>;
|
22
|
+
};
|
23
|
+
export default _default;
|
24
|
+
/**
|
25
|
+
* @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
|
26
|
+
*/
|
27
|
+
export declare const Breadcrumb: typeof Breadcrumbs & {
|
28
|
+
Item: import("styled-components").StyledComponent<"a", any, {
|
29
|
+
to?: History.LocationDescriptor<unknown> | undefined;
|
30
|
+
selected?: boolean | undefined;
|
31
|
+
} & SystemCommonProps & SxProp, never>;
|
32
|
+
};
|
33
|
+
/**
|
34
|
+
* @deprecated Use the `BreadcrumbsProps` type instead
|
35
|
+
*/
|
36
|
+
export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
|
37
|
+
/**
|
38
|
+
* @deprecated Use the `BreadcrumbsItemProps` type instead
|
39
|
+
*/
|
40
|
+
export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.default = void 0;
|
6
|
+
exports.Breadcrumb = exports.default = void 0;
|
7
7
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
9
9
|
|
@@ -24,30 +24,28 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
24
24
|
const SELECTED_CLASS = 'selected';
|
25
25
|
|
26
26
|
const Wrapper = _styledComponents.default.li.withConfig({
|
27
|
-
displayName: "
|
28
|
-
componentId: "
|
27
|
+
displayName: "Breadcrumbs__Wrapper",
|
28
|
+
componentId: "hwwoo0-0"
|
29
29
|
})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'));
|
30
30
|
|
31
|
-
const
|
32
|
-
displayName: "
|
33
|
-
componentId: "
|
31
|
+
const BreadcrumbsBase = _styledComponents.default.nav.withConfig({
|
32
|
+
displayName: "Breadcrumbs__BreadcrumbsBase",
|
33
|
+
componentId: "hwwoo0-1"
|
34
34
|
})(["display:flex;justify-content:space-between;", ";", ";", ";"], _constants.COMMON, _constants.FLEX, _sx.default);
|
35
35
|
|
36
|
-
function
|
36
|
+
function Breadcrumbs({
|
37
37
|
className,
|
38
38
|
children,
|
39
39
|
theme,
|
40
40
|
...rest
|
41
41
|
}) {
|
42
|
-
const classes = (0, _classnames.default)(className, 'Breadcrumb');
|
43
|
-
|
44
42
|
const wrappedChildren = _react.default.Children.map(children, child => /*#__PURE__*/_react.default.createElement(Wrapper, {
|
45
43
|
theme: theme
|
46
44
|
}, child));
|
47
45
|
|
48
|
-
return /*#__PURE__*/_react.default.createElement(
|
49
|
-
className:
|
50
|
-
"aria-label": "
|
46
|
+
return /*#__PURE__*/_react.default.createElement(BreadcrumbsBase, _extends({
|
47
|
+
className: className,
|
48
|
+
"aria-label": "Breadcrumbs",
|
51
49
|
theme: theme
|
52
50
|
}, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
|
53
51
|
as: "ol",
|
@@ -56,22 +54,34 @@ function Breadcrumb({
|
|
56
54
|
}, wrappedChildren));
|
57
55
|
}
|
58
56
|
|
59
|
-
|
57
|
+
Breadcrumbs.displayName = "Breadcrumbs";
|
60
58
|
|
61
|
-
const
|
59
|
+
const BreadcrumbsItem = _styledComponents.default.a.attrs(props => ({
|
62
60
|
activeClassName: typeof props.to === 'string' ? 'selected' : '',
|
63
61
|
className: (0, _classnames.default)(props.selected && SELECTED_CLASS, props.className),
|
64
62
|
'aria-current': props.selected ? 'page' : null
|
65
63
|
})).withConfig({
|
66
|
-
displayName: "
|
67
|
-
componentId: "
|
64
|
+
displayName: "Breadcrumbs__BreadcrumbsItem",
|
65
|
+
componentId: "hwwoo0-2"
|
68
66
|
})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
|
69
67
|
|
70
|
-
|
71
|
-
|
68
|
+
Breadcrumbs.displayName = 'Breadcrumbs';
|
69
|
+
BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
|
70
|
+
|
71
|
+
var _default = Object.assign(Breadcrumbs, {
|
72
|
+
Item: BreadcrumbsItem
|
73
|
+
});
|
74
|
+
/**
|
75
|
+
* @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
|
76
|
+
*/
|
77
|
+
|
72
78
|
|
73
|
-
|
74
|
-
|
79
|
+
exports.default = _default;
|
80
|
+
const Breadcrumb = Object.assign(Breadcrumbs, {
|
81
|
+
Item: BreadcrumbsItem
|
75
82
|
});
|
83
|
+
/**
|
84
|
+
* @deprecated Use the `BreadcrumbsProps` type instead
|
85
|
+
*/
|
76
86
|
|
77
|
-
exports.
|
87
|
+
exports.Breadcrumb = Breadcrumb;
|
File without changes
|
@@ -17,26 +17,24 @@ require("babel-polyfill");
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
18
18
|
|
19
19
|
expect.extend(_jestAxe.toHaveNoViolations);
|
20
|
-
describe('
|
20
|
+
describe('Breadcrumbs', () => {
|
21
21
|
(0, _testing.behavesAsComponent)({
|
22
|
-
Component: _.
|
22
|
+
Component: _.Breadcrumbs,
|
23
23
|
systemPropArray: [_constants.COMMON]
|
24
24
|
});
|
25
|
-
(0, _testing.checkExports)('
|
26
|
-
default: _.
|
25
|
+
(0, _testing.checkExports)('Breadcrumbs', {
|
26
|
+
default: _.Breadcrumbs,
|
27
|
+
Breadcrumb: _.Breadcrumb
|
27
28
|
});
|
28
29
|
it('should have no axe violations', async () => {
|
29
30
|
const {
|
30
31
|
container
|
31
|
-
} = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.
|
32
|
+
} = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumbs, null));
|
32
33
|
const results = await (0, _jestAxe.axe)(container);
|
33
34
|
expect(results).toHaveNoViolations();
|
34
35
|
(0, _react2.cleanup)();
|
35
36
|
});
|
36
37
|
it('renders a <nav>', () => {
|
37
|
-
expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.
|
38
|
-
});
|
39
|
-
it('adds the Breadcrumb class', () => {
|
40
|
-
expect((0, _testing.rendersClass)( /*#__PURE__*/_react.default.createElement(_.Breadcrumb, null), 'Breadcrumb')).toEqual(true);
|
38
|
+
expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Breadcrumbs, null)).type).toEqual('nav');
|
41
39
|
});
|
42
40
|
});
|
File without changes
|
@@ -17,24 +17,24 @@ var _testing = require("../utils/testing");
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
18
18
|
|
19
19
|
expect.extend(_jestAxe.toHaveNoViolations);
|
20
|
-
describe('
|
20
|
+
describe('Breadcrumbs.Item', () => {
|
21
21
|
(0, _testing.behavesAsComponent)({
|
22
|
-
Component: _.
|
22
|
+
Component: _.Breadcrumbs.Item,
|
23
23
|
systemPropArray: [_constants.COMMON]
|
24
24
|
});
|
25
25
|
it('renders an <a> by default', () => {
|
26
|
-
expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.
|
26
|
+
expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, null)).type).toEqual('a');
|
27
27
|
});
|
28
28
|
it('should have no axe violations', async () => {
|
29
29
|
const {
|
30
30
|
container
|
31
|
-
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.
|
31
|
+
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, null));
|
32
32
|
const results = await (0, _jestAxe.axe)(container);
|
33
33
|
expect(results).toHaveNoViolations();
|
34
34
|
(0, _react.cleanup)();
|
35
35
|
});
|
36
36
|
it('respects the "selected" prop', () => {
|
37
|
-
expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.
|
37
|
+
expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, {
|
38
38
|
selected: true
|
39
39
|
}))).toMatchSnapshot();
|
40
40
|
});
|
@@ -44,7 +44,7 @@ describe('Breadcrumb.Item', () => {
|
|
44
44
|
...props
|
45
45
|
}) => /*#__PURE__*/_react2.default.createElement("div", props);
|
46
46
|
|
47
|
-
expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.
|
47
|
+
expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Breadcrumbs.Item, {
|
48
48
|
as: Link,
|
49
49
|
to: "#"
|
50
50
|
}))).toMatchSnapshot();
|
package/lib/index.d.ts
CHANGED
@@ -32,8 +32,8 @@ export { default as AvatarStack } from './AvatarStack';
|
|
32
32
|
export type { AvatarStackProps } from './AvatarStack';
|
33
33
|
export { default as BranchName } from './BranchName';
|
34
34
|
export type { BranchNameProps } from './BranchName';
|
35
|
-
export { default as Breadcrumb } from './
|
36
|
-
export type { BreadcrumbProps, BreadcrumbItemProps } from './
|
35
|
+
export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
|
36
|
+
export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumbs';
|
37
37
|
export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
|
38
38
|
export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
|
39
39
|
export { default as Caret } from './Caret';
|
package/lib/index.js
CHANGED
@@ -177,10 +177,16 @@ Object.defineProperty(exports, "BranchName", {
|
|
177
177
|
return _BranchName.default;
|
178
178
|
}
|
179
179
|
});
|
180
|
+
Object.defineProperty(exports, "Breadcrumbs", {
|
181
|
+
enumerable: true,
|
182
|
+
get: function () {
|
183
|
+
return _Breadcrumbs.default;
|
184
|
+
}
|
185
|
+
});
|
180
186
|
Object.defineProperty(exports, "Breadcrumb", {
|
181
187
|
enumerable: true,
|
182
188
|
get: function () {
|
183
|
-
return
|
189
|
+
return _Breadcrumbs.Breadcrumb;
|
184
190
|
}
|
185
191
|
});
|
186
192
|
Object.defineProperty(exports, "Button", {
|
@@ -510,7 +516,7 @@ var _AvatarStack = _interopRequireDefault(require("./AvatarStack"));
|
|
510
516
|
|
511
517
|
var _BranchName = _interopRequireDefault(require("./BranchName"));
|
512
518
|
|
513
|
-
var
|
519
|
+
var _Breadcrumbs = _interopRequireWildcard(require("./Breadcrumbs"));
|
514
520
|
|
515
521
|
var _Button = _interopRequireWildcard(require("./Button"));
|
516
522
|
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import * as History from 'history';
|
2
|
+
import React from 'react';
|
3
|
+
import { SystemCommonProps, SystemFlexProps } from './constants';
|
4
|
+
import { SxProp } from './sx';
|
5
|
+
import { ComponentProps } from './utils/types';
|
6
|
+
declare const BreadcrumbsBase: import("styled-components").StyledComponent<"nav", any, SystemFlexProps & SystemCommonProps & SxProp, never>;
|
7
|
+
export declare type BreadcrumbsProps = ComponentProps<typeof BreadcrumbsBase>;
|
8
|
+
declare function Breadcrumbs({ className, children, theme, ...rest }: React.PropsWithChildren<BreadcrumbsProps>): JSX.Element;
|
9
|
+
declare namespace Breadcrumbs {
|
10
|
+
var displayName: string;
|
11
|
+
}
|
12
|
+
declare const BreadcrumbsItem: import("styled-components").StyledComponent<"a", any, {
|
13
|
+
to?: History.LocationDescriptor<unknown> | undefined;
|
14
|
+
selected?: boolean | undefined;
|
15
|
+
} & SystemCommonProps & SxProp, never>;
|
16
|
+
export declare type BreadcrumbsItemProps = ComponentProps<typeof BreadcrumbsItem>;
|
17
|
+
declare const _default: typeof Breadcrumbs & {
|
18
|
+
Item: import("styled-components").StyledComponent<"a", any, {
|
19
|
+
to?: History.LocationDescriptor<unknown> | undefined;
|
20
|
+
selected?: boolean | undefined;
|
21
|
+
} & SystemCommonProps & SxProp, never>;
|
22
|
+
};
|
23
|
+
export default _default;
|
24
|
+
/**
|
25
|
+
* @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
|
26
|
+
*/
|
27
|
+
export declare const Breadcrumb: typeof Breadcrumbs & {
|
28
|
+
Item: import("styled-components").StyledComponent<"a", any, {
|
29
|
+
to?: History.LocationDescriptor<unknown> | undefined;
|
30
|
+
selected?: boolean | undefined;
|
31
|
+
} & SystemCommonProps & SxProp, never>;
|
32
|
+
};
|
33
|
+
/**
|
34
|
+
* @deprecated Use the `BreadcrumbsProps` type instead
|
35
|
+
*/
|
36
|
+
export declare type BreadcrumbProps = ComponentProps<typeof BreadcrumbsBase>;
|
37
|
+
/**
|
38
|
+
* @deprecated Use the `BreadcrumbsItemProps` type instead
|
39
|
+
*/
|
40
|
+
export declare type BreadcrumbItemProps = ComponentProps<typeof BreadcrumbsItem>;
|