feat: enable configuration of highcontrast and dropshadow props (#18732)

* feat: enable configuration of highcontrast and dropshadow props

* chore: remove test story

Author: alisonjoseph

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -495,6 +495,12 @@ Map {
         ],
         "type": "oneOf",
       },
+      "tooltipDropShadow": Object {
+        "type": "bool",
+      },
+      "tooltipHighContrast": Object {
+        "type": "bool",
+      },
       "tooltipPosition": Object {
         "args": Array [
           Array [
@@ -4073,6 +4079,12 @@ Map {
         ],
         "type": "oneOf",
       },
+      "tooltipDropShadow": Object {
+        "type": "bool",
+      },
+      "tooltipHighContrast": Object {
+        "type": "bool",
+      },
     },
     "render": [Function],
   },

packages/react/src/components/Button/Button.tsx

@@ -109,6 +109,17 @@ export interface ButtonBaseProps
    */
   tooltipAlignment?: ButtonTooltipAlignment;
 
+  /**
+   * Enable drop shadow for tooltips for icon-only buttons.
+   */
+  tooltipDropShadow?: boolean;
+
+  /**
+   * Enable high-contrast theme for tooltips on icon-only buttons.
+   * Defaults to true.
+   */
+  tooltipHighContrast?: boolean;
+
   /**
    * Specify the direction of the tooltip for icon-only buttons.
    * Can be either top, right, bottom, or left.
@@ -146,6 +157,8 @@ const Button: ButtonComponent = React.forwardRef(
       autoAlign = false,
       children,
       hasIconOnly = false,
+      tooltipHighContrast = true,
+      tooltipDropShadow = false,
       iconDescription,
       kind = 'primary',
       onBlur,
@@ -201,6 +214,8 @@ const Button: ButtonComponent = React.forwardRef(
           label={iconDescription}
           kind={kind}
           size={size}
+          highContrast={tooltipHighContrast}
+          dropShadow={tooltipDropShadow}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
           onFocus={onFocus}
@@ -375,6 +390,17 @@ const Button: ButtonComponent = React.forwardRef(
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
 
+  /**
+   * Enable drop shadow for tooltips for icon-only buttons.
+   */
+  tooltipDropShadow: PropTypes.bool,
+
+  /**
+   * Enable high-contrast theme for tooltips for icon-only buttons.
+   * Defaults to true.
+   */
+  tooltipHighContrast: PropTypes.bool,
+
   /**
    * Specify the direction of the tooltip for icon-only buttons.
    * Can be either top, right, bottom, or left.

packages/react/src/components/UIShell/HeaderGlobalAction.tsx

@@ -17,33 +17,50 @@ export interface HeaderGlobalActionProps {
    * Required props for the accessibility label of the button
    */
   'aria-label'?: string;
+
   /**
    * Required props for the accessibility label of the button
    */
   'aria-labelledby'?: string;
+
   /**
    * Provide a custom icon for this global action
    */
   children: ReactNode;
+
   /**
    * Optionally provide a custom class name that is applied to the underlying
    * button
    */
   className?: string;
+
   /**
    * Specify whether the action is currently active
    */
   isActive?: boolean;
+
   /**
    * Optionally provide an onClick handler that is called when the underlying
    * button fires it's onclick event
    */
   onClick?: () => void;
+
   /**
    * Specify the alignment of the tooltip to the icon-only button.
    * Can be one of: start, center, or end.
    */
   tooltipAlignment?: 'start' | 'center' | 'end';
+
+  /**
+   * Enable drop shadow for tooltips for icon-only buttons.
+   */
+  tooltipDropShadow?: boolean;
+
+  /**
+   * Render the tooltip using the high-contrast theme
+   * Default is true
+   */
+  tooltipHighContrast?: boolean;
 }
 
 /**
@@ -62,6 +79,8 @@ const HeaderGlobalAction: React.FC<HeaderGlobalActionProps> = React.forwardRef(
       children,
       className: customClassName,
       onClick,
+      tooltipHighContrast = true,
+      tooltipDropShadow,
       isActive,
       tooltipAlignment,
       ...rest
@@ -89,6 +108,8 @@ const HeaderGlobalAction: React.FC<HeaderGlobalActionProps> = React.forwardRef(
         iconDescription={ariaLabel}
         tooltipPosition="bottom"
         tooltipAlignment={tooltipAlignment}
+        tooltipDropShadow={tooltipDropShadow}
+        tooltipHighContrast={tooltipHighContrast}
         ref={ref}>
         {children}
       </Button>
@@ -129,6 +150,17 @@ HeaderGlobalAction.propTypes = {
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * Enable drop shadow for tooltips for icon-only buttons.
+   */
+  tooltipDropShadow: PropTypes.bool,
+
+  /**
+   * Render the tooltip using the high-contrast theme
+   * Default is true
+   */
+  tooltipHighContrast: PropTypes.bool,
 };
 
 HeaderGlobalAction.displayName = 'HeaderGlobalAction';