feat: make highContrast and dropShadow props configurable (#18636)

* feat(Tooltip): make `highContrast` and `dropShadow` props configurable

* feat(IconButton): make `highContrast` and `dropShadow` configurable

* chore: update snapshots

---------

Co-authored-by: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>

Author: emyarod

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

@@ -4231,9 +4231,15 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "dropShadow": Object {
+        "type": "bool",
+      },
       "enterDelayMs": Object {
         "type": "number",
       },
+      "highContrast": Object {
+        "type": "bool",
+      },
       "href": Object {
         "type": "string",
       },
@@ -9587,9 +9593,15 @@ Map {
       "description": Object {
         "type": "node",
       },
+      "dropShadow": Object {
+        "type": "bool",
+      },
       "enterDelayMs": Object {
         "type": "number",
       },
+      "highContrast": Object {
+        "type": "bool",
+      },
       "label": Object {
         "type": "node",
       },

packages/react/src/components/IconButton/index.tsx

@@ -107,11 +107,21 @@ export interface IconButtonProps
    */
   disabled?: boolean;
 
+  /**
+   * Specify whether a drop shadow should be rendered on the tooltip
+   */
+  dropShadow?: boolean;
+
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs?: number;
 
+  /**
+   * Render the tooltip using the high-contrast theme
+   */
+  highContrast?: boolean;
+
   /**
    * Specify whether the IconButton is currently selected
    */
@@ -156,7 +166,9 @@ const IconButton = React.forwardRef(function IconButton(
     closeOnActivation = true,
     defaultOpen = false,
     disabled,
+    dropShadow = false,
     enterDelayMs = 100,
+    highContrast = true,
     kind,
     label,
     leaveDelayMs = 100,
@@ -180,7 +192,9 @@ const IconButton = React.forwardRef(function IconButton(
       closeOnActivation={closeOnActivation}
       className={tooltipClasses}
       defaultOpen={defaultOpen}
+      dropShadow={dropShadow}
       enterDelayMs={enterDelayMs}
+      highContrast={highContrast}
       label={label}
       leaveDelayMs={leaveDelayMs}>
       <ButtonBase
@@ -283,6 +297,11 @@ IconButton.propTypes = {
    */
   defaultOpen: PropTypes.bool,
 
+  /**
+   * Specify whether a drop shadow should be rendered on the tooltip
+   */
+  dropShadow: PropTypes.bool,
+
   /**
    * Specify whether the Button should be disabled, or not
    */
@@ -296,9 +315,13 @@ IconButton.propTypes = {
   /**
    * Specify whether the IconButton is currently selected
    */
-
   isSelected: PropTypes.bool,
 
+  /**
+   * Render the tooltip using the high-contrast theme
+   */
+  highContrast: PropTypes.bool,
+
   /**
    * Specify the type of button to be used as the base for the IconButton
    */

packages/react/src/components/Tooltip/Tooltip.tsx

@@ -60,11 +60,21 @@ interface TooltipBaseProps {
    */
   description?: React.ReactNode;
 
+  /**
+   * Specify whether a drop shadow should be rendered
+   */
+  dropShadow?: boolean;
+
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs?: number;
 
+  /**
+   * Render the component using the high-contrast theme
+   */
+  highContrast?: boolean;
+
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
@@ -97,6 +107,8 @@ function Tooltip<T extends React.ElementType>({
   leaveDelayMs = 300,
   defaultOpen = false,
   closeOnActivation = false,
+  dropShadow = false,
+  highContrast = true,
   ...rest
 }: TooltipProps<T>) {
   const tooltipRef = useRef<HTMLSpanElement>(null);
@@ -248,8 +260,8 @@ function Tooltip<T extends React.ElementType>({
       {...rest}
       align={align}
       className={cx(`${prefix}--tooltip`, customClassName)}
-      dropShadow={false}
-      highContrast
+      dropShadow={dropShadow}
+      highContrast={highContrast}
       onKeyDown={onKeyDown}
       onMouseLeave={onMouseLeave}
       open={open}>
@@ -337,11 +349,21 @@ Tooltip.propTypes = {
    */
   description: PropTypes.node,
 
+  /**
+   * Specify whether a drop shadow should be rendered
+   */
+  dropShadow: PropTypes.bool,
+
   /**
    * Specify the duration in milliseconds to delay before displaying the tooltip
    */
   enterDelayMs: PropTypes.number,
 
+  /**
+   * Render the component using the high-contrast theme
+   */
+  highContrast: PropTypes.bool,
+
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.