[EuiButton] Fix overridden (instead of merged) className (#6887)

* Fix EuiButton not correctly merging passed `className`s

* Update downstream snapshots

* changelog

src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiSkipLink is rendered 1`] = `
 <a
   aria-label="aria-label"
-  class="euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
+  class="euiButton euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
   data-test-subj="test subject string"
   href="#somewhere"
   rel="noreferrer"
@@ -22,7 +22,7 @@ exports[`EuiSkipLink is rendered 1`] = `
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
 <a
-  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly"
+  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -34,7 +34,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
 <a
-  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly"
+  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
   tabindex="0"
@@ -47,7 +47,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
 <a
-  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
+  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -59,7 +59,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
 <a
-  class="euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
+  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
   tabindex="-1"

src/components/button/__snapshots__/button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
+  class="euiButton testClass1 testClass2 emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
   data-test-subj="test subject string"
   type="button"
 >

src/components/button/button.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { FunctionComponent, Ref, ReactNode } from 'react';
+import classNames from 'classnames';
 
 import {
   CommonProps,
@@ -84,7 +85,13 @@ export type Props = ExclusiveUnion<
  * and the logic for element-specific attributes
  */
 export const EuiButton: FunctionComponent<Props> = (props) => {
-  const { buttonRef, color: _color = 'primary', fill, ...rest } = props;
+  const {
+    className,
+    buttonRef,
+    color: _color = 'primary',
+    fill,
+    ...rest
+  } = props;
 
   const buttonIsDisabled = isButtonDisabled({
     href: rest.href,
@@ -100,6 +107,7 @@ export const EuiButton: FunctionComponent<Props> = (props) => {
 
   const buttonFocusStyle = useEuiButtonFocusCSS();
 
+  const classes = classNames('euiButton', className);
   const cssStyles = [buttonColorStyles, buttonFocusStyle];
 
   if (_color === 'ghost') {
@@ -113,9 +121,9 @@ export const EuiButton: FunctionComponent<Props> = (props) => {
 
   return (
     <EuiButtonDisplay
-      className="euiButton"
-      ref={buttonRef}
+      className={classes}
       css={cssStyles}
+      ref={buttonRef}
       {...rest}
     />
   );

src/components/card/__snapshots__/card.test.tsx.snap

@@ -82,7 +82,7 @@ exports[`EuiCard horizontal selectable 1`] = `
   <button
     aria-checked="false"
     aria-describedby="generated-idTitle generated-idDescription"
-    class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
+    class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
     role="switch"
     type="button"
   >
@@ -1077,7 +1077,7 @@ exports[`EuiCard props selectable 1`] = `
   <button
     aria-checked="false"
     aria-describedby="generated-idTitle generated-idDescription"
-    class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
+    class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
     role="switch"
     type="button"
   >

src/components/card/card_select/__snapshots__/card_select.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`EuiCardSelect is rendered 1`] = `
 <button
   aria-checked="false"
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
+  class="euiButton testClass1 testClass2 emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
   data-test-subj="test subject string"
   role="switch"
   type="button"
@@ -20,7 +20,7 @@ exports[`EuiCardSelect is rendered 1`] = `
 exports[`EuiCardSelect props can override color 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-danger-euiCardSelect"
+  class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-danger-euiCardSelect"
   role="switch"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`EuiCardSelect props can override color 1`] = `
 exports[`EuiCardSelect props can override text 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
+  class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-text-euiCardSelect"
   role="switch"
   type="button"
 >
@@ -54,7 +54,7 @@ exports[`EuiCardSelect props can override text 1`] = `
 exports[`EuiCardSelect props isDisabled 1`] = `
 <button
   aria-checked="false"
-  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-isDisabled-base-disabled-euiCardSelect"
+  class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-isDisabled-base-disabled-euiCardSelect"
   disabled=""
   role="switch"
   type="button"
@@ -70,7 +70,7 @@ exports[`EuiCardSelect props isDisabled 1`] = `
 exports[`EuiCardSelect props isSelected 1`] = `
 <button
   aria-checked="true"
-  class="emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-success-euiCardSelect"
+  class="euiButton emotion-euiButtonDisplay-m-fullWidth-defaultMinWidth-base-success-euiCardSelect"
   role="switch"
   type="button"
 >

src/components/control_bar/__snapshots__/control_bar.test.tsx.snap

@@ -47,7 +47,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -143,7 +143,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -239,7 +239,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -335,7 +335,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -430,7 +430,7 @@ exports[`EuiControlBar props position is rendered 1`] = `
       </ol>
     </nav>
     <button
-      class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+      class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
       data-test-subj="dts"
       type="button"
     >
@@ -519,7 +519,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -615,7 +615,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >
@@ -716,7 +716,7 @@ Array [
         </ol>
       </nav>
       <button
-        class="euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text"
         data-test-subj="dts"
         type="button"
       >

src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap

@@ -54,7 +54,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -126,7 +126,7 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-s-fill-primary"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-s-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -326,7 +326,7 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-isDisabled-fill-disabled"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-m-isDisabled-fill-disabled"
       data-test-subj="superDatePickerApplyTimeButton"
       disabled=""
       style="min-inline-size: 118px;"
@@ -392,7 +392,7 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -516,7 +516,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       type="button"
     >
@@ -591,7 +591,7 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -663,7 +663,7 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -736,7 +736,7 @@ exports[`EuiSuperDatePicker renders 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"
@@ -846,7 +846,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
   >
     <button
-      class="euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
+      class="euiButton euiSuperUpdateButton emotion-euiButtonDisplay-m-fill-primary"
       data-test-subj="superDatePickerApplyTimeButton"
       style="min-inline-size: 118px;"
       type="button"

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap

@@ -214,7 +214,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
       >
         <button
           aria-describedby="generated-id generated-id"
-          class="euiQuickSelect__applyButton emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
+          class="euiButton euiQuickSelect__applyButton emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
           type="button"
         >
           <span

upcoming_changelogs/6887.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `EuiButton` not correctly merging in passed `className`s with its base `.euiButton` class
+