feat: Add inverted variant to Tipseen and Steps (#1995)

Co-authored-by: Tal Koren <talko@monday.com>
mondaycom · Mar 13, 2024 · 6e4bbb4 · 6e4bbb4
1 parent 6c6e156
commit 6e4bbb4
Show file tree

Hide file tree

Showing 27 changed files with 423 additions and 123 deletions.
diff --git a/packages/core/src/components/Button/Button.module.scss b/packages/core/src/components/Button/Button.module.scss
@@ -222,6 +222,23 @@ $disabled-on-primary-color-opacity: 0.5;
   color: var(--fixed-light-color);
 }
 
+.kindPrimary.colorOnInvertedBackground {
+  background: var(--primary-background-color);
+  color: var(--primary-text-color);
+}
+
+.kindPrimary.colorOnInvertedBackgroundActive,
+.kindPrimary.colorOnInvertedBackground:hover,
+.kindPrimary.colorOnInvertedBackground:focus {
+  background: var(--ui-background-color);
+}
+
+.kindPrimary.button.colorOnInvertedBackground.disabled {
+  background: var(--ui-background-color);
+  color: var(--primary-text-color);
+  opacity: $disabled-on-primary-color-opacity;
+}
+
 .kindPrimary.button.disabled {
   background: var(--disabled-background-color);
   color: var(--disabled-text-color);
@@ -341,6 +358,23 @@ $disabled-on-primary-color-opacity: 0.5;
   @include focus-style-on-primary();
 }
 
+.kindSecondary.colorOnInvertedBackground {
+  border-color: var(--text-color-on-inverted);
+  color: var(--text-color-on-inverted);
+}
+
+.kindSecondary.colorOnInvertedBackgroundActive,
+.kindSecondary.colorOnInvertedBackground:hover,
+.kindSecondary.colorOnInvertedBackground:focus {
+  background: var(--icon-color);
+}
+
+.kindSecondary.colorOnInvertedBackground.disabled {
+  border-color: var(--text-color-on-inverted);
+  color: var(--text-color-on-inverted);
+  opacity: $disabled-on-primary-color-opacity;
+}
+
 .kindSecondary.colorFixedLight.disabled {
   opacity: $disabled-on-primary-color-opacity;
   color: var(--fixed-light-color);
@@ -459,7 +493,13 @@ $disabled-on-primary-color-opacity: 0.5;
 .kindTertiary.colorOnInvertedBackgroundActive,
 .kindTertiary.colorOnInvertedBackground:hover,
 .kindTertiary.colorOnInvertedBackground:focus {
-  backdrop-filter: brightness(85%);
+  background: var(--icon-color);
+}
+
+.kindTertiary.colorOnInvertedBackground.disabled {
+  background: var(--icon-color);
+  opacity: $disabled-on-primary-color-opacity;
+  color: var(--text-color-on-inverted);
 }
 
 .kindTertiary.disabled {

diff --git a/packages/core/src/components/Steps/Steps.tsx b/packages/core/src/components/Steps/Steps.tsx
@@ -3,11 +3,12 @@ import cx from "classnames";
 import { NOOP } from "../../utils/function-utils";
 import useMergeRef from "../../hooks/useMergeRef";
 import { StepsHeader } from "./StepsHeader";
-import { StepsType } from "./StepsConstants";
+import { StepsColor, StepsType } from "./StepsConstants";
 import { ButtonProps } from "../Button/Button";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { withStaticProps, VibeComponent, VibeComponentProps } from "../../types";
 import styles from "./Steps.module.scss";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
 export interface StepsProps extends VibeComponentProps {
   /**
@@ -21,7 +22,11 @@ export interface StepsProps extends VibeComponentProps {
   areNavigationButtonsHidden?: boolean;
   steps?: ReactElement[];
   type?: StepsType;
+  /**
+   * @deprecated - Use color instead
+   */
   isOnPrimary?: boolean;
+  color?: StepsColor;
   isContentOnTop?: boolean;
   areButtonsIconsHidden?: boolean;
   backButtonProps?: ButtonProps;
@@ -41,7 +46,9 @@ const Steps: VibeComponent<StepsProps> & { types?: typeof StepsType } = forwardR
       type = StepsType.GALLERY,
       onChangeActiveStep = NOOP,
       onFinish,
+      // TODO Remove in next major as breaking change
       isOnPrimary = false,
+      color,
       areNavigationButtonsHidden = false,
       isContentOnTop = false,
       backButtonProps = {},
@@ -53,6 +60,10 @@ const Steps: VibeComponent<StepsProps> & { types?: typeof StepsType } = forwardR
   ) => {
     const componentRef = useRef(null);
     const mergedRef = useMergeRef(ref, componentRef);
+    const overrideColor = backwardCompatibilityForProperties([
+      color,
+      isOnPrimary ? StepsColor.ON_PRIMARY_COLOR : undefined
+    ]);
     return (
       <div
         ref={mergedRef}
@@ -67,7 +78,7 @@ const Steps: VibeComponent<StepsProps> & { types?: typeof StepsType } = forwardR
           activeStepIndex={activeStepIndex}
           stepsCount={steps.length}
           areNavigationButtonsHidden={areNavigationButtonsHidden}
-          isOnPrimary={isOnPrimary}
+          color={overrideColor}
           backButtonProps={backButtonProps}
           nextButtonProps={nextButtonProps}
           finishButtonProps={finishButtonProps}

diff --git a/packages/core/src/components/Steps/StepsCommand.module.scss b/packages/core/src/components/Steps/StepsCommand.module.scss
@@ -15,7 +15,11 @@
   &.disabled {
     color: var(--disabled-text-color);
   }
-  &.onPrimary {
+  &.colorOnPrimaryColor {
     color: var(--text-color-on-primary);
   }
+  &.colorOnInvertedBackground {
+    color: var(--text-color-on-inverted);
+  }
 }
+
diff --git a/packages/core/src/components/Steps/StepsCommand.tsx b/packages/core/src/components/Steps/StepsCommand.tsx
@@ -5,10 +5,12 @@ import NavigationChevronLeft from "../../components/Icon/Icons/components/Naviga
 import Icon from "../../components/Icon/Icon";
 import Button, { ButtonProps } from "../../components/Button/Button";
 import { NOOP } from "../../utils/function-utils";
-import { BACK_TEXT, NEXT_TEXT } from "./StepsConstants";
+import { BACK_TEXT, NEXT_TEXT, StepsColor } from "./StepsConstants";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import styles from "./StepsCommand.module.scss";
+import { camelCase } from "lodash-es";
+import { getStyle } from "../..//helpers/typesciptCssModulesHelper";
 
 export interface StepsCommandProps extends VibeComponentProps {
   isNext?: boolean;
@@ -17,7 +19,7 @@ export interface StepsCommandProps extends VibeComponentProps {
   stepsCount: number;
   isIconHidden?: boolean;
   buttonProps?: ButtonProps;
-  isOnPrimary?: boolean;
+  color?: StepsColor;
 }
 
 export const StepsCommand: FC<StepsCommandProps> = ({
@@ -26,15 +28,14 @@ export const StepsCommand: FC<StepsCommandProps> = ({
   activeStepIndex,
   stepsCount,
   isIconHidden = false,
-  isOnPrimary = false,
-  buttonProps = {}
+  buttonProps = {},
+  color = StepsColor.PRIMARY
 }) => {
   const { children: buttonChildren, ...otherButtonProps } = buttonProps;
   const description = useMemo(() => {
     if (buttonChildren) return buttonChildren;
     return isNext ? NEXT_TEXT : BACK_TEXT;
   }, [isNext, buttonChildren]);
-  const buttonBaseColor = isOnPrimary ? Button.colors.ON_PRIMARY_COLOR : undefined;
   const newStepIndex = isNext ? activeStepIndex + 1 : activeStepIndex - 1;
   const onClick = useCallback(
     (e: React.MouseEvent) => onChangeActiveStep(e, newStepIndex),
@@ -52,17 +53,17 @@ export const StepsCommand: FC<StepsCommandProps> = ({
       kind={Button.kinds.TERTIARY}
       onClick={onClick}
       disabled={isDisabled}
-      color={buttonBaseColor}
+      // @ts-ignore
+      color={color}
       {...otherButtonProps}
     >
       {description}
       {isIconHidden ? null : (
         <Icon
           icon={icon}
           clickable={false}
-          className={cx(styles.icon, {
-            [styles.disabled]: isDisabled,
-            [styles.onPrimary]: isOnPrimary
+          className={cx(styles.icon, getStyle(styles, camelCase("color-" + color)), {
+            [styles.disabled]: isDisabled
           })}
         />
       )}

diff --git a/packages/core/src/components/Steps/StepsConstants.ts b/packages/core/src/components/Steps/StepsConstants.ts
@@ -14,3 +14,9 @@ export enum StepsDotAriaCurrent {
   DATE = "date",
   TIME = "time"
 }
+
+export enum StepsColor {
+  PRIMARY = "primary",
+  ON_PRIMARY_COLOR = "on-primary-color",
+  ON_INVERTED_BACKGROUND = "on-inverted-background"
+}
diff --git a/packages/core/src/components/Steps/StepsDot.module.scss b/packages/core/src/components/Steps/StepsDot.module.scss
@@ -28,11 +28,19 @@
   @include active-step-dot;
 }
 
-.onPrimary.dot {
+.colorOnPrimaryColor.dot {
   background: var(--primary-hover-color);
   @include focus-style-on-primary;
 }
 
-.onPrimary.isActive {
+.colorOnPrimaryColor.dot.isActive {
   background: var(--text-color-on-primary);
 }
+
+.colorOnInvertedBackground.dot {
+  background: var(--placeholder-color);
+}
+
+.colorOnInvertedBackground.dot.isActive {
+  background: var(--text-color-on-inverted);
+}
diff --git a/packages/core/src/components/Steps/StepsDot.tsx b/packages/core/src/components/Steps/StepsDot.tsx
@@ -1,24 +1,25 @@
 import cx from "classnames";
-import { noop as NOOP } from "lodash-es";
-import { StepsDotAriaCurrent } from "./StepsConstants";
+import { noop as NOOP, camelCase } from "lodash-es";
+import { StepsColor, StepsDotAriaCurrent } from "./StepsConstants";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import React, { FC } from "react";
 import styles from "./StepsDot.module.scss";
+import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 
 export interface StepsDotProps extends VibeComponentProps {
   onClick?: (e: React.MouseEvent) => void;
   ariaCurrent?: StepsDotAriaCurrent | boolean;
   isActive?: boolean;
   ariaLabel?: string;
-  isOnPrimary?: boolean;
+  color?: StepsColor;
 }
 
 export const StepsDot: FC<StepsDotProps> = ({
   isActive,
   onClick = NOOP,
   ariaCurrent = StepsDotAriaCurrent.STEP,
   ariaLabel,
-  isOnPrimary,
+  color,
   className
 }) => {
   return (
@@ -28,9 +29,9 @@ export const StepsDot: FC<StepsDotProps> = ({
       aria-current={isActive ? ariaCurrent : false}
       className={cx(
         styles.dot,
+        getStyle(styles, camelCase("color-" + color)),
         {
-          [styles.isActive]: isActive,
-          [styles.onPrimary]: isOnPrimary
+          [styles.isActive]: isActive
         },
         className
       )}

diff --git a/packages/core/src/components/Steps/StepsGalleryHeader.tsx b/packages/core/src/components/Steps/StepsGalleryHeader.tsx
@@ -3,21 +3,22 @@ import { range } from "lodash-es";
 import { StepsDot } from "./StepsDot";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import styles from "./StepsGalleryHeader.module.scss";
+import { StepsColor } from "./StepsConstants";
 
 export interface StepsGalleryHeaderProps extends VibeComponentProps {
   activeStepIndex: number;
   stepsCount: number;
   onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;
   stepDescriptionFunc: (stepIndex: number) => string;
-  isOnPrimary?: boolean;
+  color?: StepsColor;
 }
 
 export const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({
   activeStepIndex,
   stepsCount,
   onChangeActiveStep,
   stepDescriptionFunc,
-  isOnPrimary
+  color
 }) => {
   const stepsPlaceholders = useMemo(() => range(stepsCount), [stepsCount]);
   const defaultStepDescriptionFunc = useCallback((stepIndex: number) => `Step number ${stepIndex}`, []);
@@ -36,13 +37,13 @@ export const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({
             key={`monday-style-step-dot-${stepIndex + 1}`}
             ariaLabel={overrideStepDescriptionFunc(stepIndex)}
             onClick={onClickFunctions[stepIndex]}
-            isOnPrimary={isOnPrimary}
+            color={color}
             className={styles.galleryHeaderDot}
           />
         ),
         []
       ),
-    [activeStepIndex, isOnPrimary, onClickFunctions, overrideStepDescriptionFunc, stepsPlaceholders]
+    [activeStepIndex, color, onClickFunctions, overrideStepDescriptionFunc, stepsPlaceholders]
   );
 
   return (

diff --git a/packages/core/src/components/Steps/StepsHeader.tsx b/packages/core/src/components/Steps/StepsHeader.tsx
@@ -3,7 +3,7 @@ import cx from "classnames";
 import { StepsCommand } from "./StepsCommand";
 import { StepsGalleryHeader, StepsGalleryHeaderProps } from "./StepsGalleryHeader";
 import { StepsNumbersHeader, StepsNumbersHeaderProps } from "./StepsNumbersHeader";
-import { StepsType, FINISH_TEXT } from "./StepsConstants";
+import { StepsType, FINISH_TEXT, StepsColor } from "./StepsConstants";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import Button, { ButtonProps } from "../Button/Button";
 import styles from "./StepsHeader.module.scss";
@@ -18,7 +18,7 @@ export interface StepsHeaderProps extends VibeComponentProps {
   nextButtonProps: ButtonProps;
   finishButtonProps: ButtonProps;
   areButtonsIconsHidden: boolean;
-  isOnPrimary: boolean;
+  color?: StepsColor;
   onFinish?: (e: React.MouseEvent) => void;
 }
 
@@ -32,7 +32,7 @@ export const StepsHeader: FC<StepsHeaderProps> = ({
   nextButtonProps,
   finishButtonProps,
   areButtonsIconsHidden,
-  isOnPrimary,
+  color = StepsColor.PRIMARY,
   onFinish,
   className
 }) => {
@@ -57,23 +57,20 @@ export const StepsHeader: FC<StepsHeaderProps> = ({
           activeStepIndex={activeStepIndex}
           stepsCount={stepsCount}
           buttonProps={backButtonProps}
-          isOnPrimary={isOnPrimary}
+          color={color}
         />
       )}
       <SubHeaderComponent
         activeStepIndex={activeStepIndex}
         stepsCount={stepsCount}
         onChangeActiveStep={onChangeActiveStep}
-        isOnPrimary={isOnPrimary}
+        color={color}
       />
       {areNavigationButtonsHidden ? null : (
         <>
           {showFinishButton ? (
-            <Button
-              onClick={onFinish}
-              color={isOnPrimary ? Button.colors.ON_PRIMARY_COLOR : undefined}
-              {...finishButtonProps}
-            >
+            // @ts-ignore
+            <Button onClick={onFinish} color={color} {...finishButtonProps}>
               {finishButtonProps?.children || FINISH_TEXT}
             </Button>
           ) : (
@@ -84,7 +81,7 @@ export const StepsHeader: FC<StepsHeaderProps> = ({
               onChangeActiveStep={onChangeActiveStep}
               stepsCount={stepsCount}
               buttonProps={nextButtonProps}
-              isOnPrimary={isOnPrimary}
+              color={color}
             />
           )}
         </>