Merge branch 'master' into docs/remove-icon-doc

packages/core/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.101.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.100.1...monday-ui-react-core@2.101.0) (2024-04-10)
+
+
+### Bug Fixes
+
+* **DatePicker:** added min width to buttons inside year picker ([#2050](https://github.com/mondaycom/monday-ui-react-core/issues/2050)) ([7c35041](https://github.com/mondaycom/monday-ui-react-core/commit/7c35041363e880667899df8f033b117058be3a25))
+
+
+### Features
+
+* add autoFocus to RadioButton ([#2057](https://github.com/mondaycom/monday-ui-react-core/issues/2057)) ([d40b49e](https://github.com/mondaycom/monday-ui-react-core/commit/d40b49efc63fe943a71bf9ba643b513cf5f66d97))
+
+
+
+
+
 ## [2.100.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-react-core@2.100.0...monday-ui-react-core@2.100.1) (2024-04-07)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.100.1",
+  "version": "2.101.0",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types.d.ts",
@@ -109,7 +109,7 @@
     "classnames": "^2.3.2",
     "framer-motion": "^6.5.1",
     "lodash-es": "^4.17.21",
-    "monday-ui-style": "0.4.0",
+    "monday-ui-style": "0.4.1",
     "prop-types": "^15.8.1",
     "react-dates": "21.8.0",
     "react-inlinesvg": "^3.0.1",
@@ -121,7 +121,7 @@
     "react-window": "^1.8.7",
     "react-windowed-select": "^2.0.4",
     "style-inject": "^0.3.0",
-    "vibe-storybook-components": "0.18.0"
+    "vibe-storybook-components": "0.18.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

packages/core/src/components/DatePicker/YearPicker/YearPicker.module.scss

@@ -38,6 +38,10 @@
     position: absolute;
     top: 55px;
     pointer-events: all;
+
+    .pickerOption {
+      min-width: 66px;
+    }
   }
 
   :global(.CalendarYear--blocked) {

packages/core/src/components/DatePicker/YearPicker/YearsList.tsx

@@ -1,4 +1,5 @@
 import Button from "../../Button/Button";
+import styles from "./YearPicker.module.scss";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
@@ -19,7 +20,15 @@ const YearsList = ({ yearsItems, isYearBlocked, onSelect, selectedYear }: YearsL
         const kind = parseInt(selectedYear, 10) === currYear ? Button?.kinds?.PRIMARY : Button?.kinds?.TERTIARY;
 
         return (
-          <Button key={currYear} kind={kind} onClick={onClick} disabled={shouldBlockYear} marginLeft marginRight>
+          <Button
+            className={styles.pickerOption}
+            key={currYear}
+            kind={kind}
+            onClick={onClick}
+            disabled={shouldBlockYear}
+            marginLeft
+            marginRight
+          >
             {currYear.toString()}
           </Button>
         );

packages/core/src/components/RadioButton/RadioButton.tsx

@@ -27,6 +27,8 @@ export interface RadioButtonProps extends VibeComponentProps {
   value?: string;
   /** A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. */
   name?: string;
+  /** is autoFocus */
+  autoFocus?: boolean;
   /** is disabled */
   disabled?: boolean;
   /** why the input is disabled */
@@ -64,6 +66,7 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
        */
       radioButtonClassName,
       disabled = false,
+      autoFocus,
       disabledReason,
       defaultChecked = false,
       children,
@@ -80,6 +83,7 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
     const inputRef = useRef<HTMLInputElement | null>();
     const mergedRef = useMergeRef(ref, inputRef);
     const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
+
     const onChildClick = useCallback(() => {
       if (disabled || !retainChildClick) return;
       if (inputRef.current) {
@@ -114,6 +118,7 @@ const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object = forwa
               type="radio"
               value={value}
               name={name}
+              autoFocus={autoFocus}
               disabled={disabled}
               {...checkedProps}
               onChange={onSelect}

packages/core/src/components/RadioButton/__tests__/__snapshots__/radioButton-snapshot-tests.jest.tsx.snap

@@ -1,5 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RadioButton renders correctly when autoFocus 1`] = `
+<label
+  className="radioButton"
+  data-testid="radio-button"
+>
+  <span
+    className="inputContainer"
+  >
+    <input
+      autoFocus={true}
+      className="input"
+      defaultChecked={false}
+      disabled={false}
+      name=""
+      type="radio"
+      value=""
+    />
+    <span
+      className="control labelAnimation"
+      data-testid="radio-button-control"
+    />
+  </span>
+  
+</label>
+`;
+
 exports[`RadioButton renders correctly when checked 1`] = `
 <label
   className="radioButton"

packages/core/src/components/RadioButton/__tests__/radioButton-snapshot-tests.jest.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import renderer from "react-test-renderer";
 import RadioButton from "../RadioButton";
 
@@ -33,6 +32,11 @@ describe("RadioButton renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("when autoFocus", () => {
+    const tree = renderer.create(<RadioButton autoFocus />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it("when unchecked", () => {
     const tree = renderer.create(<RadioButton checked={false} />).toJSON();
     expect(tree).toMatchSnapshot();

packages/core/src/components/RadioButton/__tests__/radioButton-tests.jest.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import "@testing-library/jest-dom";
 import { fireEvent, render, cleanup, screen } from "@testing-library/react";
 import RadioButton from "../RadioButton";
 
@@ -17,60 +17,81 @@ describe("RadioButton tests", () => {
   let onChangeMock2: jest.Mock;
   let onChangeMock3: jest.Mock;
 
-  beforeEach(() => {
-    onChangeMock1 = jest.fn();
-    onChangeMock2 = jest.fn();
-    onChangeMock3 = jest.fn();
+  describe("With one of the radio buttons is checked by default", () => {
+    beforeEach(() => {
+      onChangeMock1 = jest.fn();
+      onChangeMock2 = jest.fn();
+      onChangeMock3 = jest.fn();
 
-    render(
-      <form name={formName}>
-        <RadioButton
-          name={radiosName}
-          value={option1Value}
-          text={option1Text}
-          onSelect={onChangeMock1}
-          defaultChecked={true}
-        />
-        <RadioButton name={radiosName} value={option2Value} text={option2Text} onSelect={onChangeMock2} />
-        <RadioButton name={radiosName} value={option3Value} text={option3Text} onSelect={onChangeMock3} />
-      </form>
-    );
-  });
+      render(
+        <form name={formName}>
+          <RadioButton
+            name={radiosName}
+            value={option1Value}
+            text={option1Text}
+            onSelect={onChangeMock1}
+            defaultChecked
+          />
+          <RadioButton name={radiosName} value={option2Value} text={option2Text} onSelect={onChangeMock2} />
+          <RadioButton name={radiosName} value={option3Value} text={option3Text} onSelect={onChangeMock3} />
+        </form>
+      );
+    });
 
-  afterEach(() => {
-    cleanup();
-  });
+    afterEach(() => {
+      cleanup();
+    });
 
-  it("should default select 1st option", () => {
-    const option1: HTMLInputElement = screen.getByLabelText(option1Text);
-    const option2: HTMLInputElement = screen.getByLabelText(option2Text);
-    const option3: HTMLInputElement = screen.getByLabelText(option3Text);
-    expect(option1.checked).toBeTruthy();
-    expect(option2.checked).toBeFalsy();
-    expect(option3.checked).toBeFalsy();
-  });
+    it("should default select 1st option", () => {
+      const option1: HTMLInputElement = screen.getByLabelText(option1Text);
+      const option2: HTMLInputElement = screen.getByLabelText(option2Text);
+      const option3: HTMLInputElement = screen.getByLabelText(option3Text);
+      expect(option1.checked).toBeTruthy();
+      expect(option2.checked).toBeFalsy();
+      expect(option3.checked).toBeFalsy();
+    });
 
-  it("should select 2nd option", () => {
-    const option1: HTMLInputElement = screen.getByLabelText(option1Text);
-    const option2: HTMLInputElement = screen.getByLabelText(option2Text);
-    const option3: HTMLInputElement = screen.getByLabelText(option3Text);
-    fireEvent.click(option2);
-    expect(option1.checked).toBeFalsy();
-    expect(option2.checked).toBeTruthy();
-    expect(option3.checked).toBeFalsy();
-  });
+    it("should select 2nd option", () => {
+      const option1: HTMLInputElement = screen.getByLabelText(option1Text);
+      const option2: HTMLInputElement = screen.getByLabelText(option2Text);
+      const option3: HTMLInputElement = screen.getByLabelText(option3Text);
+      fireEvent.click(option2);
+      expect(option1.checked).toBeFalsy();
+      expect(option2.checked).toBeTruthy();
+      expect(option3.checked).toBeFalsy();
+    });
+
+    it("should call the onChange callback when clicked", () => {
+      const option2 = screen.getByLabelText(option2Text);
+      fireEvent.click(option2);
+      expect(onChangeMock2.mock.calls.length).toBe(1);
+      expect(onChangeMock2.mock.calls[0]).toBeTruthy();
+    });
 
-  it("should call the onChange callback when clicked", () => {
-    const option2 = screen.getByLabelText(option2Text);
-    fireEvent.click(option2);
-    expect(onChangeMock2.mock.calls.length).toBe(1);
-    expect(onChangeMock2.mock.calls[0]).toBeTruthy();
+    it("should be the same text", () => {
+      const text = "test text";
+      const { getByText } = render(<RadioButton text={text} />);
+      const radioButtonComponentText = getByText(text);
+      expect(radioButtonComponentText).toBeTruthy();
+    });
   });
 
-  it("should be the same text", () => {
-    const text = "test text";
-    const { getByText } = render(<RadioButton text={text} />);
-    const radioButtonComponentText = getByText(text);
-    expect(radioButtonComponentText).toBeTruthy();
+  describe("When all radio buttons are unchecked", () => {
+    it("should auto focus 2nd option", () => {
+      render(
+        <form name={formName}>
+          <RadioButton text={option1Text} />
+          <RadioButton text={option2Text} autoFocus />
+          <RadioButton text={option3Text} />
+        </form>
+      );
+
+      const option1: HTMLInputElement = screen.getByLabelText(option1Text);
+      const option2: HTMLInputElement = screen.getByLabelText(option2Text);
+      const option3: HTMLInputElement = screen.getByLabelText(option3Text);
+      expect(option1).not.toHaveFocus();
+      expect(option2).toHaveFocus();
+      expect(option3).not.toHaveFocus();
+    });
   });
 });

packages/core/src/storybook/components/related-components/descriptions/dialog-description/dialog-description.tsx

@@ -43,7 +43,7 @@ export const DialogDescription = () => {
     <RelatedComponent
       component={component}
       title="Dialog"
-      href="/?path=/docs/components-dialog-dialog--docs"
+      href="/?path=/docs/popover-dialog--docs"
       description="The dialog component's purpose is to position a popup component nearby another element, such as any kind of a button."
     />
   );

packages/storybook-blocks/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.18.1](https://github.com/mondaycom/monday-ui-react-core/compare/vibe-storybook-components@0.18.0...vibe-storybook-components@0.18.1) (2024-04-10)
+
+**Note:** Version bump only for package vibe-storybook-components
+
+
+
+
+
 # [0.18.0](https://github.com/mondaycom/monday-ui-react-core/compare/vibe-storybook-components@0.17.2...vibe-storybook-components@0.18.0) (2024-04-03)
 
 

packages/storybook-blocks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-storybook-components",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Collection of Vibe's Storybook components",
   "license": "MIT",
   "repository": {

packages/style/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.1](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.4.0...monday-ui-style@0.4.1) (2024-04-10)
+
+**Note:** Version bump only for package monday-ui-style
+
+
+
+
+
 # [0.4.0](https://github.com/mondaycom/monday-ui-react-core/compare/monday-ui-style@0.3.0...monday-ui-style@0.4.0) (2024-04-03)
 
 

packages/style/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-style",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Monday UI CSS Foundations",
   "main": "dist/index.css",
   "scripts": {