chore: Attaches tooltip classes to popover container (#3219)

cloudscape-design · Jan 27, 2025 · 5daebff · 5daebff
1 parent c204e53
commit 5daebff
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/src/internal/components/tooltip/index.tsx b/src/internal/components/tooltip/index.tsx
@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import clsx from 'clsx';
 
 import PopoverArrow from '../../../popover/arrow';
 import PopoverBody from '../../../popover/body';
@@ -39,7 +38,7 @@ export default function Tooltip({
 
   return (
     <Portal>
-      <div className={clsx(styles.root, className)} {...contentAttributes} data-testid={trackKey}>
+      <div className={styles.root} {...contentAttributes} data-testid={trackKey}>
         <Transition in={true}>
           {() => (
             <PopoverContainer
@@ -51,6 +50,7 @@ export default function Tooltip({
               zIndex={7000}
               arrow={position => <PopoverArrow position={position} />}
               hideOnOverscroll={hideOnOverscroll}
+              className={className}
             >
               <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>
                 {value}

diff --git a/src/popover/container.tsx b/src/popover/container.tsx
@@ -41,6 +41,7 @@ interface PopoverContainerProps {
   allowVerticalOverflow?: boolean;
   // Whether the popover should be hidden when the trigger is scrolled away.
   hideOnOverscroll?: boolean;
+  className?: string;
 }
 
 export default function PopoverContainer({
@@ -58,6 +59,7 @@ export default function PopoverContainer({
   allowScrollToFit,
   allowVerticalOverflow,
   hideOnOverscroll,
+  className,
 }: PopoverContainerProps) {
   const bodyRef = useRef<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
@@ -134,7 +136,7 @@ export default function PopoverContainer({
     <div
       ref={popoverRef}
       style={{ ...popoverStyle, zIndex }}
-      className={clsx(styles.container, isRefresh && styles.refresh)}
+      className={clsx(styles.container, isRefresh && styles.refresh, className)}
     >
       <div
         ref={arrowRef}

diff --git a/src/select/__integ__/disabled-reason.test.ts b/src/select/__integ__/disabled-reason.test.ts
@@ -38,16 +38,16 @@ describe('Disabled reasons', () => {
         await page.assertDropdownOpen(true);
         const dropdown = select.findDropdown();
         const disabledOption = select.findDropdown().findOption(1);
-        const disabledOptionToolipSelector = disabledOption.findDisabledReason().toSelector();
+        const disabledOptionTooltipSelector = disabledOption.findDisabledReason().toSelector();
 
         await page.hoverElement(disabledOption.toSelector());
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(true);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(true);
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 500 });
         await page.waitForJsTimers();
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(false);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(false);
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 0 });
         await page.waitForJsTimers();
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(true);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(true);
       })
     );
 
@@ -59,17 +59,17 @@ describe('Disabled reasons', () => {
         await page.assertDropdownOpen(true);
         const dropdown = select.findDropdown();
         const disabledOption = select.findDropdown().findOption(50);
-        const disabledOptionToolipSelector = disabledOption.findDisabledReason().toSelector();
+        const disabledOptionTooltipSelector = disabledOption.findDisabledReason().toSelector();
 
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 1000 });
         await page.hoverElement(disabledOption.toSelector());
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(true);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(true);
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 500 });
         await page.waitForJsTimers();
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(false);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(false);
         await page.elementScrollTo(dropdown.findOptionsContainer().toSelector(), { top: 1000 });
         await page.waitForJsTimers();
-        expect(await page.isDisplayed(disabledOptionToolipSelector)).toBe(true);
+        expect(await page.isDisplayed(disabledOptionTooltipSelector)).toBe(true);
       })
     );
   });

diff --git a/src/select/__tests__/disabled.test.tsx b/src/select/__tests__/disabled.test.tsx
@@ -152,7 +152,7 @@ describe.each([false, true])('expandToViewport=%s', expandToViewport => {
         expect(dropdown.findOption(1)!.findDisabledReason()!.getElement()).toHaveTextContent('disabled reason');
         window.dispatchEvent(new Event('scroll'));
         await waitFor(() => {
-          expect(dropdown.findOption(1)!.findDisabledReason()!.getElement()).toBeEmptyDOMElement();
+          expect(dropdown.findOption(1)!.findDisabledReason()).toBe(null);
         });
       });
     });