Add support on consistent API for all the library components for clas…

…s name and disabled props (#423) * add support on consistent api for class name and disabled props * fix bug on disabled default value * fix tests and stories * fix tests and stories
mondaycom · Jan 3, 2022 · 5e4ce65 · 5e4ce65
1 parent 3bc8d43
commit 5e4ce65
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 102 deletions.
diff --git a/src/components/Avatar/Avatar.jsx b/src/components/Avatar/Avatar.jsx
@@ -8,6 +8,7 @@ import { getElementColor, elementColorsNames } from "../../general-stories/color
 import { AvatarBadge } from "./AvatarBadge";
 import { AvatarContent } from "./AvatarContent";
 import "./Avatar.scss";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
 const AVATAR_CSS_BASE_CLASS = "monday-style-avatar";
 const bemHelper = BEMClass(AVATAR_CSS_BASE_CLASS);
@@ -22,7 +23,11 @@ const Avatar = ({
   role,
   ariaLabel,
   backgroundColor,
+  square,
+  disabled,
+  // Backward compatibility for props naming
   isSquare,
+  // Backward compatibility for props naming
   isDisabled,
   tabIndex,
   ariaHidden,
@@ -31,6 +36,8 @@ const Avatar = ({
   bottomLeftBadgeProps,
   bottomRightBadgeProps
 }) => {
+  const overrideSquare = backwardCompatibilityForProperties([square, isSquare]);
+  const overrideDisabled = backwardCompatibilityForProperties([disabled, isDisabled], false);
   const backgroundColorStyle = useMemo(() => {
     return src ? undefined : { backgroundColor: getElementColor(backgroundColor) };
   }, [src, backgroundColor]);
@@ -89,8 +96,8 @@ const Avatar = ({
           bemHelper({ element: "circle", state: type }),
           bemHelper({ element: "circle", state: size }),
           {
-            [bemHelper({ element: "circle", state: "is-disabled" })]: isDisabled,
-            [bemHelper({ element: "circle", state: "is-square" })]: isSquare
+            [bemHelper({ element: "circle", state: "is-disabled" })]: overrideDisabled,
+            [bemHelper({ element: "circle", state: "is-square" })]: overrideSquare
           }
         )}
         aria-hidden={ariaHidden}
@@ -121,8 +128,8 @@ Avatar.propTypes = {
   size: PropTypes.oneOf([Avatar.sizes.LARGE, Avatar.sizes.MEDIUM, Avatar.sizes.SMALL]),
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   ariaHidden: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isSquare: PropTypes.bool,
+  disabled: PropTypes.bool,
+  square: PropTypes.bool,
   topLeftBadgeProps: PropTypes.object,
   topRightBadgeProps: PropTypes.object,
   bottomLeftBadgeProps: PropTypes.object,
@@ -141,8 +148,8 @@ Avatar.defaultProps = {
   size: AVATAR_SIZES.LARGE,
   tabIndex: 0,
   ariaHidden: false,
-  isDisabled: false,
-  isSquare: false,
+  disabled: undefined,
+  square: undefined,
   topLeftBadgeProps: undefined,
   topRightBadgeProps: undefined,
   bottomLeftBadgeProps: undefined,

diff --git a/src/components/Avatar/__stories__/avatar.stories.mdx b/src/components/Avatar/__stories__/avatar.stories.mdx
@@ -74,9 +74,9 @@ Avatars appear in 3 sizes: Small, Medium, and Large.
 Use when a user is inactive in the system.
 <Canvas>
   <Story name="Disable">
-    <Avatar size={Avatar.sizes.SMALL} src={person1} type={Avatar.types.IMG} isDisabled />
-    <Avatar size={Avatar.sizes.MEDIUM} src={person1} type={Avatar.types.IMG} isDisabled />
-    <Avatar size={Avatar.sizes.LARGE} src={person1} type={Avatar.types.IMG} isDisabled />
+    <Avatar size={Avatar.sizes.SMALL} src={person1} type={Avatar.types.IMG} disabled />
+    <Avatar size={Avatar.sizes.MEDIUM} src={person1} type={Avatar.types.IMG} disabled />
+    <Avatar size={Avatar.sizes.LARGE} src={person1} type={Avatar.types.IMG} disabled />
   </Story>
 </Canvas>
 
@@ -99,21 +99,21 @@ Use for non-person avatars, such as a workspace or team.
       type={Avatar.types.TEXT}
       text="R"
       backgroundColor={Avatar.colors.BRIGHT_BLUE}
-      isSquare
+      square
     />
     <Avatar
       size={Avatar.sizes.MEDIUM}
       type={Avatar.types.ICON}
       icon={WhatsNew}
       backgroundColor={Avatar.colors.AQUAMARINE}
-      isSquare
+      square
     />
     <Avatar
       size={Avatar.sizes.LARGE}
       type={Avatar.types.TEXT}
       text="RM"
       backgroundColor={Avatar.colors.WORKING_ORANGE}
-      isSquare
+      square
     />
   </Story>
 </Canvas>

diff --git a/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.jsx b/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.jsx
@@ -5,11 +5,24 @@ import useIsOverflowing from "../../../hooks/useIsOverflowing";
 import Tooltip from "../../Tooltip/Tooltip";
 import { BreadcrumbContent } from "./BreadcrumbContent/BreadcrumbContent";
 import "./BreadcrumbItem.scss";
+import { backwardCompatibilityForProperties } from "../../../helpers/backwardCompatibilityForProperties";
 
 const MOUSEENTER = ["mouseenter"];
 const MOUSELEAVE = ["mouseleave"];
 
-const BreadcrumbItem = ({ className, text, isDisabled, isClickable, link, onClick, isCurrent, icon }) => {
+const BreadcrumbItem = ({
+  className,
+  text,
+  disabled,
+  // Backward compatibility for props naming
+  isDisabled,
+  isClickable,
+  link,
+  onClick,
+  isCurrent,
+  icon
+}) => {
+  const overrideDisabled = backwardCompatibilityForProperties([disabled, isDisabled], false);
   const componentRef = useRef(null);
   const isOverflowing = useIsOverflowing({ ref: componentRef });
 
@@ -27,15 +40,15 @@ const BreadcrumbItem = ({ className, text, isDisabled, isClickable, link, onClic
           className,
           { clickable: isClickable },
           { current: isCurrent },
-          { disabled: isDisabled }
+          { disabled: overrideDisabled }
         )}
       >
         <BreadcrumbContent
           className={classNames(
             "breadcrumb-content",
             { clickable: isClickable },
             { current: isCurrent },
-            { disabled: isDisabled }
+            { disabled: overrideDisabled }
           )}
           ref={componentRef}
           isClickable={isClickable}
@@ -55,7 +68,7 @@ BreadcrumbItem.propTypes = {
   /** The display text. */
   text: PropTypes.string,
   /** Should item be disabled. */
-  isDisabled: PropTypes.bool,
+  disabled: PropTypes.bool,
   /** Should item be clickable - this should be recieved from the breadcrumbsBar ( Navigation/Indication bar ). */
   isClickable: PropTypes.bool,
   /** If the item is clickable and the type of navigation is a link, this is the link */
@@ -71,7 +84,7 @@ BreadcrumbItem.propTypes = {
 BreadcrumbItem.defaultProps = {
   className: "",
   text: "",
-  isDisabled: false,
+  disabled: undefined,
   isClickable: false,
   link: undefined,
   onClick: undefined,

diff --git a/...components/BreadcrumbsBar/BreadcrumbItem/__stories__/breadcrumbItem.stories.mdx b/...components/BreadcrumbsBar/BreadcrumbItem/__stories__/breadcrumbItem.stories.mdx
@@ -68,7 +68,7 @@ export const breadcrumbItemTemplate = createComponentTemplate(BreadcrumbItem)
       <div className="monday-storybook-breadcrumb-item_row-wrapper">
         <span>Disabled</span>
         <BreadcrumbsBar>
-          <BreadcrumbItem text="Workspace" icon={Workspace} isDisabled />
+          <BreadcrumbItem text="Workspace" icon={Workspace} disabled />
         </BreadcrumbsBar>
       </div>
       <div className="monday-storybook-breadcrumb-item_row-wrapper">

diff --git a/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/breadcrumbItem-snapshot-tests.jest.js b/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/breadcrumbItem-snapshot-tests.jest.js
@@ -42,7 +42,7 @@ describe("BreadcrumbsItem renders correctly ", () => {
     const tree = renderer
       .create(
         <BreadcrumbsBar>
-          <BreadcrumbItem isDisabled />
+          <BreadcrumbItem disabled />
         </BreadcrumbsBar>
       )
       .toJSON();
@@ -71,4 +71,3 @@ describe("BreadcrumbsItem renders correctly ", () => {
     expect(tree).toMatchSnapshot();
   });
 });
-
diff --git a/src/components/Counter/Counter.jsx b/src/components/Counter/Counter.jsx
@@ -14,12 +14,15 @@ import useAfterFirstRender from "../../hooks/useAfterFirstRender";
 
 import "./Counter.scss";
 import { NOOP } from "../../utils/function-utils";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
 const Counter = ({
   count,
   size,
   kind,
   color,
+  className,
+  // Backward compatibility for props naming
   wrapperClassName,
   maxDigits,
   ariaLabeledBy,
@@ -29,6 +32,9 @@ const Counter = ({
   onMouseDown,
   noAnimation
 }) => {
+  // Variables
+  const overrideClassName = backwardCompatibilityForProperties([className, wrapperClassName]);
+
   // State
   const [countChangeAnimationState, setCountChangeAnimationState] = useState(false);
 
@@ -85,7 +91,7 @@ const Counter = ({
 
   return (
     <span
-      className={wrapperClassName}
+      className={overrideClassName}
       aria-label={`${ariaLabel} ${countText}`}
       aria-labelledby={ariaLabeledBy}
       onMouseDown={onMouseDown}
@@ -118,7 +124,7 @@ Counter.kinds = COUNTER_TYPES;
 Counter.propTypes = {
   /** id to pass to the element */
   id: PropTypes.string,
-  wrapperClassName: PropTypes.string,
+  className: PropTypes.string,
   count: PropTypes.number,
   /** element id to describe the counter accordingly */
   ariaLabeledBy: PropTypes.string,
@@ -141,7 +147,7 @@ Counter.propTypes = {
 };
 Counter.defaultProps = {
   id: "",
-  wrapperClassName: "",
+  className: undefined,
   count: 0,
   size: SIZES.LARGE,
   color: COUNTER_COLORS.PRIMARY,

diff --git a/src/components/Counter/__stories__/counter.stories.mdx b/src/components/Counter/__stories__/counter.stories.mdx
@@ -181,8 +181,8 @@ Used on the notification icon to indicate the number of new notifications.
           <Counter 
             count={count} 
             maxDigits={1}
-            color={Counter.colors.NEGATIVE} 
-            wrapperClassName="storybook-counter_counter-position-top"
+            color={Counter.colors.NEGATIVE}
+            className="storybook-counter_counter-position-top"
           />
         </div>
       )
@@ -213,15 +213,15 @@ The counter represents the number of items on each topic.
   <Story name="Count the number of updates">
     <div className="storybook-counter_icon-wrapper">
       <Icon icon={AddUpdate} iconSize="36" />
-      <div className="storybook-counter_line"></div>
+      <div className="storybook-counter_line" />
       <div className="storybook-counter_position">
         <Icon icon={Update} iconSize="36" />
-        <Counter count={5} size={Counter.sizes.SMALL} wrapperClassName="storybook-counter_counter-position-bot" />
+        <Counter count={5} size={Counter.sizes.SMALL} className="storybook-counter_counter-position-bot" />
       </div>
-      <div className="storybook-counter_line"></div>
+      <div className="storybook-counter_line" />
        <div className="storybook-counter_position">
         <Icon icon={Update} iconSize="36" />
-        <Counter count={5} color={Counter.colors.DARK} size={Counter.sizes.SMALL} wrapperClassName="storybook-counter_counter-position-bot" />
+        <Counter count={5} color={Counter.colors.DARK} size={Counter.sizes.SMALL} className="storybook-counter_counter-position-bot" />
       </div>
     </div>
   </Story>

diff --git a/src/components/Counter/__tests__/__snapshots__/counter-snapshot-tests.jest.js.snap b/src/components/Counter/__tests__/__snapshots__/counter-snapshot-tests.jest.js.snap
@@ -4,7 +4,6 @@ exports[`Counter renders correctly with ariaLabeledBy 1`] = `
 <span
   aria-label=" 0"
   aria-labelledby="aria label"
-  className=""
   onMouseDown={[Function]}
 >
   <div
@@ -24,7 +23,6 @@ exports[`Counter renders correctly with count above limit 1`] = `
 <span
   aria-label=" 999+"
   aria-labelledby=""
-  className=""
   onMouseDown={[Function]}
 >
   <div
@@ -44,7 +42,6 @@ exports[`Counter renders correctly with count above limit 2`] = `
 <span
   aria-label=" 1050"
   aria-labelledby=""
-  className=""
   onMouseDown={[Function]}
 >
   <div
@@ -64,7 +61,6 @@ exports[`Counter renders correctly with count below the limit 1`] = `
 <span
   aria-label=" 1"
   aria-labelledby=""
-  className=""
   onMouseDown={[Function]}
 >
   <div
@@ -84,7 +80,6 @@ exports[`Counter renders correctly with line kind 1`] = `
 <span
   aria-label=" 0"
   aria-labelledby=""
-  className=""
   onMouseDown={[Function]}
 >
   <div
@@ -104,7 +99,6 @@ exports[`Counter renders correctly with negative color 1`] = `
 <span
   aria-label=" 0"
   aria-labelledby=""
-  className=""
   onMouseDown={[Function]}
 >
   <div
@@ -124,7 +118,6 @@ exports[`Counter renders correctly with small size 1`] = `
 <span
   aria-label=" 0"
   aria-labelledby=""
-  className=""
   onMouseDown={[Function]}
 >
   <div
@@ -144,7 +137,6 @@ exports[`Counter renders correctly with the prefix 1`] = `
 <span
   aria-label=" 13"
   aria-labelledby=""
-  className=""
   onMouseDown={[Function]}
 >
   <div

diff --git a/src/components/Label/Label.jsx b/src/components/Label/Label.jsx
@@ -4,8 +4,19 @@ import cx from "classnames";
 import "./Label.scss";
 import { LABEL_COLORS, LABEL_TYPES } from "./LabelConstants";
 import Leg from "./Leg";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
-const Label = ({ wrapperClassName, kind, color, text = "", isAnimationDisabled, isLegIncluded }) => {
+const Label = ({
+  // Backward compatibility for enum naming
+  className,
+  wrapperClassName,
+  kind,
+  color,
+  text = "",
+  isAnimationDisabled,
+  isLegIncluded
+}) => {
+  const overrideClassName = backwardCompatibilityForProperties([className, wrapperClassName]);
   const classNames = useMemo(
     () =>
       cx("monday-style-label", `monday-style-label--kind-${kind}`, `monday-style-label--color-${color}`, {
@@ -15,7 +26,7 @@ const Label = ({ wrapperClassName, kind, color, text = "", isAnimationDisabled,
     [kind, color, isAnimationDisabled, isLegIncluded]
   );
   return (
-    <span className={wrapperClassName}>
+    <span className={overrideClassName}>
       <div className={classNames}>
         <span>{text}</span>
         <span className="monday-style-label__leg-wrapper">{isLegIncluded ? <Leg /> : null}</span>
@@ -25,15 +36,15 @@ const Label = ({ wrapperClassName, kind, color, text = "", isAnimationDisabled,
 };
 
 Label.propTypes = {
-  wrapperClassName: PropTypes.string,
+  className: PropTypes.string,
   text: PropTypes.string,
   color: PropTypes.oneOf([LABEL_COLORS.PRIMARY, LABEL_COLORS.DARK, LABEL_COLORS.POSITIVE, LABEL_COLORS.NEGATIVE]),
   kind: PropTypes.oneOf([LABEL_TYPES.FILL, LABEL_TYPES.LINE]),
   isAnimationDisabled: PropTypes.bool,
   isLegIncluded: PropTypes.bool
 };
 Label.defaultProps = {
-  wrapperClassName: "",
+  className: undefined,
   text: "",
   color: LABEL_COLORS.PRIMARY,
   kind: LABEL_TYPES.FILL,

diff --git a/src/components/Label/__stories__/label.stories.mdx b/src/components/Label/__stories__/label.stories.mdx
@@ -110,7 +110,7 @@ A label indicates the status of an item. It is not clickable.
         description:"Use only the UI colors above."
       },
       negative: {
-        component:[<Label wrapperClassName="monday-storybook-label_bad-lable monday-storybook-label_purple" kind={Label.kinds.LINE} text="Beta" />,<Label wrapperClassName="monday-storybook-label_bad-lable monday-storybook-label_pink" kind={Label.kinds.LINE}  text="Beta" />],
+        component:[<Label className="monday-storybook-label_bad-lable monday-storybook-label_purple" kind={Label.kinds.LINE} text="Beta" />,<Label className="monday-storybook-label_bad-lable monday-storybook-label_pink" kind={Label.kinds.LINE}  text="Beta" />],
         description:"Don’t use any content colors for labels. If the page is full of CTAs, use the outline state."
       }
     }