[Emotion] Convert EuiListGroup (#6207)

* Converted list group styles to emotion

* Initial list group item styles

* Converting `EuiListGroupItem` and `EuiPinnableListGroup` to Emotion

* Adding extra action component

* Removed `inherit` color from `EuiListGroupItem`

* Removed `ghost` color in favor of theme provider

* Passing down `size` and `color` props

* Added new CL entry

* Added list group inner

* Making focus outlines look good

* Adding `alwaysShow`

* Custom color in last example

* Updating ghost examples with theme provider

* Reverting class names in use

* CL

* [EuiDataGrid] Remove mounted snapshots in favor of render

* [PR feedback ] misc test/css tweaks

- make `css` merging as top-level prop and as iconProps work correctly

- add requiredProps to basic renders test

* [PR feedback] Remove unnecessary `euiListGroupItemInnerStyles` args in favor of array logic

* [PR feedback] Remove `euiListGroupItemStyles` in favor of array conditionals & obj keys

+ DRY out repeated euiBackgroundColor() calls

* Fix non-dark-mode EuiListGroup in docs

* [docs] Convert EuiListGroup docs from js to tsx

* [EuiListGroupItemExtraAction] Export props type and document more clearly in props table

+ move alwayShow to top of props list

* [EuiListGroupItemExtraAction] Fix non-working hover/focus CSS selectors

- `.euiListGroupItem-isDisabled` is no longer a className, so the :not() selector is not working and the action still appears on hover on disabled items

- passing `parentIsDisabled` as an internal prop from EuiListGroupItem and making it an array conditional solves the hover issue

- the parent li is not focusable so the `:focus &` selector doesn't work either. Changing it to to the button and `+ &` solves the issue

+ remove unnecessary comment

* [EuiListGroupItemExtraAction] Add basic unit tests + clean up styles array further

- the hover CSS is unnecessary if alwaysShow is true, so add a condition for it

* Fix overflowing text pushing action icons outside of item

* [EuiListGroupItemExtraAction] Fix margin-right spacing

- currently 8px on prod which generally seems to match the button padding size better

* [Enhancement] Improve button hitbox of tooltip wrapped items

- this allows button content inside tooltips to grow to 100% of the EuiListGroupItem
- this is an enhancement from current prod behavior

* Clean up wrapText CSS

- Remove unnecessary CSS on __inner - the width: 100% is totally unnecessary (tested with both extra action and without) and the word break can be applied to the __label CSS instead

- DRY out unsetting CSS by using ternary instead of base CSS (but keep empty base for naming)

- DRY out CSS by using text utils

* Fix raw `icon` elements being passed it not receiving our new Emotion CSS

* Fix/cleanup misc custom maxWidth behavior

- use logical CSS property instead of max-width

- do not apply maxWidthDefault emotion style if using a custom inline max-width

- fix maxWidth conditional checks

- remove || fallback / type def in favor of let

- improve props documentation/typing

* [docs] other misc props documentation improvements

* misc code organization

* [EuiListGroupItem] Add working `shouldRenderCustomStyles`

+ test nested `iconProps` and `extraAction` props

+ fix `extraAction` props not correctly passing/merging `className`

+ fix misc console.warn about missing EuiButtonIcon aria-label

+ add test for `style` prop on parent EuiListGroupItem, since it gets spread to the wrapped child and not the className wrapper

* Remove `euiPinnableListGroup__itemExtraAction` classes

- they're now being correctly passed to the `EuiListGroupItemExtraAction` but they're not really doing anything / just adding a lot of noise

- consumers can simply hook into `.euiListGroupItemExtraAction` instead

- no Kibana references to these classes, so IMO they're safe to remove

Co-authored-by: Constance Chen <[email protected]>

src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx

@@ -25,6 +25,7 @@ import { KibanaNavLinks, SecurityGroup } from './collapsible_nav_list';
 
 import contentSvg from '../../images/content.svg';
 import { useExitPath } from '../../services/routing/routing';
+import { EuiThemeProvider } from '../../../../src/services';
 
 const TopLinks: EuiPinnableListGroupItemProps[] = [
   {
@@ -151,22 +152,23 @@ const CollapsibleNavAll = () => {
       {/* Dark deployments section */}
       <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
         <EuiCollapsibleNavGroup isCollapsible={false} background="dark">
-          <EuiListGroup
-            color="ghost"
-            maxWidth="none"
-            gutterSize="none"
-            size="s"
-            listItems={[
-              {
-                label: 'Manage deployment',
-                href: '#',
-                iconType: 'logoCloud',
-                iconProps: {
-                  color: 'ghost',
+          <EuiThemeProvider colorMode="dark">
+            <EuiListGroup
+              maxWidth="none"
+              gutterSize="none"
+              size="s"
+              listItems={[
+                {
+                  label: 'Manage deployment',
+                  href: '#',
+                  iconType: 'logoCloud',
+                  iconProps: {
+                    color: 'ghost',
+                  },
                 },
-              },
-            ]}
-          />
+              ]}
+            />
+          </EuiThemeProvider>
         </EuiCollapsibleNavGroup>
       </EuiFlexItem>
 

src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx

@@ -11,6 +11,7 @@ import {
 import { EuiSpacer } from '../../../../src/components/spacer';
 import { EuiButton, EuiButtonIcon } from '../../../../src/components/button';
 import { EuiLink } from '../../../../src/components/link';
+import { EuiThemeProvider } from '../../../../src/services';
 
 const deploymentsList: EuiListGroupProps['listItems'] = [
   {
@@ -62,11 +63,11 @@ export const DeploymentsGroup = (
     background="dark"
   >
     <div role="group" className="kibanaNavDeployment__content">
-      <EuiListGroup listItems={deploymentsList} flush />
-      <EuiSpacer size="s" />
-      <EuiButton color="ghost" fullWidth>
-        Manage deployments
-      </EuiButton>
+      <EuiThemeProvider colorMode="dark">
+        <EuiListGroup listItems={deploymentsList} flush />
+        <EuiSpacer size="s" />
+        <EuiButton fullWidth>Manage deployments</EuiButton>
+      </EuiThemeProvider>
     </div>
   </EuiCollapsibleNavGroup>
 );

src-docs/src/views/list_group/list_group_example.js

@@ -9,7 +9,7 @@ import {
   EuiPinnableListGroup,
   EuiCode,
 } from '../../../../src/components';
-import { EuiPinnableListGroupItem } from './props';
+import { EuiPinnableListGroupItem, EuiListGroupItemExtraAction } from './props';
 
 import ListGroup from './list_group';
 const listGroupSource = require('!!raw-loader!./list_group');
@@ -53,7 +53,11 @@ export const ListGroupExample = {
           </p>
         </>
       ),
-      props: { EuiListGroup, EuiListGroupItem },
+      props: {
+        EuiListGroup,
+        EuiListGroupItem,
+        EuiListGroupItemExtraAction,
+      },
       demo: <ListGroup />,
       snippet: `<EuiListGroup flush={true} bordered={true}>
   <EuiListGroupItem onClick={handleOnClick} label="Item" />
@@ -103,7 +107,7 @@ export const ListGroupExample = {
       title: 'Secondary link actions',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: listGroupLinkActionsSource,
         },
       ],
@@ -129,6 +133,9 @@ export const ListGroupExample = {
     alwaysShow: pinned,
   }}
 />`,
+      props: {
+        EuiListGroupItemExtraAction,
+      },
     },
     {
       title: 'Text wrapping and tooltips',
@@ -172,13 +179,11 @@ export const ListGroupExample = {
       text: (
         <>
           <p>
-            <strong>EuiListGroupItems</strong> will inherit the color from their
-            element type whether it is a <EuiCode>button</EuiCode>,{' '}
-            <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. Or provide the prop directly to{' '}
-            <strong>EuiListGroup</strong>.
+            <strong>EuiListGroupItems</strong> will get by default the color{' '}
+            <EuiCode>text</EuiCode>. You can enforce a different color of{' '}
+            <EuiCode>primary</EuiCode>, <EuiCode>text</EuiCode>, or{' '}
+            <EuiCode>subdued</EuiCode> with the <EuiCode>color</EuiCode> prop.
+            Or provide the prop directly to <strong>EuiListGroup</strong>.
           </p>
           <p>
             They also accept options for text size;{' '}

src-docs/src/views/list_group/list_group_item_color.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 
 import {
+  EuiSpacer,
+  EuiPanel,
   EuiListGroupItem,
   EuiListGroup,
-} from '../../../../src/components/list_group';
-import { EuiSpacer } from '../../../../src/components/spacer';
+} from '../../../../src/components/';
+import { EuiThemeProvider } from '../../../../src/services';
 
 export default () => (
   <>
     <EuiListGroup>
-      <EuiListGroupItem href="#" label="Inherit by default (xs)" size="xs" />
+      <EuiListGroupItem href="#" label="Text by default (xs)" size="xs" />
 
       <EuiListGroupItem
         onClick={() => {}}
@@ -25,8 +27,12 @@ export default () => (
 
     <EuiSpacer size="s" />
 
-    <EuiListGroup style={{ background: 'black' }}>
-      <EuiListGroupItem href="#" label="Ghost" color="ghost" />
-    </EuiListGroup>
+    <EuiThemeProvider colorMode="dark">
+      <EuiPanel borderRadius="none" hasShadow={false} color="subdued">
+        <EuiListGroup>
+          <EuiListGroupItem href="#" label="Ghost" />
+        </EuiListGroup>
+      </EuiPanel>
+    </EuiThemeProvider>
   </>
 );

src-docs/src/views/list_group/list_group_link_actions.js → src-docs/src/views/list_group/list_group_link_actions.tsx

@@ -4,10 +4,10 @@ import { EuiListGroup, EuiListGroupItem } from '../../../../src/components';
 import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
-  const [favorite1, setFavorite1] = useState(undefined);
-  const [favorite2, setFavorite2] = useState('link2');
-  const [favorite3, setFavorite3] = useState(undefined);
-  const [favorite4, setFavorite4] = useState(undefined);
+  const [favorite1, setFavorite1] = useState<string | undefined>(undefined);
+  const [favorite2, setFavorite2] = useState<string | undefined>('link2');
+  const [favorite3, setFavorite3] = useState<string | undefined>(undefined);
+  const [favorite4, setFavorite4] = useState<string | undefined>(undefined);
 
   const listGroupLinkId__1 = useGeneratedHtmlId({
     prefix: 'listGroupLink',
@@ -33,28 +33,28 @@ export default () => {
   const link1Clicked = () => {
     setFavorite1(favorite1 === 'link1' ? undefined : 'link1');
     if (favorite1 === undefined) {
-      document.activeElement.blur();
+      (document.activeElement as HTMLElement).blur();
     }
   };
 
   const link2Clicked = () => {
     setFavorite2(favorite2 === 'link2' ? undefined : 'link2');
     if (favorite2 === undefined) {
-      document.activeElement.blur();
+      (document.activeElement as HTMLElement).blur();
     }
   };
 
   const link3Clicked = () => {
     setFavorite3(favorite3 === 'link3' ? undefined : 'link3');
     if (favorite3 === undefined) {
-      document.activeElement.blur();
+      (document.activeElement as HTMLElement).blur();
     }
   };
 
   const link4Clicked = () => {
     setFavorite4(favorite4 === 'link4' ? undefined : 'link4');
     if (favorite3 === undefined) {
-      document.activeElement.blur();
+      (document.activeElement as HTMLElement).blur();
     }
   };
 

src-docs/src/views/list_group/list_group_links.js → src-docs/src/views/list_group/list_group_links.tsx

@@ -7,36 +7,31 @@ const myContent = [
     label: 'First link',
     href: '#/display/list-group',
     iconType: 'calendar',
-    size: 's',
   },
   {
     label: 'This is an active link with very long label that truncates',
     href: '#/display/list-group',
     isActive: true,
     iconType: 'clock',
-    size: 's',
   },
   {
     label: 'Third link is disabled',
     href: '#/display/list-group',
     isDisabled: true,
     iconType: 'compute',
-    size: 's',
   },
   {
     label: 'Fourth link',
     href: '#/display/list-group',
     iconType: 'copyClipboard',
-    size: 's',
   },
   {
     label: 'Fifth link',
     href: '#/display/list-group',
     iconType: 'crosshairs',
-    size: 's',
   },
 ];
 
 export default () => {
-  return <EuiListGroup listItems={myContent} />;
+  return <EuiListGroup listItems={myContent} color="primary" size="s" />;
 };

src-docs/src/views/list_group/pinnable_list_group.tsx

@@ -9,7 +9,7 @@ const someListItems: EuiPinnableListGroupItemProps[] = [
   {
     id: '1',
     label: 'Label with iconType',
-    iconType: 'stop',
+    iconType: 'home',
     pinned: false,
   },
   {
@@ -22,6 +22,7 @@ const someListItems: EuiPinnableListGroupItemProps[] = [
     label: 'Link with href and custom pin titles',
     href: '/#',
     pinned: false,
+    color: 'primary',
   },
   {
     id: '3',

src-docs/src/views/list_group/props.tsx

@@ -1,7 +1,14 @@
 import React, { FunctionComponent } from 'react';
 
-import { EuiPinnableListGroupItemProps } from '../../../../src/components/list_group';
+import {
+  EuiPinnableListGroupItemProps,
+  EuiListGroupItemExtraActionProps,
+} from '../../../../src/components/list_group';
 
 export const EuiPinnableListGroupItem: FunctionComponent<EuiPinnableListGroupItemProps> = () => (
   <div />
 );
+
+export const EuiListGroupItemExtraAction: FunctionComponent<EuiListGroupItemExtraActionProps> = () => (
+  <div />
+);