make fav work in demo

elastic · Dec 21, 2018 · 724393c · 724393c
1 parent 666e18d
commit 724393c
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 40 deletions.
diff --git a/src-docs/src/views/list_group/list_group_link_actions.js b/src-docs/src/views/list_group/list_group_link_actions.js
@@ -9,7 +9,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiButtonEmpty,
-  EuiButtonIcon,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -19,6 +18,9 @@ export default class extends Component {
     this.state = {
       flushWidth: false,
       showBorder: false,
+      favorite1: undefined,
+      favorite2: undefined,
+      favorite3: undefined,
     };
   }
 
@@ -30,10 +32,40 @@ export default class extends Component {
     this.setState(prevState => ({ showBorder: !prevState.showBorder }));
   };
 
+  link1Clicked = () => {
+    this.setState(prevState => {
+      return {
+        favorite1: prevState.favorite1 === 'link1' ? undefined : 'link1',
+      };
+    });
+    if (this.favorite1 === undefined) { document.activeElement.blur(); }
+  };
+
+  link2Clicked = () => {
+    this.setState(prevState => {
+      return {
+        favorite2: prevState.favorite2 === 'link2' ? undefined : 'link2',
+      };
+    });
+    if (this.favorite2 === undefined) { document.activeElement.blur(); }
+  };
+
+  link3Clicked = () => {
+    this.setState(prevState => {
+      return {
+        favorite3: prevState.favorite3 === 'link3' ? undefined : 'link3',
+      };
+    });
+    if (this.favorite3 === undefined) { document.activeElement.blur(); }
+  };
+
   render() {
     const {
       flushWidth,
       showBorder,
+      favorite1,
+      favorite2,
+      favorite3,
     } = this.state;
 
     return (
@@ -59,6 +91,7 @@ export default class extends Component {
 
         <EuiListGroup flush={flushWidth} bordered={showBorder} maxWidth={288}>
           <EuiListGroupItem
+            id="link1"
             label={
               <EuiButtonEmpty
                 onClick={() => window.alert('Button clicked')}
@@ -68,18 +101,19 @@ export default class extends Component {
                 EUI button link
               </EuiButtonEmpty>
             }
-            extraAction={
-              <EuiButtonIcon
-                color="subdued"
-                onClick={() => window.alert('Action clicked')}
-                iconType="starEmpty"
-                iconSize="s"
-                aria-label="Open dummy prompt"
-              />
-            }
+            extraAction={{
+              color: 'subdued',
+              onClick: this.link1Clicked,
+              iconType: favorite1 === 'link1' ? 'check' : 'starEmpty',
+              iconSize: 's',
+              'aria-label': 'Favorite link1',
+              // style: { opacity: favorite1 === 'link1' ? 1 : 0.5},
+            }}
+            alwaysShowAction={favorite1 === 'link1'}
           />
 
           <EuiListGroupItem
+            id="link2"
             label={
               <EuiButtonEmpty
                 onClick={() => window.alert('Button clicked')}
@@ -89,18 +123,18 @@ export default class extends Component {
                 EUI button link
               </EuiButtonEmpty>
             }
-            extraAction={
-              <EuiButtonIcon
-                color="subdued"
-                onClick={() => window.alert('Action clicked')}
-                iconType="starEmpty"
-                iconSize="s"
-                aria-label="Open dummy prompt"
-              />
-            }
+            extraAction={{
+              color: 'subdued',
+              onClick: this.link2Clicked,
+              iconType: favorite2 === 'link2' ? 'check' : 'starEmpty',
+              iconSize: 's',
+              'aria-label': 'Favorite link2',
+            }}
+            alwaysShowAction={favorite2 === 'link2'}
           />
 
           <EuiListGroupItem
+            id="link3"
             label={
               <EuiButtonEmpty
                 onClick={() => window.alert('Button clicked')}
@@ -110,19 +144,19 @@ export default class extends Component {
                 EUI button link
               </EuiButtonEmpty>
             }
-            extraAction={
-              <EuiButtonIcon
-                color="subdued"
-                onClick={() => window.alert('Action clicked')}
-                iconType="starEmpty"
-                iconSize="s"
-                aria-label="Open dummy prompt"
-              />
-            }
+            extraAction={{
+              color: 'subdued',
+              onClick: this.link3Clicked,
+              iconType: favorite3 === 'link3' ? 'check' : 'starEmpty',
+              iconSize: 's',
+              'aria-label': 'Favorite link3',
+            }}
+            alwaysShowAction={favorite3 === 'link3'}
             isActive
           />
 
           <EuiListGroupItem
+            id="link4"
             label={
               <EuiButtonEmpty
                 onClick={() => window.alert('Button clicked')}
@@ -133,16 +167,14 @@ export default class extends Component {
                 EUI button link
               </EuiButtonEmpty>
             }
-            extraAction={
-              <EuiButtonIcon
-                color="subdued"
-                onClick={() => window.alert('Action clicked')}
-                iconType="starEmpty"
-                iconSize="s"
-                aria-label="Open dummy prompt"
-                isDisabled
-              />
-            }
+            extraAction={{
+              color: 'subdued',
+              onClick: () => window.alert('Action clicked'),
+              iconType: 'starEmpty',
+              iconSize: 's',
+              'aria-label': 'Open dummy prompt',
+              isDisabled: true,
+            }}
             isDisabled
           />
         </EuiListGroup>

diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
@@ -130,6 +130,7 @@
     // Mouse users will see it when they hover on the parent container above
     &:focus {
       opacity: 1;
+      background-color: transparent;
     }
 
     &:hover:not([disabled]) svg,
@@ -139,6 +140,10 @@
   }
 }
 
+.euiListGroupItem-showAction .euiListGroupItem__actionButton button {
+  opacity: 1;
+}
+
 .euiListGroupItem__button {
   display: flex;
   justify-content: left;

diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { EuiButtonIcon } from '../button';
 import { ICON_TYPES, EuiIcon } from '../icon';
 
 const sizeToClassNameMap = {
@@ -22,6 +23,7 @@ export const EuiListGroupItem = ({
   extraAction,
   onClick,
   size,
+  alwaysShowAction,
   ...rest
 }) => {
   const classes = classNames(
@@ -33,6 +35,7 @@ export const EuiListGroupItem = ({
       'euiListGroupItem-hasIcon': iconType,
       'euiListGroupItem-hasAction': extraAction,
       'euiListGroupItem-textOnly': typeof label === 'string' && !href,
+      'euiListGroupItem-showAction': alwaysShowAction || isActive,
     },
     className
   );
@@ -50,7 +53,7 @@ export const EuiListGroupItem = ({
   if (extraAction) {
     extraActionNode = (
       <span className="euiListGroupItem__actionButton">
-        {extraAction}
+        <EuiButtonIcon {...extraAction} />
       </span>
     );
   }
@@ -152,12 +155,18 @@ EuiListGroupItem.propTypes = {
   /**
    * Add button icon for secondary action. See EuiButtonIcon
    */
-  extraAction: PropTypes.node,
+  extraAction: PropTypes.object,
+
+  /**
+   * Make the secondary action button always visible
+   */
+  alwaysShowAction: PropTypes.bool,
 
   onClick: PropTypes.func,
 };
 
 EuiListGroupItem.defaultProps = {
   isActive: false,
   isDisabled: false,
+  alwaysShowAction: false,
 };