Skip to content

Commit

Permalink
fix(data-table): add position relative to InlineCheckbox to prevent s…
Browse files Browse the repository at this point in the history 
…croll (#10537)

* fix(data-table): add position relative to InlineCheckbox to prevent scroll

* test(react): update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@joshblack @kodiakhq
joshblack and kodiakhq[bot] authored Jan 27, 2022
1 parent 7c6a465 commit ac71d17
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 110 deletions.
8 changes: 8 additions & 0 deletions packages/components/src/components/checkbox/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
// to match the specs.
.#{$prefix}--checkbox {
@include hidden;

//even though its hidden, positioning is for native validation to be aligned to checkbox
top: 1.25rem;
left: 0.7rem;
Expand Down Expand Up @@ -198,6 +199,13 @@
// Add extra spacing when label is present
margin: rem(1px) 0 0 rem(6px);
}

//-----------------------------------------------
// InlineCheckbox
//-----------------------------------------------
.#{$prefix}--checkbox--inline {
position: relative;
}
}

@include exports('checkbox') {
Expand Down
176 changes: 98 additions & 78 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,21 +975,25 @@ exports[`DataTable selection should have select-all default to un-checked if no
name="select-all"
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]}
/>
<div
className="bx--checkbox--inline"
>
<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]}
/>
</div>
</ForwardRef(InlineCheckbox)>
</th>
</TableSelectAll>
Expand Down Expand Up @@ -1371,21 +1375,25 @@ exports[`DataTable selection should render 1`] = `
name="select-all"
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]}
/>
<div
className="bx--checkbox--inline"
>
<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]}
/>
</div>
</ForwardRef(InlineCheckbox)>
</th>
</TableSelectAll>
Expand Down Expand Up @@ -1461,22 +1469,26 @@ exports[`DataTable selection should render 1`] = `
name="select-row-b"
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]}
/>
<div
className="bx--checkbox--inline"
>
<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]}
/>
</div>
</ForwardRef(InlineCheckbox)>
</td>
</TableSelectRow>
Expand Down Expand Up @@ -1520,22 +1532,26 @@ exports[`DataTable selection should render 1`] = `
name="select-row-a"
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]}
/>
<div
className="bx--checkbox--inline"
>
<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]}
/>
</div>
</ForwardRef(InlineCheckbox)>
</td>
</TableSelectRow>
Expand Down Expand Up @@ -1579,22 +1595,26 @@ exports[`DataTable selection should render 1`] = `
name="select-row-c"
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]}
/>
<div
className="bx--checkbox--inline"
>
<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]}
/>
</div>
</ForwardRef(InlineCheckbox)>
</td>
</TableSelectRow>
Expand Down
34 changes: 19 additions & 15 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,21 +34,25 @@ exports[`DataTable.TableSelectAll should render 1`] = `
name="select-all"
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]}
/>
<div
className="bx--checkbox--inline"
>
<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]}
/>
</div>
</ForwardRef(InlineCheckbox)>
</th>
</TableSelectAll>
Expand Down
34 changes: 19 additions & 15 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,21 +33,25 @@ exports[`DataTable.TableSelectRow should render 1`] = `
name="select-all"
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]}
/>
<div
className="bx--checkbox--inline"
>
<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]}
/>
</div>
</ForwardRef(InlineCheckbox)>
</td>
</TableSelectRow>
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/InlineCheckbox/InlineCheckbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const InlineCheckbox = React.forwardRef(function InlineCheckbox(
}, [indeterminate]);

return (
<>
<div className={`${prefix}--checkbox--inline`}>
<input {...inputProps} />
{
/* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
Expand All @@ -68,7 +68,7 @@ const InlineCheckbox = React.forwardRef(function InlineCheckbox(
}}
/>
}
</>
</div>
);
});

Expand Down

0 comments on commit ac71d17

Please sign in to comment.