[PR feedback] Form clear button - respect windows theme colors more

cee-chen · cee-chen · commit 8912c0524ea4 · 2024-12-02T09:24:04.000-08:00
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 
+import { logicalSizeCSS, mathWithUnits } from '../../../global_styling';
 import { UseEuiTheme } from '../../../services';
 
 export const EuiFormControlLayoutClearButtonStyles = ({
@@ -16,38 +17,52 @@ export const EuiFormControlLayoutClearButtonStyles = ({
   highContrastMode,
 }: UseEuiTheme) => {
   const backgroundColor =
-    highContrastMode === 'forced'
-      ? euiTheme.colors.fullShade
-      : colorMode === 'DARK' || highContrastMode // mediumShade is not sufficient WCAG contrast
+    colorMode === 'DARK' || highContrastMode // mediumShade is not sufficient WCAG contrast
       ? euiTheme.colors.darkShade
       : euiTheme.colors.mediumShade;
 
   return {
     euiFormControlLayoutClearButton: css`
       pointer-events: all;
-      background-color: ${backgroundColor};
-      ${highContrastMode === 'forced' ? 'forced-color-adjust: none;' : ''}
+      display: flex;
+      justify-content: center;
+      align-items: center;
       border-radius: 50%;
-      line-height: 0; /* ensures the icon stays vertically centered */
+      /* Windows high contrast themes ignore background-color, so we use border to color the button instead for better support */
+      border-style: solid;
+      border-color: ${backgroundColor};
 
       &:disabled {
         cursor: not-allowed;
         background-color: ${euiTheme.colors.disabled};
       }
     `,
 
-    euiFormControlLayoutClearButton__icon: css`
-      transform: scale(0.5);
-      fill: ${euiTheme.colors.emptyShade};
-      stroke: ${euiTheme.colors.emptyShade};
-    `,
     size: {
-      s: css`
-        stroke-width: ${euiTheme.size.xs};
+      s: `
+        ${logicalSizeCSS(euiTheme.size.m)}
+        border-width: ${mathWithUnits(euiTheme.size.m, (x) => x / 2)};
+      `,
+      m: `
+        ${logicalSizeCSS(euiTheme.size.base)}
+        border-width: ${mathWithUnits(euiTheme.size.base, (x) => x / 2)};
       `,
-      m: css`
-        stroke-width: ${euiTheme.size.xxs};
+    },
+
+    icon: {
+      euiFormControlLayoutClearButton__icon: css`
+        transform: scale(0.5);
+        fill: ${euiTheme.colors.emptyShade};
+        stroke: ${euiTheme.colors.emptyShade};
       `,
+      size: {
+        s: css`
+          stroke-width: ${euiTheme.size.xs};
+        `,
+        m: css`
+          stroke-width: ${euiTheme.size.xxs};
+        `,
+      },
     },
   };
 };
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
@@ -26,9 +26,10 @@ export const EuiFormControlLayoutClearButton: FunctionComponent<
 > = ({ className, onClick, size = 'm', ...rest }) => {
   const classes = classNames('euiFormControlLayoutClearButton', className);
   const styles = useEuiMemoizedStyles(EuiFormControlLayoutClearButtonStyles);
+  const cssStyles = [styles.euiFormControlLayoutClearButton, styles.size[size]];
   const iconStyles = [
-    styles.euiFormControlLayoutClearButton__icon,
-    styles.size[size],
+    styles.icon.euiFormControlLayoutClearButton__icon,
+    styles.icon.size[size],
   ];
 
   const ariaLabel = useEuiI18n(
@@ -39,7 +40,7 @@ export const EuiFormControlLayoutClearButton: FunctionComponent<
   return (
     <button
       type="button"
-      css={styles.euiFormControlLayoutClearButton}
+      css={cssStyles}
       className={classes}
       onClick={onClick}
       aria-label={ariaLabel}
