fix(Tipseen): add gap between title and close button (#1972)

mondaycom · Feb 19, 2024 · b0ceea2 · b0ceea2
1 parent de17685
commit b0ceea2
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/packages/core/src/components/Tipseen/Tipseen.module.scss b/packages/core/src/components/Tipseen/Tipseen.module.scss
@@ -25,7 +25,7 @@
     }
 
     &Title {
-      padding: var(--spacing-medium) var(--spacing-medium) 0 var(--spacing-medium);
+      padding: var(--spacing-medium) var(--spacing-xl) 0 var(--spacing-medium);
     }
 
     &Content {

diff --git a/packages/core/src/components/Tipseen/TipseenTitle.module.scss b/packages/core/src/components/Tipseen/TipseenTitle.module.scss
@@ -0,0 +1,3 @@
+.title {
+  padding-right: var(--spacing-medium);
+}
diff --git a/packages/core/src/components/Tipseen/TipseenTitle.tsx b/packages/core/src/components/Tipseen/TipseenTitle.tsx
@@ -3,6 +3,8 @@ import { VibeComponentProps } from "../../types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import Text from "../Text/Text";
+import cx from "classnames";
+import styles from "./TipseenTitle.module.scss";
 
 interface TipseenTitleProps extends VibeComponentProps {
   text?: string;
@@ -17,7 +19,7 @@ const TipseenTitle: FC<TipseenTitleProps> = ({ text, className, id, "data-testid
       color={Text.colors.ON_PRIMARY}
       aria-level={3}
       maxLines={2}
-      className={className}
+      className={cx(styles.title, className)}
       id={id}
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.TIPSEEN_TITLE, id)}
     >

diff --git a/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap b/packages/core/src/components/Tipseen/__tests__/__snapshots__/tipseen-tests.jest.js.snap
@@ -526,7 +526,7 @@ Array [
 exports[`Snapshot tests TipseenTitle should render correctly with given text 1`] = `
 <div
   aria-level={3}
-  className="typography onPrimary start multiLineEllipsis text text1Bold"
+  className="typography onPrimary start multiLineEllipsis text text1Bold title"
   data-testid="tipseen-title"
   role="heading"
 >