Merge pull request #1696 from p3ol/feature/checkbox-indeterminate

✨ feat(react): add checkbox indeterminate state

Author: dackmin

.github/workflows/ci.yml

@@ -30,6 +30,8 @@ jobs:
     name: Unit tests
     runs-on: ubuntu-24.04
     timeout-minutes: 10
+    env:
+      YARN_ENABLE_HARDENED_MODE: 0
     strategy:
       matrix:
         node-version: [20, 22, 24]
@@ -44,6 +46,8 @@ jobs:
           cache: yarn
       - name: Install deps
         run: yarn install
+      - name: Build needed packages
+        run: yarn p:core build && yarn p:tailwind build
       - name: Test
         run: yarn test
       - name: Codecov upload

.yarnrc.yml

@@ -1,14 +1,3 @@
-approvedGitRepositories:
-  - "**"
-
-enableGlobalCache: true
-
-enableScripts: true
-
-nmHoistingLimits: workspaces
-
 nodeLinker: node-modules
 
-npmMinimalAgeGate: 0
-
 yarnPath: .yarn/releases/yarn-4.15.0.cjs

packages/core/tsconfig.build.json

@@ -6,7 +6,8 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "dist/types",
-    "rootDir": "./lib"
+    "rootDir": "./lib",
+    "paths": {},
   },
   "exclude": [
     "tests",

packages/hooks/tsconfig.build.json

@@ -6,7 +6,8 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "dist/types",
-    "rootDir": "./lib"
+    "rootDir": "./lib",
+    "paths": {},
   },
   "exclude": [
     "tests",

packages/react-d3-plugin/tsconfig.build.json

@@ -6,7 +6,8 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "dist/types",
-    "rootDir": "./lib"
+    "rootDir": "./lib",
+    "paths": {},
   },
   "exclude": [
     "tests",

packages/react/lib/CheckboxField/index.stories.tsx

@@ -6,7 +6,7 @@ import Abstract from '../Abstract';
 import FieldControl from '../FieldControl';
 import Label from '../Label';
 
-export default { title: 'react/Checkbox' };
+export default { title: 'react/CheckboxField' };
 
 export const Basic = () => (
   <CheckboxField onChange={action('change')}>
@@ -98,3 +98,12 @@ export const Controlled = () => {
     </>
   );
 };
+
+export const Indeterminate = () => (
+  <CheckboxField
+    checked="indeterminate"
+    onChange={action('change')}
+  >
+    Check this
+  </CheckboxField>
+);

packages/react/lib/CheckboxField/index.test.tsx

@@ -203,4 +203,18 @@ describe('<CheckboxField />', () => {
 
     unmount();
   });
+
+  it('should allow to use indeterminate state', async () => {
+    const user = userEvent.setup();
+    const { unmount, container } = render(
+      <CheckboxField checked="indeterminate" />
+    );
+
+    expect(container).toMatchSnapshot('indeterminate');
+
+    await user.click(container.querySelector('label'));
+    expect(container).toMatchSnapshot('checked');
+
+    unmount();
+  });
 });

packages/react/lib/CheckboxField/index.test.tsx.snap

@@ -17,18 +17,7 @@ exports[`<CheckboxField /> > should add value if provided 1`] = `
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     />
@@ -97,18 +86,7 @@ exports[`<CheckboxField /> > should allow to render a controller checkbox > unch
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     >
@@ -118,15 +96,15 @@ exports[`<CheckboxField /> > should allow to render a controller checkbox > unch
 </div>
 `;
 
-exports[`<CheckboxField /> > should not trigger event and change state if user click but checkbox is disabled 1`] = `
+exports[`<CheckboxField /> > should allow to use indeterminate state > checked 1`] = `
 <div>
   <label
-    aria-checked="false"
-    aria-disabled="true"
+    aria-checked="true"
+    aria-disabled="false"
     aria-required="false"
-    class="junipero checkbox-field pristine valid disabled"
+    class="junipero checkbox-field dirty valid checked"
     role="checkbox"
-    tabindex="-1"
+    tabindex="0"
   >
     <input
       tabindex="-1"
@@ -154,13 +132,13 @@ exports[`<CheckboxField /> > should not trigger event and change state if user c
 </div>
 `;
 
-exports[`<CheckboxField /> > should render 1`] = `
+exports[`<CheckboxField /> > should allow to use indeterminate state > indeterminate 1`] = `
 <div>
   <label
     aria-checked="false"
     aria-disabled="false"
     aria-required="false"
-    class="junipero checkbox-field pristine valid"
+    class="junipero checkbox-field pristine valid indeterminate"
     role="checkbox"
     tabindex="0"
   >
@@ -173,13 +151,13 @@ exports[`<CheckboxField /> > should render 1`] = `
       class="inner"
     >
       <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
+        class="junipero icon minus"
+        height="10"
+        viewBox="0 0 9 10"
         width="10"
       >
         <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
+          d="M1 5L8 5"
         />
       </svg>
     </div>
@@ -190,6 +168,56 @@ exports[`<CheckboxField /> > should render 1`] = `
 </div>
 `;
 
+exports[`<CheckboxField /> > should not trigger event and change state if user click but checkbox is disabled 1`] = `
+<div>
+  <label
+    aria-checked="false"
+    aria-disabled="true"
+    aria-required="false"
+    class="junipero checkbox-field pristine valid disabled"
+    role="checkbox"
+    tabindex="-1"
+  >
+    <input
+      tabindex="-1"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="inner"
+    />
+    <div
+      class="content"
+    />
+  </label>
+</div>
+`;
+
+exports[`<CheckboxField /> > should render 1`] = `
+<div>
+  <label
+    aria-checked="false"
+    aria-disabled="false"
+    aria-required="false"
+    class="junipero checkbox-field pristine valid"
+    role="checkbox"
+    tabindex="0"
+  >
+    <input
+      tabindex="-1"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="inner"
+    />
+    <div
+      class="content"
+    />
+  </label>
+</div>
+`;
+
 exports[`<CheckboxField /> > should set checked if provided 1`] = `
 <div>
   <label
@@ -243,18 +271,7 @@ exports[`<CheckboxField /> > should set focused state on focus > focused 1`] = `
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     />
@@ -279,18 +296,7 @@ exports[`<CheckboxField /> > should set focused state on focus > not focused 1`]
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     />
@@ -351,18 +357,7 @@ exports[`<CheckboxField /> > should set invalid state following custom onValidat
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     />
@@ -387,18 +382,7 @@ exports[`<CheckboxField /> > should set invalid state if checkbox is invalid and
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     />
@@ -459,18 +443,7 @@ exports[`<CheckboxField /> > should toggle active state on click > active 1`] =
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     />
@@ -495,18 +468,7 @@ exports[`<CheckboxField /> > should toggle active state on click > inactive 1`]
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     />
@@ -567,18 +529,7 @@ exports[`<CheckboxField /> > should toggle check if checkbox is clicked > unchec
     />
     <div
       class="inner"
-    >
-      <svg
-        class="junipero icon check"
-        height="7"
-        viewBox="0 0 10 7"
-        width="10"
-      >
-        <path
-          d="M1.75259 3.49582L4.25675 6L8.24741 1"
-        />
-      </svg>
-    </div>
+    />
     <div
       class="content"
     />