Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BD-46] refactor: replaced legacy checkboxes #2555

Merged
merged 3 commits into from
Sep 1, 2023
Merged

[BD-46] refactor: replaced legacy checkboxes #2555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7165c7
refactor: replaced legacy checkboxes
PKulkoRaccoonGang Aug 16, 2023
d67f1c6
refactor: refactoring after review
PKulkoRaccoonGang Aug 17, 2023
8d61d59
refactor: refactoring after review
PKulkoRaccoonGang Aug 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions src/DataTable/filters/CheckboxFilter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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>
);
}
Expand Down
29 changes: 0 additions & 29 deletions src/DataTable/filters/LabelledCheckbox.jsx
View file
Open in desktop

This file was deleted.

29 changes: 19 additions & 10 deletions src/DataTable/filters/MultiSelectDropdownFilter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[clarification] Is it intentional to remove the role="group" attribute here?

Copy link
Contributor Author

@PKulkoRaccoonGang PKulkoRaccoonGang Aug 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, Form.CheckboxSet have role ="group" by default

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for confirming! 🎉

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>
);
}
Expand Down
6 changes: 3 additions & 3 deletions src/DataTable/filters/tests/CheckboxFilter.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
8 changes: 4 additions & 4 deletions src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
Expand All @@ -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));
Expand All @@ -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);
});
});
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/useArrowKeyNavigation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

</Form.Group>

<Button variant="primary" onClick={() => alert('Submitted!')}>
Expand Down
Loading