Skip to content

Commit

Permalink
refactor(react): update InlineCheckbox to FC (#10363)
Browse files Browse the repository at this point in the history 
* refactor(react): update InlineCheckbox to FC

* chore(react): formatting of InlineCheckbox

* fix(react): update InlineCheckbox prop types and usage in data table

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@joshblack @kodiakhq
joshblack and kodiakhq[bot] authored Jan 11, 2022
1 parent 31573f5 commit 9f143a3
Show file tree
Hide file tree
Showing 7 changed files with 190 additions and 295 deletions.
2 changes: 1 addition & 1 deletion packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe('DataTable.TableSelectAll', () => {
</TableHead>
</Table>
);
wrapper.find('InlineCheckbox input').simulate('click');
wrapper.find('input').simulate('click');
expect(mockProps.onSelect).toHaveBeenCalledTimes(1);
});
});
2 changes: 1 addition & 1 deletion packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('DataTable.TableSelectRow', () => {
</TableHead>
</Table>
);
wrapper.find('InlineCheckbox input').simulate('click');
wrapper.find('input').simulate('click');
expect(mockProps.onSelect).toHaveBeenCalledTimes(1);
});
});
155 changes: 50 additions & 105 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -975,32 +975,21 @@ exports[`DataTable selection should have select-all default to un-checked if no
name="select-all"
onClick={[Function]}
>
<InlineCheckbox
ariaLabel="Select all rows"
<input
checked={false}
className="bx--checkbox"
id="data-table-7__select-all"
indeterminate={false}
innerRef={null}
name="select-all"
onChange={[Function]}
onClick={[Function]}
>
<input
checked={false}
className="bx--checkbox"
id="data-table-7__select-all"
name="select-all"
onChange={[Function]}
onClick={[Function]}
type="checkbox"
/>
<label
aria-label="Select all rows"
className="bx--checkbox-label"
htmlFor="data-table-7__select-all"
onClick={[Function]}
/>
</InlineCheckbox>
type="checkbox"
/>
<label
aria-label="Select all rows"
className="bx--checkbox-label"
htmlFor="data-table-7__select-all"
onClick={[Function]}
/>
</ForwardRef(InlineCheckbox)>
</th>
</TableSelectAll>
Expand Down Expand Up @@ -1382,32 +1371,21 @@ exports[`DataTable selection should render 1`] = `
name="select-all"
onClick={[Function]}
>
<InlineCheckbox
ariaLabel="Select all rows"
<input
checked={false}
className="bx--checkbox"
id="data-table-6__select-all"
indeterminate={false}
innerRef={null}
name="select-all"
onChange={[Function]}
onClick={[Function]}
>
<input
checked={false}
className="bx--checkbox"
id="data-table-6__select-all"
name="select-all"
onChange={[Function]}
onClick={[Function]}
type="checkbox"
/>
<label
aria-label="Select all rows"
className="bx--checkbox-label"
htmlFor="data-table-6__select-all"
onClick={[Function]}
/>
</InlineCheckbox>
type="checkbox"
/>
<label
aria-label="Select all rows"
className="bx--checkbox-label"
htmlFor="data-table-6__select-all"
onClick={[Function]}
/>
</ForwardRef(InlineCheckbox)>
</th>
</TableSelectAll>
Expand Down Expand Up @@ -1483,33 +1461,22 @@ exports[`DataTable selection should render 1`] = `
name="select-row-b"
onClick={[Function]}
>
<InlineCheckbox
ariaLabel="Select row"
<input
checked={false}
className="bx--checkbox"
disabled={false}
id="data-table-6__select-row-b"
innerRef={null}
name="select-row-b"
onChange={[Function]}
onClick={[Function]}
>
<input
checked={false}
className="bx--checkbox"
disabled={false}
id="data-table-6__select-row-b"
name="select-row-b"
onChange={[Function]}
onClick={[Function]}
type="checkbox"
/>
<label
aria-label="Select row"
className="bx--checkbox-label"
htmlFor="data-table-6__select-row-b"
onClick={[Function]}
/>
</InlineCheckbox>
type="checkbox"
/>
<label
aria-label="Select row"
className="bx--checkbox-label"
htmlFor="data-table-6__select-row-b"
onClick={[Function]}
/>
</ForwardRef(InlineCheckbox)>
</td>
</TableSelectRow>
Expand Down Expand Up @@ -1553,33 +1520,22 @@ exports[`DataTable selection should render 1`] = `
name="select-row-a"
onClick={[Function]}
>
<InlineCheckbox
ariaLabel="Select row"
<input
checked={false}
className="bx--checkbox"
disabled={false}
id="data-table-6__select-row-a"
innerRef={null}
name="select-row-a"
onChange={[Function]}
onClick={[Function]}
>
<input
checked={false}
className="bx--checkbox"
disabled={false}
id="data-table-6__select-row-a"
name="select-row-a"
onChange={[Function]}
onClick={[Function]}
type="checkbox"
/>
<label
aria-label="Select row"
className="bx--checkbox-label"
htmlFor="data-table-6__select-row-a"
onClick={[Function]}
/>
</InlineCheckbox>
type="checkbox"
/>
<label
aria-label="Select row"
className="bx--checkbox-label"
htmlFor="data-table-6__select-row-a"
onClick={[Function]}
/>
</ForwardRef(InlineCheckbox)>
</td>
</TableSelectRow>
Expand Down Expand Up @@ -1623,33 +1579,22 @@ exports[`DataTable selection should render 1`] = `
name="select-row-c"
onClick={[Function]}
>
<InlineCheckbox
ariaLabel="Select row"
<input
checked={false}
className="bx--checkbox"
disabled={false}
id="data-table-6__select-row-c"
innerRef={null}
name="select-row-c"
onChange={[Function]}
onClick={[Function]}
>
<input
checked={false}
className="bx--checkbox"
disabled={false}
id="data-table-6__select-row-c"
name="select-row-c"
onChange={[Function]}
onClick={[Function]}
type="checkbox"
/>
<label
aria-label="Select row"
className="bx--checkbox-label"
htmlFor="data-table-6__select-row-c"
onClick={[Function]}
/>
</InlineCheckbox>
type="checkbox"
/>
<label
aria-label="Select row"
className="bx--checkbox-label"
htmlFor="data-table-6__select-row-c"
onClick={[Function]}
/>
</ForwardRef(InlineCheckbox)>
</td>
</TableSelectRow>
Expand Down
30 changes: 10 additions & 20 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,31 +34,21 @@ exports[`DataTable.TableSelectAll should render 1`] = `
name="select-all"
onClick={[MockFunction]}
>
<InlineCheckbox
ariaLabel="Select all rows in the table"
<input
checked={false}
className="bx--checkbox"
id="id"
innerRef={null}
name="select-all"
onChange={[Function]}
onClick={[MockFunction]}
>
<input
checked={false}
className="bx--checkbox"
id="id"
name="select-all"
onChange={[Function]}
onClick={[MockFunction]}
type="checkbox"
/>
<label
aria-label="Select all rows in the table"
className="bx--checkbox-label"
htmlFor="id"
onClick={[Function]}
/>
</InlineCheckbox>
type="checkbox"
/>
<label
aria-label="Select all rows in the table"
className="bx--checkbox-label"
htmlFor="id"
onClick={[Function]}
/>
</ForwardRef(InlineCheckbox)>
</th>
</TableSelectAll>
Expand Down
30 changes: 10 additions & 20 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,31 +33,21 @@ exports[`DataTable.TableSelectRow should render 1`] = `
name="select-all"
onClick={[MockFunction]}
>
<InlineCheckbox
ariaLabel="Aria label"
<input
checked={false}
className="bx--checkbox"
id="id"
innerRef={null}
name="select-all"
onChange={[Function]}
onClick={[MockFunction]}
>
<input
checked={false}
className="bx--checkbox"
id="id"
name="select-all"
onChange={[Function]}
onClick={[MockFunction]}
type="checkbox"
/>
<label
aria-label="Aria label"
className="bx--checkbox-label"
htmlFor="id"
onClick={[Function]}
/>
</InlineCheckbox>
type="checkbox"
/>
<label
aria-label="Aria label"
className="bx--checkbox-label"
htmlFor="id"
onClick={[Function]}
/>
</ForwardRef(InlineCheckbox)>
</td>
</TableSelectRow>
Expand Down
6 changes: 4 additions & 2 deletions packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ import userEvent from '@testing-library/user-event';

describe('InlineCheckbox', () => {
it('should render', () => {
render(<InlineCheckbox />);
render(
<InlineCheckbox ariaLabel="test-label" id="test-id" name="test-name" />
);
expect(screen.getByRole('checkbox')).toBeInTheDocument();
});

Expand All @@ -21,7 +23,7 @@ describe('InlineCheckbox', () => {
render(
/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
<div onClick={onClick}>
<InlineCheckbox />
<InlineCheckbox ariaLabel="test-label" id="test-id" name="test-name" />
</div>
);
userEvent.click(screen.getByRole('checkbox'));
Expand Down
Loading

0 comments on commit 9f143a3

Please sign in to comment.