[New Nav Feature] EuiPinnableListGroup (#3061)

* Added EuiCollapsibleNavGroupList component * Added content to EuiCollapsibleNavList * Update to use latest props from EuiListGroup * Passing `color` to EuiListGroup * Added active link to examples * Better docs for nav list and added snippets * cleanup * Renamed `EuiCollapsibleList` to `EuiPinnableListGroup` and moved to `list_group` Also made `onPinClick` required * i18n * Fix focus and focus-within states With IE fallback * Allowing pin icon title/aria-labels to be custom Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · Mar 17, 2020 · 6d62843 · 6d62843
1 parent 988cffc
commit 6d62843
Show file tree

Hide file tree

Showing 17 changed files with 701 additions and 12 deletions.
diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router';
 
 import { renderToHtml } from '../../services';
 
@@ -7,8 +8,10 @@ import { GuideSectionTypes } from '../../components';
 import {
   EuiListGroup,
   EuiListGroupItem,
+  EuiPinnableListGroup,
   EuiCode,
 } from '../../../../src/components';
+import { EuiPinnableListGroupItem } from './props';
 
 import ListGroup from './list_group';
 const listGroupSource = require('!!raw-loader!./list_group');
@@ -30,6 +33,10 @@ import ListGroupItemColor from './list_group_item_color';
 const listGroupItemColorSource = require('!!raw-loader!./list_group_item_color');
 const listGroupItemColorHtml = renderToHtml(ListGroupItemColor);
 
+import PinnableListGroup from './pinnable_list_group';
+const pinnableListGroupSource = require('!!raw-loader!./pinnable_list_group');
+const pinnableListGroupHtml = renderToHtml(PinnableListGroup);
+
 export const ListGroupExample = {
   title: 'List group',
   sections: [
@@ -205,6 +212,58 @@ export const ListGroupExample = {
   label="Primary"
   color="primary"
   size="s"
+/>`,
+    },
+    {
+      title: 'Pinnable list group',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: pinnableListGroupSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: pinnableListGroupHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            <strong>EuiPinnableListGroup</strong> is simply an extra wrapper
+            around an{' '}
+            <Link to="/display/list-group">
+              <strong>EuiListGroup</strong>
+            </Link>{' '}
+            that provides visual indicators for <strong>pinning</strong>.
+          </p>
+          <p>
+            Pinning is the concept that users can click a pin icon and add it to
+            a subset of links (most likely shown in different list group). By
+            providing an <EuiCode>onPinClick</EuiCode> handler, the component
+            will automatically add the pin action to the item. However, the
+            consuming application must manage the <EuiCode>listItem</EuiCode>s
+            and their <EuiCode>pinned</EuiCode> state.
+          </p>
+          <p>
+            In order to get the full benefit of using{' '}
+            <strong>EuiPinnableListGroup</strong>, the component only supports
+            providing list items via the <EuiCode>listItem</EuiCode> prop and
+            does not support <EuiCode>children</EuiCode>.
+          </p>
+        </>
+      ),
+      props: { EuiPinnableListGroup, EuiPinnableListGroupItem },
+      demo: <PinnableListGroup />,
+      snippet: `<EuiPinnableListGroup
+  onPinClick={item => {}}
+  listItems={[
+    {
+      label: 'A link',
+      href: '#',
+      pinned: true,
+      isActive: true,
+    },
+  ]}
 />`,
     },
   ],

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
@@ -68,7 +68,7 @@ export default class extends Component {
           extraAction={{
             color: 'subdued',
             onClick: this.link1Clicked,
-            iconType: favorite1 === 'link1' ? 'pinFilled' : 'pin',
+            iconType: favorite1 === 'link1' ? 'starFilled' : 'starEmpty',
             iconSize: 's',
             'aria-label': 'Favorite link1',
             alwaysShow: favorite1 === 'link1',
@@ -83,7 +83,7 @@ export default class extends Component {
           extraAction={{
             color: 'subdued',
             onClick: this.link2Clicked,
-            iconType: favorite2 === 'link2' ? 'pinFilled' : 'pin',
+            iconType: favorite2 === 'link2' ? 'starFilled' : 'starEmpty',
             iconSize: 's',
             'aria-label': 'Favorite link2',
             alwaysShow: favorite2 === 'link2',
@@ -98,7 +98,7 @@ export default class extends Component {
           extraAction={{
             color: 'subdued',
             onClick: this.link3Clicked,
-            iconType: favorite3 === 'link3' ? 'pinFilled' : 'pin',
+            iconType: favorite3 === 'link3' ? 'starFilled' : 'starEmpty',
             iconSize: 's',
             'aria-label': 'Favorite link3',
             alwaysShow: favorite3 === 'link3',
@@ -114,7 +114,7 @@ export default class extends Component {
           extraAction={{
             color: 'subdued',
             onClick: () => window.alert('Action clicked'),
-            iconType: 'pin',
+            iconType: 'starEmpty',
             iconSize: 's',
             'aria-label': 'Favorite link4',
           }}

diff --git a/src-docs/src/views/list_group/pinnable_list_group.tsx b/src-docs/src/views/list_group/pinnable_list_group.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import {
+  EuiPinnableListGroup,
+  EuiPinnableListGroupItemProps,
+} from '../../../../src/components/list_group';
+
+const someListItems: EuiPinnableListGroupItemProps[] = [
+  {
+    label: 'Label with iconType',
+    iconType: 'stop',
+  },
+  {
+    label: 'Pinned button with onClick',
+    pinned: true,
+    onClick: e => {
+      console.log('Pinned button clicked', e);
+    },
+  },
+  {
+    label: 'Link with href and custom pin titles',
+    href: '/#',
+  },
+  {
+    label: 'Active link',
+    isActive: true,
+    href: '/#',
+  },
+  {
+    label: 'Custom extra actions will override pinning ability',
+    extraAction: {
+      iconType: 'bell',
+      alwaysShow: true,
+      'aria-label': 'bell',
+    },
+  },
+];
+
+export default () => (
+  <>
+    <EuiPinnableListGroup
+      listItems={someListItems}
+      onPinClick={item => {
+        console.warn('Clicked: ', item);
+      }}
+      maxWidth="none"
+      pinTitle={(item: EuiPinnableListGroupItemProps) => `Pin ${item.label}`}
+      unpinTitle={(item: EuiPinnableListGroupItemProps) =>
+        `Unpin ${item.label}`
+      }
+    />
+  </>
+);
diff --git a/src-docs/src/views/list_group/props.tsx b/src-docs/src/views/list_group/props.tsx
@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from 'react';
+
+import { EuiPinnableListGroupItemProps } from '../../../../src/components/list_group';
+
+export const EuiPinnableListGroupItem: FunctionComponent<
+  EuiPinnableListGroupItemProps
+> = () => <div />;
diff --git a/src/components/collapsible_nav/_index.scss b/src/components/collapsible_nav/_index.scss
@@ -1,4 +1,4 @@
 @import 'variables';
 
-@import 'collapsible_nav_group/index';
 @import 'collapsible_nav';
+@import 'collapsible_nav_group/index';
diff --git a/src/components/index.js b/src/components/index.js
@@ -186,7 +186,11 @@ export {
 
 export { EuiLink } from './link';
 
-export { EuiListGroup, EuiListGroupItem } from './list_group';
+export {
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiPinnableListGroup,
+} from './list_group';
 
 export { EuiMark } from './mark';
 

diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -44,6 +44,7 @@ exports[`EuiListGroup is rendered with listItems 1`] = `
       </span>
     </span>
     <button
+      aria-label="bell"
       class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
@@ -69,6 +70,21 @@ exports[`EuiListGroup is rendered with listItems 1`] = `
       </span>
     </button>
   </li>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isActive euiListGroupItem-isClickable"
+  >
+    <a
+      class="euiListGroupItem__button"
+      href="#"
+    >
+      <span
+        class="euiListGroupItem__label"
+        title="Active link"
+      >
+        Active link
+      </span>
+    </a>
+  </li>
   <li
     class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
   >
@@ -123,6 +139,7 @@ exports[`EuiListGroup is rendered with listItems and color 1`] = `
       </span>
     </span>
     <button
+      aria-label="bell"
       class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
@@ -148,6 +165,21 @@ exports[`EuiListGroup is rendered with listItems and color 1`] = `
       </span>
     </button>
   </li>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--primary euiListGroupItem-isActive euiListGroupItem-isClickable"
+  >
+    <a
+      class="euiListGroupItem__button"
+      href="#"
+    >
+      <span
+        class="euiListGroupItem__label"
+        title="Active link"
+      >
+        Active link
+      </span>
+    </a>
+  </li>
   <li
     class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--primary euiListGroupItem-isClickable"
   >

diff --git a/src/components/list_group/_index.scss b/src/components/list_group/_index.scss
@@ -2,3 +2,4 @@
 
 @import 'list_group';
 @import 'list_group_item';
+@import 'pinnable_list_group/index';
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
@@ -13,29 +13,52 @@
     background-color: $euiListGroupItemHoverBackground;
   }
 
-  &.euiListGroupItem-isClickable .euiListGroupItem__button:focus {
+  // Can't be grouped with above or else IE will ignore the whole group
+  &.euiListGroupItem-isClickable:focus-within {
     background-color: $euiListGroupItemHoverBackground;
-    text-decoration: underline;
   }
 
   &.euiListGroupItem--ghost {
-    &.euiListGroupItem-isActive,
-    &.euiListGroupItem-isClickable:hover,
-    &.euiListGroupItem-isClickable .euiListGroupItem__button:focus {
+    &.euiListGroupItem-isClickable:hover {
+      background-color: $euiListGroupItemHoverBackgroundGhost;
+    }
+
+    // Can't be grouped with above or else IE will ignore the whole group
+    &.euiListGroupItem-isClickable:focus-within {
       background-color: $euiListGroupItemHoverBackgroundGhost;
     }
   }
 
+  &.euiListGroupItem-isClickable:hover .euiListGroupItem__button,
+  .euiListGroupItem__button:hover,
+  .euiListGroupItem__button:focus {
+    text-decoration: underline;
+  }
+
   // Style all disabled list items whether or not they are links or buttons
   &.euiListGroupItem-isDisabled,
   &.euiListGroupItem-isDisabled:hover,
   &.euiListGroupItem-isDisabled:focus,
   &.euiListGroupItem-isDisabled .euiListGroupItem__button:hover,
   &.euiListGroupItem-isDisabled .euiListGroupItem__button:focus {
     color: $euiButtonColorDisabled;
-    text-decoration: none;
     cursor: not-allowed;
     background-color: transparent;
+    text-decoration: none;
+  }
+}
+
+// IE doesn't support :focus-within
+@include internetExplorerOnly {
+  .euiListGroupItem__button:hover,
+  .euiListGroupItem__button:focus {
+    background-color: $euiListGroupItemHoverBackground;
+    border-radius: $euiBorderRadius;
+
+    .euiListGroupItem--ghost .euiListGroupItem__button:hover,
+    .euiListGroupItem--ghost .euiListGroupItem__button:focus {
+      background-color: $euiListGroupItemHoverBackgroundGhost;
+    }
   }
 }
 

diff --git a/src/components/list_group/index.ts b/src/components/list_group/index.ts
@@ -1,2 +1,7 @@
 export { EuiListGroup, EuiListGroupProps } from './list_group';
 export { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item';
+export {
+  EuiPinnableListGroup,
+  EuiPinnableListGroupProps,
+  EuiPinnableListGroupItemProps,
+} from './pinnable_list_group';
diff --git a/src/components/list_group/list_group.test.tsx b/src/components/list_group/list_group.test.tsx
@@ -15,6 +15,7 @@ const someListItems: EuiListGroupItemProps[] = [
     extraAction: {
       iconType: 'bell',
       alwaysShow: true,
+      'aria-label': 'bell',
     },
   },
   {
@@ -23,6 +24,11 @@ const someListItems: EuiListGroupItemProps[] = [
       console.log('Visualize clicked', e);
     },
   },
+  {
+    label: 'Active link',
+    isActive: true,
+    href: '#',
+  },
   {
     label: 'Link with href',
     href: '#',
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@

		@import 'list_group';
		@import 'list_group_item';
		@import 'pinnable_list_group/index';