Skip to content

Commit 61e214b

Browse files
vine77vine77
authored
Merge pull request #383 from puppetlabs/development
2 parents f28d100 + 8c267d1 commit 61e214b

File tree

15 files changed

+248
-101
lines changed

15 files changed

+248
-101
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# react-components 5.26.5 (2021-02-10)
2+
3+
- [ActionSelect, ButtonSelect, Select] Allow disabling items in Select components (by [@Lukeaber](https://github.com/Lukeaber) in [#366](https://github.com/puppetlabs/design-system/pull/366))
4+
15
# react-components 5.26.4 (2021-02-10)
26

37
- [Select] Fix autocomplete select not staying open when typing (by [@jilliankeenan](https://github.com/jilliankeenan) in [#381](https://github.com/puppetlabs/design-system/pull/381))

‎packages/react-components/package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-components/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@puppet/react-components",
3-
"version": "5.26.4",
3+
"version": "5.26.5",
44
"author": "Puppet, Inc.",
55
"license": "Apache-2.0",
66
"main": "build/library.js",

‎packages/react-components/source/react/internal/action-menu-list/ActionMenuList.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,6 @@ class ActionMenuList extends Component {
226226
} = this.props;
227227

228228
const focusedId = getFocusedId(focusedIndex, id, actions);
229-
230229
return (
231230
<div
232231
className={classNames('rc-menu-list', 'rc-action-menu-list', className)}
@@ -247,15 +246,23 @@ class ActionMenuList extends Component {
247246
{...rest}
248247
>
249248
{actions.map(
250-
({ id: actionId, label, icon, svg, onClick, ...other }, index) => (
249+
(
250+
{ id: actionId, label, icon, svg, onClick, disabled, ...other },
251+
index,
252+
) => (
251253
<ActionMenuListItem
252254
id={getActionId(id, actionId)}
253255
key={actionId}
254256
focused={index === focusedIndex}
255257
icon={icon}
256258
svg={svg}
257259
onMouseEnter={() => onMouseEnterItem(index)}
258-
onClick={e => executeAction(e, onClick, actionId)}
260+
disabled={disabled}
261+
onClick={
262+
disabled
263+
? undefined
264+
: e => executeAction(e, onClick, actionId)
265+
}
259266
ref={el => {
260267
this.actionRefs[index] = el;
261268
}}

‎packages/react-components/source/react/internal/action-menu-list/ActionMenuListItem.js

+6
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@ const propTypes = {
1616
onMouseEnter: PropTypes.func.isRequired,
1717
onClick: PropTypes.func.isRequired,
1818
innerRef: PropTypes.func,
19+
disabled: PropTypes.bool,
1920
};
2021

2122
const defaultProps = {
2223
as: undefined,
2324
icon: null,
2425
svg: null,
2526
innerRef() {},
27+
disabled: false,
2628
};
2729

2830
/* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -37,6 +39,7 @@ const ActionMenuListItem = forwardRef(
3739
svg,
3840
onMouseEnter,
3941
innerRef,
42+
disabled,
4043
...rest
4144
},
4245
ref,
@@ -47,6 +50,7 @@ const ActionMenuListItem = forwardRef(
4750
role="none"
4851
className={classNames('rc-menu-list-item', {
4952
'rc-menu-list-item-focused': focused,
53+
'rc-menu-list-item-disabled': disabled,
5054
})}
5155
onMouseEnter={onMouseEnter}
5256
ref={ref}
@@ -57,6 +61,7 @@ const ActionMenuListItem = forwardRef(
5761
className="rc-menu-list-item-inner"
5862
tabIndex={-1}
5963
ref={innerRef}
64+
disabled={disabled}
6065
{...rest}
6166
>
6267
{icon && <Icon className="rc-menu-list-item-icon" type={icon} />}
@@ -74,6 +79,7 @@ const ActionMenuListItem = forwardRef(
7479
id={id}
7580
className={classNames('rc-menu-list-item', {
7681
'rc-menu-list-item-focused': focused,
82+
'rc-menu-list-item-disabled': disabled,
7783
})}
7884
onMouseEnter={onMouseEnter}
7985
ref={ref}

‎packages/react-components/source/react/internal/option-menu-list/OptionMenuList.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const propTypes = {
2727
value: PropTypes.string.isRequired,
2828
label: PropTypes.node.isRequired,
2929
icon: PropTypes.oneOf(Icon.AVAILABLE_ICONS),
30+
disabled: PropTypes.bool,
3031
}),
3132
),
3233
selected: PropTypes.oneOfType([
@@ -350,15 +351,16 @@ class OptionMenuList extends Component {
350351
}}
351352
{...rest}
352353
>
353-
{options.map(({ value, label, icon, svg }, index) => (
354+
{options.map(({ value, label, icon, svg, disabled }, index) => (
354355
<OptionMenuListItem
355356
id={getOptionId(id, value)}
356357
key={value}
357358
focused={index === focusedIndex}
358359
selected={selectionSet.has(value)}
359360
icon={icon}
360361
svg={svg}
361-
onClick={() => onClickItem(value)}
362+
disabled={disabled}
363+
onClick={disabled ? undefined : () => onClickItem(value)}
362364
onMouseEnter={() => onMouseEnterItem(index)}
363365
ref={option => {
364366
this.optionRefs[index] = option;

‎packages/react-components/source/react/internal/option-menu-list/OptionMenuListItem.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,29 @@ const propTypes = {
1515
svg: PropTypes.element,
1616
onClick: PropTypes.func.isRequired,
1717
onMouseEnter: PropTypes.func.isRequired,
18+
disabled: PropTypes.bool,
1819
};
1920

2021
const defaultProps = {
2122
icon: null,
2223
svg: null,
24+
disabled: false,
2325
};
2426

2527
/* eslint-disable jsx-a11y/click-events-have-key-events */
2628
const OptionMenuListItem = forwardRef(
2729
(
28-
{ id, children, focused, selected, icon, svg, onClick, onMouseEnter },
30+
{
31+
id,
32+
children,
33+
focused,
34+
selected,
35+
icon,
36+
svg,
37+
onClick,
38+
onMouseEnter,
39+
disabled,
40+
},
2941
ref,
3042
) => (
3143
<li
@@ -34,6 +46,7 @@ const OptionMenuListItem = forwardRef(
3446
className={classNames('rc-menu-list-item', {
3547
'rc-menu-list-item-focused': focused,
3648
'rc-menu-list-item-selected': selected,
49+
'rc-menu-list-item-disabled': disabled,
3750
})}
3851
aria-selected={selected}
3952
onClick={onClick}

‎packages/react-components/source/react/library/action-select/ActionSelect.js

+2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ const propTypes = {
2929
onClick: PropTypes.func,
3030
/** Custom action element. Useful for creating navigation actions with as: 'a' or as: Link. Additionally, extra props not listed here are passed through to the action element. This allows custom props such as `href` or `to` to be passed to the inner action element. */
3131
as: PropTypes.elementType,
32+
/** Make a row unclickable */
33+
disabled: PropTypes.bool,
3234
}),
3335
),
3436
label: PropTypes.string,

‎packages/react-components/source/react/library/action-select/ActionSelect.md

+68-26
Original file line numberDiff line numberDiff line change
@@ -171,62 +171,63 @@ const style = { display: 'inline-block', margin: 10 };
171171
</div>;
172172
```
173173

174-
### Icons
174+
### Custom Width
175175

176-
Specify the `icon` prop on each option to display a supported icon to the left of that option, or use the `svg` prop to use a custom icon.
176+
Use the `width` prop to customize the width of the button.
177177

178178
```jsx
179-
const customIcon = {
180-
viewBox: '0 0 16 16',
181-
svg: (
182-
<path
183-
fill="#818f99"
184-
fillRule="evenodd"
185-
d="M8 .2A8 8 0 0 0 5.47 15.79c.4.074.546-.173.546-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.889-1.17-.889-1.17-.726-.496.055-.486.055-.486.803.056 1.226.824 1.226.824.713 1.222 1.872.87 2.328.665.073-.517.279-.87.508-1.07-1.777-.201-3.644-.888-3.644-3.953 0-.874.312-1.588.823-2.147-.082-.202-.357-1.016.078-2.117 0 0 .672-.215 2.2.82A7.662 7.662 0 0 1 8 4.068c.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.436 1.101.162 1.915.08 2.117.512.56.822 1.273.822 2.147 0 3.073-1.87 3.75-3.653 3.947.287.247.543.735.543 1.482 0 1.069-.01 1.932-.01 2.194 0 .214.144.463.55.385A8 8 0 0 0 8 .2"
186-
/>
187-
),
188-
};
189-
190179
const actions = [
191180
{
192-
id: 'custom-icon',
193-
svg: customIcon.svg,
194-
label: 'GitHub',
181+
id: 'one',
182+
icon: 'pencil',
183+
label: 'Do thing one',
195184
onClick() {
196-
console.log('GitHub');
185+
console.log('Thing one');
197186
},
198187
},
199188
{
200-
id: 'standard-icon',
201-
icon: 'question-circle',
202-
label: 'Other',
189+
id: 'two',
190+
icon: 'send',
191+
label: 'Do thing two',
203192
onClick() {
204-
console.log('Other');
193+
console.log('Thing two');
205194
},
206195
},
196+
{
197+
id: 'three',
198+
as: 'a',
199+
href: 'https://www.google.com',
200+
target: '_blank',
201+
label: 'Open link',
202+
icon: 'link',
203+
},
207204
];
208205

209206
const style = { display: 'inline-block', margin: 10 };
210207

211208
<div>
212209
<ActionSelect
213210
actions={actions}
214-
label="Choose a source control"
211+
label="Choose an Action"
215212
style={style}
213+
width="200px"
216214
/>
217215
</div>;
218216
```
219217

220-
### Custom Width
218+
## Action properties
221219

222-
Use the `width` prop to customize the width of the button.
220+
### Disabled actions
221+
222+
Use the `disabled` object property to disable a row in a dropdown and prevent onClick actions from happening.
223223

224224
```jsx
225225
const actions = [
226226
{
227227
id: 'one',
228228
icon: 'pencil',
229229
label: 'Do thing one',
230+
disabled: true,
230231
onClick() {
231232
console.log('Thing one');
232233
},
@@ -251,12 +252,53 @@ const actions = [
251252

252253
const style = { display: 'inline-block', margin: 10 };
253254

255+
<div>
256+
<ActionSelect actions={actions} label="Choose an Action" style={style} />
257+
</div>;
258+
```
259+
260+
### Icons
261+
262+
Specify the `icon` prop on each action to display a supported icon to the left of that option, or use the `svg` prop to use a custom icon.
263+
264+
```jsx
265+
const customIcon = {
266+
viewBox: '0 0 16 16',
267+
svg: (
268+
<path
269+
fill="#818f99"
270+
fillRule="evenodd"
271+
d="M8 .2A8 8 0 0 0 5.47 15.79c.4.074.546-.173.546-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.889-1.17-.889-1.17-.726-.496.055-.486.055-.486.803.056 1.226.824 1.226.824.713 1.222 1.872.87 2.328.665.073-.517.279-.87.508-1.07-1.777-.201-3.644-.888-3.644-3.953 0-.874.312-1.588.823-2.147-.082-.202-.357-1.016.078-2.117 0 0 .672-.215 2.2.82A7.662 7.662 0 0 1 8 4.068c.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.436 1.101.162 1.915.08 2.117.512.56.822 1.273.822 2.147 0 3.073-1.87 3.75-3.653 3.947.287.247.543.735.543 1.482 0 1.069-.01 1.932-.01 2.194 0 .214.144.463.55.385A8 8 0 0 0 8 .2"
272+
/>
273+
),
274+
};
275+
276+
const actions = [
277+
{
278+
id: 'custom-icon',
279+
svg: customIcon.svg,
280+
label: 'GitHub',
281+
onClick() {
282+
console.log('GitHub');
283+
},
284+
},
285+
{
286+
id: 'standard-icon',
287+
icon: 'question-circle',
288+
label: 'Other',
289+
onClick() {
290+
console.log('Other');
291+
},
292+
},
293+
];
294+
295+
const style = { display: 'inline-block', margin: 10 };
296+
254297
<div>
255298
<ActionSelect
256299
actions={actions}
257-
label="Choose an Action"
300+
label="Choose a source control"
258301
style={style}
259-
width="200px"
260302
/>
261303
</div>;
262304
```

‎packages/react-components/source/react/library/avatar/Avatar.md

+14-5
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,22 @@ Avatar is an icon or figure representing a particular user of the application. T
99
```jsx
1010
<div style={{ display: 'flex', alignItems: 'center' }}>
1111
<Avatar>
12-
<img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100" alt="placeholder" />
12+
<img
13+
src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100"
14+
alt="placeholder"
15+
/>
1316
</Avatar>
1417
<Avatar>
15-
<img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100" alt="placeholder" />
18+
<img
19+
src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100"
20+
alt="placeholder"
21+
/>
1622
</Avatar>
1723
<Avatar>
18-
<img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100" alt="placeholder" />
24+
<img
25+
src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100"
26+
alt="placeholder"
27+
/>
1928
</Avatar>
2029
</div>
2130
```
@@ -27,10 +36,10 @@ Avatar is an icon or figure representing a particular user of the application. T
2736
<Avatar>
2837
<span>R</span>
2938
</Avatar>
30-
<Avatar style={{backgroundColor: '#ffae1a'}}>
39+
<Avatar style={{ backgroundColor: '#ffae1a' }}>
3140
<span>M</span>
3241
</Avatar>
33-
<Avatar style={{backgroundColor: '#11d1c4', color: '#ffffff'}}>
42+
<Avatar style={{ backgroundColor: '#11d1c4', color: '#ffffff' }}>
3443
<span>T</span>
3544
</Avatar>
3645
</div>

0 commit comments

Comments
 (0)