Skip to content

Commit

Permalink
fix(DataTable): address spacing and alignment issues (#6197)
Browse files Browse the repository at this point in the history 
* fix(TableHeader): convert spans to divs

* fix(data-table-expandable): correct alignment of expand buttons

* docs(data-table): resize expanded row content

* fix(data-table-core): remove extra checkbox column padding

* docs(data-table): remove checkbox wrapper margins

* fix(TableSelectRow): reduce radio button column width

* chore: update snapshots

* fix(data-table-expandable): increase expansion button vertical padding

* fix(data-table-expandable): set bottom border on hover

* fix(data-table-core): center elements in non-tall tr's

* docs(with-boolean-column): use hideLabel prop

* fix(data-table): remove extra vertical padding
  • Loading branch information
@emyarod
emyarod committed Jun 12, 2020
1 parent 334dd62 commit 946680c
Show file tree
Hide file tree
Showing 14 changed files with 126 additions and 93 deletions.
39 changes: 25 additions & 14 deletions packages/components/src/components/data-table/_data-table-core.scss
View file
Expand Up @@ -87,7 +87,7 @@

.#{$prefix}--data-table th,
.#{$prefix}--data-table td {
vertical-align: top;
vertical-align: middle;
text-align: left;
}

Expand All @@ -108,8 +108,8 @@
}

.#{$prefix}--data-table .#{$prefix}--table-header-label {
display: block;
padding: rem(14px) $spacing-05;
padding-left: $spacing-05;
padding-right: $spacing-05;
text-align: left;
}

Expand All @@ -119,8 +119,8 @@
color: $text-02;
border-top: 1px solid $ui-01;
border-bottom: 1px solid $ui-03;
padding: rem(14px) $spacing-05;
padding-bottom: rem(13px);
padding-left: $spacing-05;
padding-right: $spacing-05;

+ td:first-of-type {
padding-left: $spacing-04;
Expand Down Expand Up @@ -259,22 +259,33 @@
// Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position
position: static;
background: $ui-03;
padding: rem(12px) $spacing-03 0 $spacing-05;
padding-left: $spacing-05;
padding-right: $spacing-05;
width: rem(
44px
); // 16px padding left + 8px padding right + 20px checkbox width
transition: background-color $duration--fast-01 motion(entrance, productive);
}

.#{$prefix}--data-table td.#{$prefix}--table-column-checkbox {
padding-top: rem(11px);
padding-bottom: 0;
.#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox {
padding-top: rem(13px);
}

.#{$prefix}--data-table--tall .#{$prefix}--table-column-radio {
padding-top: $spacing-05;
}

.#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
background: $data-table-column-hover;
}

//----------------------------------------------------------------------------
// Radio
//----------------------------------------------------------------------------
.#{$prefix}--table-column-radio {
width: 48px;
}

// default selected row + zebra select - even child
.#{$prefix}--data-table--zebra
tbody
Expand Down Expand Up @@ -431,13 +442,13 @@
padding-top: 1rem;
}

.#{$prefix}--data-table--cell-secondary-text {
@include type-style('label-01');
.#{$prefix}--data-table--tall th,
.#{$prefix}--data-table--tall td {
vertical-align: top;
}

.#{$prefix}--data-table.#{$prefix}--data-table--tall
.#{$prefix}--table-column-checkbox {
padding-top: rem(12px);
.#{$prefix}--data-table--cell-secondary-text {
@include type-style('label-01');
}

//----------------------------------------------------------------------------
Expand Down
38 changes: 14 additions & 24 deletions packages/components/src/components/data-table/_data-table-expandable.scss
View file
Expand Up @@ -120,7 +120,7 @@
}

tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type {
border-bottom: 1px solid transparent; // first td doesn't have a visible border
border-bottom: 1px solid $hover-ui; // first td doesn't have a visible border
}

// child row when hovering on expanded parent
Expand Down Expand Up @@ -160,12 +160,20 @@
.#{$prefix}--data-table td.#{$prefix}--table-expand {
width: 2.5rem;
min-width: 2.5rem;
height: 3rem;
vertical-align: top;
padding: 0;
border-bottom: 1px solid $ui-03;
}

.#{$prefix}--data-table td.#{$prefix}--table-expand,
th.#{$prefix}--table-expand {
padding: 0 $spacing-05;
}

.#{$prefix}--data-table--tall td.#{$prefix}--table-expand,
.#{$prefix}--data-table--tall th.#{$prefix}--table-expand {
padding-top: rem(16px);
padding-bottom: rem(16px);
}

.#{$prefix}--data-table
td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
border-bottom: 1px solid transparent;
Expand All @@ -179,15 +187,8 @@

.#{$prefix}--table-expand__button {
@include button-reset('false');
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
width: 100%;
}

.#{$prefix}--data-table--short .#{$prefix}--table-expand__button {
height: auto;
height: rem(16px);
vertical-align: inherit;
}

.#{$prefix}--table-expand__button:focus {
Expand All @@ -204,17 +205,6 @@
transition: transform $duration--moderate-01 motion(standard, productive);
}

th.#{$prefix}--table-expand {
position: relative;
vertical-align: middle;
padding-left: $spacing-05;
padding-right: $spacing-05;
}

th.#{$prefix}--table-expand + th.#{$prefix}--table-column-checkbox {
padding-left: $spacing-03;
}

// fix expanded parent separating border length
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
td.#{$prefix}--table-expand
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/DataTable/TableHeader.js
View file
Expand Up @@ -70,7 +70,7 @@ const TableHeader = React.forwardRef(function TableHeader(
scope={scope}
colSpan={colSpan}
ref={ref}>
<span className={`${prefix}--table-header-label`}>{children}</span>
<div className={`${prefix}--table-header-label`}>{children}</div>
</th>
);
}
Expand All @@ -92,7 +92,7 @@ const TableHeader = React.forwardRef(function TableHeader(
ref={ref}
scope={scope}>
<button className={className} onClick={onClick} {...rest}>
<span className={`${prefix}--table-header-label`}>{children}</span>
<div className={`${prefix}--table-header-label`}>{children}</div>
<Arrow
className={`${prefix}--table-sort__icon`}
aria-label={t('carbon.table.header.icon.description', {
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/DataTable/TableSelectRow.js
View file
Expand Up @@ -33,6 +33,7 @@ const TableSelectRow = ({
const InlineInputComponent = radio ? RadioButton : InlineCheckbox;
const tableSelectRowClasses = classNames(`${prefix}--table-column-checkbox`, {
[className]: className,
[`${prefix}--table-column-radio`]: radio,
});
return (
<td className={tableSelectRowClasses}>
Expand Down
54 changes: 27 additions & 27 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Expand Up @@ -142,11 +142,11 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field A
</span>
</div>
</th>
</TableHeader>
<TableHeader
Expand All @@ -161,11 +161,11 @@ exports[`DataTable selection -- radio buttons should not have select-all checkbo
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field B
</span>
</div>
</th>
</TableHeader>
</tr>
Expand Down Expand Up @@ -489,11 +489,11 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field A
</span>
</div>
</th>
</TableHeader>
<TableHeader
Expand All @@ -508,11 +508,11 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field B
</span>
</div>
</th>
</TableHeader>
</tr>
Expand All @@ -539,7 +539,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
radio={true}
>
<td
className="bx--table-column-checkbox"
className="bx--table-column-checkbox bx--table-column-radio"
>
<ForwardRef(RadioButton)
checked={false}
Expand Down Expand Up @@ -625,7 +625,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
radio={true}
>
<td
className="bx--table-column-checkbox"
className="bx--table-column-checkbox bx--table-column-radio"
>
<ForwardRef(RadioButton)
checked={false}
Expand Down Expand Up @@ -711,7 +711,7 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
radio={true}
>
<td
className="bx--table-column-checkbox"
className="bx--table-column-checkbox bx--table-column-radio"
>
<ForwardRef(RadioButton)
checked={false}
Expand Down Expand Up @@ -989,11 +989,11 @@ exports[`DataTable selection should have select-all default to un-checked if no
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field A
</span>
</div>
</th>
</TableHeader>
<TableHeader
Expand All @@ -1008,11 +1008,11 @@ exports[`DataTable selection should have select-all default to un-checked if no
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field B
</span>
</div>
</th>
</TableHeader>
</tr>
Expand Down Expand Up @@ -1391,11 +1391,11 @@ exports[`DataTable selection should render 1`] = `
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field A
</span>
</div>
</th>
</TableHeader>
<TableHeader
Expand All @@ -1410,11 +1410,11 @@ exports[`DataTable selection should render 1`] = `
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field B
</span>
</div>
</th>
</TableHeader>
</tr>
Expand Down Expand Up @@ -2523,11 +2523,11 @@ exports[`DataTable should render 1`] = `
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field A
</span>
</div>
</th>
</TableHeader>
<TableHeader
Expand All @@ -2542,11 +2542,11 @@ exports[`DataTable should render 1`] = `
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field B
</span>
</div>
</th>
</TableHeader>
</tr>
Expand Down Expand Up @@ -3516,11 +3516,11 @@ exports[`DataTable sticky header should render 1`] = `
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field A
</span>
</div>
</th>
</TableHeader>
<TableHeader
Expand All @@ -3535,11 +3535,11 @@ exports[`DataTable sticky header should render 1`] = `
<th
scope="col"
>
<span
<div
className="bx--table-header-label"
>
Field B
</span>
</div>
</th>
</TableHeader>
</tr>
Expand Down

0 comments on commit 946680c

Please sign in to comment.