fix: Increase input clear button target size to 24×24 pixels (#3253)

Author: avinashbot

src/button/constants.scss

@@ -78,6 +78,20 @@ $variants: (
     'disabled-border-color': transparent,
     'disabled-color': awsui.$color-text-button-inline-icon-disabled,
   ),
+  'inline-icon-pointer-target': (
+    'default-background': transparent,
+    'default-border-color': transparent,
+    'default-color': awsui.$color-text-button-inline-icon-default,
+    'hover-background': transparent,
+    'hover-border-color': transparent,
+    'hover-color': awsui.$color-text-button-inline-icon-hover,
+    'active-background': transparent,
+    'active-border-color': transparent,
+    'active-color': awsui.$color-text-button-inline-icon-default,
+    'disabled-background': transparent,
+    'disabled-border-color': transparent,
+    'disabled-color': awsui.$color-text-button-inline-icon-disabled,
+  ),
   'inline-link': (
     'default-background': transparent,
     'default-border-color': transparent,

src/button/internal.tsx

@@ -41,7 +41,13 @@ import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 
 export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
-  variant?: ButtonProps['variant'] | 'flashbar-icon' | 'breadcrumb-group' | 'menu-trigger' | 'modal-dismiss';
+  variant?:
+    | ButtonProps['variant']
+    | 'flashbar-icon'
+    | 'breadcrumb-group'
+    | 'menu-trigger'
+    | 'modal-dismiss'
+    | 'inline-icon-pointer-target';
   badge?: boolean;
   analyticsAction?: string;
   __nativeAttributes?:
@@ -105,7 +111,8 @@ export const InternalButton = React.forwardRef(
     const isDisabledWithReason = (variant === 'normal' || variant === 'primary') && !!disabledReason && disabled;
     const hasAriaDisabled = (loading && !disabled) || (disabled && __focusable) || isDisabledWithReason;
     const shouldHaveContent =
-      children && ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss'].indexOf(variant) === -1;
+      children &&
+      ['icon', 'inline-icon', 'flashbar-icon', 'modal-dismiss', 'inline-icon-pointer-target'].indexOf(variant) === -1;
 
     if ((iconName || iconUrl || iconSvg) && iconAlign === 'right' && external) {
       warnOnce('Button', 'A right-aligned icon should not be combined with an external icon.');

src/button/styles.scss

@@ -89,7 +89,8 @@
       );
     }
 
-    &.variant-inline-icon {
+    &.variant-inline-icon,
+    &.variant-inline-icon-pointer-target {
       @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
     }
   }
@@ -110,11 +111,11 @@
 
   &.variant-icon,
   &.variant-inline-icon,
+  &.variant-inline-icon-pointer-target,
   &.variant-flashbar-icon {
     // Icon has vertical padding, but no horizontal, we need to conpensate this
     // in order to have equal height and width
-    padding-inline-start: awsui.$space-xxs;
-    padding-inline-end: awsui.$space-xxs;
+    padding-inline: awsui.$space-xxs;
   }
 
   &.variant-modal-dismiss {
@@ -124,8 +125,13 @@
   }
 
   &.variant-inline-icon {
-    padding-block-start: 0;
-    padding-block-end: 0;
+    padding-block: 0;
+    border-block: 0;
+    border-inline: 0;
+  }
+
+  &.variant-inline-icon-pointer-target {
+    padding-block: awsui.$space-xxxs;
     border-block: 0;
     border-inline: 0;
   }

src/input/internal.tsx

@@ -203,7 +203,7 @@ function InternalInput(
             // Used for test utils
             // eslint-disable-next-line react/forbid-component-props
             className={styles['input-button-right']}
-            variant="inline-icon"
+            variant="inline-icon-pointer-target"
             formAction="none"
             iconName={__rightIcon}
             onClick={__onRightIconClick}

src/input/styles.scss

@@ -139,7 +139,7 @@
 
 .input-icon-right {
   position: absolute;
-  inset-block-start: styles.$control-icon-vertical-offset;
+  inset-block-start: calc(#{styles.$control-icon-vertical-offset} - #{awsui.$space-xxxs});
   inset-inline-end: calc(#{styles.$control-icon-horizontal-offset} - #{awsui.$space-xxs});
 }