From d07827d9a0ff8f01395a39f571daed0b8ad6f6db Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Fri, 1 Sep 2023 15:24:37 +0300
Subject: [PATCH] fix: use `Form.Checkbox` instead of default checkboxes in
 DataTable filters (#2555)

---
 src/DataTable/filters/CheckboxFilter.jsx      | 26 ++++++++++-------
 src/DataTable/filters/LabelledCheckbox.jsx    | 29 -------------------
 .../filters/MultiSelectDropdownFilter.jsx     | 29 ++++++++++++-------
 .../filters/tests/CheckboxFilter.test.jsx     |  6 ++--
 .../tests/MultiSelectDropdownFilter.test.jsx  |  8 ++---
 src/hooks/useArrowKeyNavigation.mdx           |  2 +-
 6 files changed, 43 insertions(+), 57 deletions(-)
 delete mode 100644 src/DataTable/filters/LabelledCheckbox.jsx

diff --git a/src/DataTable/filters/CheckboxFilter.jsx b/src/DataTable/filters/CheckboxFilter.jsx
index 83780665b2..379666d26a 100644
--- a/src/DataTable/filters/CheckboxFilter.jsx
+++ b/src/DataTable/filters/CheckboxFilter.jsx
@@ -2,8 +2,8 @@ import React, { useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Form, { FormLabel } from '../../Form';
 import Badge from '../../Badge';
+import Stack from '../../Stack';
 import { newId } from '../../utils';
-import LabelledCheckbox from './LabelledCheckbox';
 
 function CheckboxFilter({
   column: {
@@ -27,15 +27,21 @@ function CheckboxFilter({
   return (
     <Form.Group role="group" aria-labelledby={ariaLabel.current}>
       <FormLabel id={ariaLabel.current} className="pgn__checkbox-filter-label">{Header}</FormLabel>
-      {filterChoices.map(({ name, number, value }) => (
-        <LabelledCheckbox
-          id={headerBasedId}
-          key={headerBasedId + name}
-          checked={checkedBoxes.includes(value)}
-          onChange={() => { changeCheckbox(value); }}
-          label={<>{name} {number !== undefined && <Badge variant="light">{number}</Badge>}</>}
-        />
-      ))}
+      <Form.CheckboxSet name={Header}>
+        {filterChoices.map(({ name, number, value }) => (
+          <Form.Checkbox
+            key={`${headerBasedId}${name}`}
+            value={name}
+            checked={checkedBoxes.includes(value)}
+            onChange={() => changeCheckbox(value)}
+            aria-label={name}
+          >
+            <Stack direction="horizontal" gap={2}>
+              {name} {number !== undefined && <Badge variant="light">{number}</Badge>}
+            </Stack>
+          </Form.Checkbox>
+        ))}
+      </Form.CheckboxSet>
     </Form.Group>
   );
 }
diff --git a/src/DataTable/filters/LabelledCheckbox.jsx b/src/DataTable/filters/LabelledCheckbox.jsx
deleted file mode 100644
index 64e217d261..0000000000
--- a/src/DataTable/filters/LabelledCheckbox.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import Form from '../../Form';
-import { newId } from '../../utils';
-
-function LabelledCheckbox({
-  onChange, checked, label, id,
-}) {
-  const idRef = useRef(newId(id));
-  return (
-    <div key={idRef.current} className="pgn__checkbox-filter">
-      <Form.Check
-        id={idRef.current}
-        checked={checked}
-        onChange={onChange}
-        label={label}
-      />
-    </div>
-  );
-}
-
-LabelledCheckbox.propTypes = {
-  checked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  label: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  id: PropTypes.string.isRequired,
-};
-
-export default LabelledCheckbox;
diff --git a/src/DataTable/filters/MultiSelectDropdownFilter.jsx b/src/DataTable/filters/MultiSelectDropdownFilter.jsx
index 39458c5014..3ffd98d62c 100644
--- a/src/DataTable/filters/MultiSelectDropdownFilter.jsx
+++ b/src/DataTable/filters/MultiSelectDropdownFilter.jsx
@@ -1,9 +1,10 @@
-import React, { useRef, useMemo } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import Badge from '../../Badge';
+import Stack from '../../Stack';
 import { DropdownButton } from '../../Dropdown';
 import { newId } from '../../utils';
-import LabelledCheckbox from './LabelledCheckbox';
+import Form from '../../Form';
 
 function MultiSelectDropdownFilter({
   column: {
@@ -21,20 +22,28 @@ function MultiSelectDropdownFilter({
     checkedBoxes.push(value);
     return setFilter(checkedBoxes);
   };
-  const headerBasedId = useMemo(() => `checkbox-filter-check-${getHeaderProps().key}-`, [getHeaderProps]);
+
   return (
     <DropdownButton variant="outline-primary" id={ariaLabel.current} title={Header}>
-      <div role="group" aria-label={Header} className="pgn__dropdown-filter-checkbox-group">
+      <Form.CheckboxSet
+        className="pgn__dropdown-filter-checkbox-group"
+        name={Header}
+        aria-label={Header}
+      >
         {filterChoices.map(({ name, number, value }) => (
-          <LabelledCheckbox
+          <Form.Checkbox
             key={name}
-            id={headerBasedId}
+            value={name}
             checked={checkedBoxes.includes(value)}
-            onChange={() => { changeCheckbox(value); }}
-            label={<>{name} {number && <Badge variant="light">{number}</Badge>}</>}
-          />
+            onChange={() => changeCheckbox(value)}
+            aria-label={name}
+          >
+            <Stack direction="horizontal" gap={2}>
+              {name} {number && <Badge variant="light">{number}</Badge>}
+            </Stack>
+          </Form.Checkbox>
         ))}
-      </div>
+      </Form.CheckboxSet>
     </DropdownButton>
   );
 }
diff --git a/src/DataTable/filters/tests/CheckboxFilter.test.jsx b/src/DataTable/filters/tests/CheckboxFilter.test.jsx
index 9281bbe7ed..50b3d01c70 100644
--- a/src/DataTable/filters/tests/CheckboxFilter.test.jsx
+++ b/src/DataTable/filters/tests/CheckboxFilter.test.jsx
@@ -54,19 +54,19 @@ describe('<CheckboxFilter />', () => {
   });
   it('renders checkbox label with filter name', () => {
     const wrapper = mount(<CheckboxFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    const label = wrapper.find('.form-check-label').at(0);
+    const label = wrapper.find('.pgn__form-checkbox').at(0);
     expect(label.text()).toContain(roan.name);
   });
   it('renders checkbox label with number', () => {
     const wrapper = mount(<CheckboxFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    const label = wrapper.find('.pgn__checkbox-filter').at(0);
+    const label = wrapper.find('.pgn__form-checkbox').at(0);
     const badge = label.find(Badge);
     expect(badge).toHaveLength(1);
     expect(badge.text()).toEqual(String(roan.number));
   });
   it('renders checkbox label with number', () => {
     const wrapper = mount(<CheckboxFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    const label = wrapper.find('.pgn__checkbox-filter').at(1);
+    const label = wrapper.find('.pgn__form-checkbox').at(1);
     const badge = label.find(Badge);
     expect(badge).toHaveLength(0);
   });
diff --git a/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx b/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
index 1ced27ddfd..c8aa7e7b9c 100644
--- a/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
+++ b/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
@@ -69,7 +69,7 @@ describe('<MultiSelectDropdownFilter />', () => {
     const wrapper = mount(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
     wrapper.find('button').simulate('click');
     await act(async () => {
-      const label = wrapper.find('.form-check-label').at(0);
+      const label = wrapper.find('.pgn__form-label').at(0);
       expect(label.text()).toContain(roan.name);
     });
   });
@@ -78,7 +78,7 @@ describe('<MultiSelectDropdownFilter />', () => {
     wrapper.find('button').simulate('click');
 
     await act(async () => {
-      const label = wrapper.find('.pgn__checkbox-filter').at(0);
+      const label = wrapper.find('.pgn__form-checkbox').at(0);
       const badge = label.find(Badge);
       expect(badge).toHaveLength(1);
       expect(badge.text()).toEqual(String(roan.number));
@@ -89,8 +89,8 @@ describe('<MultiSelectDropdownFilter />', () => {
     wrapper.find('button').simulate('click');
 
     await act(async () => {
-      const label = wrapper.find('.pgn__checkbox-filter').at(1);
-      const badge = label.find(Badge);
+      const label = wrapper.find('.pgn__form-checkbox').at(1);
+      const badge = label.find('.badge');
       expect(badge).toHaveLength(0);
     });
   });
diff --git a/src/hooks/useArrowKeyNavigation.mdx b/src/hooks/useArrowKeyNavigation.mdx
index 6b0e6936d5..d6629f7bde 100644
--- a/src/hooks/useArrowKeyNavigation.mdx
+++ b/src/hooks/useArrowKeyNavigation.mdx
@@ -64,7 +64,7 @@ the `arrowUp` and `arrowLeft` keys can be ignored for convenient editing of the
           <Form.Control type="password" placeholder="Password" />
         </Form.Group>
         <Form.Group>
-          <Form.Check type="checkbox" label="Confirm the entered data" />
+          <Form.Checkbox>Confirm the entered data</Form.Checkbox>
         </Form.Group>
 
         <Button variant="primary" onClick={() => alert('Submitted!')}>