Merge branch 'master' into chore/yossi/reusable-base-input

packages/core/.storybook/manager.jsx

@@ -1,8 +1,9 @@
-import { addons } from "@storybook/manager-api";
 import React from "react";
+import { addons } from "@storybook/manager-api";
 import { SidebarItem } from "vibe-storybook-components";
 import "vibe-storybook-components/index.css";
 import theme from "./theme";
+import isChromatic from "chromatic/isChromatic";
 
 window.STORYBOOK_GA_ID = "UA-308574295";
 window.STORYBOOK_REACT_GA_OPTIONS = {};
@@ -24,6 +25,15 @@ addons.setConfig({
       }
 
       return <SidebarItem status={parameters.status}>{name.replace(storyStatus, "").trim()}</SidebarItem>;
+    },
+    filters: {
+      patterns: filterStory
     }
   }
 });
+
+function filterStory(item) {
+  const isDev = isChromatic() || process.env.NODE_ENV === "development";
+  const isInternal = !item.tags?.includes?.("internal") && !item.title?.startsWith?.("Internal");
+  return isDev || isInternal;
+}

packages/core/.storybook/preview.tsx

@@ -97,6 +97,7 @@ const preview: Preview = {
           "Catalog",
           "Change Log",
           "Typography Migration Guide",
+          "Internal",
           "Foundations",
           "Buttons",
           "Inputs",

packages/core/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.103.0](https://github.com/mondaycom/monday-ui-react-core/compare/[email protected]@2.103.0) (2024-04-15)
+
+
+### Features
+
+* Dropdown and TextFeild accessibility improvements ([#1898](https://github.com/mondaycom/monday-ui-react-core/issues/1898)) ([de99f06](https://github.com/mondaycom/monday-ui-react-core/commit/de99f06b472b350cba6f43d960505f430769fb9e))
+
+
+
+
+
+# [2.102.0](https://github.com/mondaycom/monday-ui-react-core/compare/[email protected]@2.102.0) (2024-04-11)
+
+
+### Features
+
+* add autoFocus to CheckBox ([#2059](https://github.com/mondaycom/monday-ui-react-core/issues/2059)) ([cd26e7c](https://github.com/mondaycom/monday-ui-react-core/commit/cd26e7cf7b666da211efc7dd7af4f58a25a1b7a0))
+
+
+
+
+
+# [2.101.0](https://github.com/mondaycom/monday-ui-react-core/compare/[email protected]@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/[email protected]@2.100.1) (2024-04-07)
 
 

packages/core/CONTRIBUTING.md

@@ -8,11 +8,11 @@ This library is open-sourced, and we encourage everyone to use and contribute in
 
 1. Create a fork of this repository
 2. Please use the correct node version it is listed in the `.nvmrc` file (you can use `nvm use` in order to switch to the right node version).
-3. Install dependencies with `npm install` command
+3. Install dependencies with `yarn install` command
 4. Sync from upstream if needed
-5. Run Storybook environment locally with `npm run storybook` command.
-6. Make sure all components behave as expected by running all Jest tests locally with 'npm run test'.
-7. If there are changes in some of the library snapshot tests, make sure all changes are intentional. If they are, update them with 'npm run test:update'.
+5. Run Storybook environment locally with `yarn storybook` command.
+6. Make sure all components behave as expected by running all Jest tests locally with 'yarn test'.
+7. If there are changes in some of the library snapshot tests, make sure all changes are intentional. If they are, update them with 'yarn test:update'.
 8. Commit to your local fork using [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)
 9. Create a PR with title based using [Semantic Commit Messages](https://seesparkbox.com/foundry/semantic_commit_messages)
    For example: `feat: add new TextArea component`
@@ -24,7 +24,7 @@ This library is open-sourced, and we encourage everyone to use and contribute in
 
 ### Creating new files in the library
 
-Our code generator, Plop, is designed to simplify the creation of frequently used boilerplate code. To utilize it, execute the command `npm run plop`. If you want to learn more about Plop, you can find additional information [here](https://plopjs.com/).
+Our code generator, Plop, is designed to simplify the creation of frequently used boilerplate code. To utilize it, execute the command `yarn plop`. If you want to learn more about Plop, you can find additional information [here](https://plopjs.com/).
 Currently, our Plop code generator supports the creation of the following:
 
 1. Tests

packages/core/README.md

@@ -48,7 +48,7 @@ We are using storybook in order to develop the components independently of any c
 run this to build & run the storybook locally:
 
 ```bash
-npm run storybook
+yarn storybook
 ```
 
 the storybook will be served on `http://localhost:7007`

packages/core/TESTING_README.md

@@ -62,7 +62,7 @@ describe("Tipseen tests", () => {
 
 ### Running Vibe tests
 **Snapshot and Behavior Tests:**
-To run all snapshot and behavior tests locally, use the command: `npm run test`.
+To run all snapshot and behavior tests locally, use the command: `yarn test`.
 
 **Local Storybook Interaction Tests:**
 To check interaction tests for a specific story in Storybook:

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "2.100.1",
+  "version": "2.103.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/Checkbox/Checkbox.tsx

@@ -36,6 +36,8 @@ export interface CheckBoxProps extends VibeComponentProps {
   checked?: boolean;
   /** An in between state to display a non selected */
   indeterminate?: boolean;
+  /** is autoFocus */
+  autoFocus?: boolean;
   /** Set the option to be disabled */
   disabled?: boolean;
   /** the default value which the checkbox will start from  */
@@ -63,6 +65,7 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
       ariaLabelledBy,
       onChange = NOOP,
       checked,
+      autoFocus,
       indeterminate = false,
       disabled = false,
       defaultChecked,
@@ -127,6 +130,7 @@ const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement> = forwardRef(
           value={value}
           name={name}
           type="checkbox"
+          autoFocus={autoFocus}
           onChange={onChange}
           defaultChecked={overrideDefaultChecked}
           disabled={disabled}

packages/core/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap

@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Checkbox renders correctly when autoFocus 1`] = `
+<label
+  className="wrapper"
+  data-testid="checkbox"
+  onClickCapture={[Function]}
+  onMouseUp={[Function]}
+>
+  <input
+    aria-label=""
+    autoFocus={true}
+    className="input"
+    defaultChecked={false}
+    disabled={false}
+    name=""
+    onChange={[Function]}
+    type="checkbox"
+    value=""
+  />
+  <div
+    className="checkbox"
+    data-testid="checkbox-checkbox"
+  >
+    <svg
+      aria-hidden={true}
+      className="icon icon noFocusStyle"
+      data-testid="icon"
+      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="typography primary start singleLineEllipsis text text2Normal label"
+    data-testid="checkbox-label"
+  />
+</label>
+`;
+
 exports[`Checkbox renders correctly when checked 1`] = `
 <label
   className="wrapper"

packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx

@@ -25,6 +25,11 @@ describe("Checkbox renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("when autoFocus", () => {
+    const tree = renderer.create(<Checkbox autoFocus />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it("with name", () => {
     const tree = renderer.create(<Checkbox name="checkbox" />).toJSON();
     expect(tree).toMatchSnapshot();

packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "@testing-library/jest-dom";
 import { fireEvent, render, cleanup, screen } from "@testing-library/react";
 import Checkbox from "../Checkbox";
 
@@ -39,6 +40,8 @@ type RenderHelper = {
   option3Text: string;
   option3Value: string;
   onChangeMock3: jest.MockedFunction<MockedFunction>;
+  defaultChecked?: boolean;
+  autoFocus?: boolean;
 };
 
 function renderCheckboxes({
@@ -54,16 +57,19 @@ function renderCheckboxes({
   checkbox3Name,
   option3Text,
   option3Value,
-  onChangeMock3
+  onChangeMock3,
+  defaultChecked,
+  autoFocus
 }: RenderHelper) {
   render(
     <form name={formName}>
       <Checkbox
         name={checkbox1Name}
         value={option1Value}
         label={option1Text}
-        defaultChecked={true}
+        defaultChecked={defaultChecked}
         onChange={onChangeMock1}
+        autoFocus={autoFocus}
       />
       <Checkbox name={checkbox2Name} value={option2Value} label={option2Text} onChange={onChangeMock2} />
       <Checkbox name={checkbox3Name} value={option3Value} label={option3Text} onChange={onChangeMock3} />
@@ -87,23 +93,24 @@ function testUnselectFirstOption(
 }
 
 describe("Checkbox tests", () => {
-  describe("regular checkbox tests", () => {
-    const {
-      formName,
-      checkbox1Name,
-      option1Value,
-      option1Text,
-      checkbox2Name,
-      option2Value,
-      option2Text,
-      checkbox3Name,
-      option3Value,
-      option3Text
-    } = createCheckboxesVariables();
+  const {
+    formName,
+    checkbox1Name,
+    option1Value,
+    option1Text,
+    checkbox2Name,
+    option2Value,
+    option2Text,
+    checkbox3Name,
+    option3Value,
+    option3Text
+  } = createCheckboxesVariables();
 
-    let onChangeMock1: jest.MockedFunction<MockedFunction>,
-      onChangeMock2: jest.MockedFunction<MockedFunction>,
-      onChangeMock3: jest.MockedFunction<MockedFunction>;
+  let onChangeMock1: jest.MockedFunction<MockedFunction>,
+    onChangeMock2: jest.MockedFunction<MockedFunction>,
+    onChangeMock3: jest.MockedFunction<MockedFunction>;
+
+  describe("regular checkbox tests with default checked", () => {
     beforeEach(() => {
       onChangeMock1 = jest.fn();
       onChangeMock2 = jest.fn();
@@ -122,7 +129,8 @@ describe("Checkbox tests", () => {
         option1Value,
         checkbox1Name,
         checkbox2Name,
-        checkbox3Name
+        checkbox3Name,
+        defaultChecked: true
       });
     });
 
@@ -139,7 +147,7 @@ describe("Checkbox tests", () => {
       expect(option3.checked).toBeFalsy();
     });
 
-    it("should unselect  1st option", () => {
+    it("should unselect 1st option", () => {
       testUnselectFirstOption(option1Text, option2Text, option3Text);
     });
 
@@ -179,6 +187,35 @@ describe("Checkbox tests", () => {
       });
     });
   });
+
+  describe("regular checkbox tests with no default checked", () => {
+    it("should auto focus 1st checkbox", () => {
+      renderCheckboxes({
+        formName,
+        onChangeMock1,
+        onChangeMock2,
+        onChangeMock3,
+        option3Text,
+        option3Value,
+        option2Text,
+        option2Value,
+        option1Text,
+        option1Value,
+        checkbox1Name,
+        checkbox2Name,
+        checkbox3Name,
+        autoFocus: true
+      });
+
+      const option1 = screen.getByLabelText<HTMLInputElement>(option1Text);
+      const option2 = screen.getByLabelText<HTMLInputElement>(option2Text);
+      const option3 = screen.getByLabelText<HTMLInputElement>(option3Text);
+      expect(option1).toHaveFocus();
+      expect(option2).not.toHaveFocus();
+      expect(option3).not.toHaveFocus();
+    });
+  });
+
   describe("specific firefox checkbox tests", () => {
     const {
       formName,
@@ -230,7 +267,8 @@ describe("Checkbox tests", () => {
         option1Value,
         checkbox1Name,
         checkbox2Name,
-        checkbox3Name
+        checkbox3Name,
+        defaultChecked: true
       });
     });