@primer/components 0.0.0-202191515130 → 0.0.0-202191517561

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 (75) hide show
  1. package/CHANGELOG.md +5 -13
  2. package/codemods/deprecateUtilityComponents.js +1 -1
  3. package/dist/browser.esm.js +755 -755
  4. package/dist/browser.esm.js.map +1 -1
  5. package/dist/browser.umd.js +756 -756
  6. package/dist/browser.umd.js.map +1 -1
  7. package/lib/ActionList/Item.js +1 -1
  8. package/lib/BaseStyles.js +1 -1
  9. package/lib/BorderBox.js +1 -1
  10. package/lib/Caret.js +2 -2
  11. package/lib/Dialog.js +1 -1
  12. package/lib/Flash.js +16 -16
  13. package/lib/Label.js +1 -1
  14. package/lib/ProgressBar.js +1 -1
  15. package/lib/StateLabel.js +19 -13
  16. package/lib/Token/_RemoveTokenButton.js +1 -1
  17. package/lib/index.d.ts +0 -1
  18. package/lib/index.js +0 -8
  19. package/lib/theme-preval.js +3105 -375
  20. package/lib/utils/testing.d.ts +493 -50
  21. package/lib-esm/ActionList/Item.js +1 -1
  22. package/lib-esm/BaseStyles.js +1 -1
  23. package/lib-esm/BorderBox.js +1 -1
  24. package/lib-esm/Caret.js +2 -2
  25. package/lib-esm/Dialog.js +1 -1
  26. package/lib-esm/Flash.js +16 -16
  27. package/lib-esm/Label.js +1 -1
  28. package/lib-esm/ProgressBar.js +1 -1
  29. package/lib-esm/StateLabel.js +19 -13
  30. package/lib-esm/Token/_RemoveTokenButton.js +1 -1
  31. package/lib-esm/index.d.ts +0 -1
  32. package/lib-esm/index.js +0 -1
  33. package/lib-esm/theme-preval.js +3105 -375
  34. package/lib-esm/utils/testing.d.ts +493 -50
  35. package/package.json +3 -3
  36. package/lib/ActionList2/Description.d.ts +0 -5
  37. package/lib/ActionList2/Description.js +0 -54
  38. package/lib/ActionList2/Divider.d.ts +0 -8
  39. package/lib/ActionList2/Divider.js +0 -42
  40. package/lib/ActionList2/Group.d.ts +0 -8
  41. package/lib/ActionList2/Group.js +0 -39
  42. package/lib/ActionList2/Header.d.ts +0 -26
  43. package/lib/ActionList2/Header.js +0 -55
  44. package/lib/ActionList2/Item.d.ts +0 -53
  45. package/lib/ActionList2/Item.js +0 -188
  46. package/lib/ActionList2/List.d.ts +0 -18
  47. package/lib/ActionList2/List.js +0 -52
  48. package/lib/ActionList2/Selection.d.ts +0 -5
  49. package/lib/ActionList2/Selection.js +0 -67
  50. package/lib/ActionList2/Visuals.d.ts +0 -12
  51. package/lib/ActionList2/Visuals.js +0 -91
  52. package/lib/ActionList2/hacks.d.ts +0 -30
  53. package/lib/ActionList2/hacks.js +0 -38
  54. package/lib/ActionList2/index.d.ts +0 -26
  55. package/lib/ActionList2/index.js +0 -36
  56. package/lib-esm/ActionList2/Description.d.ts +0 -5
  57. package/lib-esm/ActionList2/Description.js +0 -38
  58. package/lib-esm/ActionList2/Divider.d.ts +0 -8
  59. package/lib-esm/ActionList2/Divider.js +0 -30
  60. package/lib-esm/ActionList2/Group.d.ts +0 -8
  61. package/lib-esm/ActionList2/Group.js +0 -29
  62. package/lib-esm/ActionList2/Header.d.ts +0 -26
  63. package/lib-esm/ActionList2/Header.js +0 -45
  64. package/lib-esm/ActionList2/Item.d.ts +0 -53
  65. package/lib-esm/ActionList2/Item.js +0 -185
  66. package/lib-esm/ActionList2/List.d.ts +0 -18
  67. package/lib-esm/ActionList2/List.js +0 -42
  68. package/lib-esm/ActionList2/Selection.d.ts +0 -5
  69. package/lib-esm/ActionList2/Selection.js +0 -50
  70. package/lib-esm/ActionList2/Visuals.d.ts +0 -12
  71. package/lib-esm/ActionList2/Visuals.js +0 -68
  72. package/lib-esm/ActionList2/hacks.d.ts +0 -30
  73. package/lib-esm/ActionList2/hacks.js +0 -30
  74. package/lib-esm/ActionList2/index.d.ts +0 -26
  75. package/lib-esm/ActionList2/index.js +0 -23
@@ -1,50 +0,0 @@
1
- import React from 'react';
2
- import { CheckIcon } from '@primer/octicons-react';
3
- import { useTheme } from '../ThemeProvider';
4
- import { ListContext } from './List';
5
- import { LeadingVisualContainer } from './Visuals';
6
- export const Selection = ({
7
- selected,
8
- disabled
9
- }) => {
10
- const {
11
- selectionVariant
12
- } = React.useContext(ListContext);
13
- const {
14
- theme
15
- } = useTheme();
16
- if (typeof selected === 'undefined') return null;
17
-
18
- if (selectionVariant === 'single') {
19
- return /*#__PURE__*/React.createElement(LeadingVisualContainer, null, selected && /*#__PURE__*/React.createElement(CheckIcon, {
20
- fill: theme === null || theme === void 0 ? void 0 : theme.colors.text.primary
21
- }));
22
- }
23
-
24
- if (selectionVariant === 'multiple') {
25
- /**
26
- * readOnly is required because we are doing a one-way bind to `checked`
27
- * aria-readonly="false" tells screen that they can still interact with the checkbox
28
- * TODO: not sure if disabled & aria-label be here or should we apply it on the instance as props
29
- * TODO: aria-label should come from the text part of the slot
30
- */
31
- return /*#__PURE__*/React.createElement(LeadingVisualContainer, {
32
- sx: {
33
- input: {
34
- margin: 0,
35
- pointerEvents: 'none'
36
- }
37
- }
38
- }, /*#__PURE__*/React.createElement("input", {
39
- type: "checkbox",
40
- checked: selected,
41
- disabled: disabled,
42
- "aria-label": "TODO",
43
- tabIndex: -1,
44
- readOnly: true,
45
- "aria-readonly": "false"
46
- }));
47
- }
48
-
49
- return null;
50
- };
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { SxProp } from '../sx';
3
- import { ItemProps } from './Item';
4
- declare type VisualProps = Pick<ItemProps, 'variant' | 'disabled' | 'sx'> & {
5
- children: React.ReactNode;
6
- };
7
- export declare const LeadingVisualContainer: React.FC<SxProp>;
8
- export declare type LeadingVisualProps = VisualProps;
9
- export declare const LeadingVisual: React.FC<VisualProps>;
10
- export declare type TrailingVisualProps = VisualProps;
11
- export declare const TrailingVisual: React.FC<VisualProps>;
12
- export {};
@@ -1,68 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import React from 'react';
4
- import Box from '../Box';
5
- import { get } from '../constants';
6
- import { ItemContext, getVariantStyles } from './Item';
7
- export const LeadingVisualContainer = ({
8
- sx = {},
9
- ...props
10
- }) => {
11
- return /*#__PURE__*/React.createElement(Box, _extends({
12
- as: "span",
13
- sx: {
14
- height: '20px',
15
- // match height of text row
16
- minWidth: get('space.3'),
17
- maxWidth: '20px',
18
- // square (same as height)
19
- display: 'flex',
20
- justifyContent: 'center',
21
- alignItems: 'center',
22
- flexShrink: 0,
23
- marginRight: 2,
24
- ...sx
25
- }
26
- }, props));
27
- };
28
- LeadingVisualContainer.displayName = "LeadingVisualContainer";
29
- export const LeadingVisual = ({
30
- variant,
31
- disabled,
32
- sx = {},
33
- ...props
34
- }) => {
35
- const {
36
- registerSlot
37
- } = React.useContext(ItemContext);
38
- registerSlot('LeadingVisual', /*#__PURE__*/React.createElement(LeadingVisualContainer, _extends({
39
- sx: {
40
- color: getVariantStyles(variant, disabled).iconColor,
41
- svg: {
42
- fontSize: 0
43
- },
44
- ...sx
45
- }
46
- }, props), props.children));
47
- return null;
48
- };
49
- export const TrailingVisual = ({
50
- variant,
51
- disabled,
52
- ...props
53
- }) => {
54
- const {
55
- registerSlot
56
- } = React.useContext(ItemContext);
57
- registerSlot('TrailingVisual', /*#__PURE__*/React.createElement(Box, _extends({
58
- as: "span",
59
- sx: {
60
- height: '20px',
61
- // match height of text row
62
- flexShrink: 0,
63
- color: getVariantStyles(variant, disabled).annotationColor,
64
- marginLeft: 2
65
- }
66
- }, props), props.children));
67
- return null;
68
- };
@@ -1,30 +0,0 @@
1
- /**
2
- * These colors are not yet in our default theme.
3
- * TODO: Need to remove this once they are added.
4
- */
5
- export declare const customItemThemes: {
6
- default: {
7
- hover: {
8
- light: string;
9
- dark: string;
10
- dark_dimmed: string;
11
- };
12
- focus: {
13
- light: string;
14
- dark: string;
15
- dark_dimmed: string;
16
- };
17
- };
18
- danger: {
19
- hover: {
20
- light: string;
21
- dark: string;
22
- dark_dimmed: string;
23
- };
24
- focus: {
25
- light: string;
26
- dark: string;
27
- dark_dimmed: string;
28
- };
29
- };
30
- };
@@ -1,30 +0,0 @@
1
- /**
2
- * These colors are not yet in our default theme.
3
- * TODO: Need to remove this once they are added.
4
- */
5
- export const customItemThemes = {
6
- default: {
7
- hover: {
8
- light: 'rgba(46, 77, 108, 0.06)',
9
- dark: 'rgba(201, 206, 212, 0.12)',
10
- dark_dimmed: 'rgba(201, 206, 212, 0.12)'
11
- },
12
- focus: {
13
- light: 'rgba(54, 77, 100, 0.16)',
14
- dark: 'rgba(201, 206, 212, 0.24)',
15
- dark_dimmed: 'rgba(201, 206, 212, 0.24)'
16
- }
17
- },
18
- danger: {
19
- hover: {
20
- light: 'rgba(234, 74, 90, 0.08)',
21
- dark: 'rgba(248, 81, 73, 0.16)',
22
- dark_dimmed: 'rgba(248, 81, 73, 0.16)'
23
- },
24
- focus: {
25
- light: 'rgba(234, 74, 90, 0.14)',
26
- dark: 'rgba(248, 81, 73, 0.24)',
27
- dark_dimmed: 'rgba(248, 81, 73, 0.24)'
28
- }
29
- }
30
- };
@@ -1,26 +0,0 @@
1
- /// <reference types="react" />
2
- import { Group } from './Group';
3
- import { Divider } from './Divider';
4
- export type { ListProps as ActionListProps } from './List';
5
- export type { GroupProps } from './Group';
6
- export type { ItemProps } from './Item';
7
- export type { DescriptionProps } from './Description';
8
- export type { LeadingVisualProps, TrailingVisualProps } from './Visuals';
9
- /**
10
- * Collection of list-related components.
11
- */
12
- export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRefComponent<"ul", import("./List").ListProps> & {
13
- /** Collects related `Items` in an `ActionList`. */
14
- Group: typeof Group;
15
- /** An actionable or selectable `Item` with an optional icon and description. */
16
- Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"li", import("./Item").ItemProps>;
17
- /** Visually separates `Item`s or `Group`s in an `ActionList`. */
18
- Divider: typeof Divider;
19
- Description: import("react").FC<import("./Description").DescriptionProps>;
20
- LeadingVisual: import("react").FC<Pick<import("./Item").ItemProps, "sx" | "disabled" | "variant"> & {
21
- children: import("react").ReactNode;
22
- }>;
23
- TrailingVisual: import("react").FC<Pick<import("./Item").ItemProps, "sx" | "disabled" | "variant"> & {
24
- children: import("react").ReactNode;
25
- }>;
26
- };
@@ -1,23 +0,0 @@
1
- import { List } from './List';
2
- import { Group } from './Group';
3
- import { Item } from './Item';
4
- import { Divider } from './Divider';
5
- import { Description } from './Description';
6
- import { LeadingVisual, TrailingVisual } from './Visuals';
7
-
8
- /**
9
- * Collection of list-related components.
10
- */
11
- export const ActionList = Object.assign(List, {
12
- /** Collects related `Items` in an `ActionList`. */
13
- Group,
14
-
15
- /** An actionable or selectable `Item` with an optional icon and description. */
16
- Item,
17
-
18
- /** Visually separates `Item`s or `Group`s in an `ActionList`. */
19
- Divider,
20
- Description,
21
- LeadingVisual,
22
- TrailingVisual
23
- });