fix(EditableTypography): fix specificity issues when changing types a…

…nd weights
mondaycom · Mar 19, 2024 · a64329c · a64329c
1 parent a4e05b6
commit a64329c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/packages/core/src/components/EditableHeading/EditableHeading.tsx b/packages/core/src/components/EditableHeading/EditableHeading.tsx
@@ -40,6 +40,8 @@ const EditableHeading: VibeComponent<EditableHeadingProps, HTMLElement> & {
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.EDITABLE_HEADING, id)}
         component={Heading}
         typographyClassName={getStyle(styles, camelCase(type + "-" + weight))}
+        type={type}
+        weight={weight}
         {...editableTypographyProps}
       />
     );

diff --git a/packages/core/src/components/EditableText/EditableText.tsx b/packages/core/src/components/EditableText/EditableText.tsx
@@ -43,6 +43,8 @@ const EditableText: VibeComponent<EditableTextProps, HTMLElement> & {
         component={Text}
         typographyClassName={cx(getStyle(styles, camelCase(type + "-" + weight)), styles.typography)}
         clearable
+        type={type}
+        weight={weight}
         {...editableTypographyProps}
       />
     );

diff --git a/packages/core/src/components/EditableTypography/EditableTypography.tsx b/packages/core/src/components/EditableTypography/EditableTypography.tsx
@@ -8,6 +8,8 @@ import { keyCodes } from "../../constants";
 import { useKeyboardButtonPressedFunc } from "../../hooks/useKeyboardButtonPressedFunc";
 import { TooltipProps } from "../Tooltip/Tooltip";
 import usePrevious from "../../hooks/usePrevious";
+import { TextType, TextWeight } from "../Text/TextConstants";
+import { HeadingType, HeadingWeight } from "../Heading/HeadingConstants";
 
 export interface EditableTypographyImplementationProps {
   /** Value of the text */
@@ -37,6 +39,10 @@ export interface EditableTypographyProps extends VibeComponentProps, EditableTyp
   typographyClassName: string;
   /** Shows placeholder when empty, if provided */
   clearable?: boolean;
+  /** Sets the Text/Heading type */
+  type?: TextType | HeadingType;
+  /** Sets the Text/Heading weight */
+  weight?: TextWeight | HeadingWeight;
 }
 
 const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(
@@ -56,7 +62,9 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
       component: TypographyComponent,
       isEditMode,
       onEditModeChange,
-      tooltipProps
+      tooltipProps,
+      type,
+      weight
     },
     ref
   ) => {
@@ -191,6 +199,8 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
           })}
           tabIndex={0}
           tooltipProps={tooltipProps}
+          weight={weight}
+          type={type}
         >
           {inputValue || placeholder}
         </TypographyComponent>