[Emotion] Convert EuiListGroup

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 />
+);