[Emotion] Convert EuiButtonIcon

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

@@ -201,7 +201,7 @@ exports[`EuiButtonIcon props iconType is rendered 1`] = `
 exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
 <button
  aria-label="button"
- class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled"
+ class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
  disabled=""
  type="button"
 >
@@ -217,7 +217,7 @@ exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
 exports[`EuiButtonIcon props isDisabled or disabled is rendered 1`] = `
 <button
  aria-label="button"
- class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled"
+ class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
  disabled=""
  type="button"
 >
@@ -233,7 +233,7 @@ exports[`EuiButtonIcon props isDisabled or disabled is rendered 1`] = `
 exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = `
 <button
  aria-label="button"
- class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled"
+ class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
  disabled=""
  type="button"
 >
@@ -249,14 +249,15 @@ exports[`EuiButtonIcon props isDisabled renders a button even when href is defin
 exports[`EuiButtonIcon props isLoading is rendered 1`] = `
 <button
  aria-label="button"
- class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled"
+ class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-xs-empty-disabled-isDisabled"
  disabled=""
  type="button"
 >
  <span
  aria-label="Loading"
  class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
  role="progressbar"
+ style="border-color:#07C currentcolor currentcolor currentcolor"
  />
 </button>
 `;

src/components/button/button_icon/_button_icon.scss

@@ -1,5 +1,2 @@
 .euiButtonIcon {
- &:disabled {
- @include euiButtonContentDisabled;
- }
 }

src/components/button/button_icon/button_icon.styles.ts

@@ -36,6 +36,9 @@ export const euiButtonIconStyles = (euiThemeContext: UseEuiTheme) => {
  pointer-events: none;
  }
  `,
+ isDisabled: css`
+ cursor: not-allowed;
+ `,
  // Sizes
  xs: css`
  ${logicalSizeCSS(sizes.xs.height)}

src/components/button/button_icon/button_icon.tsx

@@ -170,6 +170,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
  buttonColorStyles[color],
  buttonFocusStyle,
  display === 'empty' && emptyHoverStyles,
+ isDisabled && styles.isDisabled,
  ];
 
  const classes = classNames(
@@ -202,13 +203,24 @@ export const EuiButtonIcon: FunctionComponent<Props> = (props) => {
  );
  }
 
- // `original` size doesn't exist in `EuiLoadingSpinner`
- // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
- // so it gets the default size
- const loadingSize = iconSize === 'original' ? undefined : iconSize;
-
  if (iconType && isLoading) {
- buttonIcon = <EuiLoadingSpinner size={loadingSize} />;
+ // `original` size doesn't exist in `EuiLoadingSpinner`
+ // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
+ // so it gets the default size
+ const loadingSize = iconSize === 'original' ? undefined : iconSize;
+
+ // When the button is disabled the text gets gray
+ // and in some buttons the background gets a light gray
+ // for better contrast we want to change the border of the spinner
+ // to have the same color of the text. This way we ensure the borders
+ // are always visible. The default spinner color could be very light.
+ const loadingSpinnerColor = isDisabled
+ ? { border: 'currentcolor' }
+ : undefined;
+
+ buttonIcon = (
+ <EuiLoadingSpinner size={loadingSize} color={loadingSpinnerColor} />
+ );
  }
 
  // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend