Add support on className to Checkbox&AttentionBox instead of componentClassName

src/components/AttentionBox/AttentionBox.jsx

@@ -6,8 +6,21 @@ import CloseSmall from "../Icon/Icons/components/CloseSmall";
 import AlertIcon from "../Icon/Icons/components/Alert";
 import { baseClassName, closeClassName, compactClassName, ATTENTION_BOX_TYPES } from "./AttentionBoxConstants";
 import "./AttentionBox.scss";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
-const AttentionBox = ({ componentClassName, type, icon, iconType, title, text, withoutIcon, onClose, compact }) => {
+const AttentionBox = ({
+  className,
+  // Backward compatibility for props naming
+  componentClassName,
+  type,
+  icon,
+  iconType,
+  title,
+  text,
+  withoutIcon,
+  onClose,
+  compact
+}) => {
   const iconLabel = useMemo(() => {
     if (type === ATTENTION_BOX_TYPES.DANGER) {
       return "alert";
@@ -20,6 +33,7 @@ const AttentionBox = ({ componentClassName, type, icon, iconType, title, text, w
     return "attention";
   }, [type]);
 
+  const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
   const classNameWithType = `${baseClassName}--type-${type}`;
   return (
     <aside
@@ -28,7 +42,7 @@ const AttentionBox = ({ componentClassName, type, icon, iconType, title, text, w
         classNameWithType,
         { [compactClassName]: compact },
         { [closeClassName]: onClose },
-        componentClassName
+        overrideClassName
       )}
       role="alert"
     >
@@ -72,7 +86,7 @@ const AttentionBox = ({ componentClassName, type, icon, iconType, title, text, w
 AttentionBox.types = ATTENTION_BOX_TYPES;
 
 AttentionBox.propTypes = {
-  componentClassName: PropTypes.string,
+  className: PropTypes.string,
   /** we support 4 types of attention boxes */
   type: PropTypes.oneOf([
     ATTENTION_BOX_TYPES.PRIMARY,
@@ -92,7 +106,7 @@ AttentionBox.propTypes = {
 };
 
 AttentionBox.defaultProps = {
-  componentClassName: "",
+  className: undefined,
   type: ATTENTION_BOX_TYPES.PRIMARY,
   icon: AlertIcon,
   iconType: Icon.type.SVG,

src/components/AttentionBox/__stories__/attentionBox.stories.js

@@ -62,9 +62,7 @@ export const States = () => {
 const renderAttentionBox = type => {
   const customClass = "monday-style-attention-box-component-custom-class";
 
-  return (
-    <AttentionBox type={type} title={ATTENTION_BOX_TITLE} text={ATTENTION_BOX_TEXT} componentClassName={customClass} />
-  );
+  return <AttentionBox type={type} title={ATTENTION_BOX_TITLE} text={ATTENTION_BOX_TEXT} className={customClass} />;
 };
 
 export default {

src/components/AttentionBox/__tests__/attentionBox.jest.js

@@ -5,9 +5,7 @@ import AttentionBox from "../AttentionBox";
 describe("AttentionBox Tests", () => {
   describe("Snapshot Tests", () => {
     it("renders correctly", () => {
-      const tree = renderer
-        .create(<AttentionBox componentClassName="dummy-class-name" title="Title" text="Text" />)
-        .toJSON();
+      const tree = renderer.create(<AttentionBox className="dummy-class-name" title="Title" text="Text" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
@@ -17,19 +15,17 @@ describe("AttentionBox Tests", () => {
     });
 
     it("renders correctly with empty title prop", () => {
-      const tree = renderer
-        .create(<AttentionBox componentClassName="dummy-class-name" title="" text="Text" />)
-        .toJSON();
+      const tree = renderer.create(<AttentionBox className="dummy-class-name" title="" text="Text" />).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it("renders correctly with undefined title prop", () => {
-      const tree = renderer.create(<AttentionBox componentClassName="dummy-class-name" text="Text" />);
+      const tree = renderer.create(<AttentionBox className="dummy-class-name" text="Text" />);
     });
 
     it("renders correctly with no icon", () => {
       const tree = renderer
-        .create(<AttentionBox componentClassName="dummy-class-name-no-icon" title="Title" text="Text" withoutIcon />)
+        .create(<AttentionBox className="dummy-class-name-no-icon" title="Title" text="Text" withoutIcon />)
         .toJSON();
       expect(tree).toMatchSnapshot();
     });

src/components/Checkbox/Checkbox.js

@@ -6,11 +6,14 @@ import cx from "classnames";
 import Icon from "../Icon/Icon";
 import Check from "../Icon/Icons/components/Check";
 import Remove from "../Icon/Icons/components/Remove";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 import "./Checkbox.scss";
 
 const BASE_CLASS_NAME = "monday-style-checkbox";
 
 export const Checkbox = ({
+  className,
+  // Backward compatibility for props naming
   componentClassName,
   label,
   ariaLabelledBy,
@@ -25,6 +28,7 @@ export const Checkbox = ({
 }) => {
   const iconContainerRef = useRef(null);
   const inputRef = useRef(null);
+  const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
   const onMouseUpCallback = useCallback(() => {
     const input = inputRef.current;
     if (!input) return;
@@ -54,7 +58,7 @@ export const Checkbox = ({
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <label
-      className={cx(BASE_CLASS_NAME, componentClassName, { [`${BASE_CLASS_NAME}__disabled`]: disabled })}
+      className={cx(BASE_CLASS_NAME, overrideClassName, { [`${BASE_CLASS_NAME}__disabled`]: disabled })}
       onMouseUp={onMouseUpCallback}
       htmlFor={id}
     >
@@ -90,7 +94,7 @@ export const Checkbox = ({
 
 Checkbox.propTypes = {
   id: PropTypes.string,
-  componentClassName: PropTypes.string,
+  className: PropTypes.string,
   label: PropTypes.string,
   ariaLabelledBy: PropTypes.string,
   onChange: PropTypes.func,
@@ -104,7 +108,7 @@ Checkbox.propTypes = {
 
 Checkbox.defaultProps = {
   id: undefined,
-  componentClassName: "",
+  className: undefined,
   label: undefined,
   onChange: NOOP,
   disabled: false,

src/components/Checkbox/__stories__/checkbox.stories.js

@@ -23,25 +23,13 @@ export const States = () => {
         <Checkbox value="1" label="Option" name="regular" disabled={false} />
       </StoryStateRow>
       <StoryStateRow componentDescription="Selected" componentClassName="monday-style-story-checkbox__state">
-        <Checkbox
-          value="1"
-          label="Option"
-          name="selected"
-          disabled={false}
-          componentClassName="monday-style-selected"
-        />
+        <Checkbox value="1" label="Option" name="selected" disabled={false} className="monday-style-selected" />
       </StoryStateRow>
       <StoryStateRow
         componentDescription="Hover"
         componentClassName="monday-style-story-checkbox__state monday-style-story-checkbox__state--hover"
       >
-        <Checkbox
-          value="1"
-          label="Option"
-          name="selected"
-          disabled={false}
-          componentClassName="monday-style-story-selected"
-        />
+        <Checkbox value="1" label="Option" name="selected" disabled={false} className="monday-style-story-selected" />
       </StoryStateRow>
       <StoryStateRow
         componentDescription="Hover selected"
@@ -53,7 +41,7 @@ export const States = () => {
           name="selected"
           defaultChecked={true}
           disabled={false}
-          componentClassName="monday-style-selected"
+          className="monday-style-selected"
         />
       </StoryStateRow>
       <StoryStateRow componentDescription="Selected" componentClassName="monday-style-story-checkbox__state">
@@ -63,7 +51,7 @@ export const States = () => {
           name="selected"
           defaultChecked={true}
           disabled={false}
-          componentClassName="monday-style-selected"
+          className="monday-style-selected"
         />
       </StoryStateRow>
 
@@ -80,7 +68,7 @@ export const States = () => {
           label="Option"
           name="indeterminate"
           indeterminate={true}
-          componentClassName="monday-style-selected"
+          className="monday-style-selected"
         />
       </StoryStateRow>
     </StoryWrapper>

src/components/Checkbox/__tests__/checkbox.jest.js

@@ -7,7 +7,7 @@ describe("Checkbox Tests", () => {
   describe("Snapshot Tests", () => {
     it("renders correctly", () => {
       const tree = renderer
-        .create(<Checkbox componentClassName="dummy-class-name" label="Option 1" name="checkbox" value="option1" />)
+        .create(<Checkbox className="dummy-class-name" label="Option 1" name="checkbox" value="option1" />)
         .toJSON();
       expect(tree).toMatchSnapshot();
     });