fix: use stacked component styles for tooltip COMPASS-8299 (#7413)

Author: paula-stacho

packages/compass-components/src/components/leafygreen.tsx

@@ -73,7 +73,7 @@ import LeafyGreenTextInput from '@leafygreen-ui/text-input';
 import { SearchInput } from '@leafygreen-ui/search-input';
 export { usePrevious, useMergeRefs } from '@leafygreen-ui/hooks';
 import Toggle from '@leafygreen-ui/toggle';
-import Tooltip from '@leafygreen-ui/tooltip';
+import LGTooltip from '@leafygreen-ui/tooltip';
 import {
   H1,
   H2,
@@ -92,8 +92,10 @@ import {
   ComboboxOption,
   ComboboxGroup,
 } from '@leafygreen-ui/combobox';
+import { withStackedComponentStyles } from '../hooks/use-stacked-component';
 
 // 2. Wrap and make any changes/workaround to leafygreen components.
+const Tooltip = withStackedComponentStyles(LGTooltip);
 const Icon = ({
   size,
   ...rest

packages/compass-components/src/hooks/use-stacked-component.tsx

@@ -32,8 +32,8 @@ type StackedComponentProps<T extends boolean> = T extends true
 
 // TODO(LG-4109): This should be eventually supported by the LG design system
 export const withStackedComponentStyles = function <ComponentProps>(
-  WrappedComponent: ComponentType<ComponentProps>
-): ComponentType<ComponentProps> {
+  WrappedComponent: React.FC<ComponentProps>
+): React.FC<ComponentProps> {
   const ComponentWithStackedStyles = (
     props: ComponentProps,
     ref: ForwardedRef<ComponentType<ComponentProps>>