Allow EuiListGroupItem to pass a custom element as the icon (#1726)

elastic · Mar 13, 2019 · 18c97c6 · 18c97c6
1 parent a54ab16
commit 18c97c6
Show file tree

Hide file tree

Showing 5 changed files with 469 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Allow toasts in `EuiGlobalToastList` to override `toastLifeTimeMs` ([#1720](https://github.com/elastic/eui/pull/1720))
+- Allow `EuiListGroupItem` to pass a custom element as the `icon` ([#1726](https://github.com/elastic/eui/pull/1726))
 
 **Bug fixes**
 

diff --git a/src/components/list_group/__snapshots__/list_group_item.test.js.snap b/src/components/list_group/__snapshots__/list_group_item.test.js.snap
@@ -17,7 +17,39 @@ exports[`EuiListGroupItem is rendered 1`] = `
 </li>
 `;
 
-exports[`EuiListGroupItem renders href 1`] = `
+exports[`EuiListGroupItem props extraAction is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+  <button
+    aria-label="label"
+    class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiIcon--medium euiButtonIcon__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </button>
+</li>
+`;
+
+exports[`EuiListGroupItem props href is rendered 1`] = `
 <li
   class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
 >
@@ -34,3 +66,258 @@ exports[`EuiListGroupItem renders href 1`] = `
   </a>
 </li>
 `;
+
+exports[`EuiListGroupItem props icon is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__icon"
+    />
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props iconType is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <svg
+      class="euiIcon euiIcon--medium euiListGroupItem__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props isActive is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isActive"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props isDisabled is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isDisabled"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props onClick is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
+>
+  <button
+    class="euiListGroupItem__button"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </button>
+</li>
+`;
+
+exports[`EuiListGroupItem props size l is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--large"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props size m is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props size s is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--small"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props size xs is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--xSmall"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem props wrapText is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--wrapText"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem renders a disabled button even if provided an href 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isDisabled euiListGroupItem-isClickable"
+>
+  <button
+    class="euiListGroupItem__button"
+    disabled=""
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </button>
+</li>
+`;
+
+exports[`EuiListGroupItem renders a disabled button even if provided an href 2`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isDisabled euiListGroupItem-isClickable"
+>
+  <button
+    class="euiListGroupItem__button"
+    disabled=""
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </button>
+</li>
+`;
+
+exports[`EuiListGroupItem throws an warning if both iconType and icon are provided but still renders 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <svg
+      class="euiIcon euiIcon--medium euiListGroupItem__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+    <span
+      class="euiListGroupItem__label"
+      title=""
+    />
+  </span>
+</li>
+`;
+
+exports[`EuiListGroupItem throws an warning if both onClick and href are provided but still renders 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
+>
+  <a
+    class="euiListGroupItem__button"
+    href="#"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title=""
+    />
+  </a>
+</li>
+`;
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
@@ -18,8 +18,8 @@
     background-color: tintOrShade($euiColorLightestShade, 0%, 30%);
   }
 
-  &.euiListGroupItem-isClickable:hover,
-  &.euiListGroupItem-isClickable:focus {
+  &.euiListGroupItem-isClickable:hover .euiListGroupItem__label,
+  &.euiListGroupItem-isClickable:focus .euiListGroupItem__label {
     text-decoration: underline;
   }
 
@@ -56,10 +56,6 @@
   text-overflow: ellipsis;
 }
 
-.euiListGroupItem__button:focus {
-  text-decoration: underline;
-}
-
 .euiListGroupItem__extraAction {
   opacity: 0;
   margin-right: $euiSizeS;

diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
@@ -22,6 +22,7 @@ export const EuiListGroupItem = ({
   href,
   className,
   iconType,
+  icon,
   extraAction,
   onClick,
   size,
@@ -48,6 +49,13 @@ export const EuiListGroupItem = ({
     iconNode = (
       <EuiIcon className="euiListGroupItem__icon" type={iconType} />
     );
+
+    if (icon) {
+      console.warn('Both `iconType` and `icon` were passed to EuiListGroupItem but only one can exist. The `iconType` was used.');
+    }
+  } else if (icon) {
+    iconNode = React.cloneElement(icon,
+      { className: classNames('euiListGroupItem__icon', icon.props.className) });
   }
 
   let extraActionNode;
@@ -89,6 +97,10 @@ export const EuiListGroupItem = ({
         {labelContent}
       </a>
     );
+
+    if (onClick) {
+      console.warn('Both `href` and `onClick` were passed to EuiListGroupItem but only one can exist. The `href` was used.');
+    }
   } else if ((href && isDisabled) || onClick) {
     itemContent = (
       <button
@@ -167,10 +179,16 @@ EuiListGroupItem.propTypes = {
   href: PropTypes.string,
 
   /**
-   * See `EuiIcon`
+   * Adds `EuiIcon` of `EuiIcon.type`
    */
   iconType: PropTypes.oneOf(ICON_TYPES),
 
+  /**
+   * Custom node to pass as the icon. Cannot be used in conjunction
+   * with `iconType`.
+   */
+  icon: PropTypes.element,
+
   /**
    * Display tooltip on list item
    */