@primer/components 0.0.0-20211010162049 → 0.0.0-2021101017443

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 (4) hide show
  1. package/CHANGELOG.md +5 -3
  2. package/lib/ActionList2/Item.js +15 -18
  3. package/lib-esm/ActionList2/Item.js +15 -18
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @primer/components
2
2
 
3
- ## 0.0.0-20211010162049
3
+ ## 0.0.0-2021101017443
4
4
 
5
5
  ### Minor Changes
6
6
 
@@ -10,9 +10,11 @@
10
10
 
11
11
  ### Patch Changes
12
12
 
13
- - Fake entry to force publishing
13
+ - [#1593](https://github.com/primer/react/pull/1593) [`23d632bb`](https://github.com/primer/react/commit/23d632bb6d749929933f1ed7406710eae0bec1fe) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Improve keyboard accessibility with focus styles cross browser
14
14
 
15
- * [#1549](https://github.com/primer/react/pull/1549) [`f565840f`](https://github.com/primer/react/commit/f565840f2d879b987ef9df7cd046e146214ed5f5) Thanks [@michael-lefebvre](https://github.com/michael-lefebvre)! - Fix `auxiliaryText` in ActionList Group header
15
+ * Fake entry to force publishing
16
+
17
+ - [#1549](https://github.com/primer/react/pull/1549) [`f565840f`](https://github.com/primer/react/commit/f565840f2d879b987ef9df7cd046e146214ed5f5) Thanks [@michael-lefebvre](https://github.com/michael-lefebvre)! - Fix `auxiliaryText` in ActionList Group header
16
18
 
17
19
  ## 31.1.0
18
20
 
package/lib/ActionList2/Item.js CHANGED
@@ -82,9 +82,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
82
82
  onSelect = () => null,
83
83
  sx: sxProp = {},
84
84
  id,
85
- _PrivateItemWrapper = ({
86
- children
87
- }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children),
85
+ _PrivateItemWrapper,
88
86
  ...props
89
87
  }, forwardedRef) => {
90
88
  const {
@@ -102,9 +100,9 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
102
100
  paddingY: '6px',
103
101
  // custom value off the scale
104
102
  lineHeight: TEXT_ROW_HEIGHT,
105
- marginX: listVariant === 'inset' ? 2 : 0,
106
103
  minHeight: 5,
107
- borderRadius: 2,
104
+ marginX: listVariant === 'inset' ? 2 : 0,
105
+ borderRadius: listVariant === 'inset' ? 2 : 0,
108
106
  transition: 'background 33.333ms linear',
109
107
  color: getVariantStyles(variant, disabled).color,
110
108
  textDecoration: 'none',
@@ -117,14 +115,16 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
117
115
  backgroundColor: `actionListItem.${variant}.hoverBg`,
118
116
  color: getVariantStyles(variant, disabled).hoverColor
119
117
  },
120
- ':focus:not(:focus-visible):not([aria-disabled])': {
118
+ ':focus:not([data-focus-visible-added])': {
121
119
  backgroundColor: `actionListItem.${variant}.selectedBg`,
122
120
  color: getVariantStyles(variant, disabled).hoverColor,
123
121
  outline: 'none'
124
122
  },
125
- ':focus-visible:not([aria-disabled])': {
126
- outline: '2px solid',
127
- outlineColor: 'accent.emphasis'
123
+ '&[data-focus-visible-added]': {
124
+ // we don't use :focus-visible because not all browsers (safari) have it yet
125
+ outline: 'none',
126
+ border: `2 solid`,
127
+ boxShadow: `0 0 0 2px ${theme === null || theme === void 0 ? void 0 : theme.colors.accent.emphasis}`
128
128
  },
129
129
  ':active:not([aria-disabled])': {
130
130
  backgroundColor: `actionListItem.${variant}.activeBg`,
@@ -147,7 +147,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
147
147
  borderColor: 'var(--divider-color, transparent)'
148
148
  },
149
149
  // show between 2 items
150
- ':not(:first-of-type):not([aria-selected=true])': {
150
+ ':not(:first-of-type)': {
151
151
  '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
152
152
  },
153
153
  // hide divider after dividers & group header, with higher importance!
@@ -155,14 +155,10 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
155
155
  '--divider-color': 'transparent !important'
156
156
  },
157
157
  // hide border on current and previous item
158
- '&:hover:not([aria-disabled]), &:focus:not([aria-disabled])': {
159
- '--divider-color': 'transparent'
160
- },
161
- '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &': {
158
+ '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
162
159
  '--divider-color': 'transparent'
163
160
  },
164
- // hide border around selected item
165
- '&[aria-selected=true] + &': {
161
+ '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
166
162
  '--divider-color': 'transparent'
167
163
  }
168
164
  };
@@ -184,6 +180,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
184
180
  const labelId = (0, _ssr.useSSRSafeId)(id);
185
181
  const inlineDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--inline-description`);
186
182
  const blockDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--block-description`);
183
+ const ItemWrapper = _PrivateItemWrapper || _react.default.Fragment;
187
184
  return /*#__PURE__*/_react.default.createElement(Slots, {
188
185
  context: {
189
186
  variant,
@@ -198,10 +195,10 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
198
195
  onKeyPress: keyPressHandler,
199
196
  "aria-selected": selected,
200
197
  "aria-disabled": disabled ? true : undefined,
201
- tabIndex: disabled ? undefined : 0,
198
+ tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
202
199
  "aria-labelledby": labelId,
203
200
  "aria-describedby": [slots.InlineDescription && inlineDescriptionId, slots.BlockDescription && blockDescriptionId].filter(Boolean).join(' ')
204
- }, props), /*#__PURE__*/_react.default.createElement(_PrivateItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
201
+ }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
205
202
  selected: selected,
206
203
  disabled: disabled
207
204
  }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
package/lib-esm/ActionList2/Item.js CHANGED
@@ -54,9 +54,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
54
54
  onSelect = () => null,
55
55
  sx: sxProp = {},
56
56
  id,
57
- _PrivateItemWrapper = ({
58
- children
59
- }) => /*#__PURE__*/React.createElement(React.Fragment, null, children),
57
+ _PrivateItemWrapper,
60
58
  ...props
61
59
  }, forwardedRef) => {
62
60
  const {
@@ -73,9 +71,9 @@ export const Item = /*#__PURE__*/React.forwardRef(({
73
71
  paddingY: '6px',
74
72
  // custom value off the scale
75
73
  lineHeight: TEXT_ROW_HEIGHT,
76
- marginX: listVariant === 'inset' ? 2 : 0,
77
74
  minHeight: 5,
78
- borderRadius: 2,
75
+ marginX: listVariant === 'inset' ? 2 : 0,
76
+ borderRadius: listVariant === 'inset' ? 2 : 0,
79
77
  transition: 'background 33.333ms linear',
80
78
  color: getVariantStyles(variant, disabled).color,
81
79
  textDecoration: 'none',
@@ -88,14 +86,16 @@ export const Item = /*#__PURE__*/React.forwardRef(({
88
86
  backgroundColor: `actionListItem.${variant}.hoverBg`,
89
87
  color: getVariantStyles(variant, disabled).hoverColor
90
88
  },
91
- ':focus:not(:focus-visible):not([aria-disabled])': {
89
+ ':focus:not([data-focus-visible-added])': {
92
90
  backgroundColor: `actionListItem.${variant}.selectedBg`,
93
91
  color: getVariantStyles(variant, disabled).hoverColor,
94
92
  outline: 'none'
95
93
  },
96
- ':focus-visible:not([aria-disabled])': {
97
- outline: '2px solid',
98
- outlineColor: 'accent.emphasis'
94
+ '&[data-focus-visible-added]': {
95
+ // we don't use :focus-visible because not all browsers (safari) have it yet
96
+ outline: 'none',
97
+ border: `2 solid`,
98
+ boxShadow: `0 0 0 2px ${theme === null || theme === void 0 ? void 0 : theme.colors.accent.emphasis}`
99
99
  },
100
100
  ':active:not([aria-disabled])': {
101
101
  backgroundColor: `actionListItem.${variant}.activeBg`,
@@ -118,7 +118,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
118
118
  borderColor: 'var(--divider-color, transparent)'
119
119
  },
120
120
  // show between 2 items
121
- ':not(:first-of-type):not([aria-selected=true])': {
121
+ ':not(:first-of-type)': {
122
122
  '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
123
123
  },
124
124
  // hide divider after dividers & group header, with higher importance!
@@ -126,14 +126,10 @@ export const Item = /*#__PURE__*/React.forwardRef(({
126
126
  '--divider-color': 'transparent !important'
127
127
  },
128
128
  // hide border on current and previous item
129
- '&:hover:not([aria-disabled]), &:focus:not([aria-disabled])': {
130
- '--divider-color': 'transparent'
131
- },
132
- '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &': {
129
+ '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
133
130
  '--divider-color': 'transparent'
134
131
  },
135
- // hide border around selected item
136
- '&[aria-selected=true] + &': {
132
+ '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
137
133
  '--divider-color': 'transparent'
138
134
  }
139
135
  };
@@ -152,6 +148,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
152
148
  const labelId = useSSRSafeId(id);
153
149
  const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
154
150
  const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`);
151
+ const ItemWrapper = _PrivateItemWrapper || React.Fragment;
155
152
  return /*#__PURE__*/React.createElement(Slots, {
156
153
  context: {
157
154
  variant,
@@ -166,10 +163,10 @@ export const Item = /*#__PURE__*/React.forwardRef(({
166
163
  onKeyPress: keyPressHandler,
167
164
  "aria-selected": selected,
168
165
  "aria-disabled": disabled ? true : undefined,
169
- tabIndex: disabled ? undefined : 0,
166
+ tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
170
167
  "aria-labelledby": labelId,
171
168
  "aria-describedby": [slots.InlineDescription && inlineDescriptionId, slots.BlockDescription && blockDescriptionId].filter(Boolean).join(' ')
172
- }, props), /*#__PURE__*/React.createElement(_PrivateItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
169
+ }, props), /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
173
170
  selected: selected,
174
171
  disabled: disabled
175
172
  }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-20211010162049",
3
+ "version": "0.0.0-2021101017443",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",