From 480ea47f83eb0118c9aac970bc6c1f0d76f42fe7 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Wed, 16 Aug 2023 21:09:04 +0300
Subject: [PATCH] refactor: swaped legacy checkboxes inside DataTable,
 TableFilters components

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

diff --git a/src/DataTable/filters/CheckboxFilter.jsx b/src/DataTable/filters/CheckboxFilter.jsx
index 83780665b2b..8b670584f5c 100644
--- a/src/DataTable/filters/CheckboxFilter.jsx
+++ b/src/DataTable/filters/CheckboxFilter.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import Form, { FormLabel } from '../../Form';
 import Badge from '../../Badge';
 import { newId } from '../../utils';
-import LabelledCheckbox from './LabelledCheckbox';
 
 function CheckboxFilter({
   column: {
@@ -27,15 +26,19 @@ 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}
+          >
+            {name} {number !== undefined && <Badge className="ml-2" variant="light">{number}</Badge>}
+          </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 64e217d261a..00000000000
--- 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 39458c50147..f49ba17efa4 100644
--- a/src/DataTable/filters/MultiSelectDropdownFilter.jsx
+++ b/src/DataTable/filters/MultiSelectDropdownFilter.jsx
@@ -1,9 +1,9 @@
-import React, { useRef, useMemo } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import Badge from '../../Badge';
 import { DropdownButton } from '../../Dropdown';
 import { newId } from '../../utils';
-import LabelledCheckbox from './LabelledCheckbox';
+import Form from '../../Form';
 
 function MultiSelectDropdownFilter({
   column: {
@@ -21,20 +21,22 @@ 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>}</>}
-          />
+            aria-label={name}
+          >
+            {name} {number && <Badge className="ml-2" variant="light">{number}</Badge>}
+          </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 9281bbe7edb..50b3d01c703 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 1ced27ddfd7..c8aa7e7b9ca 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 6b0e6936d58..d6629f7bde0 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!')}>