Merge branch 'master' into sergeyro/feature/icon-button-loading

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,14 +16,14 @@ Please go over the checklist and make sure all conditions are met.
 - [ ] Styles are added to `NewComponent.modules.scss` file inside the `NewComponent` folder.
 - [ ] Component uses CSS Modules.
 - [ ] Design is compatible with [Monday Design System](https://design.monday.com/).
-- [ ] Styles are defined using [monday-ui-style](https://github.com/mondaycom/monday-ui-react-core/tree/monorepo-style/packages/monday-ui-style) tokens
+- [ ] Styles are defined using [monday-ui-style](https://github.com/mondaycom/monday-ui-react-core/tree/master/packages/style) tokens
 - [ ] Displays correctly in all the themes
 
 #### Storybook
 
 - [ ] Stories were added to `/src/components/NewComponent/__stories__/NewComponent.mdx` file.
 - [ ] Stories include all flows of using the component.
-- [ ] Stories implemented using [vibe-storybook-components](https://github.com/mondaycom/vibe-storybook-components) components and tokens.
+- [ ] Stories implemented using [vibe-storybook-components](https://github.com/mondaycom/monday-ui-react-core/tree/master/packages/storybook-blocks) components and tokens.
 
 #### Tests
 

.github/workflows/publish-storybook.yml

@@ -22,13 +22,24 @@ jobs:
         run: |
           yarn lerna run build --include-dependencies
           yarn lerna run --scope monday-ui-react-core build-storybook
+          yarn lerna run --scope vibe-storybook-components build-storybook
           cd packages/core/static_storybook
           echo "style.monday.com" > ./CNAME
         env:
           NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
+      - name: Push storybook-blocks Storybook to Github Pages
+        if: success()
+        uses: JamesIves/github-pages-deploy-action@v4.5.0
+        with:
+          folder: packages/storybook-blocks/storybook-static
+          branch: gh-pages
+          target-folder: storybook-blocks
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Push core Storybook to Github Pages
         uses: JamesIves/github-pages-deploy-action@v4.5.0
         with:
+          clean-exclude: storybook-blocks/*
           folder: packages/core/static_storybook
           branch: gh-pages
         env:

packages/core/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.98.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.98.0...monday-ui-react-core@2.98.1) (2024-03-20)
+
+
+### Bug Fixes
+
+* **MenuButton:** call `onMenuHide` on all cases where menu is closed ([#2027](https://github.com/mondaycom/monday-ui-react-core/issues/2027)) ([1c80b4c](https://github.com/mondaycom/monday-ui-react-core/commit/1c80b4cb149e303c47fa2f4efe58541d3c209859))
+
+
+
+
+
+# [2.98.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.97.0...monday-ui-react-core@2.98.0) (2024-03-19)
+
+
+### Bug Fixes
+
+* **EditableTypography:** fix specificity issues when changing types a… ([#2028](https://github.com/mondaycom/monday-ui-react-core/issues/2028)) ([bebcdbd](https://github.com/mondaycom/monday-ui-react-core/commit/bebcdbd1dd82cc381988f7c84d6f97686357471b))
+
+
+### Features
+
+* changed proptype from `string`/`IconSubComponentProps` to `SubIcon` ([#2026](https://github.com/mondaycom/monday-ui-react-core/issues/2026)) ([f30ab8a](https://github.com/mondaycom/monday-ui-react-core/commit/f30ab8a702bff73b0fb05a67891470a3e915493f))
+
+
+
+
+
+## [2.97.2](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.97.1...monday-ui-react-core@2.97.2) (2024-03-19)
+
+
+### Bug Fixes
+
+* **EditableTypography:** fix specificity issues when changing types a… ([#2028](https://github.com/mondaycom/monday-ui-react-core/issues/2028)) ([bebcdbd](https://github.com/mondaycom/monday-ui-react-core/commit/bebcdbd1dd82cc381988f7c84d6f97686357471b))
+
+
+
+
+
+## [2.97.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.97.0...monday-ui-react-core@2.97.1) (2024-03-19)
+
+**Note:** Version bump only for package monday-ui-react-core
+
+
+
+
+
 # [2.97.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.96.1...monday-ui-react-core@2.97.0) (2024-03-18)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.97.0",
+  "version": "2.98.1",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",
@@ -121,7 +121,7 @@
     "react-window": "^1.8.7",
     "react-windowed-select": "^2.0.4",
     "style-inject": "^0.3.0",
-    "vibe-storybook-components": "^0.16.1"
+    "vibe-storybook-components": "0.17.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

packages/core/src/components/EditableHeading/EditableHeading.tsx

@@ -40,6 +40,8 @@ const EditableHeading: VibeComponent<EditableHeadingProps, HTMLElement> & {
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.EDITABLE_HEADING, id)}
         component={Heading}
         typographyClassName={getStyle(styles, camelCase(type + "-" + weight))}
+        type={type}
+        weight={weight}
         {...editableTypographyProps}
       />
     );

packages/core/src/components/EditableText/EditableText.tsx

@@ -43,6 +43,8 @@ const EditableText: VibeComponent<EditableTextProps, HTMLElement> & {
         component={Text}
         typographyClassName={cx(getStyle(styles, camelCase(type + "-" + weight)), styles.typography)}
         clearable
+        type={type}
+        weight={weight}
         {...editableTypographyProps}
       />
     );

packages/core/src/components/EditableTypography/EditableTypography.tsx

@@ -8,6 +8,8 @@ import { keyCodes } from "../../constants";
 import { useKeyboardButtonPressedFunc } from "../../hooks/useKeyboardButtonPressedFunc";
 import { TooltipProps } from "../Tooltip/Tooltip";
 import usePrevious from "../../hooks/usePrevious";
+import { TextType, TextWeight } from "../Text/TextConstants";
+import { HeadingType, HeadingWeight } from "../Heading/HeadingConstants";
 
 export interface EditableTypographyImplementationProps {
   /** Value of the text */
@@ -37,6 +39,10 @@ export interface EditableTypographyProps extends VibeComponentProps, EditableTyp
   typographyClassName: string;
   /** Shows placeholder when empty, if provided */
   clearable?: boolean;
+  /** Sets the Text/Heading type */
+  type?: TextType | HeadingType;
+  /** Sets the Text/Heading weight */
+  weight?: TextWeight | HeadingWeight;
 }
 
 const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(
@@ -56,7 +62,9 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
       component: TypographyComponent,
       isEditMode,
       onEditModeChange,
-      tooltipProps
+      tooltipProps,
+      type,
+      weight
     },
     ref
   ) => {
@@ -191,6 +199,8 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
           })}
           tabIndex={0}
           tooltipProps={tooltipProps}
+          weight={weight}
+          type={type}
         >
           {inputValue || placeholder}
         </TypographyComponent>

packages/core/src/components/MenuButton/MenuButton.tsx

@@ -78,7 +78,7 @@ export interface MenuButtonProps extends VibeComponentProps {
    */
   onMenuShow?: () => void;
   /*
-  Callback function to be called when the menu is shown
+  Callback function to be called when the menu is hidden
  */
   onMenuHide?: () => void;
   /**
@@ -191,35 +191,36 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
     const [isOpen, setIsOpen] = useState(open);
     const isActive = active ?? isOpen;
 
-    const onMenuDidClose = useCallback(
-      (event: React.KeyboardEvent) => {
-        const isEscapeClicked = event && event.key === "Escape";
-        if (closeMenuOnItemClick || isEscapeClicked) {
-          setIsOpen(false);
+    const handleMenuClose = useCallback(
+      (focusOnMenuButtonAfterClose: boolean) => {
+        onMenuHide();
+        setIsOpen(false);
+        const button = componentRef.current;
+        if (!button || !focusOnMenuButtonAfterClose) {
+          return;
         }
+        window.requestAnimationFrame(() => {
+          button.focus();
+        });
+      },
+      [onMenuHide]
+    );
 
-        if (isEscapeClicked) {
-          const button = componentRef.current;
-          window.requestAnimationFrame(() => {
-            button.focus();
-          });
+    const onMenuDidClose = useCallback(
+      (event: React.KeyboardEvent) => {
+        const isEscapeKey = event?.key === "Escape";
+        if (isEscapeKey || closeMenuOnItemClick) {
+          handleMenuClose(isEscapeKey);
         }
       },
-      [closeMenuOnItemClick]
+      [closeMenuOnItemClick, handleMenuClose]
     );
 
     const onDialogDidHide = useCallback(
       (event: DialogEvent, hideEvent: string) => {
-        setIsOpen(false);
-        onMenuHide();
-        const button = componentRef.current;
-        window.requestAnimationFrame(() => {
-          if (button && hideEvent === Dialog.hideShowTriggers.ESCAPE_KEY) {
-            button.focus();
-          }
-        });
+        handleMenuClose(hideEvent === Dialog.hideShowTriggers.ESCAPE_KEY);
       },
-      [setIsOpen, onMenuHide, componentRef]
+      [handleMenuClose]
     );
 
     const onDialogDidShow = useCallback(() => {

packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import cx from "classnames";
 import IconButton from "../../IconButton/IconButton";
 import CloseSmall from "../../Icon/Icons/components/CloseSmall";
-import Icon, { IconSubComponentProps } from "../../Icon/Icon";
+import Icon from "../../Icon/Icon";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { NOOP } from "../../../utils/function-utils";
 import { ElementContent } from "src/types/ElementContent";
@@ -12,6 +12,7 @@ import Text from "../../Text/Text";
 import Heading from "../../Heading/Heading";
 import Flex from "../../Flex/Flex";
 import styles from "./ModalHeader.module.scss";
+import { SubIcon } from "../../../types/SubIcon";
 
 export interface ModalHeaderProps extends VibeComponentProps {
   /**
@@ -29,7 +30,8 @@ export interface ModalHeaderProps extends VibeComponentProps {
   /**
    * Icon to be rendered before the title
    */
-  icon?: string | React.FunctionComponent<IconSubComponentProps> | null;
+  // icon?: string | React.FunctionComponent<IconSubComponentProps> | null;
+  icon?: SubIcon;
   /**
    * Class name for the wrapper
    */

packages/core/src/components/Tabs/Tab/Tab.tsx

@@ -4,11 +4,12 @@ import React, { FC, forwardRef, ReactElement, useRef } from "react";
 import { noop as NOOP } from "lodash-es";
 import useMergeRef from "../../../hooks/useMergeRef";
 import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
-import Icon, { IconSubComponentProps } from "../../Icon/Icon";
+import Icon from "../../Icon/Icon";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { IconType } from "../../Icon/IconConstants";
 import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
 import styles from "./Tab.module.scss";
+import { SubIcon } from "../../../types/SubIcon";
 
 export interface TabProps extends VibeComponentProps {
   /**
@@ -22,7 +23,7 @@ export interface TabProps extends VibeComponentProps {
   disabled?: boolean;
   active?: boolean;
   focus?: boolean;
-  icon?: string | React.FunctionComponent<IconSubComponentProps> | null;
+  icon?: SubIcon;
   iconType?: IconType;
   iconSide?: string;
   onClick?: (value: number) => void;

packages/storybook-blocks/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}