@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.
Files changed (71) hide show
  1. package/.eslintrc.json +44 -14
  2. package/CHANGELOG.md +11 -1
  3. package/contributor-docs/CONTRIBUTING.md +2 -2
  4. package/contributor-docs/component-contents-api-patterns.md +5 -4
  5. package/dist/browser.esm.js +130 -130
  6. package/dist/browser.esm.js.map +1 -1
  7. package/dist/browser.umd.js +113 -113
  8. package/dist/browser.umd.js.map +1 -1
  9. package/docs/content/BorderBox.md +1 -1
  10. package/docs/content/Box.md +9 -9
  11. package/docs/content/Breadcrumbs.md +12 -12
  12. package/docs/content/Buttons.md +15 -13
  13. package/docs/content/CircleOcticon.md +1 -1
  14. package/docs/content/CounterLabel.md +5 -3
  15. package/docs/content/Flash.md +6 -4
  16. package/docs/content/Flex.md +6 -6
  17. package/docs/content/FormGroup.md +11 -9
  18. package/docs/content/Grid.md +6 -6
  19. package/docs/content/Label.md +3 -1
  20. package/docs/content/LabelGroup.md +1 -1
  21. package/docs/content/Pagination.md +4 -4
  22. package/docs/content/PointerBox.md +2 -2
  23. package/docs/content/Portal.mdx +13 -8
  24. package/docs/content/Position.md +26 -23
  25. package/docs/content/SelectMenu.md +5 -3
  26. package/docs/content/SideNav.md +5 -5
  27. package/docs/content/StateLabel.md +8 -6
  28. package/docs/content/StyledOcticon.md +4 -2
  29. package/docs/content/Text.md +5 -3
  30. package/docs/content/TextInput.md +5 -3
  31. package/docs/content/Timeline.md +13 -13
  32. package/docs/content/Tooltip.md +1 -1
  33. package/docs/content/Truncate.md +3 -4
  34. package/docs/content/anchoredPosition.mdx +1 -1
  35. package/docs/content/getting-started.md +6 -2
  36. package/docs/content/linting.md +1 -1
  37. package/docs/content/overriding-styles.mdx +15 -13
  38. package/docs/content/primer-theme.md +1 -1
  39. package/docs/content/theming.md +5 -5
  40. package/docs/content/useOnEscapePress.mdx +3 -3
  41. package/docs/content/useOnOutsideClick.mdx +1 -1
  42. package/lib/Breadcrumbs.d.ts +40 -0
  43. package/lib/{Breadcrumb.js → Breadcrumbs.js} +31 -21
  44. package/lib/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
  45. package/lib/__tests__/{Breadcrumb.js → Breadcrumbs.js} +7 -9
  46. package/lib/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
  47. package/lib/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +6 -6
  48. package/lib/index.d.ts +2 -2
  49. package/lib/index.js +8 -2
  50. package/lib-esm/Breadcrumbs.d.ts +40 -0
  51. package/lib-esm/{Breadcrumb.js → Breadcrumbs.js} +28 -19
  52. package/lib-esm/__tests__/{Breadcrumb.d.ts → Breadcrumbs.d.ts} +0 -0
  53. package/lib-esm/__tests__/Breadcrumbs.js +29 -0
  54. package/lib-esm/__tests__/{BreadcrumbItem.d.ts → BreadcrumbsItem.d.ts} +0 -0
  55. package/lib-esm/__tests__/{BreadcrumbItem.js → BreadcrumbsItem.js} +7 -7
  56. package/lib-esm/index.d.ts +2 -2
  57. package/lib-esm/index.js +1 -1
  58. package/migrating.md +4 -4
  59. package/package-lock.json +561 -280
  60. package/package.json +6 -5
  61. package/src/{Breadcrumb.tsx → Breadcrumbs.tsx} +27 -13
  62. package/src/__tests__/Breadcrumbs.tsx +28 -0
  63. package/src/__tests__/{BreadcrumbItem.tsx → BreadcrumbsItem.tsx} +7 -7
  64. package/src/__tests__/__snapshots__/{Breadcrumb.tsx.snap → Breadcrumbs.tsx.snap} +3 -3
  65. package/src/__tests__/__snapshots__/{BreadcrumbItem.tsx.snap → BreadcrumbsItem.tsx.snap} +3 -3
  66. package/src/index.ts +2 -2
  67. package/stats.html +1 -1
  68. package/lib/Breadcrumb.d.ts +0 -23
  69. package/lib-esm/Breadcrumb.d.ts +0 -23
  70. package/lib-esm/__tests__/Breadcrumb.js +0 -31
  71. 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: "Breadcrumb__Wrapper",
13
- componentId: "c1r3ff-0"
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 BreadcrumbBase = styled.nav.withConfig({
16
- displayName: "Breadcrumb__BreadcrumbBase",
17
- componentId: "c1r3ff-1"
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 Breadcrumb({
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(BreadcrumbBase, _extends({
31
- className: classes,
32
- "aria-label": "breadcrumb",
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
- Breadcrumb.displayName = "Breadcrumb";
42
- const BreadcrumbItem = styled.a.attrs(props => ({
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: "Breadcrumb__BreadcrumbItem",
48
- componentId: "c1r3ff-2"
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
- Breadcrumb.displayName = 'Breadcrumb';
51
- BreadcrumbItem.displayName = 'Breadcrumb.Item';
52
- export default Object.assign(Breadcrumb, {
53
- Item: BreadcrumbItem
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
+ */
@@ -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
+ });
@@ -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 { Breadcrumb } from '..';
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('Breadcrumb.Item', () => {
9
+ describe('Breadcrumbs.Item', () => {
10
10
  behavesAsComponent({
11
- Component: Breadcrumb.Item,
11
+ Component: Breadcrumbs.Item,
12
12
  systemPropArray: [COMMON]
13
13
  });
14
14
  it('renders an <a> by default', () => {
15
- expect(render( /*#__PURE__*/React.createElement(Breadcrumb.Item, null)).type).toEqual('a');
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(Breadcrumb.Item, null));
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(Breadcrumb.Item, {
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(Breadcrumb.Item, {
36
+ expect(render( /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
37
37
  as: Link,
38
38
  to: "#"
39
39
  }))).toMatchSnapshot();
@@ -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 './Breadcrumb';
36
- export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';
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 './Breadcrumb';
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
- ```js
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
- ```js
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
- ```js
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
- ```js
61
+ ```
62
62
  npx jscodeshift -t node_modules/primer-react/codemods/v1.js path/to/src
63
63
  ```
64
64