style(tooltips): rename the prop

chanzuckerberg · Nov 20, 2024 · 1f28c5e · 1f28c5e
1 parent 708ce9c
commit 1f28c5e
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 22 deletions.
diff --git a/packages/components/src/common/warnings.ts b/packages/components/src/common/warnings.ts
@@ -51,7 +51,7 @@ export const SDS_WARNINGS = {
   [SDSWarningTypes.TooltipInvertStyle]: {
     hasWarned: false,
     message:
-      "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use invertStyle instead!",
+      "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
   },
 };
 

diff --git a/packages/components/src/core/Tooltip/__storybook__/constants.ts b/packages/components/src/core/Tooltip/__storybook__/constants.ts
@@ -21,7 +21,7 @@ export const TOOLTIP_PLACEMENT_STYLES = {
   display: "grid",
   gridColumnGap: "50px",
   gridRowGap: "50px",
-  gridTemplateColumns: "repeat(3, 130px",
+  gridTemplateColumns: "repeat(3, 130px)",
   gridTemplateRows: "repeat(5, 60px)",
   justifyContent: "center",
   padding: "100px",
@@ -33,7 +33,7 @@ export const TOOLTIP_SUBTITLE_OPTIONS = [
   undefined,
 ];
 export const TOOLTIP_ARROW_OPTIONS = [true];
-export const TOOLTIP_ARROW_OFFSET_OPTIONS = [undefined, -120, -60, 0, 60, 120];
+export const TOOLTIP_ARROW_OFFSET_OPTIONS = [undefined, -112, -60, 0, 60, 112];
 export const TOOLTIP_WIDTH_OPTIONS: TooltipExtraProps["width"][] = [
   "default",
   "wide",

diff --git a/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx b/packages/components/src/core/Tooltip/__storybook__/index.stories.tsx
@@ -11,7 +11,7 @@ export default {
     arrowOffset: {
       control: { type: "number" },
     },
-    invertStyle: {
+    hasInvertedStyle: {
       control: { type: "boolean" },
     },
     placement: {
@@ -52,7 +52,6 @@ export default {
 
 export const Default = {
   args: {
-    invertStyle: true,
     placement: "top",
     subtitle: "dolor sit amet",
     title: "Lorem ipsum",

diff --git a/packages/components/src/core/Tooltip/index.tsx b/packages/components/src/core/Tooltip/index.tsx
@@ -35,7 +35,7 @@ const Tooltip = forwardRef(function Tooltip(
   const {
     arrowOffset,
     classes,
-    invertStyle,
+    hasInvertedStyle,
     inverted,
     sdsStyle = "dark",
     subtitle,
@@ -51,11 +51,11 @@ const Tooltip = forwardRef(function Tooltip(
     showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
   }
 
-  if (width === "wide" && (sdsStyle === "dark" || invertStyle)) {
+  if (width === "wide" && (sdsStyle === "dark" || hasInvertedStyle)) {
     showWarningIfFirstOccurence(SDSWarningTypes.TooltipWidth);
   }
 
-  if (subtitle && (sdsStyle === "light" || !invertStyle)) {
+  if (subtitle && (sdsStyle === "light" || !hasInvertedStyle)) {
     showWarningIfFirstOccurence(SDSWarningTypes.TooltipSubtitle);
   }
 
@@ -65,7 +65,7 @@ const Tooltip = forwardRef(function Tooltip(
     /* stylelint-disable property-no-unknown -- false positive */
     arrowOffset,
     classes,
-    invertStyle: invertStyleValue(inverted, sdsStyle, invertStyle),
+    hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
     theme,
     width,
     /* stylelint-enable property-no-unknown -- false positive */
@@ -90,11 +90,12 @@ const Tooltip = forwardRef(function Tooltip(
   const content = (
     <>
       {title}
-      {invertStyle && subtitle && <Subtitle>{subtitle}</Subtitle>}
+      {hasInvertedStyle && subtitle && <Subtitle>{subtitle}</Subtitle>}
     </>
   );
 
-  const leaveDelay = invertStyle || inverted || sdsStyle === "dark" ? 0 : 500;
+  const leaveDelay =
+    hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
 
   return (
     <RawTooltip
@@ -117,17 +118,17 @@ const Tooltip = forwardRef(function Tooltip(
 
 /**
  * (masoudmanson): Temporary function to handle the inversion of the tooltip
- * based on the sdsStyle, invert and invertStyle props.
+ * based on the sdsStyle, invert and hasInvertedStyle props.
  * Once the sdsStyle and invert props are completely removed,
  * this function will be removed as well.
  */
 function invertStyleValue(
   inverted: boolean | undefined,
   sdsStyle: "light" | "dark" | undefined,
-  invertStyle: boolean | undefined
+  hasInvertedStyle: boolean | undefined
 ) {
-  return invertStyle !== undefined
-    ? invertStyle
+  return hasInvertedStyle !== undefined
+    ? hasInvertedStyle
     : sdsStyle === "dark"
       ? true
       : sdsStyle === "light"

diff --git a/packages/components/src/core/Tooltip/style.ts b/packages/components/src/core/Tooltip/style.ts
@@ -15,11 +15,11 @@ export interface TooltipExtraProps extends CommonThemeProps {
   // TODO(185930): remove custom `followCursor` prop when we upgrade to MUIv5
   arrowOffset?: number;
   followCursor?: boolean;
-  // @deprecated Use `invertStyle` instead
+  // @deprecated Use `hasInvertedStyle` instead
   inverted?: boolean;
-  // @deprecated Use `invertStyle` instead
+  // @deprecated Use `hasInvertedStyle` instead
   sdsStyle?: "dark" | "light";
-  invertStyle?: boolean;
+  hasInvertedStyle?: boolean;
   subtitle?: string;
   width?: "default" | "wide";
 }
@@ -79,15 +79,21 @@ export const Subtitle = styled("div")`
 `;
 
 export const tooltipCss = (props: TooltipExtraProps): string => {
-  const { invertStyle = true, inverted, sdsStyle, width, followCursor } = props;
+  const {
+    hasInvertedStyle = true,
+    inverted,
+    sdsStyle,
+    width,
+    followCursor,
+  } = props;
 
   const shadows = getShadows(props);
 
   return css`
     &.MuiTooltip-tooltip {
       box-shadow: ${shadows?.m};
 
-      ${sdsStyle === "dark" || inverted || invertStyle
+      ${sdsStyle === "dark" || inverted || hasInvertedStyle
         ? dark(props)
         : light(props)}
       ${width === "wide" && sdsStyle === "light" && wide()}
@@ -98,15 +104,15 @@ export const tooltipCss = (props: TooltipExtraProps): string => {
 };
 
 export const arrowCss = (props: TooltipExtraProps): string => {
-  const { invertStyle, inverted, sdsStyle, arrowOffset } = props;
+  const { hasInvertedStyle, inverted, sdsStyle, arrowOffset } = props;
 
   const semanticColors = getSemanticColors(props);
 
   return css`
     &.MuiTooltip-arrow {
       /* (bethbertozzi): !important is needed to fight inline style */
       left: ${arrowOffset}px !important;
-      color: ${invertStyle || inverted || sdsStyle === "dark"
+      color: ${hasInvertedStyle || inverted || sdsStyle === "dark"
         ? semanticColors?.base?.surfacePrimaryInverse
         : semanticColors?.base?.surfacePrimary};
       &:before {