Merge branch 'master' of github.com:mondaycom/monday-ui-react-core in…

…to update/hadas/storybook-3

CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.9.5 (2021-11-24)
+
+#### New Icons
+* [#357](https://github.com/mondaycom/monday-ui-react-core/pull/357) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))
+
+## 0.9.4 (2021-11-21)
+
+#### Bug Fixes
+* [#348](https://github.com/mondaycom/monday-ui-react-core/pull/348) add aria label support for checkbox ([@hadasfa](https://github.com/hadasfa))
+
+#### Documentation
+* [#325](https://github.com/mondaycom/monday-ui-react-core/pull/325) docs : improve documentation for extra styles in <dropdown> ([@Muskan777](https://github.com/Muskan777))
+
+## 0.9.3 (2021-11-18)
+
+#### Bug Fixes
+* [#350](https://github.com/mondaycom/monday-ui-react-core/pull/350) Fix heading ellipsis issue with 1 line ([@MosheZemah](https://github.com/MosheZemah))
+
+## 0.9.2 (2021-11-18)
+
+#### Bug Fixes
+* [#349](https://github.com/mondaycom/monday-ui-react-core/pull/349) Prevent editable heading from being empty ([@MosheZemah](https://github.com/MosheZemah))
+* [#346](https://github.com/mondaycom/monday-ui-react-core/pull/346) Rename ButtonContstants file to ButtonConstants file ([@KarelVerschraegen](https://github.com/KarelVerschraegen))
+* [#344](https://github.com/mondaycom/monday-ui-react-core/pull/344) fix: safari useReszieObserver ([@orrgottlieb](https://github.com/orrgottlieb))
+
+#### Documentation
+* [#345](https://github.com/mondaycom/monday-ui-react-core/pull/345) Fix typo in useForceUpdate ([@KarelVerschraegen](https://github.com/KarelVerschraegen))
+
+#### New Icons
+* [#347](https://github.com/mondaycom/monday-ui-react-core/pull/347) Upgrade icons ([@github-actions[bot]](https://github.com/apps/github-actions))
+
+## 0.9.1 (2021-11-17)
+
+#### Bug Fixes
+* [#341](https://github.com/mondaycom/monday-ui-react-core/pull/341) fix: callback on mount when should show on mount ([@orrgottlieb](https://github.com/orrgottlieb))
+
 ## 0.9.0 (2021-11-17)
 
 #### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.9.0",
+  "version": "0.9.5",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {
@@ -58,7 +58,7 @@
     "autosize": "4.0.2",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
-    "monday-ui-style": "0.1.51",
+    "monday-ui-style": "0.1.54",
     "prop-types": "^15.7.2",
     "react-inlinesvg": "^2.1.1",
     "react-markdown": "^7.1.0",

src/components/Button/Button.jsx

@@ -5,7 +5,7 @@ import cx from "classnames";
 import useResizeObserver from "../../hooks/useResizeObserver";
 import useMergeRefs from "../../hooks/useMergeRefs";
 import "./Button.scss";
-import { BUTTON_COLORS, BUTTON_INPUT_TYPE, BUTTON_TYPES, getActualSize } from "./ButtonContstants";
+import { BUTTON_COLORS, BUTTON_INPUT_TYPE, BUTTON_TYPES, getActualSize } from "./ButtonConstants";
 import { NOOP } from "../../utils/function-utils";
 import Icon from "../Icon/Icon";
 import Loader from "../Loader/Loader";

src/components/Checkbox/Checkbox.js

@@ -15,6 +15,7 @@ export const Checkbox = ({
   className,
   // Backward compatibility for props naming
   componentClassName,
+  ariaLabel,
   label,
   ariaLabelledBy,
   onChange,
@@ -72,7 +73,7 @@ export const Checkbox = ({
         onChange={onChange}
         defaultChecked={overrideDefaultChecked}
         disabled={disabled}
-        aria-label={label}
+        aria-label={ariaLabel || label}
         aria-labelledby={ariaLabelledBy}
         checked={checked}
       />
@@ -103,7 +104,8 @@ Checkbox.propTypes = {
   indeterminate: PropTypes.bool,
   value: PropTypes.string,
   disabled: PropTypes.bool,
-  name: PropTypes.string
+  name: PropTypes.string,
+  ariaLabel: PropTypes.string
 };
 
 Checkbox.defaultProps = {
@@ -117,7 +119,8 @@ Checkbox.defaultProps = {
   ariaLabelledBy: undefined,
   checked: undefined,
   indeterminate: false,
-  defaultChecked: undefined
+  defaultChecked: undefined,
+  ariaLabel: undefined
 };
 
 export default Checkbox;

src/components/Checkbox/__tests__/__snapshots__/checkbox.jest.js.snap

@@ -123,6 +123,49 @@ exports[`Checkbox Tests Snapshot Tests renders correctly when disabled 1`] = `
 </label>
 `;
 
+exports[`Checkbox Tests Snapshot Tests renders correctly with aria label 1`] = `
+<label
+  className="monday-style-checkbox"
+  onMouseUp={[Function]}
+>
+  <input
+    aria-label="aria label"
+    className="monday-style-checkbox__input"
+    defaultChecked={false}
+    disabled={false}
+    name=""
+    onChange={[Function]}
+    type="checkbox"
+    value=""
+  />
+  <div
+    className="monday-style-checkbox__checkbox monday-style-checkbox__prevent-animation"
+  >
+    <svg
+      aria-hidden={true}
+      className="icon_component monday-style-checkbox__icon icon_component--no-focus-style"
+      fill="currentColor"
+      height="16"
+      onClick={[Function]}
+      viewBox="0 0 20 20"
+      width="16"
+    >
+      <path
+        clipRule="evenodd"
+        d="M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  </div>
+  <span
+    className="monday-style-checkbox__label"
+  >
+    label
+  </span>
+</label>
+`;
+
 exports[`Checkbox Tests Snapshot Tests renders correctly with empty props 1`] = `
 <label
   className="monday-style-checkbox"

src/components/Checkbox/__tests__/checkbox.jest.js

@@ -2,6 +2,7 @@ import React from "react";
 import renderer from "react-test-renderer";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { Checkbox } from "../Checkbox";
+import { expect as sinonExpect } from "../../../test/test-helpers";
 
 describe("Checkbox Tests", () => {
   describe("Snapshot Tests", () => {
@@ -26,6 +27,11 @@ describe("Checkbox Tests", () => {
       const tree = renderer.create(<Checkbox disabled />).toJSON();
       expect(tree).toMatchSnapshot();
     });
+
+    it("renders correctly with aria label", () => {
+      const tree = renderer.create(<Checkbox label="label" ariaLabel="aria label" />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
   describe("Integration Tests", () => {
     const formName = "myForm";
@@ -39,12 +45,17 @@ describe("Checkbox Tests", () => {
     const option3Value = "3";
     const option3Text = "Option 3";
 
+    const option4Value = "4";
+    const option4Text = "Option 4";
+    const option4AriaLabel = "Option 4 aria label";
+
     beforeEach(() => {
       render(
         <form name={formName}>
           <Checkbox name={checkboxName} value={option1Value} label={option1Text} defaultChecked={true} />
           <Checkbox name={checkboxName} value={option2Value} label={option2Text} />
           <Checkbox name={checkboxName} value={option3Value} label={option3Text} />
+          <Checkbox name={checkboxName} value={option4Value} label={option4Text} ariaLabel={option4AriaLabel} />
         </form>
       );
     });
@@ -81,5 +92,10 @@ describe("Checkbox Tests", () => {
       expect(option2.checked).toBeTruthy();
       expect(option3.checked).toBeFalsy();
     });
+
+    it("should find checkbox element by label when ariaLabel defined", () => {
+      const option4 = screen.getByLabelText(option4AriaLabel);
+      sinonExpect(option4).to.be.ok;
+    });
   });
 });

src/components/Dialog/Dialog.jsx

@@ -67,7 +67,12 @@ export default class Dialog extends PureComponent {
   }
 
   componentDidMount() {
+    const { shoudlCallbackOnMount, onDialogDidShow } = this.props;
+    const { isOpen } = this.state;
     document.addEventListener("keyup", this.closeDialogOnEscape);
+    if (shoudlCallbackOnMount && isOpen) {
+      onDialogDidShow && onDialogDidShow();
+    }
   }
 
   componentWillUnmount() {
@@ -513,7 +518,8 @@ Dialog.propTypes = {
    */
   zIndex: PropTypes.number,
   useDerivedStateFromProps: PropTypes.bool,
-  hideWhenReferenceHidden: PropTypes.bool
+  hideWhenReferenceHidden: PropTypes.bool,
+  shoudlCallbackOnMount: PropTypes.bool
 };
 
 Dialog.defaultProps = {
@@ -544,7 +550,8 @@ Dialog.defaultProps = {
   onContentClick: NOOP,
   zIndex: null,
   useDerivedStateFromProps: false,
-  hideWhenReferenceHidden: false
+  hideWhenReferenceHidden: false,
+  shoudlCallbackOnMount: false
 };
 
 function chainOnPropsAndInstance(name, instance, props) {

src/components/Dropdown/Dropdown.jsx

@@ -305,7 +305,7 @@ Dropdown.propTypes = {
    */
   menuPortalTarget: PropTypes.oneOfType(PropTypes.element, PropTypes.object),
   /**
-   * Custom function to override existing styles, ex: base => {...base, ...myCustomOverrides}
+   * Custom function to override existing styles (similar to `react-select`'s `style` prop), for example: `base => ({...base, color: 'red'})`, where `base` is the component's default styles
    */
   extraStyles: PropTypes.func,
 

src/components/EditableHeading/EditableHeading.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, useEffect, useMemo } from "react";
+import React, { useRef, useState, useCallback, useEffect, useMemo, useLayoutEffect } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import { useButton } from "@react-aria/button";
@@ -83,6 +83,13 @@ const EditableHeading = props => {
     }
   }, [editing, value, prevValue, valueState, setValueState]);
 
+  useLayoutEffect(() => {
+    if (!editing && !valueState && value) {
+      // When user entered empty value - rollback to value from props
+      setValueState(value);
+    }
+  }, [editing, value, prevValue, valueState, setValueState]);
+
   useEffect(() => {
     let timer;
     if (isError) {

src/components/EditableHeading/__tests__/__snapshots__/editableHeading.jest.js.snap

@@ -22,7 +22,7 @@ exports[`renders correctly with empty props 1`] = `
 >
   <h1
     aria-label=""
-    className="heading-component element-type-h1 size-large heading-element-ellipsis suggest-edit-on-hover"
+    className="heading-component element-type-h1 size-large single-line-ellipsis suggest-edit-on-hover"
     id=""
   >
     

src/components/Heading/Heading.jsx

@@ -26,7 +26,8 @@ const Heading = ({
     node.style.setProperty("--heading-clamp-lines", ellipsisMaxLines)
   );
   const classNames = cx("heading-component", className, `element-type-${type}`, `size-${size}`, {
-    "heading-element-ellipsis": ellipsis,
+    "multi-line-ellipsis": ellipsis && ellipsisMaxLines > 1,
+    "single-line-ellipsis": ellipsis && ellipsisMaxLines <= 1,
     "suggest-edit-on-hover": suggestEditOnHover
   });
   const Element = React.createElement(

src/components/Heading/Heading.scss

@@ -8,10 +8,15 @@
 
   @include heading-padding();
 
-  &.heading-element-ellipsis {
+  &.multi-line-ellipsis {
     @include line-clamp(var(--heading-clamp-lines));
   }
 
+  // This is needed to support ellipsis in the middle of the word
+  &.single-line-ellipsis {
+    @include ellipsis();
+  }
+
   &.suggest-edit-on-hover {
     &:hover {
       cursor: text;

src/components/Heading/__tests__/__snapshots__/heading.jest.js.snap

@@ -3,7 +3,7 @@
 exports[`renders correctly with empty props 1`] = `
 <h1
   aria-label=""
-  className="heading-component element-type-h1 size-large heading-element-ellipsis"
+  className="heading-component element-type-h1 size-large single-line-ellipsis"
   id=""
 >
   

src/components/Icon/Icons/components/LongText.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 const LongText = ({size, ...props}) => (
   <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
-    <path d="M2.25 4C2.25 3.58579 2.58579 3.25 3 3.25H17C17.4142 3.25 17.75 3.58579 17.75 4C17.75 4.41421 17.4142 4.75 17 4.75H3C2.58579 4.75 2.25 4.41421 2.25 4ZM3 7.25C2.58579 7.25 2.25 7.58579 2.25 8C2.25 8.41421 2.58579 8.75 3 8.75H17C17.4142 8.75 17.75 8.41421 17.75 8C17.75 7.58579 17.4142 7.25 17 7.25H3ZM3 11.25C2.58579 11.25 2.25 11.5858 2.25 12C2.25 12.4142 2.58579 12.75 3 12.75H17C17.4142 12.75 17.75 12.4142 17.75 12C17.75 11.5858 17.4142 11.25 17 11.25H3ZM3 15.25C2.58579 15.25 2.25 15.5858 2.25 16C2.25 16.4142 2.58579 16.75 3 16.75H8.38462C8.79883 16.75 9.13462 16.4142 9.13462 16C9.13462 15.5858 8.79883 15.25 8.38462 15.25H3Z"
+    <path d="M2 3.25C2 2.83579 2.33579 2.5 2.75 2.5H17.25C17.6642 2.5 18 2.83579 18 3.25C18 3.66421 17.6642 4 17.25 4H2.75C2.33579 4 2 3.66421 2 3.25ZM2 7.25C2 6.83579 2.33579 6.5 2.75 6.5H17.25C17.6642 6.5 18 6.83579 18 7.25C18 7.66421 17.6642 8 17.25 8H2.75C2.33579 8 2 7.66421 2 7.25ZM2.75 10.5C2.33579 10.5 2 10.8358 2 11.25C2 11.6642 2.33579 12 2.75 12H9.5C9.91421 12 10.25 11.6642 10.25 11.25C10.25 10.8358 9.91421 10.5 9.5 10.5H2.75ZM13.9502 12H12.75V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V11.25C11.25 10.8358 11.5858 10.5 12 10.5H17.3C17.7142 10.5 18.05 10.8358 18.05 11.25V13.25C18.05 13.6642 17.7142 14 17.3 14C16.8858 14 16.55 13.6642 16.55 13.25V12H15.4502V16.25H16.2002C16.6144 16.25 16.9502 16.5858 16.9502 17C16.9502 17.4142 16.6144 17.75 16.2002 17.75H13.2002C12.786 17.75 12.4502 17.4142 12.4502 17C12.4502 16.5858 12.786 16.25 13.2002 16.25H13.9502V12Z"
       fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
   </svg>
 );

src/components/Icon/Icons/components/Mirror.js

@@ -0,0 +1,17 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Mirror = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <path d="M10.4698 14.5303C10.1769 14.2374 10.1769 13.7626 10.4698 13.4697C10.7627 13.1768 11.2376 13.1768 11.5305 13.4697L13.2501 15.1893L13.2501 8.5C13.2501 7.24022 12.7497 6.03204 11.8589 5.14124C10.9681 4.25044 9.7599 3.75 8.50012 3.75C7.24034 3.75 6.03216 4.25044 5.14136 5.14124C4.25057 6.03204 3.75012 7.24022 3.75012 8.5C3.75012 8.91421 3.41433 9.25 3.00012 9.25C2.58591 9.25 2.25012 8.91421 2.25012 8.5C2.25012 6.8424 2.9086 5.25268 4.0807 4.08058C5.25281 2.90848 6.84252 2.25 8.50012 2.25C10.1577 2.25 11.7474 2.90848 12.9195 4.08058C14.0916 5.25268 14.7501 6.8424 14.7501 8.5L14.7501 15.1893L16.4698 13.4697C16.7627 13.1768 17.2376 13.1768 17.5305 13.4697C17.8233 13.7626 17.8233 14.2374 17.5305 14.5303L14.5305 17.5303C14.3898 17.671 14.199 17.75 14.0001 17.75C13.8012 17.75 13.6104 17.671 13.4698 17.5303L10.4698 14.5303Z"
+      fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
+  </svg>
+);
+Mirror.displayName = 'Mirror';
+Mirror.propTypes = {
+  size: PropTypes.string
+}
+export default Mirror;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/Text.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 const Text = ({size, ...props}) => (
   <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
-    <path d="M11.9016 12.6511H8.09212L7.23653 15H6L9.47229 6H10.5215L14 15H12.7697L11.9016 12.6511ZM8.45433 11.6745H11.5457L9.99688 7.46497L8.45433 11.6745Z" fill="currentColor"
-    />
+    <path d="M2.75 5.5C2.33579 5.5 2 5.83579 2 6.25C2 6.66421 2.33579 7 2.75 7H17.25C17.6642 7 18 6.66421 18 6.25C18 5.83579 17.6642 5.5 17.25 5.5H2.75ZM2.75 9.5C2.33579 9.5 2 9.83579 2 10.25C2 10.6642 2.33579 11 2.75 11H9.5C9.91421 11 10.25 10.6642 10.25 10.25C10.25 9.83579 9.91421 9.5 9.5 9.5H2.75ZM13.9502 11H12.75V12.25C12.75 12.6642 12.4142 13 12 13C11.5858 13 11.25 12.6642 11.25 12.25V10.25C11.25 9.83579 11.5858 9.5 12 9.5H17.3C17.7142 9.5 18.05 9.83579 18.05 10.25V12.25C18.05 12.6642 17.7142 13 17.3 13C16.8858 13 16.55 12.6642 16.55 12.25V11H15.4502V15.25H16.2002C16.6144 15.25 16.9502 15.5858 16.9502 16C16.9502 16.4142 16.6144 16.75 16.2002 16.75H13.2002C12.786 16.75 12.4502 16.4142 12.4502 16C12.4502 15.5858 12.786 15.25 13.2002 15.25H13.9502V11Z"
+      fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
   </svg>
 );
 Text.displayName = 'Text';