diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index 3f600f9ca8e6..b37ecc656195 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -10,25 +10,24 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-compressed"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-dbzl5z-empty-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -36,19 +35,18 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-dbzl5z-empty-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -56,20 +54,19 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1ra7a0c-empty-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-compressed-empty-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -81,7 +78,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
 
 exports[`EuiButtonGroup button props buttonSize compressed is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -89,23 +86,23 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-compressed"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-dbzl5z-empty-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -118,18 +115,18 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-dbzl5z-empty-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -143,20 +140,19 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1ra7a0c-empty-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-compressed-empty-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -168,7 +164,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
 
 exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -176,25 +172,24 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-m"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -202,19 +197,18 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -222,20 +216,19 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-euiButtonGroupButton-m-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -247,7 +240,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -255,23 +248,23 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-m"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -284,18 +277,18 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-m-euiButtonGroupButton-m-uncompressed-base-text"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -309,20 +302,19 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-m-defaultMinWidth-isDisabled-m-euiButtonGroupButton-m-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -334,7 +326,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -342,25 +334,24 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -368,19 +359,18 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -388,20 +378,19 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -413,7 +402,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -421,23 +410,23 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -450,18 +439,18 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -475,20 +464,19 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -500,7 +488,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--accent"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -508,25 +496,24 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-11dmnaa-base-accent-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -534,19 +521,18 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-11dmnaa-base-accent-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -554,20 +540,19 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -579,7 +564,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--accent"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -587,23 +572,23 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-11dmnaa-base-accent-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -616,18 +601,18 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-11dmnaa-base-accent-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-accent"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -641,20 +626,19 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -666,7 +650,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -674,25 +658,24 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1old2bv-base-danger-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -700,19 +683,18 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1old2bv-base-danger-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -720,20 +702,19 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -745,7 +726,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -753,23 +734,23 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1old2bv-base-danger-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -782,18 +763,18 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1old2bv-base-danger-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-danger"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -807,20 +788,19 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -832,7 +812,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -840,25 +820,24 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-c1t84v-base-primary-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -866,19 +845,18 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-c1t84v-base-primary-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -886,20 +864,19 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -911,7 +888,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color primary is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -919,23 +896,23 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-c1t84v-base-primary-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -948,18 +925,18 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-c1t84v-base-primary-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-primary"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -973,20 +950,19 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -998,7 +974,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
 
 exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--success"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1006,25 +982,24 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-vufpcj-base-success-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -1032,19 +1007,18 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-vufpcj-base-success-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -1052,20 +1026,19 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1077,7 +1050,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color success is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--success"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1085,23 +1058,23 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-vufpcj-base-success-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1114,18 +1087,18 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-vufpcj-base-success-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-success"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1139,20 +1112,19 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1164,7 +1136,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] =
 
 exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1172,25 +1144,24 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -1198,19 +1169,18 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -1218,20 +1188,19 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1243,7 +1212,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1251,23 +1220,23 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1280,18 +1249,18 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1305,20 +1274,19 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1330,7 +1298,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1338,25 +1306,24 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-fhqo9b-base-warning-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -1364,19 +1331,18 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-fhqo9b-base-warning-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -1384,20 +1350,19 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1409,7 +1374,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props color warning is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1417,23 +1382,23 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-fhqo9b-base-warning-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1446,18 +1411,18 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-fhqo9b-base-warning-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-warning"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1471,20 +1436,19 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1496,7 +1460,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
 
 exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+  class="euiButtonGroup euiButtonGroup-isDisabled emotion-euiButtonGroup"
   disabled=""
 >
   <legend
@@ -1505,26 +1469,25 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="test subject string"
       disabled=""
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -1532,20 +1495,19 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -1553,20 +1515,19 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1578,7 +1539,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--isDisabled"
+  class="euiButtonGroup euiButtonGroup-isDisabled emotion-euiButtonGroup"
   disabled=""
 >
   <legend
@@ -1587,26 +1548,25 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       data-test-subj="test subject string"
       disabled=""
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -1614,20 +1574,19 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -1635,20 +1594,19 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1660,7 +1618,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
+  class="euiButtonGroup emotion-euiButtonGroup-fullWidth"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1668,25 +1626,24 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -1694,19 +1651,18 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -1714,20 +1670,19 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1739,7 +1694,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth"
+  class="euiButtonGroup emotion-euiButtonGroup-fullWidth"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1747,23 +1702,23 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1776,18 +1731,18 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1801,20 +1756,19 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -1826,7 +1780,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1834,25 +1788,24 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
         >
           Option one
         </span>
@@ -1860,19 +1813,18 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
         >
           Option two
         </span>
@@ -1880,20 +1832,19 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
         >
           Option three
         </span>
@@ -1905,7 +1856,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
 
 exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -1913,23 +1864,23 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1942,18 +1893,18 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-text"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
         >
           <input
             class="euiScreenReaderOnly"
@@ -1967,20 +1918,19 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isIconOnly css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-iconOnly-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiScreenReaderOnly"
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
         >
           Option three
         </span>
@@ -1992,7 +1942,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
 
 exports[`EuiButtonGroup button props selection idSelected is rendered for single 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -2000,23 +1950,23 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isSelected testClass1 testClass2 css-qmwmig-fill-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             checked=""
@@ -2030,18 +1980,18 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -2055,20 +2005,19 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -2080,7 +2029,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
 
 exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for multi 1`] = `
 <fieldset
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+  class="euiButtonGroup emotion-euiButtonGroup"
 >
   <legend
     class="emotion-euiScreenReaderOnly"
@@ -2088,25 +2037,24 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isSelected testClass1 testClass2 css-qmwmig-fill-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -2114,19 +2062,18 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     </button>
     <button
       aria-pressed="true"
-      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isSelected css-qmwmig-fill-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-fill-text"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -2134,20 +2081,19 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -2160,7 +2106,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
 exports[`EuiButtonGroup type multi is rendered 1`] = `
 <fieldset
   aria-label="aria-label"
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+  class="euiButtonGroup testClass1 testClass2 emotion-euiButtonGroup"
   data-test-subj="test subject string"
 >
   <legend
@@ -2169,25 +2115,24 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <button
       aria-label="aria-label"
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option one
         </span>
@@ -2195,19 +2140,18 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option two
         </span>
@@ -2215,20 +2159,19 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
     </button>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
@@ -2241,7 +2184,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
 exports[`EuiButtonGroup type single is rendered 1`] = `
 <fieldset
   aria-label="aria-label"
-  class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text testClass1 testClass2"
+  class="euiButtonGroup testClass1 testClass2 emotion-euiButtonGroup"
   data-test-subj="test subject string"
 >
   <legend
@@ -2250,23 +2193,23 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
     test
   </legend>
   <div
-    class="euiButtonGroup__buttons"
+    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-s"
   >
     <label
       aria-label="aria-label"
-      class="euiButtonGroupButton euiButtonGroupButton--small testClass1 testClass2 css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
       data-test-subj="test subject string"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -2279,18 +2222,18 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       </span>
     </label>
     <label
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-1m5p0sb-base-text-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-s-uncompressed-base-text"
+      type="button"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           <input
             class="euiScreenReaderOnly"
@@ -2304,20 +2247,19 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
     </label>
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiButtonGroupButton--small  css-10kqeyc-base-disabled-EuiButtonGroupButton"
+      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-isDisabled-s-euiButtonGroupButton-s-uncompressed-base-disabled"
       disabled=""
       type="submit"
     >
       <span
-        class="euiButtonContent euiButton__content"
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
       >
         <span
-          class="euiButtonContent__icon"
           color="inherit"
           data-euiicon-type="bolt"
         />
         <span
-          class="euiButton__text euiButtonGroupButton__textShift"
+          class="eui-textTruncate emotion-euiButtonGroupButton__text"
         >
           Option three
         </span>
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
index 968c7774ec4f..c3b33ace12db 100644
--- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -143,7 +143,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                 class="euiFlexItem emotion-euiFlexItem-grow-1"
               >
                 <fieldset
-                  class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text euiButtonGroup--fullWidth euiDataGridColumnSorting__order"
+                  class="euiButtonGroup euiDataGridColumnSorting__order emotion-euiButtonGroup-fullWidth"
                 >
                   <legend
                     class="emotion-euiScreenReaderOnly"
@@ -151,26 +151,25 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                     Select sorting method for Column A
                   </legend>
                   <div
-                    class="euiButtonGroup__buttons"
+                    class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
                   >
                     <label
-                      class="euiButtonGroupButton euiButtonGroupButton--small euiButtonGroupButton-isSelected css-qmwmig-fill-text-EuiButtonGroupButton"
+                      class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-fill-text"
                       data-test-subj="euiDataGridColumnSorting-sortColumn-columnA-asc"
-                      for="generated-id"
                       title="Low-High"
+                      type="button"
                     >
                       <span
-                        class="euiButtonContent euiButton__content"
+                        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
                       >
                         <span
-                          class="euiButton__text euiButtonGroupButton__textShift"
+                          class="eui-textTruncate emotion-euiButtonGroupButton__text"
                           data-text="Low-High"
                         >
                           <input
                             checked=""
                             class="euiScreenReaderOnly"
                             data-test-subj="columnAAsc"
-                            id="generated-id"
                             name="columnA"
                             type="radio"
                             value="asc"
@@ -180,22 +179,21 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                       </span>
                     </label>
                     <label
-                      class="euiButtonGroupButton euiButtonGroupButton--small  css-dbzl5z-empty-text-EuiButtonGroupButton"
+                      class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-s-euiButtonGroupButton-compressed-empty-text"
                       data-test-subj="euiDataGridColumnSorting-sortColumn-columnA-desc"
-                      for="generated-id"
                       title="High-Low"
+                      type="button"
                     >
                       <span
-                        class="euiButtonContent euiButton__content"
+                        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
                       >
                         <span
-                          class="euiButton__text euiButtonGroupButton__textShift"
+                          class="eui-textTruncate emotion-euiButtonGroupButton__text"
                           data-text="High-Low"
                         >
                           <input
                             class="euiScreenReaderOnly"
                             data-test-subj="columnADesc"
-                            id="generated-id"
                             name="columnA"
                             type="radio"
                             value="desc"