fix: Increase input clear button target size to 24×24 pixels

cloudscape-design · Feb 6, 2025 · 69ca340 · 69ca340
1 parent 03d0574
commit 69ca340
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 deletions.
diff --git a/src/button/constants.scss b/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,

diff --git a/src/button/internal.tsx b/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.');

diff --git a/src/button/styles.scss b/src/button/styles.scss
@@ -130,6 +130,13 @@
     border-inline: 0;
   }
 
+  &.variant-inline-icon-pointer-target {
+    padding-inline: awsui.$space-xxs;
+    padding-block: awsui.$space-xxxs;
+    border-block: 0;
+    border-inline: 0;
+  }
+
   > .icon-left {
     position: relative;
     // margin-left was breaking layout on firefox

diff --git a/src/input/internal.tsx b/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}

diff --git a/src/input/styles.scss b/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});
 }