chore: replace StyledTooltipChildren for class selector

kiwicom · Oct 3, 2023 · e825ccd · e825ccd
1 parent e2280ae
commit e825ccd
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 7 deletions.
diff --git a/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx b/packages/orbit-components/src/BadgeList/BadgeListItem/index.tsx
@@ -7,7 +7,6 @@ import Text from "../../Text";
 import { TYPE_OPTIONS, SIZE_OPTIONS } from "../consts";
 import defaultTheme from "../../defaultTheme";
 import { ICON_COLORS } from "../../Icon/consts";
-import { StyledTooltipChildren } from "../../primitives/TooltipPrimitive";
 import { right } from "../../utils/rtl";
 import type { Props, Type } from "./types";
 import type { Props as IconProps } from "../../Icon/types";
@@ -73,7 +72,7 @@ export const StyledBadgeContent = styled.div`
     display: inline-flex;
     align-items: center;
 
-    ${StyledTooltipChildren} .orbit-text {
+    .orbit-tooltip-wrapper .orbit-text {
       font-weight: ${theme.orbit.fontWeightMedium};
     }
   `};

diff --git a/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx b/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx
@@ -143,7 +143,7 @@ export const WithImageInside = () => {
       content={
         <Stack>
           <img
-            src="/tooltip_card_preview.png"
+            src="https://images.kiwi.com/illustrations/0x200/Rating-Q85.png"
             alt="Preview
             of card help in Tooltip component"
           />

diff --git a/packages/orbit-components/src/primitives/MobileDialogPrimitive/index.tsx b/packages/orbit-components/src/primitives/MobileDialogPrimitive/index.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import useRandomId from "../../hooks/useRandomId";
 import useStateWithTimeout from "../../hooks/useStateWithTimeout";
 import Portal from "../../Portal";
-import { StyledTooltipChildren } from "../TooltipPrimitive";
+import { TooltipWrapper } from "../TooltipPrimitive";
 import DialogContent from "./components/DialogContent";
 import type { Props } from "./types";
 
@@ -69,7 +69,7 @@ const MobileDialog = ({
 
   return (
     <>
-      <StyledTooltipChildren
+      <TooltipWrapper
         onClick={handleInMobile}
         aria-describedby={enabled ? mobileDialogID : undefined}
         tabIndex={enabled ? Number(tabIndex) : undefined}
@@ -78,7 +78,7 @@ const MobileDialog = ({
         block={block}
       >
         {children}
-      </StyledTooltipChildren>
+      </TooltipWrapper>
       {enabled &&
         render &&
         (renderInPortal ? <Portal renderInto="dialogs">{dialog}</Portal> : dialog)}

diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
@@ -151,7 +151,7 @@ export const WithImageInside = () => {
       content={
         <Stack>
           <img
-            src="/tooltipPrimitive_card_preview.png"
+            src="https://images.kiwi.com/illustrations/0x200/Rating-Q85.png"
             alt="Preview
             of card help in TooltipPrimitive component"
           />
@@ -190,6 +190,8 @@ export const Playground = () => {
   const Icon = getIcon(getIcons("Airplane"));
   const size = select("size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.SMALL);
   const tabIndex = text("TabIndex", "0");
+  const error = boolean("error", false);
+  const help = boolean("help", false);
   const enabled = boolean("enabled", true);
   const removeUnderlinedText = boolean("removeUnderlinedText", false);
   const placement = select("placement", Object.values(PLACEMENTS), PLACEMENTS.BOTTOM);
@@ -204,6 +206,8 @@ export const Playground = () => {
         tabIndex={tabIndex}
         enabled={enabled}
         removeUnderlinedText={removeUnderlinedText}
+        error={error}
+        help={help}
       >
         <Icon />
       </TooltipPrimitive>

diff --git a/packages/orbit-components/static/tooltip_card_preview.png b/packages/orbit-components/static/tooltip_card_preview.png