[docs] Fix color prop not correctly showing the default value

- appears to be because we're renaming it via destructure, doh
elastic · Oct 18, 2023 · 6d6d79b · 6d6d79b
1 parent 5c871b2
commit 6d6d79b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 15 deletions.
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -86,21 +86,19 @@ export const EuiButton: FunctionComponent<Props> = ({
   className,
   buttonRef,
   size = 'm',
-  color: _color = 'primary',
+  color = 'primary',
   fill,
   ...rest
 }) => {
-  const buttonIsDisabled = isButtonDisabled({
+  const isDisabled = isButtonDisabled({
     href: rest.href,
     isDisabled: rest.isDisabled || rest.disabled,
     isLoading: rest.isLoading,
   });
 
-  const color = buttonIsDisabled ? 'disabled' : _color;
-
   const buttonColorStyles = useEuiButtonColorCSS({
     display: fill ? 'fill' : 'base',
-  })[color];
+  })[isDisabled ? 'disabled' : color];
 
   const buttonFocusStyle = useEuiButtonFocusCSS();
 

diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
@@ -93,7 +93,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
   iconType,
   iconSide = 'left',
   iconSize = 'm',
-  color: _color = 'primary',
+  color = 'primary',
   size = 'm',
   flush,
   isDisabled: _isDisabled,
@@ -115,7 +115,6 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
     isLoading,
   });
 
-  const color = isDisabled ? 'disabled' : _color;
   const buttonColorStyles = useEuiButtonColorCSS({
     display: 'empty',
   });
@@ -125,7 +124,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
   const cssStyles = [
     styles.euiButtonEmpty,
     styles[size],
-    buttonColorStyles[color],
+    buttonColorStyles[isDisabled ? 'disabled' : color],
     flush && styles.flush,
     flush && styles[flush],
     isDisabled && styles.isDisabled,

diff --git a/src/components/button/button_icon/button_icon.styles.ts b/src/components/button/button_icon/button_icon.styles.ts
@@ -57,7 +57,7 @@ export const euiButtonIconStyles = (euiThemeContext: UseEuiTheme) => {
 
 export const _emptyHoverStyles = (
   euiThemeContext: UseEuiTheme,
-  color: _EuiButtonColor | 'disabled'
+  color: _EuiButtonColor
 ) => {
   return css`
     &:hover {

diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
@@ -104,7 +104,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   className,
   iconType,
   iconSize = 'm',
-  color: _color = 'primary',
+  color = 'primary',
   isDisabled: _isDisabled,
   disabled,
   href,
@@ -135,19 +135,20 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
     );
   }
 
-  const color = isDisabled ? 'disabled' : _color;
   const buttonColorStyles = useEuiButtonColorCSS({ display });
   const buttonFocusStyle = useEuiButtonFocusCSS();
+  const emptyHoverStyles =
+    display === 'empty' &&
+    !isDisabled &&
+    _emptyHoverStyles(euiThemeContext, color);
 
   const styles = euiButtonIconStyles(euiThemeContext);
-  const emptyHoverStyles = _emptyHoverStyles(euiThemeContext, color);
-
   const cssStyles = [
     styles.euiButtonIcon,
     styles[size],
-    buttonColorStyles[color],
+    buttonColorStyles[isDisabled ? 'disabled' : color],
     buttonFocusStyle,
-    display === 'empty' && emptyHoverStyles,
+    emptyHoverStyles,
     isDisabled && styles.isDisabled,
   ];