Merge branch 'vibe3' into vibe3-button-deprecated-sizes

packages/core/docs/vibe-3-changelog.md

@@ -6,6 +6,10 @@
 - `SearchComponent` and `Input` components removed - use [`Search`](https://style.monday.com/?path=/docs/inputs-search--docs) and [`TextField`](https://style.monday.com/?path=/docs/inputs-textfield--docs) respectively.
 - `EditableInput` removed, use [`TextField`](https://style.monday.com/?path=/docs/inputs-editabletext--docs) instead
 
+## Colors
+
+- Removed `--shareable-color` and `--private-color`
+
 ## Typography
 
 - `Text` and `Heading` component API and style changed - use the [typography migration guide](https://style.monday.com/?path=/docs/typography-migration-guide--docs) to migrate.
@@ -46,6 +50,7 @@ codemod: `avatar-component-migration`
 
 - `dataTestId` -> `data-testid` [codemod]
 - `clickable`, `isClickable` removed, use `onClick` instead to get clickable behavior and style
+- `color` - remove dark_indigo and blackish colors
 
 ### Clickable
 
@@ -154,6 +159,14 @@ codemod: `avatar-component-migration`
 
 - `isOnPrimary` removed, use `color={StepsColor.PRIMARY}` instead [codemod]
 
+### Tabs
+
+- Reset spacings (removed default browser's margin/padding for ul,li elements)
+
+### TabList
+
+- `noPadding` is removed as it's the default, component no longer gets a default padding bottom
+
 ## TextField
 
 - `dataTestId` -> `data-testid` [codemod]
@@ -165,11 +178,13 @@ codemod: `avatar-component-migration`
 
 ### Tipseen
 
+- Default `color` changed from 'primary' to 'inverted'
 - `isCloseButtonHidden` -> `hideCloseButton` [codemod]
 - `showDelay` changed default to 100
 - `justify` removed [codemod]
 - `justifyTypes` removed [codemod]
 - `submitButtonProps`, `dismissButtonProps` props removed, use separate props to customize the button
+- `content` prop is now mandatory
 
 ### TipseenContent
 
@@ -184,14 +199,20 @@ codemod: `avatar-component-migration`
 ### Tooltip
 
 - `paddingSize` removed [codemod]
-- `themes` Remove all themes besides for dark & primary, and changed theme to accept string instead of static prop. theme="primary" instead of theme={Tooltip.themes.Primary} [codemod]
+- `themes` - remove all themes besides for "dark" & "primary" [codemod]
 - `showOnDialogEnter` changed default to be true
 - `hideDelay` changed default to be 100
-- `position` changed to accept string instead of static prop [codemod]
 - `position` changed to only accept "top, right, bottom, left" [codemod]
 - `justify` removed [codemod]
 - `arrowPosition` removed [codemod]
-- `TooltipArrowPosition` removed [codemod]
+
+### ColorPicker
+
+- `ColorPicker.COLOR_STYLES` removed [codemod]
+
+### ColorPickerContent
+
+- `ColorPickerContent.COLOR_STYLES` removed [codemod]
 
 ## Hooks
 

packages/core/src/components/AlertBanner/AlertBanner.tsx

@@ -1,7 +1,6 @@
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import cx from "classnames";
 import React, { ForwardedRef, forwardRef, ReactElement, useMemo } from "react";
-import Button from "../../components/Button/Button";
 import IconButton from "../../components/IconButton/IconButton";
 import CloseSmall from "../../components/Icon/Icons/components/CloseSmall";
 import { AlertBannerBackgroundColor as AlertBannerBackgroundColorEnum } from "./AlertBannerConstants";
@@ -133,9 +132,9 @@ const AlertBanner: VibeComponent<AlertBannerProps> & {
               className={cx(styles.closeBtn)}
               hideTooltip
               onClick={onClose}
-              size={Button.sizes.SMALL}
-              kind={IconButton.kinds.TERTIARY}
-              color={isDarkBackground ? Button.colors.ON_INVERTED_BACKGROUND : Button.colors.ON_PRIMARY_COLOR}
+              size="small"
+              kind="tertiary"
+              color={isDarkBackground ? "on-inverted-background" : "on-primary-color"}
               ariaLabel={closeButtonAriaLabel}
             />
           )}

packages/core/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.tsx

@@ -28,12 +28,7 @@ const AlertBannerButton: FC<AlertBannerButtonProps> = ({
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.ALERT_BANNER_BUTTON, id)}
       id={id}
     >
-      <Button
-        {...overrideButtonProps}
-        size={Button.sizes.SMALL}
-        className={cx(styles.bannerButton)}
-        color={Button.colors.ON_PRIMARY_COLOR}
-      />
+      <Button {...overrideButtonProps} size="small" className={cx(styles.bannerButton)} color="on-primary-color" />
     </div>
   );
 };

packages/core/src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx

@@ -4,11 +4,8 @@ import React, { FC, useRef } from "react";
 import Tooltip from "../../Tooltip/Tooltip";
 import useIsOverflowing from "../../../hooks/useIsOverflowing/useIsOverflowing";
 import VibeComponentProps from "../../../types/VibeComponentProps";
-import { HideShowEvent } from "../../../constants";
-import styles from "./AlertBannerText.module.scss";
 
-const TOOLTIP_SHOW_TRIGGERS: Array<HideShowEvent> = [HideShowEvent.MOUSE_ENTER];
-const TOOLTIP_HIDE_TRIGGERS: Array<HideShowEvent> = [HideShowEvent.MOUSE_LEAVE];
+import styles from "./AlertBannerText.module.scss";
 
 export interface AlertBannerTextProps extends VibeComponentProps {
   text: string;
@@ -26,8 +23,8 @@ const AlertBannerText: FC<AlertBannerTextProps> = ({ text, marginLeft = false, i
     <Tooltip
       position="bottom"
       content={isOverflowing && text}
-      showTrigger={TOOLTIP_SHOW_TRIGGERS}
-      hideTrigger={TOOLTIP_HIDE_TRIGGERS}
+      showTrigger={["mouseenter"]}
+      hideTrigger={["mouseleave"]}
     >
       <div
         ref={componentRef}

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

@@ -103,8 +103,8 @@ const AttentionBox: React.FC<AttentionBoxProps> & {
       </Flex>
       {onClose && (
         <IconButton
-          size={IconButton?.sizes?.SMALL}
-          color={IconButton.colors.ON_PRIMARY_COLOR}
+          size="small"
+          color="on-primary-color"
           className={styles.closeIcon}
           wrapperClassName={cx(styles.closeIconWrapper, {
             [styles.closeIconCompact]: compact

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

@@ -163,11 +163,7 @@ const Avatar: React.FC<AvatarProps> & {
           className: styles.clickableWrapper
         }}
       >
-        <Tooltip
-          showTrigger={[Tooltip.hideShowTriggers.FOCUS, Tooltip.hideShowTriggers.MOUSE_ENTER]}
-          hideTrigger={[Tooltip.hideShowTriggers.BLUR, Tooltip.hideShowTriggers.MOUSE_LEAVE]}
-          {...overrideTooltipProps}
-        >
+        <Tooltip showTrigger={["focus", "mouseenter"]} hideTrigger={["blur", "mouseleave"]} {...overrideTooltipProps}>
           <div
             className={cx(
               styles.circle,

packages/core/src/components/AvatarGroup/AvatarGroupCounterTooltipContainer.tsx

@@ -25,9 +25,6 @@ export interface AvatarGroupCounterTooltipContainerProps extends VibeComponentPr
   counterContainerRef?: RefObject<HTMLDivElement>;
 }
 
-const SHOW_TRIGGER = [Tooltip.hideShowTriggers.MOUSE_ENTER];
-const HIDE_TRIGGER = [Tooltip.hideShowTriggers.MOUSE_LEAVE];
-
 const AvatarGroupCounterTooltipContainer: React.FC<AvatarGroupCounterTooltipContainerProps> = ({
   focusPrevPlaceholderRef,
   focusNextPlaceholderRef,
@@ -76,8 +73,8 @@ const AvatarGroupCounterTooltipContainer: React.FC<AvatarGroupCounterTooltipCont
     <Tooltip
       open={isKeyboardTooltipVisible}
       hideDelay={AVATAR_GROUP_COUNTER_TOOLTIP_SHOW_DELAY}
-      showTrigger={SHOW_TRIGGER}
-      hideTrigger={HIDE_TRIGGER}
+      showTrigger={["mouseenter"]}
+      hideTrigger={["mouseleave"]}
       onTooltipHide={onHide}
       {...(counterTooltipCustomProps || {})}
       content={tooltipContent}

packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.js

@@ -197,7 +197,7 @@ export const MaxAvatarsToDisplay = {
     return (
       <Flex direction="column" gap="medium" align="start" className={styles.sliderCountContainer}>
         <Slider
-          size={Slider.sizes.SMALL}
+          size="small"
           min={1}
           max={14}
           defaultValue={max}

packages/core/src/components/Badge/BadgeConstants.ts

@@ -1,4 +1,4 @@
-import { DialogPosition } from "../../constants";
+import { DialogPosition } from "../Dialog/DialogConstants";
 
 /**
  * @deprecated

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

@@ -4,13 +4,9 @@ import React, { useRef } from "react";
 import useIsOverflowing from "../../../hooks/useIsOverflowing/useIsOverflowing";
 import Tooltip from "../../../components/Tooltip/Tooltip";
 import { BreadcrumbContent } from "./BreadcrumbContent/BreadcrumbContent";
-import { HideShowEvent } from "../../../constants";
 import { SubIcon, VibeComponentProps } from "../../../types";
 import styles from "./BreadcrumbItem.module.scss";
 
-const MOUSEENTER = [HideShowEvent.MOUSE_ENTER];
-const MOUSELEAVE = [HideShowEvent.MOUSE_LEAVE];
-
 export interface BreadcrumbItemProps extends VibeComponentProps {
   /** The display text. */
   text?: string;
@@ -48,8 +44,8 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
       disableDialogSlide={true}
       withoutDialog={false}
       content={isOverflowing && text}
-      showTrigger={MOUSEENTER}
-      hideTrigger={MOUSELEAVE}
+      showTrigger={["mouseenter"]}
+      hideTrigger={["mouseleave"]}
     >
       <li
         id={id}

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

@@ -7,7 +7,13 @@ import useMergeRef from "../../hooks/useMergeRef";
 import { NOOP } from "../../utils/function-utils";
 import Icon from "../../components/Icon/Icon";
 import Loader from "../../components/Loader/Loader";
-import { BUTTON_ICON_SIZE, ButtonColor, ButtonInputType, ButtonType, Size } from "./ButtonConstants";
+import {
+  BUTTON_ICON_SIZE,
+  ButtonColor as ButtonColorEnum,
+  ButtonInputType as ButtonInputTypeEnum,
+  ButtonType as ButtonTypeEnum
+} from "./ButtonConstants";
+import { ButtonColor, ButtonInputType, ButtonType, ButtonSize } from "./Button.types";
 import { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from "./helper/dom-helpers";
 import { getTestId } from "../../tests/test-ids-utils";
 import { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from "../../types";
@@ -31,7 +37,7 @@ export interface ButtonProps extends VibeComponentProps {
   /** Name of the button - for form submit usages  */
   name?: string;
   /** The button's size */
-  size?: Size;
+  size?: ButtonSize;
   /** The button's color */
   color?: ButtonColor;
   /** The button's type */
@@ -95,10 +101,10 @@ export interface ButtonProps extends VibeComponentProps {
 
 const Button: VibeComponent<ButtonProps, unknown> & {
   sizes?: typeof SIZES;
-  colors?: typeof ButtonColor;
-  kinds?: typeof ButtonType;
-  types?: typeof ButtonInputType;
-  inputTags?: typeof ButtonInputType;
+  colors?: typeof ButtonColorEnum;
+  kinds?: typeof ButtonTypeEnum;
+  types?: typeof ButtonInputTypeEnum;
+  inputTags?: typeof ButtonInputTypeEnum;
 } = forwardRef<unknown, ButtonProps>(
   (
     {
@@ -152,8 +158,8 @@ const Button: VibeComponent<ButtonProps, unknown> & {
     const { loading } = useButtonLoading({ isLoading });
 
     useEffect(() => {
-      if (color !== ButtonColor.ON_PRIMARY_COLOR && color !== ButtonColor.FIXED_LIGHT) return;
-      if (kind !== ButtonType.PRIMARY) return;
+      if (color !== "on-primary-color" && color !== "fixed-light") return;
+      if (kind !== "primary") return;
       if (!buttonRef.current) return;
 
       const buttonElement = buttonRef.current;
@@ -199,7 +205,7 @@ const Button: VibeComponent<ButtonProps, unknown> & {
     );
 
     const classNames = useMemo(() => {
-      const calculatedColor = success ? ButtonColor.POSITIVE : color;
+      const calculatedColor = success ? "positive" : color;
       return cx(
         className,
         styles.button,
@@ -388,10 +394,10 @@ Button.defaultProps = {
   name: undefined,
   style: undefined,
   id: undefined,
-  kind: ButtonType.PRIMARY,
+  kind: "primary",
   onClick: NOOP,
-  size: SIZES.MEDIUM,
-  color: ButtonColor.PRIMARY,
+  size: "medium",
+  color: "primary",
   disabled: false,
   rightIcon: null,
   leftIcon: null,
@@ -403,7 +409,7 @@ Button.defaultProps = {
   active: false,
   marginRight: false,
   marginLeft: false,
-  type: ButtonInputType.BUTTON,
+  type: "button",
   onMouseDown: NOOP,
   rightFlat: false,
   leftFlat: false,
@@ -423,8 +429,8 @@ Button.defaultProps = {
 
 export default withStaticProps(Button, {
   sizes: SIZES,
-  colors: ButtonColor,
-  kinds: ButtonType,
-  types: ButtonInputType,
-  inputTags: ButtonInputType
+  colors: ButtonColorEnum,
+  kinds: ButtonTypeEnum,
+  types: ButtonInputTypeEnum,
+  inputTags: ButtonInputTypeEnum
 });

packages/core/src/components/Button/Button.types.ts

@@ -0,0 +1,15 @@
+export type ButtonType = "primary" | "secondary" | "tertiary";
+
+export type ButtonInputType = "button" | "submit" | "reset";
+
+export type ButtonColor =
+  | "primary"
+  | "positive"
+  | "negative"
+  | "inverted"
+  | "on-primary-color"
+  | "on-inverted-background"
+  | "brand"
+  | "fixed-light";
+
+export type ButtonSize = "xxs" | "xs" | "small" | "medium" | "large";

packages/core/src/components/Button/ButtonConstants.ts

@@ -1,11 +1,17 @@
 import { SIZES } from "../../constants/sizes";
 
+/**
+ * @deprecated
+ */
 export enum ButtonType {
   PRIMARY = "primary",
   SECONDARY = "secondary",
   TERTIARY = "tertiary"
 }
 
+/**
+ * @deprecated
+ */
 export enum ButtonColor {
   PRIMARY = "primary",
   POSITIVE = "positive",
@@ -32,6 +38,9 @@ export const BUTTON_KIND_CLASS_NAMES = {
 
 export const BUTTON_ICON_SIZE = 20;
 
+/**
+ * @deprecated
+ */
 export enum ButtonInputType {
   BUTTON = "button",
   SUBMIT = "submit",

packages/core/src/components/Button/__stories__/Button.mdx

@@ -103,21 +103,21 @@ Set disable button for something that isn’t usable. Use a tooltip on hover in
     },
     {
       positive: {
-        component: [<Button kind={Button.kinds.TERTIARY}>Cancel</Button>, <Button>Get started</Button>],
+        component: [<Button kind="tertiary">Cancel</Button>, <Button>Get started</Button>],
         description: "Use primary button as the main action , put the tertiary as the second option."
       },
       negative: {
-        component: [<Button>Get started</Button>, <Button kind={Button.kinds.SECONDARY}>Cancel</Button>],
+        component: [<Button>Get started</Button>, <Button kind="secondary">Cancel</Button>],
         description: "Use primary button next to secondary."
       }
     },
     {
       positive: {
-        component: [<Button kind={Button.kinds.TERTIARY}>Cancel</Button>, <Button>Get started</Button>],
+        component: [<Button kind="tertiary">Cancel</Button>, <Button>Get started</Button>],
         description: "Use active verbs or phrases that clearly indicate action."
       },
       negative: {
-        component: [<Button kind={Button.kinds.TERTIARY}>Yes</Button>, <Button>No</Button>],
+        component: [<Button kind="tertiary">Yes</Button>, <Button>No</Button>],
         description: "Use vague and generic labels that make the user read the dialog before taking action."
       }
     }