@primer/components 0.0.0-202196142949 → 0.0.0-202196184858

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 (12) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/lib/Token/IssueLabelToken.js +15 -14
  3. package/lib/Token/ProfileToken.js +4 -4
  4. package/lib/Token/Token.js +4 -3
  5. package/lib/Token/_RemoveTokenButton.d.ts +1 -1
  6. package/lib/Token/_RemoveTokenButton.js +7 -5
  7. package/lib-esm/Token/IssueLabelToken.js +15 -14
  8. package/lib-esm/Token/ProfileToken.js +4 -4
  9. package/lib-esm/Token/Token.js +4 -3
  10. package/lib-esm/Token/_RemoveTokenButton.d.ts +1 -1
  11. package/lib-esm/Token/_RemoveTokenButton.js +4 -3
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @primer/components
2
2
 
3
- ## 0.0.0-202196142949
3
+ ## 0.0.0-202196184858
4
4
 
5
5
  ### Minor Changes
6
6
 
package/lib/Token/IssueLabelToken.js CHANGED
@@ -54,7 +54,6 @@ const IssueLabelToken = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef
54
54
  onRemove,
55
55
  id,
56
56
  isSelected,
57
- ref,
58
57
  text,
59
58
  size,
60
59
  hideRemoveButton,
@@ -78,19 +77,19 @@ const IssueLabelToken = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef
78
77
  };
79
78
 
80
79
  const labelStyles = (0, _react.useMemo)(() => {
81
- const [r, g, b, _rgbA] = (0, _color2k.parseToRgba)(fillColor);
82
- const [h, s, l, _hslA] = (0, _color2k.parseToHsla)(fillColor); // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
80
+ const [r, g, b] = (0, _color2k.parseToRgba)(fillColor);
81
+ const [h, s, l] = (0, _color2k.parseToHsla)(fillColor); // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
83
82
  // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
84
83
 
85
84
  return {
86
- ['--label-r']: String(r),
87
- ['--label-g']: String(g),
88
- ['--label-b']: String(b),
89
- ['--label-h']: String(Math.round(h)),
90
- ['--label-s']: String(Math.round(s * 100)),
91
- ['--label-l']: String(Math.round(l * 100)),
92
- ['--perceived-lightness']: 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
93
- ['--lightness-switch']: 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
85
+ '--label-r': String(r),
86
+ '--label-g': String(g),
87
+ '--label-b': String(b),
88
+ '--label-h': String(Math.round(h)),
89
+ '--label-s': String(Math.round(s * 100)),
90
+ '--label-l': String(Math.round(l * 100)),
91
+ '--perceived-lightness': 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
92
+ '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
94
93
  paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
95
94
  position: 'relative',
96
95
  ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles),
@@ -114,16 +113,17 @@ const IssueLabelToken = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef
114
113
  }
115
114
  } : {})
116
115
  };
117
- }, [colorScheme, fillColor, isSelected]);
116
+ }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]);
118
117
  return /*#__PURE__*/_react.default.createElement(_TokenBase.default, _extends({
119
118
  onRemove: onRemove,
120
119
  id: id === null || id === void 0 ? void 0 : id.toString(),
121
120
  isSelected: isSelected,
122
- ref: forwardedRef,
123
121
  text: text,
124
122
  size: size,
125
123
  sx: labelStyles
126
- }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest), /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
124
+ }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
125
+ ref: forwardedRef
126
+ }), /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
127
127
  borderOffset: tokenBorderWidthPx,
128
128
  onClick: onRemoveClick,
129
129
  size: size,
@@ -139,5 +139,6 @@ IssueLabelToken.defaultProps = {
139
139
  fillColor: '#999',
140
140
  size: _TokenBase.defaultTokenSize
141
141
  };
142
+ IssueLabelToken.displayName = 'IssueLabelToken';
142
143
  var _default = IssueLabelToken;
143
144
  exports.default = _default;
package/lib/Token/ProfileToken.js CHANGED
@@ -28,11 +28,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
28
28
  const ProfileToken = /*#__PURE__*/(0, _react.forwardRef)(({
29
29
  avatarSrc,
30
30
  id,
31
- ref,
32
31
  size,
33
32
  ...rest
34
33
  }, forwardedRef) => {
35
- console.log('ProfileToken rest', rest);
36
34
  return /*#__PURE__*/_react.default.createElement(_Token.default, _extends({
37
35
  leadingVisual: () => /*#__PURE__*/_react.default.createElement(_.Avatar, {
38
36
  src: avatarSrc,
@@ -40,14 +38,16 @@ const ProfileToken = /*#__PURE__*/(0, _react.forwardRef)(({
40
38
  }),
41
39
  size: size,
42
40
  id: id === null || id === void 0 ? void 0 : id.toString(),
43
- ref: forwardedRef,
44
41
  sx: {
45
42
  paddingLeft: (0, _constants.get)('space.1')
46
43
  }
47
- }, rest));
44
+ }, rest, {
45
+ ref: forwardedRef
46
+ }));
48
47
  });
49
48
  ProfileToken.defaultProps = {
50
49
  size: _TokenBase.defaultTokenSize
51
50
  };
51
+ ProfileToken.displayName = 'ProfileToken';
52
52
  var _default = ProfileToken;
53
53
  exports.default = _default;
package/lib/Token/Token.js CHANGED
@@ -46,7 +46,6 @@ const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
46
46
  onRemove,
47
47
  id,
48
48
  leadingVisual: LeadingVisual,
49
- ref,
50
49
  text,
51
50
  size,
52
51
  hideRemoveButton,
@@ -71,10 +70,11 @@ const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
71
70
  hideRemoveButton: hideRemoveButton || !onRemove,
72
71
  id: id === null || id === void 0 ? void 0 : id.toString(),
73
72
  text: text,
74
- ref: forwardedRef,
75
73
  size: size,
76
74
  isTokenInteractive: (0, _TokenBase.isTokenInteractive)(props)
77
- }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, null, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
75
+ }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
76
+ ref: forwardedRef
77
+ }), LeadingVisual ? /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, null, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)) : null, /*#__PURE__*/_react.default.createElement(_TokenTextContainer.default, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/_react.default.createElement(_RemoveTokenButton.default, {
78
78
  borderOffset: tokenBorderWidthPx,
79
79
  onClick: onRemoveClick,
80
80
  size: size,
@@ -86,6 +86,7 @@ const Token = /*#__PURE__*/(0, _react.forwardRef)((props, forwardedRef) => {
86
86
  } : {}
87
87
  }) : null);
88
88
  });
89
+ Token.displayName = 'Token';
89
90
  Token.defaultProps = {
90
91
  size: _TokenBase.defaultTokenSize
91
92
  };
package/lib/Token/_RemoveTokenButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { SxProp } from '../sx';
3
3
  import { ComponentProps } from '../utils/types';
4
4
  import { TokenSizeKeys } from './TokenBase';
package/lib/Token/_RemoveTokenButton.js CHANGED
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
+ var _react = _interopRequireDefault(require("react"));
9
+
8
10
  var _octiconsReact = require("@primer/octicons-react");
9
11
 
10
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -43,7 +45,7 @@ const variants = (0, _styledSystem.variant)({
43
45
  }
44
46
  });
45
47
 
46
- const getTokenButtonIconSize = variant => parseInt(_TokenBase.tokenSizes[variant || _TokenBase.defaultTokenSize], 10) * 0.75;
48
+ const getTokenButtonIconSize = size => parseInt(_TokenBase.tokenSizes[size || _TokenBase.defaultTokenSize], 10) * 0.75;
47
49
 
48
50
  const StyledTokenButton = _styledComponents.default.span.withConfig({
49
51
  displayName: "_RemoveTokenButton__StyledTokenButton",
@@ -54,15 +56,15 @@ const RemoveTokenButton = ({
54
56
  'aria-label': ariaLabel,
55
57
  isParentInteractive,
56
58
  size,
57
- children,
58
59
  ...rest
59
60
  }) => {
60
- return /*#__PURE__*/React.createElement(StyledTokenButton, _extends({
61
+ delete rest.children;
62
+ return /*#__PURE__*/_react.default.createElement(StyledTokenButton, _extends({
61
63
  as: isParentInteractive ? 'span' : 'button',
62
64
  tabIndex: isParentInteractive ? -1 : undefined,
63
- "aria-label": !isParentInteractive ? 'Remove token' : undefined,
65
+ "aria-label": !isParentInteractive ? 'Remove token' : ariaLabel,
64
66
  size: size
65
- }, rest), /*#__PURE__*/React.createElement(_octiconsReact.XIcon, {
67
+ }, rest), /*#__PURE__*/_react.default.createElement(_octiconsReact.XIcon, {
66
68
  size: getTokenButtonIconSize(size)
67
69
  }));
68
70
  };
package/lib-esm/Token/IssueLabelToken.js CHANGED
@@ -35,7 +35,6 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
35
35
  onRemove,
36
36
  id,
37
37
  isSelected,
38
- ref,
39
38
  text,
40
39
  size,
41
40
  hideRemoveButton,
@@ -59,19 +58,19 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
59
58
  };
60
59
 
61
60
  const labelStyles = useMemo(() => {
62
- const [r, g, b, _rgbA] = parseToRgba(fillColor);
63
- const [h, s, l, _hslA] = parseToHsla(fillColor); // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
61
+ const [r, g, b] = parseToRgba(fillColor);
62
+ const [h, s, l] = parseToHsla(fillColor); // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
64
63
  // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
65
64
 
66
65
  return {
67
- ['--label-r']: String(r),
68
- ['--label-g']: String(g),
69
- ['--label-b']: String(b),
70
- ['--label-h']: String(Math.round(h)),
71
- ['--label-s']: String(Math.round(s * 100)),
72
- ['--label-l']: String(Math.round(l * 100)),
73
- ['--perceived-lightness']: 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
74
- ['--lightness-switch']: 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
66
+ '--label-r': String(r),
67
+ '--label-g': String(g),
68
+ '--label-b': String(b),
69
+ '--label-h': String(Math.round(h)),
70
+ '--label-s': String(Math.round(s * 100)),
71
+ '--label-l': String(Math.round(l * 100)),
72
+ '--perceived-lightness': 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
73
+ '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
75
74
  paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
76
75
  position: 'relative',
77
76
  ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles),
@@ -95,16 +94,17 @@ const IssueLabelToken = /*#__PURE__*/forwardRef((props, forwardedRef) => {
95
94
  }
96
95
  } : {})
97
96
  };
98
- }, [colorScheme, fillColor, isSelected]);
97
+ }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]);
99
98
  return /*#__PURE__*/React.createElement(TokenBase, _extends({
100
99
  onRemove: onRemove,
101
100
  id: id === null || id === void 0 ? void 0 : id.toString(),
102
101
  isSelected: isSelected,
103
- ref: forwardedRef,
104
102
  text: text,
105
103
  size: size,
106
104
  sx: labelStyles
107
- }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest), /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
105
+ }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
106
+ ref: forwardedRef
107
+ }), /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
108
108
  borderOffset: tokenBorderWidthPx,
109
109
  onClick: onRemoveClick,
110
110
  size: size,
@@ -120,4 +120,5 @@ IssueLabelToken.defaultProps = {
120
120
  fillColor: '#999',
121
121
  size: defaultTokenSize
122
122
  };
123
+ IssueLabelToken.displayName = 'IssueLabelToken';
123
124
  export default IssueLabelToken;
package/lib-esm/Token/ProfileToken.js CHANGED
@@ -9,11 +9,9 @@ import { Avatar } from '..';
9
9
  const ProfileToken = /*#__PURE__*/forwardRef(({
10
10
  avatarSrc,
11
11
  id,
12
- ref,
13
12
  size,
14
13
  ...rest
15
14
  }, forwardedRef) => {
16
- console.log('ProfileToken rest', rest);
17
15
  return /*#__PURE__*/React.createElement(Token, _extends({
18
16
  leadingVisual: () => /*#__PURE__*/React.createElement(Avatar, {
19
17
  src: avatarSrc,
@@ -21,13 +19,15 @@ const ProfileToken = /*#__PURE__*/forwardRef(({
21
19
  }),
22
20
  size: size,
23
21
  id: id === null || id === void 0 ? void 0 : id.toString(),
24
- ref: forwardedRef,
25
22
  sx: {
26
23
  paddingLeft: get('space.1')
27
24
  }
28
- }, rest));
25
+ }, rest, {
26
+ ref: forwardedRef
27
+ }));
29
28
  });
30
29
  ProfileToken.defaultProps = {
31
30
  size: defaultTokenSize
32
31
  };
32
+ ProfileToken.displayName = 'ProfileToken';
33
33
  export default ProfileToken;
package/lib-esm/Token/Token.js CHANGED
@@ -26,7 +26,6 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
26
26
  onRemove,
27
27
  id,
28
28
  leadingVisual: LeadingVisual,
29
- ref,
30
29
  text,
31
30
  size,
32
31
  hideRemoveButton,
@@ -51,10 +50,11 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
51
50
  hideRemoveButton: hideRemoveButton || !onRemove,
52
51
  id: id === null || id === void 0 ? void 0 : id.toString(),
53
52
  text: text,
54
- ref: forwardedRef,
55
53
  size: size,
56
54
  isTokenInteractive: isTokenInteractive(props)
57
- }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
55
+ }, !hasMultipleActionTargets ? interactiveTokenProps : {}, rest, {
56
+ ref: forwardedRef
57
+ }), LeadingVisual ? /*#__PURE__*/React.createElement(LeadingVisualContainer, null, /*#__PURE__*/React.createElement(LeadingVisual, null)) : null, /*#__PURE__*/React.createElement(TokenTextContainer, hasMultipleActionTargets ? interactiveTokenProps : {}, text), !hideRemoveButton && onRemove ? /*#__PURE__*/React.createElement(RemoveTokenButton, {
58
58
  borderOffset: tokenBorderWidthPx,
59
59
  onClick: onRemoveClick,
60
60
  size: size,
@@ -66,6 +66,7 @@ const Token = /*#__PURE__*/forwardRef((props, forwardedRef) => {
66
66
  } : {}
67
67
  }) : null);
68
68
  });
69
+ Token.displayName = 'Token';
69
70
  Token.defaultProps = {
70
71
  size: defaultTokenSize
71
72
  };
package/lib-esm/Token/_RemoveTokenButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { SxProp } from '../sx';
3
3
  import { ComponentProps } from '../utils/types';
4
4
  import { TokenSizeKeys } from './TokenBase';
package/lib-esm/Token/_RemoveTokenButton.js CHANGED
@@ -1,5 +1,6 @@
1
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
2
 
3
+ import React from 'react';
3
4
  import { XIcon } from '@primer/octicons-react';
4
5
  import styled from 'styled-components';
5
6
  import { variant } from 'styled-system';
@@ -28,7 +29,7 @@ const variants = variant({
28
29
  }
29
30
  });
30
31
 
31
- const getTokenButtonIconSize = variant => parseInt(tokenSizes[variant || defaultTokenSize], 10) * 0.75;
32
+ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenSize], 10) * 0.75;
32
33
 
33
34
  const StyledTokenButton = styled.span.withConfig({
34
35
  displayName: "_RemoveTokenButton__StyledTokenButton",
@@ -39,13 +40,13 @@ const RemoveTokenButton = ({
39
40
  'aria-label': ariaLabel,
40
41
  isParentInteractive,
41
42
  size,
42
- children,
43
43
  ...rest
44
44
  }) => {
45
+ delete rest.children;
45
46
  return /*#__PURE__*/React.createElement(StyledTokenButton, _extends({
46
47
  as: isParentInteractive ? 'span' : 'button',
47
48
  tabIndex: isParentInteractive ? -1 : undefined,
48
- "aria-label": !isParentInteractive ? 'Remove token' : undefined,
49
+ "aria-label": !isParentInteractive ? 'Remove token' : ariaLabel,
49
50
  size: size
50
51
  }, rest), /*#__PURE__*/React.createElement(XIcon, {
51
52
  size: getTokenButtonIconSize(size)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-202196142949",
3
+ "version": "0.0.0-202196184858",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",