[New Nav Feature] Added ghost colored EuiListGroupItem (#3018)

* Added color=ghost to list group item And fixed class names for list group * Added `color` prop to EuiListGroup Fixed color on disabled list group items * Fixing hover colors for each list item color * ghost example * Increase the height of large items too Fixes the hidden underline in focus state * Fixing demo to not apply black bg to list item * Snaps
elastic · Mar 17, 2020 · a945b08 · a945b08
1 parent 9fb2aab
commit a945b08
Show file tree

Hide file tree

Showing 11 changed files with 189 additions and 41 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
@@ -191,7 +191,8 @@ export const ListGroupExample = {
             <EuiCode>anchor</EuiCode>, or <EuiCode>span</EuiCode>. You can
             enforce a different color of <EuiCode>primary</EuiCode>,{' '}
             <EuiCode>text</EuiCode>, or <EuiCode>subdued</EuiCode> with the{' '}
-            <EuiCode>color</EuiCode> prop.
+            <EuiCode>color</EuiCode> prop. Or provide the prop directly to{' '}
+            <strong>EuiListGroup</strong>.
           </p>
           <p>
             They also accept options for text size;{' '}

diff --git a/src-docs/src/views/list_group/list_group_item_color.tsx b/src-docs/src/views/list_group/list_group_item_color.tsx
@@ -4,20 +4,29 @@ import {
   EuiListGroupItem,
   EuiListGroup,
 } from '../../../../src/components/list_group';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
-  <EuiListGroup>
-    <EuiListGroupItem href="#" label="Inherit by default (xs)" size="xs" />
+  <>
+    <EuiListGroup>
+      <EuiListGroupItem href="#" label="Inherit by default (xs)" size="xs" />
 
-    <EuiListGroupItem
-      onClick={() => {}}
-      label="Primary (s)"
-      color="primary"
-      size="s"
-    />
+      <EuiListGroupItem
+        onClick={() => {}}
+        label="Primary (s)"
+        color="primary"
+        size="s"
+      />
 
-    <EuiListGroupItem href="#" label="Text (m)" color="text" />
+      <EuiListGroupItem href="#" label="Text (m)" color="text" />
 
-    <EuiListGroupItem href="#" label="Subdued (l)" color="subdued" size="l" />
-  </EuiListGroup>
+      <EuiListGroupItem href="#" label="Subdued (l)" color="subdued" size="l" />
+    </EuiListGroup>
+
+    <EuiSpacer size="s" />
+
+    <EuiListGroup style={{ background: 'black' }}>
+      <EuiListGroupItem href="#" label="Ghost" color="ghost" />
+    </EuiListGroup>
+  </>
 );
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -28,12 +28,18 @@
   // Puts the arrow on the right
   flex-direction: row-reverse;
   justify-content: space-between;
+
+  .euiAccordion__iconWrapper {
+    margin-left: $euiSizeS;
+    margin-right: $euiSizeXS;
+  }
 }
 
 .euiAccordion__iconWrapper {
   @include size($euiSize);
   border-radius: $euiBorderRadius;
   margin-right: $euiSizeS;
+  margin-left: $euiSizeXS;
   flex-shrink: 0;
 
   // Nested to override EuiIcon

diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -3,14 +3,14 @@
 exports[`EuiListGroup is rendered 1`] = `
 <ul
   aria-label="aria-label"
-  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault testClass1 testClass2"
+  class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiListGroup is rendered with listItems 1`] = `
 <ul
-  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+  class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 >
   <li
     class="euiListGroupItem euiListGroupItem--medium"
@@ -87,21 +87,100 @@ exports[`EuiListGroup is rendered with listItems 1`] = `
 </ul>
 `;
 
+exports[`EuiListGroup is rendered with listItems and color 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--primary"
+  >
+    <span
+      class="euiListGroupItem__text"
+    >
+      <div
+        class="euiListGroupItem__icon"
+        data-euiicon-type="stop"
+      />
+      <span
+        class="euiListGroupItem__label"
+        title="Label with iconType"
+      >
+        Label with iconType
+      </span>
+    </span>
+  </li>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--primary euiListGroupItem-hasExtraAction"
+  >
+    <span
+      class="euiListGroupItem__text"
+    >
+      <span
+        class="euiListGroupItem__label"
+        title="Custom extra action"
+      >
+        Custom extra action
+      </span>
+    </span>
+    <button
+      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        data-euiicon-type="bell"
+      />
+    </button>
+  </li>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--primary euiListGroupItem-isClickable"
+  >
+    <button
+      class="euiListGroupItem__button"
+      type="button"
+    >
+      <span
+        class="euiListGroupItem__label"
+        title="Button with onClick"
+      >
+        Button with onClick
+      </span>
+    </button>
+  </li>
+  <li
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--primary euiListGroupItem-isClickable"
+  >
+    <a
+      class="euiListGroupItem__button"
+      href="#"
+    >
+      <span
+        class="euiListGroupItem__label"
+        title="Link with href"
+      >
+        Link with href
+      </span>
+    </a>
+  </li>
+</ul>
+`;
+
 exports[`EuiListGroup props bordered is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup-bordered euiListGroup--gutterS euiListGroup-maxWidthDefault"
+  class="euiListGroup euiListGroup-bordered euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 />
 `;
 
 exports[`EuiListGroup props flush is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup-flush euiListGroup--gutterS euiListGroup-maxWidthDefault"
+  class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 />
 `;
 
 exports[`EuiListGroup props gutter size m is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup--gutterM euiListGroup-maxWidthDefault"
+  class="euiListGroup euiListGroup--gutterMedium euiListGroup-maxWidthDefault"
 />
 `;
 
@@ -113,38 +192,38 @@ exports[`EuiListGroup props gutter size none is rendered 1`] = `
 
 exports[`EuiListGroup props gutter size s is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+  class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 />
 `;
 
 exports[`EuiListGroup props maxWidth as a number is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup--gutterS"
+  class="euiListGroup euiListGroup--gutterSmall"
   style="max-width:300px"
 />
 `;
 
 exports[`EuiListGroup props maxWidth as a string is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup--gutterS"
+  class="euiListGroup euiListGroup--gutterSmall"
   style="max-width:20em"
 />
 `;
 
 exports[`EuiListGroup props maxWidth as true is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+  class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 />
 `;
 
 exports[`EuiListGroup props showToolTips is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+  class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 />
 `;
 
 exports[`EuiListGroup props wrapText is rendered 1`] = `
 <ul
-  class="euiListGroup euiListGroup--gutterS euiListGroup-maxWidthDefault"
+  class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 />
 `;
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -17,6 +17,23 @@ exports[`EuiListGroupItem is rendered 1`] = `
 </li>
 `;
 
+exports[`EuiListGroupItem props color ghost is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--ghost"
+>
+  <span
+    class="euiListGroupItem__text"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title="Label"
+    >
+      Label
+    </span>
+  </span>
+</li>
+`;
+
 exports[`EuiListGroupItem props color inherit is rendered 1`] = `
 <li
   class="euiListGroupItem euiListGroupItem--medium"

diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
@@ -10,14 +10,22 @@
 
   &.euiListGroupItem-isActive,
   &.euiListGroupItem-isClickable:hover {
-    background-color: tintOrShade($euiColorLightestShade, 0%, 30%);
+    background-color: $euiListGroupItemHoverBackground;
   }
 
   &.euiListGroupItem-isClickable .euiListGroupItem__button:focus {
-    background-color: tintOrShade($euiColorLightestShade, 0%, 30%);
+    background-color: $euiListGroupItemHoverBackground;
     text-decoration: underline;
   }
 
+  &.euiListGroupItem--ghost {
+    &.euiListGroupItem-isActive,
+    &.euiListGroupItem-isClickable:hover,
+    &.euiListGroupItem-isClickable .euiListGroupItem__button:focus {
+      background-color: $euiListGroupItemHoverBackgroundGhost;
+    }
+  }
+
   // Style all disabled list items whether or not they are links or buttons
   &.euiListGroupItem-isDisabled,
   &.euiListGroupItem-isDisabled:hover,
@@ -46,10 +54,14 @@
   }
 
   @each $colorName, $color in $euiListGroupItemColorTypes {
-    .euiListGroupItem--#{$colorName} & {
+    .euiListGroupItem--#{$colorName} &:not(:disabled) {
       color: $color;
     }
   }
+
+  .euiListGroupItem-isActive:not(.euiListGroupItem--ghost) & {
+    color: $euiTextColor;
+  }
 }
 
 .euiListGroupItem__label {
@@ -94,6 +106,10 @@
   line-height: $euiSizeM;
 }
 
+.euiListGroupItem--large {
+  line-height: $euiSizeL;
+}
+
 .euiListGroupItem--wrapText {
   .euiListGroupItem__button,
   .euiListGroupItem__text {

diff --git a/src/components/list_group/_variables.scss b/src/components/list_group/_variables.scss
@@ -1,12 +1,16 @@
+$euiListGroupItemHoverBackground: transparentize($euiColorLightShade, .75);
+$euiListGroupItemHoverBackgroundGhost: transparentize($euiColorGhost, .9);
+
 $euiListGroupGutterTypes: (
-  gutterS: $euiSizeS,
-  gutterM: $euiSize,
+  gutterSmall: $euiSizeS,
+  gutterMedium: $euiSize,
 );
 
 $euiListGroupItemColorTypes: (
-  primary: $euiColorPrimary,
+  primary: $euiColorPrimaryText,
   text: $euiTextColor,
   subdued: $euiColorDarkShade,
+  ghost: $euiColorGhost,
 );
 
 $euiListGroupItemSizeTypes: (

diff --git a/src/components/list_group/list_group.test.tsx b/src/components/list_group/list_group.test.tsx
@@ -42,6 +42,14 @@ describe('EuiListGroup', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('is rendered with listItems and color', () => {
+    const component = render(
+      <EuiListGroup color="primary" listItems={someListItems} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   describe('props', () => {
     test('bordered is rendered', () => {
       const component = render(<EuiListGroup bordered />);

diff --git a/src/components/list_group/list_group.tsx b/src/components/list_group/list_group.tsx
@@ -7,8 +7,8 @@ import { CommonProps } from '../common';
 type GutterSize = 'none' | 's' | 'm';
 const gutterSizeToClassNameMap: { [size in GutterSize]: string } = {
   none: '',
-  s: 'euiListGroup--gutterS',
-  m: 'euiListGroup--gutterM',
+  s: 'euiListGroup--gutterSmall',
+  m: 'euiListGroup--gutterMedium',
 };
 export const GUTTER_SIZES = Object.keys(
   gutterSizeToClassNameMap
@@ -36,6 +36,11 @@ export type EuiListGroupProps = CommonProps &
      */
     listItems?: EuiListGroupItemProps[];
 
+    /**
+     * Change the colors of all `listItems` at once
+     */
+    color?: EuiListGroupItemProps['color'];
+
     /**
      * Sets the max-width of the page,
      * set to `true` to use the default size,
@@ -68,6 +73,7 @@ export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
   wrapText = false,
   maxWidth = true,
   showToolTips = false,
+  color,
   ariaLabelledby,
   ...rest
 }) => {
@@ -105,6 +111,7 @@ export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
           key={`title-${index}`}
           showToolTip={showToolTips}
           wrapText={wrapText}
+          color={color}
           {...item}
         />,
       ];