refactor: swaped legacy checkboxes inside DataTable, TableFilters com…

…ponents
openedx · Aug 16, 2023 · b95bdf8 · b95bdf8
1 parent 40dd412
commit b95bdf8
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 56 deletions.
diff --git 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="items">
+        {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
diff --git 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="items" 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
@@ -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
@@ -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,9 @@ 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
@@ -64,7 +64,9 @@ 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!')}>