chore: warn deprecated props

packages/core/src/components/AttentionBox/AttentionBox.tsx

@@ -15,6 +15,7 @@ import { SubIcon, VibeComponentProps, withStaticProps, ElementContent } from "..
 import Text from "../Text/Text";
 import Flex from "../Flex/Flex";
 import styles from "./AttentionBox.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface AttentionBoxProps extends VibeComponentProps {
   className?: string;
@@ -61,6 +62,7 @@ const AttentionBox: React.FC<AttentionBoxProps> & {
   "data-testid": dataTestId,
   closeButtonAriaLabel = "Close"
 }) => {
+  useWarnDeprecatedProps({ componentClassName }, { componentClassName: "className" }, "AttentionBox");
   const iconLabel = useMemo(() => {
     if (type === AttentionBoxType.DANGER) {
       return "alert";

packages/core/src/components/Avatar/Avatar.tsx

@@ -13,6 +13,7 @@ import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 import ClickableWrapper from "../Clickable/ClickableWrapper";
 import { SubIcon, VibeComponentProps, withStaticProps } from "../../types";
 import styles from "./Avatar.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface AvatarProps extends VibeComponentProps {
   src?: string;
@@ -89,6 +90,8 @@ const Avatar: React.FC<AvatarProps> & {
   onClick,
   "data-testid": dataTestId
 }) => {
+  useWarnDeprecatedProps({ isSquare, isDisabled }, { isSquare: "square", isDisabled: "disabled" }, "Avatar");
+
   const overrideSquare = backwardCompatibilityForProperties([square, isSquare]);
   const overrideDisabled = backwardCompatibilityForProperties([disabled, isDisabled], false);
   const backgroundColorStyle = useMemo(() => {

packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.tsx

@@ -8,6 +8,7 @@ import { BreadcrumbContent } from "./BreadcrumbContent/BreadcrumbContent";
 import { HideShowEvent } from "../../../constants";
 import { SubIcon, VibeComponentProps } from "../../../types";
 import styles from "./BreadcrumbItem.module.scss";
+import { useWarnDeprecatedProps } from "../../../helpers/warnDeprecatedProps";
 
 const MOUSEENTER = [HideShowEvent.MOUSE_ENTER];
 const MOUSELEAVE = [HideShowEvent.MOUSE_LEAVE];
@@ -47,6 +48,8 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   id,
   "data-testid": dataTestId
 }) => {
+  useWarnDeprecatedProps({ isDisabled }, { isDisabled: "disabled" }, "BreadcrumbItem");
+
   const overrideDisabled = backwardCompatibilityForProperties([disabled, isDisabled], false) as boolean;
   const componentRef = useRef<HTMLSpanElement>(null);
   const isOverflowing = useIsOverflowing({ ref: componentRef });

packages/core/src/components/Button/Button.tsx

@@ -16,6 +16,7 @@ import { backwardCompatibilityForProperties } from "../../helpers/backwardCompat
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import styles from "./Button.module.scss";
 import { useButtonLoading } from "./helper/useButtonLoading";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface ButtonProps extends VibeComponentProps {
   children?: React.ReactNode;
@@ -152,6 +153,8 @@ const Button: VibeComponent<ButtonProps, unknown> & {
     },
     ref
   ) => {
+    useWarnDeprecatedProps({ dataTestId: backwardCompatabilityDataTestId }, { dataTestId: "data-testid" }, "Button");
+
     const buttonRef = useRef<HTMLButtonElement>(null);
     const mergedRef = useMergeRef(ref, buttonRef);
 

packages/core/src/components/ButtonGroup/ButtonGroup.tsx

@@ -15,6 +15,7 @@ import { MoveBy } from "../../types/MoveBy";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./ButtonGroup.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 type ButtonGroupOption = {
   icon?: SubIcon;
@@ -80,6 +81,8 @@ const ButtonGroup: VibeComponent<ButtonGroupProps, HTMLDivElement> & {
     },
     ref
   ) => {
+    useWarnDeprecatedProps({ componentClassName }, { componentClassName: "className" }, "ButtonGroup");
+
     const inputRef = useRef();
     const mergedRef = useMergeRef(ref, inputRef);
 

packages/core/src/components/Checkbox/Checkbox.tsx

@@ -12,6 +12,7 @@ import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import Text from "../Text/Text";
 import styles from "./Checkbox.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface CheckBoxProps extends VibeComponentProps {
   /** A classname to be added to the wrapping element */
@@ -77,6 +78,8 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
     },
     ref
   ) => {
+    useWarnDeprecatedProps({ componentClassName }, { componentClassName: "className" }, "Checkbox");
+
     const inputRef = useRef<HTMLInputElement>(null);
     const mergedInputRef = useMergeRef(ref, inputRef);
     const iconContainerRef = useRef<HTMLDivElement>(null);

packages/core/src/components/Chips/Chips.tsx

@@ -16,6 +16,7 @@ import useSetFocus from "../../hooks/useSetFocus";
 import useClickableProps from "../../hooks/useClickableProps/useClickableProps";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 import styles from "./Chips.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 const CHIPS_AVATAR_SIZE = 20;
 
@@ -132,10 +133,18 @@ const Chips: VibeComponent<ChipsProps, HTMLDivElement> & {
       showBorder = false,
       leftRenderer,
       rightRenderer,
-      closeButtonAriaLabel = "Remove"
+      closeButtonAriaLabel = "Remove",
+      clickable,
+      isClickable
     },
     ref
   ) => {
+    useWarnDeprecatedProps(
+      { dataTestId: backwardCompatabilityDataTestId, clickable, isClickable },
+      { dataTestId: "data-testid", clickable: "onClick", isClickable: "onClick" },
+      "Chips"
+    );
+
     const overrideDataTestId = backwardCompatibilityForProperties(
       [dataTestId, backwardCompatabilityDataTestId],
       getTestId(ComponentDefaultTestId.CHIP, id)

packages/core/src/components/Clickable/Clickable.tsx

@@ -7,6 +7,7 @@ import VibeComponent from "../../types/VibeComponent";
 import useClickableProps from "../../hooks/useClickableProps/useClickableProps";
 import styles from "./Clickable.module.scss";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface ClickableProps extends VibeComponentProps {
   /**
@@ -66,6 +67,7 @@ const Clickable: VibeComponent<ClickableProps, HTMLElement> = forwardRef(
     },
     ref: React.ForwardedRef<HTMLElement>
   ) => {
+    useWarnDeprecatedProps({ dataTestId: backwardCompatabilityDataTestId }, { dataTestId: "data-testid" }, "Clickable");
     const overrideDataTestId = backwardCompatibilityForProperties([dataTestId, backwardCompatabilityDataTestId]);
     const clickableProps = useClickableProps(
       {

packages/core/src/components/Counter/Counter.tsx

@@ -12,6 +12,7 @@ import { backwardCompatibilityForProperties } from "../../helpers/backwardCompat
 import { CounterColor, CounterSize, CounterType, getActualSize } from "./CounterConstants";
 import { withStaticProps } from "../../types";
 import styles from "./Counter.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface CounterProps extends VibeComponentProps {
   /** id to pass to the element */
@@ -67,6 +68,8 @@ const Counter: React.FC<CounterProps> & {
   noAnimation = false,
   "data-testid": dataTestId
 }) => {
+  useWarnDeprecatedProps({ wrapperClassName }, { wrapperClassName: "className" }, "Counter");
+
   // Variables
   const overrideClassName = backwardCompatibilityForProperties([className, wrapperClassName], undefined) as string;
 

packages/core/src/components/Dialog/Dialog.tsx

@@ -261,6 +261,12 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
     if (overrideShouldCallbackOnMount && isOpen) {
       onDialogDidShow && onDialogDidShow();
     }
+
+    if (this.props.shoudlCallbackOnMount) {
+      console.warn(
+        "Dialog: `shoudlCallbackOnMount` is deprecated and will be removed in the next major version, please use `shouldCallbackOnMount` instead. [monday-ui-react-core]"
+      );
+    }
   }
 
   componentWillUnmount() {

packages/core/src/components/Divider/Divider.tsx

@@ -6,6 +6,7 @@ import { DirectionType } from "./DividerConstants";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { withStaticProps, VibeComponentProps } from "../../types";
 import styles from "./Divider.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface DividerProps extends VibeComponentProps {
   direction?: DirectionType;
@@ -27,6 +28,8 @@ const Divider: React.FC<DividerProps> & {
   id,
   "data-testid": dataTestId
 }) => {
+  useWarnDeprecatedProps({ classname }, { classname: "className" }, "Divider");
+
   const overrideClassName = backwardCompatibilityForProperties([className, classname]);
   return (
     <div

packages/core/src/components/IconButton/IconButton.tsx

@@ -14,6 +14,7 @@ import Button from "../Button/Button";
 import { BUTTON_ICON_SIZE, ButtonColor, ButtonType } from "../Button/ButtonConstants";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import styles from "./IconButton.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface IconButtonProps extends VibeComponentProps {
   /**
@@ -141,6 +142,12 @@ const IconButton: VibeComponent<IconButtonProps> & {
     },
     ref
   ) => {
+    useWarnDeprecatedProps(
+      { dataTestId: backwardCompatabilityDataTestId },
+      { dataTestId: "data-testid" },
+      "IconButton"
+    );
+
     const componentRef = useRef(null);
     const mergedRef = useMergeRef(ref, componentRef);
 

packages/core/src/components/Label/Label.tsx

@@ -13,6 +13,7 @@ import useMergeRef from "../../hooks/useMergeRef";
 import styles from "./Label.module.scss";
 import LabelCelebrationAnimation from "./LabelCelebrationAnimation";
 import { mapSizesToTextSize, Sizes } from "./Label.types";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface LabelProps extends VibeComponentProps {
   /**
@@ -55,6 +56,8 @@ const Label: VibeComponent<LabelProps> & {
     },
     ref
   ) => {
+    useWarnDeprecatedProps({ wrapperClassName }, { wrapperClassName: "className" }, "Label");
+
     const labelRef = useRef<HTMLSpanElement>(null);
     const mergedRef = useMergeRef(ref, labelRef);
     const [isCelebrationAnimation, setIsCelebrationAnimation] = useState(celebrationAnimation);

packages/core/src/components/Link/Link.tsx

@@ -7,6 +7,7 @@ import Icon from "../Icon/Icon";
 import { IconPosition, LinkTarget } from "./LinkConsts";
 import { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from "../../types";
 import styles from "./Link.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface LinkProps extends VibeComponentProps {
   /**
@@ -74,6 +75,8 @@ const Link: VibeComponent<LinkProps, HTMLAnchorElement> & {
     },
     ref: React.ForwardedRef<HTMLAnchorElement>
   ) => {
+    useWarnDeprecatedProps({ componentClassName }, { componentClassName: "className" }, "Link");
+
     const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
     const isStart = iconPosition === IconPosition.START;
 

packages/core/src/components/Loader/Loader.tsx

@@ -6,6 +6,7 @@ import { getTestId } from "../../tests/test-ids-utils";
 import { VibeComponent, VibeComponentProps, withStaticProps } from "../../types";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./Loader.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface LoaderProps extends VibeComponentProps {
   /**
@@ -28,6 +29,8 @@ const Loader: VibeComponent<LoaderProps, HTMLElement> & {
     { svgClassName, className, wrapperClassName, size, color, hasBackground = false, id, "data-testid": dataTestId },
     ref: ForwardedRef<HTMLDivElement>
   ) => {
+    useWarnDeprecatedProps({ svgClassName }, { svgClassName: "className" }, "Loader");
+
     const overrideClassName = backwardCompatibilityForProperties([className, svgClassName], "");
 
     const sizeStyle = useMemo(() => {

packages/core/src/components/Menu/Menu/Menu.tsx

@@ -30,6 +30,7 @@ import { useFocusOnMount } from "./hooks/useFocusOnMount";
 import { useMenuId } from "./hooks/useMenuId";
 import { generateMenuItemId } from "./utils/utils";
 import styles from "./Menu.module.scss";
+import { useWarnDeprecatedProps } from "../../../helpers/warnDeprecatedProps";
 
 export interface MenuProps extends VibeComponentProps {
   /**
@@ -79,6 +80,8 @@ const Menu: VibeComponent<MenuProps> & {
     },
     forwardedRef
   ) => {
+    useWarnDeprecatedProps({ classname }, { classname: "className" }, "Menu");
+
     const ref = useRef(null);
     const mergedRef = useMergeRef(ref, forwardedRef);
 

packages/core/src/components/Menu/MenuDivider/MenuDivider.tsx

@@ -6,6 +6,7 @@ import { backwardCompatibilityForProperties } from "../../../helpers/backwardCom
 import { VibeComponentProps } from "../../../types";
 import { FC } from "react";
 import styles from "./MenuDivider.module.scss";
+import { useWarnDeprecatedProps } from "../../../helpers/warnDeprecatedProps";
 
 export interface MenuDividerProps extends VibeComponentProps {
   /**
@@ -21,6 +22,8 @@ const MenuDivider: FC<MenuDividerProps> & { isMenuChild?: boolean } = ({
   id,
   "data-testid": dataTestId
 }) => {
+  useWarnDeprecatedProps({ classname }, { classname: "className" }, "MenuDivider");
+
   const overrideClassName = backwardCompatibilityForProperties([className, classname]);
   return (
     <Divider

packages/core/src/components/Menu/MenuItem/MenuItem.tsx

@@ -35,6 +35,7 @@ import IconButton from "../../IconButton/IconButton";
 import Divider from "../../Divider/Divider";
 import { DirectionType } from "../../Divider/DividerConstants";
 import useIsMouseEnter from "../../../hooks/useIsMouseEnter";
+import { useWarnDeprecatedProps } from "../../../helpers/warnDeprecatedProps";
 
 export interface MenuItemProps extends VibeComponentProps {
   title?: string;
@@ -136,6 +137,8 @@ const MenuItem: VibeComponent<MenuItemProps | MenuItemTitleComponentProps> & {
     },
     ref: ForwardedRef<HTMLElement>
   ) => {
+    useWarnDeprecatedProps({ classname }, { classname: "className" }, "MenuItem");
+
     const overrideClassName = backwardCompatibilityForProperties([className, classname]);
     const isActive = activeItemIndex === index;
     const hasChildren = !!children;

packages/core/src/components/Menu/MenuItemButton/MenuItemButton.tsx

@@ -13,6 +13,7 @@ import { backwardCompatibilityForProperties } from "../../../helpers/backwardCom
 import { SubIcon, VibeComponentProps, withStaticProps, ElementContent } from "../../../types";
 import Text from "../../Text/Text";
 import styles from "./MenuItemButton.module.scss";
+import { useWarnDeprecatedProps } from "../../../helpers/warnDeprecatedProps";
 
 export interface MenuItemButtonProps extends VibeComponentProps {
   /**
@@ -67,6 +68,8 @@ const MenuItemButton: FC<MenuItemButtonProps> & {
   id,
   "data-testid": dataTestId
 }) => {
+  useWarnDeprecatedProps({ classname }, { classname: "className" }, "MenuItemButton");
+
   const ref = useRef(null);
   const referenceElementRef = useRef(null);
   const mergedRef = useMergeRef(ref, referenceElementRef);

packages/core/src/components/Menu/MenuTitle/MenuTitle.tsx

@@ -8,6 +8,7 @@ import { backwardCompatibilityForProperties } from "../../../helpers/backwardCom
 import { MenuTitleCaptionPosition } from "./MenuTitleConstants";
 import { VibeComponentProps, withStaticProps } from "../../../types";
 import styles from "./MenuTitle.module.scss";
+import { useWarnDeprecatedProps } from "../../../helpers/warnDeprecatedProps";
 
 export interface MenuTitleProps extends VibeComponentProps {
   /**
@@ -31,6 +32,8 @@ const MenuTitle: FC<MenuTitleProps> & {
   id,
   "data-testid": dataTestId
 }) => {
+  useWarnDeprecatedProps({ classname }, { classname: "className" }, "MenuTitle");
+
   const overrideClassName = backwardCompatibilityForProperties([className, classname]);
   const renderCaptionIfNeeded = () => {
     if (caption) {

packages/core/src/components/MenuButton/MenuButton.tsx

@@ -19,6 +19,7 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { MenuChild } from "../Menu/Menu/MenuConstants";
 import styles from "./MenuButton.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 const TOOLTIP_SHOW_TRIGGER = [Tooltip.hideShowTriggers.MOUSE_ENTER];
 const DIALOG_SHOW_TRIGGER = [HideShowEvent.CLICK, HideShowEvent.ENTER];
@@ -185,6 +186,16 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
     },
     ref
   ) => {
+    useWarnDeprecatedProps(
+      { componentClassName, closeDialogOnContentClick, disabledReason },
+      {
+        componentClassName: "className",
+        closeDialogOnContentClick: "closeMenuOnItemClick",
+        disabledReason: "tooltipContent"
+      },
+      "MenuButton"
+    );
+
     const componentRef = useRef(null);
     const mergedRef = useMergeRef(ref, componentRef);
 

packages/core/src/components/RadioButton/RadioButton.tsx

@@ -9,6 +9,7 @@ import VibeComponent from "../../types/VibeComponent";
 import Tooltip from "../Tooltip/Tooltip";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import styles from "./RadioButton.module.scss";
+import { useWarnDeprecatedProps } from "../../helpers/warnDeprecatedProps";
 
 export interface RadioButtonProps extends VibeComponentProps {
   /**  class to be added to wrapping component */
@@ -80,6 +81,8 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
     },
     ref: React.ForwardedRef<HTMLInputElement>
   ) => {
+    useWarnDeprecatedProps({ componentClassName }, { componentClassName: "className" }, "RadioButton");
+
     const inputRef = useRef<HTMLInputElement | null>();
     const mergedRef = useMergeRef(ref, inputRef);
     const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);