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

fix(data-table): sortable, boolean column, and overflow menu row fixes #6268

Merged
merged 5 commits into from
Jul 1, 2020
+79 −84
Merged

fix(data-table): sortable, boolean column, and overflow menu row fixes #6268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ee10914
fix(data-table-sort): remove positioning discrepancies
emyarod Jun 12, 2020
500514e
fix(data-table-core): keep row heights with overflow menus consistent
emyarod Jun 12, 2020
ee25bc1
fix(data-table-core): keep row height with boolean column consistent
emyarod Jun 12, 2020
0f2b80e
fix(data-table-core): increase compact and short menu trigger height
emyarod Jun 12, 2020
a523eb7
fix(TableHeader): add flex wrapper for sortable headers
emyarod Jun 23, 2020
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
53 changes: 38 additions & 15 deletions packages/components/src/components/data-table/_data-table-core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,16 +134,6 @@
}

// Overflow Menu Overrides
.#{$prefix}--data-table td button.#{$prefix}--overflow-menu {
margin: rem(-7px) 0 rem(-8px);
}

.#{$prefix}--data-table.#{$prefix}--data-table--compact
td
.#{$prefix}--overflow-menu {
margin: 0;
}

.#{$prefix}--data-table
td.#{$prefix}--table-column-menu
.#{$prefix}--overflow-menu[aria-expanded='false']:focus {
Expand Down Expand Up @@ -219,6 +209,25 @@
}
}

.#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu,
.#{$prefix}--data-table--short td.#{$prefix}--table-column-menu {
padding-top: 0;
padding-bottom: 0;
}

.#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu,
.#{$prefix}--data-table--short td.#{$prefix}--table-column-menu {
height: rem(24px);
}

.#{$prefix}--data-table--short td.#{$prefix}--table-column-menu {
height: rem(32px);
}

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

//----------------------------------------------------------------------------
//ZEBRA
//----------------------------------------------------------------------------
Expand Down Expand Up @@ -377,7 +386,7 @@

.#{$prefix}--data-table--compact .#{$prefix}--overflow-menu {
width: rem(32px);
height: rem(23px); //24px row - 1px border
height: 100%;
}

.#{$prefix}--data-table.#{$prefix}--data-table--compact
Expand Down Expand Up @@ -413,16 +422,16 @@
padding-bottom: rem(6px);
}

.#{$prefix}--data-table--short .#{$prefix}--overflow-menu {
height: rem(31px); //32px row - 1px border
}

.#{$prefix}--data-table.#{$prefix}--data-table--short
.#{$prefix}--table-column-checkbox {
padding-top: rem(3px);
padding-bottom: rem(3px);
}

.#{$prefix}--data-table--short .#{$prefix}--overflow-menu {
height: 100%;
}

//----------------------------------------------------------------------------
// Tall
//----------------------------------------------------------------------------
Expand Down Expand Up @@ -540,6 +549,20 @@
}

@include sticky-header($max-width: 100%);

// -------------------
// with boolean column
// -------------------
.#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
margin: 0;
}

.#{$prefix}--data-table--short
.#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
.#{$prefix}--data-table--compact
.#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
margin: rem(-3px) 0;
}
}

@include exports('data-table-v2-core') {
Expand Down
66 changes: 20 additions & 46 deletions packages/components/src/components/data-table/_data-table-sort.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,6 @@
// -------------------------------------
// Sortable table
// -------------------------------------
.#{$prefix}--data-table--sort th,
.#{$prefix}--data-table--sort
th:first-of-type:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-expand) {
padding: 0;
}

.#{$prefix}--data-table--sort th {
height: $layout-04;
border-top: none;
Expand All @@ -33,14 +27,13 @@
// -------------------------------------
.#{$prefix}--table-sort {
@include button-reset(false);
position: relative;
font: inherit;
line-height: 1;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: $text-01;
padding-right: $spacing-05;
min-height: 100%;
background-color: $ui-03;
transition: background-color $duration--fast-01 motion(entrance, productive),
Expand All @@ -61,6 +54,15 @@
opacity: 1;
}

// -------------------------------------
// Th > Button > Span (span required for flex bugs in Safari)
// -------------------------------------
.#{$prefix}--data-table--sort th .#{$prefix}--table-sort__flex {
display: flex;
align-items: center;
height: 100%;
}

// -------------------------------------
//Th > Button > Svg (Sort Icons)
// -------------------------------------
Expand All @@ -74,10 +76,8 @@
}

.#{$prefix}--table-sort__icon-unsorted {
position: relative;
left: rem(2px);
margin-left: $spacing-03;
margin-right: 0;
margin-right: $spacing-05;
opacity: 0;
fill: $ui-05;
width: auto;
Expand All @@ -101,13 +101,11 @@
}

.#{$prefix}--table-sort__icon {
position: relative;
left: rem(2px);
margin-left: $spacing-03;
margin-right: 0;
margin-right: $spacing-05;
transition: transform $transition--base $carbon--standard-easing;
transform: rotate(0);
opacity: 0;
opacity: 1;
fill: $ui-05;
width: auto;
min-width: $layout-01;
Expand All @@ -121,25 +119,11 @@
height: rem(24px);
}

.#{$prefix}--data-table--compact.#{$prefix}--data-table--sort
th
.#{$prefix}--table-sort {
padding-top: 0;
padding-bottom: 0;
}

// Sortable Short
.#{$prefix}--data-table--short.#{$prefix}--data-table--sort th {
height: rem(32px);
}

.#{$prefix}--data-table--short.#{$prefix}--data-table--sort
th
.#{$prefix}--table-sort {
padding-top: 0;
padding-bottom: 0;
}

// Sortable Tall
.#{$prefix}--data-table--tall.#{$prefix}--data-table--sort th {
height: rem(64px);
Expand All @@ -148,29 +132,19 @@
.#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
th
.#{$prefix}--table-sort {
padding-top: 0;
padding-bottom: 0;
display: inline-block;
height: rem(64px);
}

.#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
th
.#{$prefix}--table-sort
svg {
align-self: flex-start;
top: $spacing-03;
.#{$prefix}--table-sort__flex {
align-items: flex-start;
}

.#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
th
.#{$prefix}--table-sort
.#{$prefix}--table-header-label {
align-self: flex-start;
position: relative;
top: rem(-8px);
max-height: 3rem;
display: -webkit-box; // weird text truncation style used
-webkit-line-clamp: 2; // because we need text to wrap
-webkit-box-orient: vertical; // can't use white-space: nowrap
.#{$prefix}--data-table--tall .#{$prefix}--table-sort__icon-unsorted,
.#{$prefix}--data-table--tall .#{$prefix}--table-sort__icon {
margin-top: rem(13px);
}
}

Expand Down
40 changes: 21 additions & 19 deletions packages/react/src/components/DataTable/TableHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,25 +92,27 @@ const TableHeader = React.forwardRef(function TableHeader(
ref={ref}
scope={scope}>
<button className={className} onClick={onClick} {...rest}>
<div className={`${prefix}--table-header-label`}>{children}</div>
<Arrow
className={`${prefix}--table-sort__icon`}
aria-label={t('carbon.table.header.icon.description', {
header: children,
sortDirection,
isSortHeader,
sortStates,
})}
/>
<Arrows
className={`${prefix}--table-sort__icon-unsorted`}
aria-label={t('carbon.table.header.icon.description', {
header: children,
sortDirection,
isSortHeader,
sortStates,
})}
/>
<span className={`${prefix}--table-sort__flex`}>
<div className={`${prefix}--table-header-label`}>{children}</div>
<Arrow
className={`${prefix}--table-sort__icon`}
aria-label={t('carbon.table.header.icon.description', {
header: children,
sortDirection,
isSortHeader,
sortStates,
})}
/>
<Arrows
className={`${prefix}--table-sort__icon-unsorted`}
aria-label={t('carbon.table.header.icon.description', {
header: children,
sortDirection,
isSortHeader,
sortStates,
})}
/>
</span>
</button>
</th>
);
Expand Down
3 changes: 0 additions & 3 deletions packages/react/src/components/DataTable/stories/with-boolean-column-story.scss
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/react/src/components/DataTable/stories/with-boolean-column.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import DataTable, {
TableHeader,
TableRow,
} from '../../DataTable';
import './with-boolean-column-story.scss';

const initialRows = [
{
Expand Down