Merge pull request #366 from puppetlabs/Action-Select-disable-row

Author: vine77

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

@@ -226,7 +226,6 @@ class ActionMenuList extends Component {
     } = this.props;
 
     const focusedId = getFocusedId(focusedIndex, id, actions);
-
     return (
       <div
         className={classNames('rc-menu-list', 'rc-action-menu-list', className)}
@@ -247,15 +246,23 @@ class ActionMenuList extends Component {
           {...rest}
         >
           {actions.map(
-            ({ id: actionId, label, icon, svg, onClick, ...other }, index) => (
+            (
+              { id: actionId, label, icon, svg, onClick, disabled, ...other },
+              index,
+            ) => (
               <ActionMenuListItem
                 id={getActionId(id, actionId)}
                 key={actionId}
                 focused={index === focusedIndex}
                 icon={icon}
                 svg={svg}
                 onMouseEnter={() => onMouseEnterItem(index)}
-                onClick={e => executeAction(e, onClick, actionId)}
+                disabled={disabled}
+                onClick={
+                  disabled
+                    ? undefined
+                    : e => executeAction(e, onClick, actionId)
+                }
                 ref={el => {
                   this.actionRefs[index] = el;
                 }}

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

@@ -16,13 +16,15 @@ const propTypes = {
   onMouseEnter: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
   innerRef: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 const defaultProps = {
   as: undefined,
   icon: null,
   svg: null,
   innerRef() {},
+  disabled: false,
 };
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -37,6 +39,7 @@ const ActionMenuListItem = forwardRef(
       svg,
       onMouseEnter,
       innerRef,
+      disabled,
       ...rest
     },
     ref,
@@ -47,6 +50,7 @@ const ActionMenuListItem = forwardRef(
           role="none"
           className={classNames('rc-menu-list-item', {
             'rc-menu-list-item-focused': focused,
+            'rc-menu-list-item-disabled': disabled,
           })}
           onMouseEnter={onMouseEnter}
           ref={ref}
@@ -57,6 +61,7 @@ const ActionMenuListItem = forwardRef(
             className="rc-menu-list-item-inner"
             tabIndex={-1}
             ref={innerRef}
+            disabled={disabled}
             {...rest}
           >
             {icon && <Icon className="rc-menu-list-item-icon" type={icon} />}
@@ -74,6 +79,7 @@ const ActionMenuListItem = forwardRef(
         id={id}
         className={classNames('rc-menu-list-item', {
           'rc-menu-list-item-focused': focused,
+          'rc-menu-list-item-disabled': disabled,
         })}
         onMouseEnter={onMouseEnter}
         ref={ref}

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

@@ -27,6 +27,7 @@ const propTypes = {
       value: PropTypes.string.isRequired,
       label: PropTypes.node.isRequired,
       icon: PropTypes.oneOf(Icon.AVAILABLE_ICONS),
+      disabled: PropTypes.bool,
     }),
   ),
   selected: PropTypes.oneOfType([
@@ -350,15 +351,16 @@ class OptionMenuList extends Component {
         }}
         {...rest}
       >
-        {options.map(({ value, label, icon, svg }, index) => (
+        {options.map(({ value, label, icon, svg, disabled }, index) => (
           <OptionMenuListItem
             id={getOptionId(id, value)}
             key={value}
             focused={index === focusedIndex}
             selected={selectionSet.has(value)}
             icon={icon}
             svg={svg}
-            onClick={() => onClickItem(value)}
+            disabled={disabled}
+            onClick={disabled ? undefined : () => onClickItem(value)}
             onMouseEnter={() => onMouseEnterItem(index)}
             ref={option => {
               this.optionRefs[index] = option;

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

@@ -15,17 +15,29 @@ const propTypes = {
   svg: PropTypes.element,
   onClick: PropTypes.func.isRequired,
   onMouseEnter: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
 };
 
 const defaultProps = {
   icon: null,
   svg: null,
+  disabled: false,
 };
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 const OptionMenuListItem = forwardRef(
   (
-    { id, children, focused, selected, icon, svg, onClick, onMouseEnter },
+    {
+      id,
+      children,
+      focused,
+      selected,
+      icon,
+      svg,
+      onClick,
+      onMouseEnter,
+      disabled,
+    },
     ref,
   ) => (
     <li
@@ -34,6 +46,7 @@ const OptionMenuListItem = forwardRef(
       className={classNames('rc-menu-list-item', {
         'rc-menu-list-item-focused': focused,
         'rc-menu-list-item-selected': selected,
+        'rc-menu-list-item-disabled': disabled,
       })}
       aria-selected={selected}
       onClick={onClick}

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

@@ -29,6 +29,8 @@ const propTypes = {
       onClick: PropTypes.func,
       /** 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. */
       as: PropTypes.elementType,
+      /** Make a row unclickable */
+      disabled: PropTypes.bool,
     }),
   ),
   label: PropTypes.string,

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

@@ -171,62 +171,63 @@ const style = { display: 'inline-block', margin: 10 };
 </div>;
 ```
 
-### Icons
+### Custom Width
 
-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.
+Use the `width` prop to customize the width of the button.
 
 ```jsx
-const customIcon = {
-  viewBox: '0 0 16 16',
-  svg: (
-    <path
-      fill="#818f99"
-      fillRule="evenodd"
-      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"
-    />
-  ),
-};
-
 const actions = [
   {
-    id: 'custom-icon',
-    svg: customIcon.svg,
-    label: 'GitHub',
+    id: 'one',
+    icon: 'pencil',
+    label: 'Do thing one',
     onClick() {
-      console.log('GitHub');
+      console.log('Thing one');
     },
   },
   {
-    id: 'standard-icon',
-    icon: 'question-circle',
-    label: 'Other',
+    id: 'two',
+    icon: 'send',
+    label: 'Do thing two',
     onClick() {
-      console.log('Other');
+      console.log('Thing two');
     },
   },
+  {
+    id: 'three',
+    as: 'a',
+    href: 'https://www.google.com',
+    target: '_blank',
+    label: 'Open link',
+    icon: 'link',
+  },
 ];
 
 const style = { display: 'inline-block', margin: 10 };
 
 <div>
   <ActionSelect
     actions={actions}
-    label="Choose a source control"
+    label="Choose an Action"
     style={style}
+    width="200px"
   />
 </div>;
 ```
 
-### Custom Width
+## Action properties
 
-Use the `width` prop to customize the width of the button.
+### Disabled actions
+
+Use the `disabled` object property to disable a row in a dropdown and prevent onClick actions from happening.
 
 ```jsx
 const actions = [
   {
     id: 'one',
     icon: 'pencil',
     label: 'Do thing one',
+    disabled: true,
     onClick() {
       console.log('Thing one');
     },
@@ -251,12 +252,53 @@ const actions = [
 
 const style = { display: 'inline-block', margin: 10 };
 
+<div>
+  <ActionSelect actions={actions} label="Choose an Action" style={style} />
+</div>;
+```
+
+### Icons
+
+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.
+
+```jsx
+const customIcon = {
+  viewBox: '0 0 16 16',
+  svg: (
+    <path
+      fill="#818f99"
+      fillRule="evenodd"
+      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"
+    />
+  ),
+};
+
+const actions = [
+  {
+    id: 'custom-icon',
+    svg: customIcon.svg,
+    label: 'GitHub',
+    onClick() {
+      console.log('GitHub');
+    },
+  },
+  {
+    id: 'standard-icon',
+    icon: 'question-circle',
+    label: 'Other',
+    onClick() {
+      console.log('Other');
+    },
+  },
+];
+
+const style = { display: 'inline-block', margin: 10 };
+
 <div>
   <ActionSelect
     actions={actions}
-    label="Choose an Action"
+    label="Choose a source control"
     style={style}
-    width="200px"
   />
 </div>;
 ```

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

@@ -9,13 +9,22 @@ Avatar is an icon or figure representing a particular user of the application. T
 ```jsx
 <div style={{ display: 'flex', alignItems: 'center' }}>
   <Avatar>
-    <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100" alt="placeholder" />
+    <img
+      src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100"
+      alt="placeholder"
+    />
   </Avatar>
   <Avatar>
-    <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100" alt="placeholder" />
+    <img
+      src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100"
+      alt="placeholder"
+    />
   </Avatar>
   <Avatar>
-    <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100" alt="placeholder" />
+    <img
+      src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=100"
+      alt="placeholder"
+    />
   </Avatar>
 </div>
 ```
@@ -27,10 +36,10 @@ Avatar is an icon or figure representing a particular user of the application. T
   <Avatar>
     <span>R</span>
   </Avatar>
-  <Avatar style={{backgroundColor: '#ffae1a'}}>
+  <Avatar style={{ backgroundColor: '#ffae1a' }}>
     <span>M</span>
   </Avatar>
-  <Avatar style={{backgroundColor: '#11d1c4', color: '#ffffff'}}>
+  <Avatar style={{ backgroundColor: '#11d1c4', color: '#ffffff' }}>
     <span>T</span>
   </Avatar>
 </div>