[Emotion] Convert EuiFacetButton and EuiFacetGroup

src-docs/src/views/facet/facet_layout.js

@@ -5,8 +5,6 @@ import {
   EuiFacetGroup,
   EuiIcon,
   EuiAvatar,
-  EuiTitle,
-  EuiSpacer,
 } from '../../../../src/components';
 
 import { euiPaletteColorBlind } from '../../../../src/services';
@@ -146,22 +144,8 @@ export default () => {
   };
 
   return (
-    <div>
-      <EuiTitle size="s">
-        <h3>Vertical</h3>
-      </EuiTitle>
-      <EuiFacetGroup style={{ maxWidth: 200 }}>
-        {facets('Vertical')}
-      </EuiFacetGroup>
-
-      <EuiSpacer />
-
-      <EuiTitle size="s">
-        <h3>Horizontal and large gutter</h3>
-      </EuiTitle>
-      <EuiFacetGroup layout="horizontal" gutterSize="l">
-        {facets('Horizontal')}
-      </EuiFacetGroup>
-    </div>
+    <EuiFacetGroup style={{ maxWidth: 200 }}>
+      {facets('Vertical')}
+    </EuiFacetGroup>
   );
 };

src/components/facet/__snapshots__/facet_button.test.tsx.snap

@@ -3,16 +3,16 @@
 exports[`EuiFacetButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiFacetButton euiFacetButton--unSelected testClass1 testClass2"
+  class="euiFacetButton testClass1 testClass2 css-1i5ch8m-euiFacetButton-unSelected"
   data-test-subj="test subject string"
   title="aria-label"
   type="button"
 >
   <span
-    class="euiFacetButton__content"
+    class="css-84oukk-euiFacetButton__content"
   >
     <span
-      class="euiFacetButton__text"
+      class="euiFacetButton__text css-w00iqi-euiFacetButton__text"
     >
       Content
     </span>
@@ -22,18 +22,18 @@ exports[`EuiFacetButton is rendered 1`] = `
 
 exports[`EuiFacetButton props icon is rendered 1`] = `
 <button
-  class="euiFacetButton euiFacetButton--unSelected"
+  class="euiFacetButton css-1i5ch8m-euiFacetButton-unSelected"
   type="button"
 >
   <span
-    class="euiFacetButton__content"
+    class="css-84oukk-euiFacetButton__content"
   >
     <span
-      class="euiFacetButton__icon"
+      class="euiFacetButton__icon css-1gu24b1-euiFacetButton__icon"
       data-euiicon-type="dot"
     />
     <span
-      class="euiFacetButton__text"
+      class="euiFacetButton__text css-w00iqi-euiFacetButton__text"
     >
       Content
     </span>
@@ -43,15 +43,15 @@ exports[`EuiFacetButton props icon is rendered 1`] = `
 
 exports[`EuiFacetButton props isDisabled is rendered 1`] = `
 <button
-  class="euiFacetButton euiFacetButton--unSelected"
+  class="euiFacetButton css-1i5ch8m-euiFacetButton-unSelected"
   disabled=""
   type="button"
 >
   <span
-    class="euiFacetButton__content"
+    class="css-84oukk-euiFacetButton__content"
   >
     <span
-      class="euiFacetButton__text"
+      class="euiFacetButton__text css-w00iqi-euiFacetButton__text"
     >
       Content
     </span>
@@ -61,21 +61,21 @@ exports[`EuiFacetButton props isDisabled is rendered 1`] = `
 
 exports[`EuiFacetButton props isLoading is rendered 1`] = `
 <button
-  class="euiFacetButton euiFacetButton--unSelected"
+  class="euiFacetButton css-1i5ch8m-euiFacetButton-unSelected"
   disabled=""
   type="button"
 >
   <span
-    class="euiFacetButton__content"
+    class="css-84oukk-euiFacetButton__content"
   >
     <span
-      class="euiFacetButton__text"
+      class="euiFacetButton__text css-w00iqi-euiFacetButton__text"
     >
       Content
     </span>
     <span
       aria-label="Loading"
-      class="euiLoadingSpinner euiFacetButton__spinner css-155ohbx-euiLoadingSpinner-m"
+      class="euiLoadingSpinner css-qp12bi-euiLoadingSpinner-m-euiFacetButton__spinner"
       role="progressbar"
     />
   </span>
@@ -84,14 +84,14 @@ exports[`EuiFacetButton props isLoading is rendered 1`] = `
 
 exports[`EuiFacetButton props isSelected is rendered 1`] = `
 <button
-  class="euiFacetButton euiFacetButton--isSelected"
+  class="euiFacetButton css-ucajw6-euiFacetButton-isSelected"
   type="button"
 >
   <span
-    class="euiFacetButton__content"
+    class="css-84oukk-euiFacetButton__content"
   >
     <span
-      class="euiFacetButton__text"
+      class="euiFacetButton__text css-w00iqi-euiFacetButton__text"
     >
       Content
     </span>
@@ -101,19 +101,19 @@ exports[`EuiFacetButton props isSelected is rendered 1`] = `
 
 exports[`EuiFacetButton props quantity is rendered 1`] = `
 <button
-  class="euiFacetButton euiFacetButton--unSelected"
+  class="euiFacetButton css-1i5ch8m-euiFacetButton-unSelected"
   type="button"
 >
   <span
-    class="euiFacetButton__content"
+    class="css-84oukk-euiFacetButton__content"
   >
     <span
-      class="euiFacetButton__text"
+      class="euiFacetButton__text css-w00iqi-euiFacetButton__text"
     >
       Content
     </span>
     <span
-      class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFacetButton__quantity"
+      class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFacetButton__quantity css-1axxfch-euiFacetButton__quantity"
     >
       60
     </span>

src/components/facet/__snapshots__/facet_group.test.tsx.snap

@@ -3,43 +3,43 @@
 exports[`EuiFacetGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup euiFacetGroup--vertical euiFacetGroup--gutterMedium testClass1 testClass2"
+  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup testClass1 testClass2 css-55cfn4-euiFacetGroup-m"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiFacetGroup props gutterSize l is rendered 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup euiFacetGroup--vertical euiFacetGroup--gutterLarge"
+  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup css-rmligl-euiFacetGroup-l"
 />
 `;
 
 exports[`EuiFacetGroup props gutterSize m is rendered 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup euiFacetGroup--vertical euiFacetGroup--gutterMedium"
+  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup css-55cfn4-euiFacetGroup-m"
 />
 `;
 
 exports[`EuiFacetGroup props gutterSize none is rendered 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup euiFacetGroup--vertical euiFacetGroup--gutterNone"
+  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup css-1jyk35d-euiFacetGroup-none"
 />
 `;
 
 exports[`EuiFacetGroup props gutterSize s is rendered 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup euiFacetGroup--vertical euiFacetGroup--gutterSmall"
+  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup css-1c9jifl-euiFacetGroup-s"
 />
 `;
 
 exports[`EuiFacetGroup props layout horizontal is rendered 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap euiFacetGroup euiFacetGroup--horizontal euiFacetGroup--gutterMedium"
+  class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap euiFacetGroup css-8k8zr7-euiFacetGroup-m"
 />
 `;
 
 exports[`EuiFacetGroup props layout vertical is rendered 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup euiFacetGroup--vertical euiFacetGroup--gutterMedium"
+  class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive euiFacetGroup css-55cfn4-euiFacetGroup-m"
 />
 `;