fix: use Form.Checkbox instead of default checkboxes in DataTable f…

…ilters (#2555)
openedx · Sep 1, 2023 · d07827d · d07827d
1 parent 93bf239
commit d07827d
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 57 deletions.
diff --git 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
diff --git 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
@@ -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,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
@@ -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!')}>