@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,27 +9,26 @@ import { COMMON, FLEX, get } from './constants';
|
|
9
9
|
import sx from './sx';
|
10
10
|
const SELECTED_CLASS = 'selected';
|
11
11
|
const Wrapper = styled.li.withConfig({
|
12
|
-
displayName: "
|
13
|
-
componentId: "
|
12
|
+
displayName: "Breadcrumbs__Wrapper",
|
13
|
+
componentId: "hwwoo0-0"
|
14
14
|
})(["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;}}"], get('colors.fg.muted'), get('fontSizes.1'));
|
15
|
-
const
|
16
|
-
displayName: "
|
17
|
-
componentId: "
|
15
|
+
const BreadcrumbsBase = styled.nav.withConfig({
|
16
|
+
displayName: "Breadcrumbs__BreadcrumbsBase",
|
17
|
+
componentId: "hwwoo0-1"
|
18
18
|
})(["display:flex;justify-content:space-between;", ";", ";", ";"], COMMON, FLEX, sx);
|
19
19
|
|
20
|
-
function
|
20
|
+
function Breadcrumbs({
|
21
21
|
className,
|
22
22
|
children,
|
23
23
|
theme,
|
24
24
|
...rest
|
25
25
|
}) {
|
26
|
-
const classes = classnames(className, 'Breadcrumb');
|
27
26
|
const wrappedChildren = React.Children.map(children, child => /*#__PURE__*/React.createElement(Wrapper, {
|
28
27
|
theme: theme
|
29
28
|
}, child));
|
30
|
-
return /*#__PURE__*/React.createElement(
|
31
|
-
className:
|
32
|
-
"aria-label": "
|
29
|
+
return /*#__PURE__*/React.createElement(BreadcrumbsBase, _extends({
|
30
|
+
className: className,
|
31
|
+
"aria-label": "Breadcrumbs",
|
33
32
|
theme: theme
|
34
33
|
}, rest), /*#__PURE__*/React.createElement(Box, {
|
35
34
|
as: "ol",
|
@@ -38,17 +37,27 @@ function Breadcrumb({
|
|
38
37
|
}, wrappedChildren));
|
39
38
|
}
|
40
39
|
|
41
|
-
|
42
|
-
const
|
40
|
+
Breadcrumbs.displayName = "Breadcrumbs";
|
41
|
+
const BreadcrumbsItem = styled.a.attrs(props => ({
|
43
42
|
activeClassName: typeof props.to === 'string' ? 'selected' : '',
|
44
43
|
className: classnames(props.selected && SELECTED_CLASS, props.className),
|
45
44
|
'aria-current': props.selected ? 'page' : null
|
46
45
|
})).withConfig({
|
47
|
-
displayName: "
|
48
|
-
componentId: "
|
46
|
+
displayName: "Breadcrumbs__BreadcrumbsItem",
|
47
|
+
componentId: "hwwoo0-2"
|
49
48
|
})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], get('colors.accent.fg'), get('fontSizes.1'), get('colors.fg.default'), COMMON, sx);
|
50
|
-
|
51
|
-
|
52
|
-
export default Object.assign(
|
53
|
-
Item:
|
54
|
-
});
|
49
|
+
Breadcrumbs.displayName = 'Breadcrumbs';
|
50
|
+
BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
|
51
|
+
export default Object.assign(Breadcrumbs, {
|
52
|
+
Item: BreadcrumbsItem
|
53
|
+
});
|
54
|
+
/**
|
55
|
+
* @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
|
56
|
+
*/
|
57
|
+
|
58
|
+
export const Breadcrumb = Object.assign(Breadcrumbs, {
|
59
|
+
Item: BreadcrumbsItem
|
60
|
+
});
|
61
|
+
/**
|
62
|
+
* @deprecated Use the `BreadcrumbsProps` type instead
|
63
|
+
*/
|
File without changes
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Breadcrumbs, Breadcrumb } from '..';
|
3
|
+
import { render, behavesAsComponent, checkExports } from '../utils/testing';
|
4
|
+
import { COMMON } from '../constants';
|
5
|
+
import { render as HTMLRender, cleanup } from '@testing-library/react';
|
6
|
+
import { axe, toHaveNoViolations } from 'jest-axe';
|
7
|
+
import 'babel-polyfill';
|
8
|
+
expect.extend(toHaveNoViolations);
|
9
|
+
describe('Breadcrumbs', () => {
|
10
|
+
behavesAsComponent({
|
11
|
+
Component: Breadcrumbs,
|
12
|
+
systemPropArray: [COMMON]
|
13
|
+
});
|
14
|
+
checkExports('Breadcrumbs', {
|
15
|
+
default: Breadcrumbs,
|
16
|
+
Breadcrumb
|
17
|
+
});
|
18
|
+
it('should have no axe violations', async () => {
|
19
|
+
const {
|
20
|
+
container
|
21
|
+
} = HTMLRender( /*#__PURE__*/React.createElement(Breadcrumbs, null));
|
22
|
+
const results = await axe(container);
|
23
|
+
expect(results).toHaveNoViolations();
|
24
|
+
cleanup();
|
25
|
+
});
|
26
|
+
it('renders a <nav>', () => {
|
27
|
+
expect(render( /*#__PURE__*/React.createElement(Breadcrumbs, null)).type).toEqual('nav');
|
28
|
+
});
|
29
|
+
});
|
File without changes
|
@@ -2,28 +2,28 @@ import { cleanup, render as HTMLRender } from '@testing-library/react';
|
|
2
2
|
import 'babel-polyfill';
|
3
3
|
import { axe, toHaveNoViolations } from 'jest-axe';
|
4
4
|
import React from 'react';
|
5
|
-
import {
|
5
|
+
import { Breadcrumbs } from '..';
|
6
6
|
import { COMMON } from '../constants';
|
7
7
|
import { behavesAsComponent, render } from '../utils/testing';
|
8
8
|
expect.extend(toHaveNoViolations);
|
9
|
-
describe('
|
9
|
+
describe('Breadcrumbs.Item', () => {
|
10
10
|
behavesAsComponent({
|
11
|
-
Component:
|
11
|
+
Component: Breadcrumbs.Item,
|
12
12
|
systemPropArray: [COMMON]
|
13
13
|
});
|
14
14
|
it('renders an <a> by default', () => {
|
15
|
-
expect(render( /*#__PURE__*/React.createElement(
|
15
|
+
expect(render( /*#__PURE__*/React.createElement(Breadcrumbs.Item, null)).type).toEqual('a');
|
16
16
|
});
|
17
17
|
it('should have no axe violations', async () => {
|
18
18
|
const {
|
19
19
|
container
|
20
|
-
} = HTMLRender( /*#__PURE__*/React.createElement(
|
20
|
+
} = HTMLRender( /*#__PURE__*/React.createElement(Breadcrumbs.Item, null));
|
21
21
|
const results = await axe(container);
|
22
22
|
expect(results).toHaveNoViolations();
|
23
23
|
cleanup();
|
24
24
|
});
|
25
25
|
it('respects the "selected" prop', () => {
|
26
|
-
expect(render( /*#__PURE__*/React.createElement(
|
26
|
+
expect(render( /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
|
27
27
|
selected: true
|
28
28
|
}))).toMatchSnapshot();
|
29
29
|
});
|
@@ -33,7 +33,7 @@ describe('Breadcrumb.Item', () => {
|
|
33
33
|
...props
|
34
34
|
}) => /*#__PURE__*/React.createElement("div", props);
|
35
35
|
|
36
|
-
expect(render( /*#__PURE__*/React.createElement(
|
36
|
+
expect(render( /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
|
37
37
|
as: Link,
|
38
38
|
to: "#"
|
39
39
|
}))).toMatchSnapshot();
|
package/lib-esm/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-esm/index.js
CHANGED
@@ -23,7 +23,7 @@ export { default as Avatar } from './Avatar';
|
|
23
23
|
export { default as AvatarPair } from './AvatarPair';
|
24
24
|
export { default as AvatarStack } from './AvatarStack';
|
25
25
|
export { default as BranchName } from './BranchName';
|
26
|
-
export { default as Breadcrumb } from './
|
26
|
+
export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
|
27
27
|
export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
|
28
28
|
export { default as Caret } from './Caret';
|
29
29
|
export { default as CircleBadge } from './CircleBadge';
|
package/migrating.md
CHANGED
@@ -11,7 +11,7 @@
|
|
11
11
|
|
12
12
|
There is a [codemod](#codemods) available to upgrade component identifiers from [v3.x.x-beta](#3-0-0-beta):
|
13
13
|
|
14
|
-
```
|
14
|
+
```
|
15
15
|
npx jscodeshift -t node_modules/@primer/components/codemods/v4.js path/to/src
|
16
16
|
```
|
17
17
|
|
@@ -32,7 +32,7 @@ The following breaking changes must be accounted for manually:
|
|
32
32
|
|
33
33
|
There is a [codemod](#codemods) available to upgrade from [2.x.x-beta](#2-0-0-beta) and updating the package name:
|
34
34
|
|
35
|
-
```
|
35
|
+
```
|
36
36
|
npx jscodeshift -t node_modules/@primer/components/codemods/v3.js path/to/src
|
37
37
|
```
|
38
38
|
|
@@ -48,7 +48,7 @@ We suggest that you rename your components in the above order, since renaming `B
|
|
48
48
|
|
49
49
|
There is a [codemod](#codemods) available to upgrade from [1.x.x-beta](#1-0-0-beta):
|
50
50
|
|
51
|
-
```
|
51
|
+
```
|
52
52
|
npx jscodeshift -t node_modules/primer-react/codemods/v2.js path/to/src
|
53
53
|
```
|
54
54
|
|
@@ -58,7 +58,7 @@ npx jscodeshift -t node_modules/primer-react/codemods/v2.js path/to/src
|
|
58
58
|
|
59
59
|
There is a [codemod](#codemods) available to upgrade from previous versions `0.x.x-beta`:
|
60
60
|
|
61
|
-
```
|
61
|
+
```
|
62
62
|
npx jscodeshift -t node_modules/primer-react/codemods/v1.js path/to/src
|
63
63
|
```
|
64
64
|
|