Merge branch 'master' into playwright-drivers

.github/workflows/chromatic.yml

@@ -1,6 +1,11 @@
 name: Chromatic
 
-on: push
+on:
+  pull_request:
+    types: [opened, synchronize]
+  push:
+    branches:
+      - master
 
 jobs:
   build:

packages/core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.139.4](https://github.com/mondaycom/vibe/compare/[email protected]@2.139.4) (2024-10-21)
+
+
+### Bug Fixes
+
+* **Combobox:** restricted onclick on the disabled ([#2491](https://github.com/mondaycom/vibe/issues/2491)) ([9965476](https://github.com/mondaycom/vibe/commit/996547612af7a33e5dde95ba200ea23fa8ea0963))
+* Dropdown font broken ([#2551](https://github.com/mondaycom/vibe/issues/2551)) ([bca2c68](https://github.com/mondaycom/vibe/commit/bca2c681e622fbd7a6f8291df1c413cc8fc2083f))
+
+
+
+
+
 ## [2.139.3](https://github.com/mondaycom/vibe/compare/[email protected]@2.139.3) (2024-10-10)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.139.3",
+  "version": "2.139.4",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",

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

@@ -6,6 +6,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook/functions/c
 import Button from "../Button";
 import "./Button.stories.scss";
 import { Meta, StoryObj } from "@storybook/react";
+import Text from "../../Text/Text";
 
 type Story = StoryObj<typeof Button>;
 
@@ -150,7 +151,9 @@ export const OnColorStates: Story = {
   render: () => (
     <>
       <div style={{ display: "flex", flexDirection: "column" }}>
-        <span style={{ marginBottom: "var(--sb-spacing-small)" }}>Regular</span>
+        <Text type={Text.types.TEXT1} style={{ marginBottom: "var(--sb-spacing-small)" }}>
+          Regular
+        </Text>
         <div className="monday-storybook-button_on-color-button">
           <Button color={Button.colors.ON_PRIMARY_COLOR} marginRight>
             Primary on color
@@ -163,7 +166,9 @@ export const OnColorStates: Story = {
           </Button>
         </div>
         <br />
-        <span style={{ marginBottom: "var(--sb-spacing-small)" }}>Disabled</span>
+        <Text type={Text.types.TEXT1} style={{ marginBottom: "var(--sb-spacing-small)" }}>
+          Disabled
+        </Text>
         <div className="monday-storybook-button_on-color-button">
           <Button color={Button.colors.ON_PRIMARY_COLOR} disabled marginRight>
             Primary on color

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

@@ -4,6 +4,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import "./ButtonGroup.stories.scss";
 import { Meta, StoryObj } from "@storybook/react";
+import Text from "../../Text/Text";
 
 type Story = StoryObj<typeof ButtonGroup>;
 
@@ -171,7 +172,7 @@ export const Size: Story = {
   render: () => (
     <>
       <div className="monday-storybook-button-group_column">
-        Medium
+        <Text type={Text.types.TEXT1}>Medium</Text>
         <ButtonGroup
           groupAriaLabel="button group aria label"
           size={ButtonGroup.sizes.MEDIUM}
@@ -185,7 +186,7 @@ export const Size: Story = {
         />
       </div>
       <div className="monday-storybook-button-group_column">
-        Small
+        <Text type={Text.types.TEXT1}>Small</Text>
         <ButtonGroup
           groupAriaLabel="button group aria label"
           size={ButtonGroup.sizes.SMALL}
@@ -205,7 +206,7 @@ export const Size: Story = {
 export const ButtonGroupInSettings: Story = {
   render: () => (
     <div className="monday-storybook-button-group_column">
-      Function
+      <Text type={Text.types.TEXT1}>Function</Text>
       <ButtonGroup
         groupAriaLabel="button group aria label"
         size={ButtonGroup.sizes.SMALL}

packages/core/src/components/Dropdown/Dropdown.styles.js

@@ -39,7 +39,11 @@ const getColor = () => {
   return { color, backgroundColor };
 };
 
-const getFont = size => ({ fontSize: getSingleValueTextSize(size), lineHeight: getSingleValueTextSize(size) });
+const getFont = size => ({
+  fontSize: getSingleValueTextSize(size),
+  lineHeight: getSingleValueTextSize(size),
+  fontFamily: getCSSVar("font-family")
+});
 
 const disabledContainerStyle = isDisabled => {
   if (!isDisabled) return {};

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

@@ -53,11 +53,7 @@ Use modal for short and non-frequent tasks. For common tasks consider using the
 
 ### Sizes
 
-<Canvas>
-  <Story of={ModalStories.WidthVariantsNormal} />
-  <Story of={ModalStories.WidthVariantsFull} />
-  <Story of={ModalStories.WidthVariantsCustom} />
-</Canvas>
+<Canvas of={ModalStories.Sizes} />
 
 ### Modal header with an icon
 

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

@@ -70,145 +70,103 @@ export const Overview = {
   name: "Overview"
 };
 
-export const WidthVariantsNormal = {
-  // Boilerplate for creating a modal, not relevant for this example
-  render:
-    // Internal helper, not part of the API
-    // internal helper, not part of the API
-    // Modal with default width variant
-    // Width prop effects on the modal width
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Default",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <>
-          {openModalButton}
-          <Modal
-            id="story-book-modal"
-            title="Modal title"
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            width={Modal.width.DEFAULT}
-            contentSpacing
-          >
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </>
-      );
-    },
-
-  name: "Width variants - Normal"
-};
-
-export const WidthVariantsFull = {
-  // Boilerplate for creating a modal, not relevant for this example
-  render:
-    // Internal helper, not part of the API
-    // Modal with full width variant
-    // Width prop effects on the modal width
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Full size",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <>
-          {openModalButton}
-          <Modal
-            id="story-book-modal"
-            title="Modal title"
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            width={Modal.width.FULL_WIDTH}
-            contentSpacing
-          >
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </>
-      );
-    },
-
-  name: "Width variants - Full"
-};
-
-export const WidthVariantsCustom = {
-  // Boilerplate for creating a modal, not relevant for this example
-  render:
-    // Internal helper, not part of the API
-    // Modal with full width variant
-    // Width prop effects on the modal width
-    () => {
-      const [show, setShow] = useState(false);
-      const openModalButtonRef = useRef(null);
-
-      const closeModal = useCallback(() => {
-        setShow(false);
-      }, []);
-
-      const openModalButton = useHelperOpenModalButton({
-        title: "Custom size (i.e. 720px)",
-        setShow,
-        openModalButtonRef
-      });
-
-      return (
-        <>
-          {openModalButton}
-          <Modal
-            id="story-book-modal"
-            title="Modal title"
-            triggerElement={openModalButtonRef.current}
-            show={show}
-            onClose={closeModal}
-            width={"720px"}
-            contentSpacing
-          >
-            <ModalContent>Modal content goes here</ModalContent>
-            <ModalFooterButtons
-              primaryButtonText="Confirm"
-              secondaryButtonText="Cancel"
-              onPrimaryButtonClick={closeModal}
-              onSecondaryButtonClick={closeModal}
-            />
-          </Modal>
-        </>
-      );
-    },
-
-  name: "Width variants - custom"
+export const Sizes = {
+  render: () => {
+    const [showNormal, setShowNormal] = useState(false);
+    const [showFull, setShowFull] = useState(false);
+    const [showCustom, setShowCustom] = useState(false);
+
+    const openModalButtonRefNormal = useRef(null);
+    const openModalButtonRefFull = useRef(null);
+    const openModalButtonRefCustom = useRef(null);
+
+    const closeModalNormal = useCallback(() => setShowNormal(false), []);
+    const closeModalFull = useCallback(() => setShowFull(false), []);
+    const closeModalCustom = useCallback(() => setShowCustom(false), []);
+
+    const openModalButtonNormal = useHelperOpenModalButton({
+      title: "Default",
+      setShow: setShowNormal,
+      openModalButtonRef: openModalButtonRefNormal
+    });
+
+    const openModalButtonFull = useHelperOpenModalButton({
+      title: "Full size",
+      setShow: setShowFull,
+      openModalButtonRef: openModalButtonRefFull
+    });
+
+    const openModalButtonCustom = useHelperOpenModalButton({
+      title: "Custom size (720px)",
+      setShow: setShowCustom,
+      openModalButtonRef: openModalButtonRefCustom
+    });
+
+    return (
+      <>
+        {/* Default Width Modal */}
+        {openModalButtonNormal}
+        <Modal
+          id="storybook-modal-normal"
+          title="Modal title"
+          triggerElement={openModalButtonRefNormal.current}
+          show={showNormal}
+          onClose={closeModalNormal}
+          width={Modal.width.DEFAULT}
+          contentSpacing
+        >
+          <ModalContent>Modal content goes here</ModalContent>
+          <ModalFooterButtons
+            primaryButtonText="Confirm"
+            secondaryButtonText="Cancel"
+            onPrimaryButtonClick={closeModalNormal}
+            onSecondaryButtonClick={closeModalNormal}
+          />
+        </Modal>
+
+        {/* Full Width Modal */}
+        {openModalButtonFull}
+        <Modal
+          id="storybook-modal-full"
+          title="Modal title"
+          triggerElement={openModalButtonRefFull.current}
+          show={showFull}
+          onClose={closeModalFull}
+          width={Modal.width.FULL_WIDTH}
+          contentSpacing
+        >
+          <ModalContent>Modal content goes here</ModalContent>
+          <ModalFooterButtons
+            primaryButtonText="Confirm"
+            secondaryButtonText="Cancel"
+            onPrimaryButtonClick={closeModalFull}
+            onSecondaryButtonClick={closeModalFull}
+          />
+        </Modal>
+
+        {/* Custom Width Modal */}
+        {openModalButtonCustom}
+        <Modal
+          id="storybook-modal-custom"
+          title="Modal title"
+          triggerElement={openModalButtonRefCustom.current}
+          show={showCustom}
+          onClose={closeModalCustom}
+          width="720px"
+          contentSpacing
+        >
+          <ModalContent>Modal content goes here</ModalContent>
+          <ModalFooterButtons
+            primaryButtonText="Confirm"
+            secondaryButtonText="Cancel"
+            onPrimaryButtonClick={closeModalCustom}
+            onSecondaryButtonClick={closeModalCustom}
+          />
+        </Modal>
+      </>
+    );
+  },
+  name: "Sizes"
 };
 
 export const ModalWithIcon = {