feat: add autoFocus to CheckBox (#2059)

Co-authored-by: Yossi Saadi <[email protected]>
mondaycom · Apr 11, 2024 · cd26e7c · cd26e7c
1 parent 38bbb5c
commit cd26e7c
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 21 deletions.
diff --git a/packages/core/src/components/Checkbox/Checkbox.tsx b/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}

diff --git a/...ore/src/components/Checkbox/__tests__/__snapshots__/checkbox-snapshot-tests.jest.tsx.snap b/...ore/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"

diff --git a/packages/core/src/components/Checkbox/__tests__/checkbox-snapshot-tests.jest.tsx b/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();

diff --git a/packages/core/src/components/Checkbox/__tests__/checkbox-tests.jest.tsx b/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
       });
     });