Merge branch 'master' into vibe3

packages/core/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.130.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.130.0) (2024-08-08)
+
+
+### Features
+
+* **Breadcrumbs:** be able to show only the icon ([#2336](https://github.com/mondaycom/vibe/issues/2336)) ([d68c9c3](https://github.com/mondaycom/vibe/commit/d68c9c34498ab423f8eb179bc5e2dc07c5588757))
+* **combobox:** Add render action to combobox ([#2297](https://github.com/mondaycom/vibe/issues/2297)) ([a6d4adb](https://github.com/mondaycom/vibe/commit/a6d4adb57c994e4fb0176a287ec3cac488a2d05b))
+* **MenuItem:** Add all label capabilities to menu item ([#2335](https://github.com/mondaycom/vibe/issues/2335)) ([d786e92](https://github.com/mondaycom/vibe/commit/d786e9250abfd464a1064218421cbbe15998514e))
+
+
+
+
+
+# [2.129.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.129.0) (2024-08-07)
+
+
+### Bug Fixes
+
+* **useSwitch:** type guard to fix breaking change we accidentally introduced in previous version ([#2330](https://github.com/mondaycom/vibe/issues/2330)) ([d07d907](https://github.com/mondaycom/vibe/commit/d07d907b2e46f8ec004a6823c4f0fd45a7deff1b))
+
+
+### Features
+
+* **Icon:** update numbers icon ([#2296](https://github.com/mondaycom/vibe/issues/2296)) ([847d2c8](https://github.com/mondaycom/vibe/commit/847d2c840ffcee68a00b157f0dd6d907328aebe2))
+* **primary-surface-color:** new color token ([#2300](https://github.com/mondaycom/vibe/issues/2300)) ([780fdf7](https://github.com/mondaycom/vibe/commit/780fdf7be027bfba3aa4a643969e024263e80ec6))
+* **Tipseen:** New paddings for tipseen ([#2251](https://github.com/mondaycom/vibe/issues/2251)) ([a4d40a0](https://github.com/mondaycom/vibe/commit/a4d40a0b68a95288c192b56f418990b3579ac9ef))
+
+
+
+
+
 # [2.128.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.128.0) (2024-08-01)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.128.0",
+  "version": "2.130.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -95,7 +95,7 @@
     "classnames": "^2.3.2",
     "framer-motion": "^6.5.1",
     "lodash-es": "^4.17.21",
-    "monday-ui-style": "0.10.0",
+    "monday-ui-style": "0.11.0",
     "prop-types": "^15.8.1",
     "react-dates": "21.8.0",
     "react-inlinesvg": "^3.0.1",

packages/core/src/components/AlertBanner/__tests__/AlertBanner.test.js → packages/core/src/components/AlertBanner/__tests__/AlertBanner.test.tsx

@@ -12,12 +12,11 @@ describe("<AlertBanner />", () => {
   });
 
   describe("on close", () => {
-    let onCloseStub;
-    let alertBannerComponent;
+    let onCloseStub: jest.Mock;
 
     beforeEach(() => {
       onCloseStub = jest.fn();
-      alertBannerComponent = render(
+      render(
         <AlertBanner onClose={onCloseStub}>
           <AlertBannerText text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua" />
           <AlertBannerButton onClick={NOOP}>Lorem Ipsum Salura</AlertBannerButton>
@@ -26,7 +25,12 @@ describe("<AlertBanner />", () => {
     });
 
     it("should be able to close alert banner when clicking on close button", () => {
-      const { container } = alertBannerComponent;
+      const { container } = render(
+        <AlertBanner onClose={onCloseStub}>
+          <AlertBannerText text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua" />
+          <AlertBannerButton onClick={NOOP}>Lorem Ipsum Salura</AlertBannerButton>
+        </AlertBanner>
+      );
       fireEvent.click(container.querySelector("[data-testid='alert-banner-close-button']"));
       expect(onCloseStub.mock.calls.length).toBe(1);
     });

packages/core/src/components/Box/__tests__/Box.snapshot.test.js → packages/core/src/components/Box/__tests__/Box.snapshot.test.tsx

@@ -98,8 +98,8 @@ describe("Box renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("with backgronudColor prop", () => {
-    const tree = renderer.create(<Box BackgronudColor={Box.backgroundColors.PRIMARY_BACKGROUND_COLOR} />).toJSON();
+  it("with backgroundColor prop", () => {
+    const tree = renderer.create(<Box backgroundColor={Box.backgroundColors.PRIMARY_BACKGROUND_COLOR} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 

packages/core/src/components/Box/__tests__/__snapshots__/Box.snapshot.test.js.snap → packages/core/src/components/Box/__tests__/__snapshots__/Box.snapshot.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Box renders correctly with backgronudColor prop 1`] = `
+exports[`Box renders correctly with backgroundColor prop 1`] = `
 <div
-  className="box"
+  className="box bgPrimaryBackgroundColor"
 />
 `;
 

packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.module.scss

@@ -11,6 +11,10 @@
   padding: 0 2px;
   overflow: hidden;
   text-decoration: none;
+
+  &.withoutText {
+    padding: 4px;
+  }
 }
 
 a.breadcrumbContent:hover {

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

@@ -13,14 +13,15 @@ export interface BreadcrumbContentProps extends VibeComponentProps {
   icon?: SubIcon;
   isCurrent?: boolean;
   disabled?: boolean;
+  showText?: boolean;
 }
 
 const iconProps = { className: styles.breadcrumbIcon, size: 14, clickable: false };
 
 export const BreadcrumbContent: React.ForwardRefExoticComponent<BreadcrumbContentProps & React.RefAttributes<unknown>> =
   forwardRef<unknown, BreadcrumbContentProps>(
     (
-      { className, isClickable, link, onClick, text, icon, isCurrent, disabled = false },
+      { className, isClickable, link, onClick, text, icon, isCurrent, disabled = false, showText = true },
       ref: ForwardedRef<HTMLSpanElement>
     ) => {
       const Icon = icon;
@@ -43,16 +44,19 @@ export const BreadcrumbContent: React.ForwardRefExoticComponent<BreadcrumbConten
               className={cx(styles.breadcrumbContent, className, {
                 [styles.disabled]: disabled,
                 [styles.clickable]: isClickable,
-                [styles.current]: isCurrent
+                [styles.current]: isCurrent,
+                [styles.withoutText]: !showText
               })}
               href={link}
               onKeyDown={onKeyDown}
               aria-current={isCurrent ? "page" : undefined}
             >
               {Icon && <Icon {...iconProps} />}
-              <span ref={ref} className={styles.breadcrumbText}>
-                {text}
-              </span>
+              {showText && (
+                <span ref={ref} className={styles.breadcrumbText}>
+                  {text}
+                </span>
+              )}
             </a>
           );
         }
@@ -61,7 +65,8 @@ export const BreadcrumbContent: React.ForwardRefExoticComponent<BreadcrumbConten
             className={cx(styles.breadcrumbContent, className, {
               [styles.disabled]: disabled,
               [styles.clickable]: isClickable,
-              [styles.current]: isCurrent
+              [styles.current]: isCurrent,
+              [styles.withoutText]: !showText
             })}
             onClick={onClick}
             onKeyDown={onKeyDown}
@@ -70,9 +75,11 @@ export const BreadcrumbContent: React.ForwardRefExoticComponent<BreadcrumbConten
             role="button"
           >
             {Icon && <Icon {...iconProps} />}
-            <span ref={ref} className={styles.breadcrumbText}>
-              {text}
-            </span>
+            {showText && (
+              <span ref={ref} className={styles.breadcrumbText}>
+                {text}
+              </span>
+            )}
           </span>
         );
       }
@@ -82,16 +89,19 @@ export const BreadcrumbContent: React.ForwardRefExoticComponent<BreadcrumbConten
             [styles.disabled]: disabled,
             [styles.clickable]: isClickable,
             [styles.current]: isCurrent,
-            [styles.notClickable]: !isClickable
+            [styles.notClickable]: !isClickable,
+            [styles.withoutText]: !showText
           })}
           aria-disabled="true"
           tabIndex={tabIndex}
           aria-current={isCurrent ? "page" : undefined}
         >
           {Icon && <Icon {...iconProps} />}
-          <span ref={ref} className={styles.breadcrumbText}>
-            {text}
-          </span>
+          {showText && (
+            <span ref={ref} className={styles.breadcrumbText}>
+              {text}
+            </span>
+          )}
         </span>
       );
     }

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

@@ -22,6 +22,7 @@ export interface BreadcrumbItemProps extends VibeComponentProps {
   isCurrent?: boolean;
   /** An Icon - If no icon needed then should be left empty. */
   icon?: SubIcon;
+  showText?: boolean;
 }
 
 const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
@@ -34,6 +35,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   isCurrent = false,
   icon,
   id,
+  showText = true,
   "data-testid": dataTestId
 }) => {
   const componentRef = useRef<HTMLSpanElement>(null);
@@ -43,9 +45,10 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
     <Tooltip
       disableDialogSlide={true}
       withoutDialog={false}
-      content={isOverflowing && text}
+      content={(isOverflowing || !showText) && text}
       showTrigger={["mouseenter"]}
       hideTrigger={["mouseleave"]}
+      addKeyboardHideShowTriggersByDefault={!showText}
     >
       <li
         id={id}
@@ -63,6 +66,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
           icon={icon}
           isCurrent={isCurrent}
           disabled={disabled}
+          showText={showText}
         />
       </li>
     </Tooltip>

packages/core/src/components/Combobox/Combobox.tsx

@@ -25,6 +25,8 @@ import {
 } from "./components/ComboboxConstants";
 import styles from "./Combobox.module.scss";
 import { ComboboxSizes } from "./Combobox.types";
+import IconButton from "../IconButton/IconButton";
+import MenuButton from "../MenuButton/MenuButton";
 
 export interface ComboboxProps extends VibeComponentProps {
   className?: string;
@@ -116,6 +118,14 @@ export interface ComboboxProps extends VibeComponentProps {
   searchInputAriaLabel?: string;
   debounceRate?: number;
   searchInputRef?: React.RefObject<HTMLInputElement>;
+  /**
+   * Render additional action within the right section of search component.
+   */
+  renderAction?: React.ReactElement<typeof IconButton | typeof MenuButton>;
+  /**
+   * If true, hides the additional action when the user types in the search input.
+   */
+  hideRenderActionOnInput?: boolean;
 }
 
 const Combobox: React.FC<ComboboxProps> & {
@@ -161,7 +171,9 @@ const Combobox: React.FC<ComboboxProps> & {
       searchInputAriaLabel = "Search for content",
       "data-testid": dataTestId,
       debounceRate,
-      searchInputRef
+      searchInputRef,
+      renderAction: RenderAction,
+      hideRenderActionOnInput
     }: ComboboxProps,
     ref
   ) => {
@@ -322,6 +334,8 @@ const Combobox: React.FC<ComboboxProps> & {
             ariaHasPopup="listbox"
             searchResultsContainerId={id ? `${id}-listbox` : COMBOBOX_LISTBOX_ID}
             debounceRate={debounceRate}
+            renderAction={RenderAction}
+            hideRenderActionOnInput={hideRenderActionOnInput}
           />
           {stickyCategories && <StickyCategoryHeader label={activeCategoryLabel} />}
           <ComboboxItems

packages/core/src/components/Combobox/__tests__/Combobox.snapshot.test.js → packages/core/src/components/Combobox/__tests__/Combobox.snapshot.test.tsx

@@ -116,7 +116,7 @@ describe("Combobox renders correctly", () => {
       { id: "1", label: "Option 1" },
       { id: "2", label: "Option 2" }
     ];
-    const optionRenderer = option => <div>some render of {option.label}</div>;
+    const optionRenderer = (option: any) => <div>some render of {option.label}</div>;
     const tree = renderer.create(<Combobox options={options} optionRenderer={optionRenderer} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

packages/core/src/components/Dialog/__tests__/Dialog.test.js → packages/core/src/components/Dialog/__tests__/Dialog.test.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render, screen } from "@testing-library/react";
-import Dialog from "../Dialog";
+import Dialog, { DialogProps } from "../Dialog";
 
-function renderVisibleDialogOnMount(dialogProps) {
+function renderVisibleDialogOnMount(dialogProps: DialogProps) {
   renderDialogOnMount({ ...dialogProps, shouldShowOnMount: true });
 }
 
-function renderDialogOnMount(dialogProps) {
+function renderDialogOnMount(dialogProps: DialogProps) {
   render(<Dialog {...dialogProps} />);
 }
 

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

@@ -84,10 +84,6 @@ We support two kinds of ellipsis: single-line ellipsis with a tooltip displayed
 
 <Canvas of={HeadingStories.BuiltInPageHeaderNotEditable} />
 
-### Empty state heading
-
-<Canvas of={HeadingStories.EmptyStateHeading} />
-
 ## Related components
 
 <RelatedComponents componentsNames={[EDITABLE_HEADING, TEXT, HIDDEN_TEXT]} />

packages/core/src/components/Heading/__stories__/Heading.stories.module.scss

@@ -17,19 +17,6 @@
   background-color: var(--sb-inverted-color-background);
 }
 
-.emptyStateContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: var(--sb-spacing-large);
-}
-
-.emptyStateHeading {
-  margin-block: var(--sb-spacing-large);
-}
-
 .pageHeaderCommands {
   margin-top: var(--sb-spacing-large);
   & > * {

packages/core/src/components/Heading/__stories__/Heading.stories.tsx

@@ -6,12 +6,10 @@ import Heading from "../Heading";
 import { ONE_LINE_ELLIPSIS_TEST_ID, OVERFLOW_TITLE_CONTAINER_ID } from "../__tests__/headingTestsConstants";
 import { headingOverflowSuite } from "../__tests__/Heading.interactions";
 import Divider from "../../Divider/Divider";
-import Text from "../../Text/Text";
 import Search from "../../Search/Search";
 import Checkbox from "../../Checkbox/Checkbox";
 import Button from "../../Button/Button";
 import { Custom } from "../../Icon/Icons";
-import emptyStateExample from "../../../storybook/stories-common-assets/emptyStateExample.svg";
 import styles from "./Heading.stories.module.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
@@ -160,33 +158,3 @@ export const BuiltInPageHeaderNotEditable = {
 
   name: "Built-in page header (not editable)"
 };
-
-export const EmptyStateHeading = {
-  render: () => (
-    <div className={styles.emptyStateContainer} aria-labelledby="empty-state-id">
-      <img
-        style={{
-          width: "290px"
-        }}
-        src={emptyStateExample}
-        alt=""
-      />
-      <Heading type="h2" id="empty-state-id" className={styles.emptyStateHeading}>
-        No updates yet for this item
-      </Heading>
-      <Text
-        element="span"
-        type="text1"
-        style={{
-          width: "50%",
-          textAlign: "center"
-        }}
-        ellipsis={false}
-      >
-        Be the first one to update about progress, mention someone or upload files to share with your team members
-      </Text>
-    </div>
-  ),
-
-  name: "Empty state heading"
-};

packages/core/src/components/Heading/__tests__/Heading.snapshot.test.js → packages/core/src/components/Heading/__tests__/Heading.snapshot.test.tsx

@@ -4,7 +4,7 @@ import Heading from "../Heading";
 
 describe("Text renders correctly", () => {
   it("with empty props", () => {
-    const tree = renderer.create(<Heading />).toJSON();
+    const tree = renderer.create(<Heading>text</Heading>).toJSON();
     expect(tree).toMatchSnapshot();
   });