[Emotion] Convert EuiSelectableTemplateSitewide (#7944)

packages/eui/changelogs/upcoming/7944.md

@@ -0,0 +1,6 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiSelectableTemplateSitewide` to Emotion
+  - Removed `$euiSelectableTemplateFocusBackgroundLight`
+  - Removed `$euiSelectableTemplateFocusBackgroundDark`
+  - Removed `$euiSelectableTemplateSitewideTypes`

packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_option.tsx

@@ -1,8 +1,16 @@
 import React from 'react';
 
-import { EuiPanel, EuiAvatar, EuiSelectableListItem } from '../../../../../src';
+import {
+  EuiPanel,
+  EuiAvatar,
+  EuiSelectableListItem,
+  useEuiMemoizedStyles,
+} from '../../../../../src';
+import { euiSelectableTemplateSitewideRenderOptions } from '../../../../../src/components/selectable/selectable_templates';
+import { euiSelectableTemplateSitewideStyles } from '../../../../../src/components/selectable/selectable_templates/selectable_template_sitewide.styles';
 
 export default () => {
+  const styles = useEuiMemoizedStyles(euiSelectableTemplateSitewideStyles);
   const props = {
     style: {
       height: 68,
@@ -12,6 +20,7 @@ export default () => {
     showIcons: false,
     prepend: <EuiAvatar name="B" color="#eee" type="space" size="s" />,
     append: <EuiAvatar name="C" color="#eee" type="space" size="s" />,
+    css: styles.euiSelectableTemplateSitewide__listItem,
     className: 'euiSelectableTemplateSitewide__listItem',
     role: 'presentation',
     'aria-selected': undefined,
@@ -20,20 +29,25 @@ export default () => {
   return (
     <EuiPanel paddingSize="none">
       <EuiSelectableListItem {...props}>
-        <span className="euiSelectableTemplateSitewide__listItemTitle">
-          A. Label
-        </span>
-        <span className="euiSelectableTemplateSitewide__optionMetasList">
-          <span className="euiSelectableTemplateSitewide__optionMeta euiSelectableTemplateSitewide__optionMeta--application">
-            D. Meta
-          </span>
-          <span className="euiSelectableTemplateSitewide__optionMeta euiSelectableTemplateSitewide__optionMeta--deployment">
-            Deployment
-          </span>
-          <span className="euiSelectableTemplateSitewide__optionMeta">
-            Default display
-          </span>
-        </span>
+        {euiSelectableTemplateSitewideRenderOptions(
+          {
+            label: 'A. Label',
+            meta: [
+              {
+                text: 'D. Meta',
+                type: 'application',
+              },
+              {
+                text: 'Deployment',
+                type: 'deployment',
+              },
+              {
+                text: 'Default display',
+              },
+            ],
+          },
+          ''
+        )}
       </EuiSelectableListItem>
     </EuiPanel>
   );

packages/eui/src/components/index.scss

@@ -3,4 +3,3 @@
 @import 'combo_box/index';
 @import 'datagrid/index';
 @import 'form/index';
-@import 'selectable/index';

packages/eui/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
 <div
-  class="euiSelectable euiSelectableTemplateSitewide testClass1 testClass2 emotion-euiSelectable-euiTestCss"
+  class="euiSelectable euiSelectableTemplateSitewide testClass1 testClass2 emotion-euiSelectable-euiSelectableTemplateSitewide-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
@@ -54,7 +54,7 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
 
 exports[`EuiSelectableTemplateSitewide props popoverButton is rendered 1`] = `
 <div
-  class="euiSelectable euiSelectableTemplateSitewide emotion-euiSelectable"
+  class="euiSelectable euiSelectableTemplateSitewide emotion-euiSelectable-euiSelectableTemplateSitewide"
 >
   <div
     class="euiPopover emotion-euiPopover-inline-block"
@@ -74,7 +74,7 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is rendered 1`] = `
 
 exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
 <div
-  class="euiSelectable euiSelectableTemplateSitewide emotion-euiSelectable"
+  class="euiSelectable euiSelectableTemplateSitewide emotion-euiSelectable-euiSelectableTemplateSitewide"
 >
   <div
     class="euiPopover emotion-euiPopover-block"
@@ -125,7 +125,7 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
 
 exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
 <div
-  class="euiSelectable euiSelectableTemplateSitewide emotion-euiSelectable"
+  class="euiSelectable euiSelectableTemplateSitewide emotion-euiSelectable-euiSelectableTemplateSitewide"
 >
   <div
     class="euiPopover customPopoverClass emotion-euiPopover-block"
@@ -176,7 +176,7 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
 
 exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
 <div
-  class="euiSelectable euiSelectableTemplateSitewide emotion-euiSelectable"
+  class="euiSelectable euiSelectableTemplateSitewide emotion-euiSelectable-euiSelectableTemplateSitewide"
 >
   <div
     class="euiPopover emotion-euiPopover-block"