Skip to content

Commit

Permalink
feat(data-table): add data-table paths and aliases (#2292)
Browse files Browse the repository at this point in the history 
* feat(data-table): add data-table paths and aliases

* chore(data-table): rename to v2, add hidden config for v2 alias
  • Loading branch information
@joshblack
joshblack authored Apr 12, 2019
1 parent dd519be commit 5f9024c
Show file tree
Hide file tree
Showing 25 changed files with 2,936 additions and 2,319 deletions.
534 changes: 1 addition & 533 deletions src/components/data-table-v2/_data-table-v2-action.scss
View file

Large diffs are not rendered by default.

418 changes: 1 addition & 417 deletions src/components/data-table-v2/_data-table-v2-core.scss
View file

Large diffs are not rendered by default.

366 changes: 1 addition & 365 deletions src/components/data-table-v2/_data-table-v2-expandable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,368 +5,4 @@
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/vars';

@mixin data-table-v2-expandable {
tr.#{$prefix}--expandable-row-v2 {
// hide on init
&.#{$prefix}--expandable-row--hidden-v2 {
display: none;
}

> td:first-of-type {
position: relative;

&:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 2px;
background-color: $brand-01;
}
}

+ tr[data-child-row] {
td {
border-top: 0;
padding-bottom: $spacing-xs;
}
}

&:hover {
> td {
background-color: $hover-row;
}

> td:first-of-type {
border-left: 1px solid transparent;
}

> td:last-of-type {
border-right: 1px solid $brand-01;
}

&[data-parent-row] > td {
border-bottom: 0;
}

+ tr[data-child-row] {
> td {
background-color: $hover-row;
border-bottom: 1px solid $brand-01;
border-right: 1px solid $brand-01;
}
}
}
}

tr.#{$prefix}--expandable-row--hover-v2 {
> td {
background-color: $hover-row;
border-top: 1px solid $brand-01;
}

> td:last-of-type {
border-right: 1px solid $brand-01;
}
}

.#{$prefix}--table-expand-v2 {
width: 2.5rem;
}

.#{$prefix}--table-expand-v2[data-previous-value='collapsed'] .#{$prefix}--table-expand-v2__svg {
transform: rotate(90deg);
transition: transform 200ms $carbon--standard-easing;
}

.#{$prefix}--table-expand-v2__button {
@include button-reset(false);

&:focus {
outline: 1px solid transparent;

svg {
box-shadow: inset 0px 0px 0px 1px $brand-01;
}
}
}

.#{$prefix}--table-expand-v2__svg {
fill: $ui-05;
transform: rotate(0deg);
transition: transform 200ms $carbon--standard-easing;
height: 16px;
width: auto;
max-width: 16px;
padding: $spacing-3xs;
}
}

@mixin data-table-expandable--x {
//----------------------------------------------------------------------------
// Parent row
//----------------------------------------------------------------------------
//first row top border
.#{$prefix}--data-table tr.#{$prefix}--parent-row:first-of-type td {
border-top: 1px solid $ui-03;
}

//----------------------------------------------------------------------------
// Child row
//----------------------------------------------------------------------------
// default styles
.#{$prefix}--expandable-row--hidden td {
border-top: 0;
width: auto;
padding: $spacing-05;
}

//child row hidden
tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] {
height: 0;
transition: height $transition--expansion $carbon--standard-easing;
}

tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] td {
padding-top: 0;
padding-bottom: 0;
border: 0;
background-color: $hover-field;
transition: padding $transition--expansion $carbon--standard-easing,
background-color $transition--expansion $carbon--standard-easing;
}

tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] td .#{$prefix}--child-row-inner-container {
overflow: hidden;
max-height: 0;
}

//child row visible
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
transition: height $transition--expansion $carbon--standard-easing;
}

tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
padding-bottom: rem(23px);
transition: padding $transition--expansion $carbon--standard-easing;
}

tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td .#{$prefix}--child-row-inner-container {
max-height: 100%;
}

// bottom border overrides
.#{$prefix}--parent-row.#{$prefix}--expandable-row > td,
.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] > td {
border-bottom: 1px solid transparent;
box-shadow: 0 1px $ui-03;
}

.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] > td {
box-shadow: none;
}

.#{$prefix}--parent-row.#{$prefix}--expandable-row > td:first-of-type {
box-shadow: none; // first td doesn't have a visible border
}

//----------------------------------------------------------------------------
// Hover styles
//----------------------------------------------------------------------------
//hovering on collapsed parent
tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover td {
border-top: 1px solid $hover-field;
border-bottom: 1px solid $hover-field;
}

// hovering on expanded parent
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td {
background-color: $hover-field;
border-top: 1px solid $hover-field;
border-bottom: 1px solid $ui-03;
color: $text-01;
}

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

// child row when hovering on expanded parent
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover + tr[data-child-row] td {
background-color: $hover-field;
color: $text-01;
border-bottom: 1px solid $ui-03;
}

//hovering on expanded child row
tr.#{$prefix}--expandable-row--hover + tr[data-child-row] td {
border-bottom: 1px solid $ui-03;
}

//hovering on expanded child row (class added to parent)
tr.#{$prefix}--expandable-row--hover {
background-color: $hover-field;
}

tr.#{$prefix}--expandable-row--hover td {
background-color: $hover-field;
border-bottom: 1px solid $ui-03;
border-top: 1px solid $hover-field;
color: $text-01;
}

tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover td:first-of-type {
border-bottom: 1px solid $hover-field; // first parent td doesnt have visible bottom border
}

//----------------------------------------------------------------------------
// Expand icon column
//----------------------------------------------------------------------------
.#{$prefix}--data-table td.#{$prefix}--table-expand {
width: 2.5rem;
min-width: 2.5rem;
vertical-align: top;
padding-top: rem(7px);
padding-bottom: 0;
}

@supports (-moz-appearance: none) {
.#{$prefix}--data-table td.#{$prefix}--table-expand {
padding-top: rem(14px);
}
}

.#{$prefix}--table-expand[data-previous-value='collapsed'] .#{$prefix}--table-expand__svg {
transform: rotate(270deg);
transition: transform $transition--expansion $carbon--standard-easing;
}

.#{$prefix}--table-expand__button {
@include button-reset('false');
display: flex;
justify-content: space-around;
height: $layout-03;
width: $layout-01;
}

.#{$prefix}--table-expand__button:focus {
outline: 1px solid transparent;
}

.#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
box-shadow: inset 0px 0px 0px 1px $focus;
}

.#{$prefix}--table-expand__svg {
fill: $ui-05;
transform: rotate(90deg);
transition: transform $transition--expansion $carbon--standard-easing;
}

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 + td::after {
position: absolute;
content: '';
left: 0;
bottom: rem(-1px);
height: rem(1px);
width: rem(8px);
background: $ui-01;
}

tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td.#{$prefix}--table-expand + td::after,
tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover td.#{$prefix}--table-expand + td::after {
background: $hover-field;
}

tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td.#{$prefix}--table-expand + td::after {
display: none;
}

//----------------------------------------------------------------------------
// Selected
//----------------------------------------------------------------------------
// parent collapsed
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:first-of-type td {
background: $ui-03;
border-top: 1px solid $active-01;
border-bottom: 1px solid transparent;
box-shadow: 0 1px $active-01;
}

tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected td {
background: $ui-03;
color: $text-01;
border-bottom: 1px solid transparent;
box-shadow: 0 1px $active-01;
}

tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:last-of-type td {
background: $ui-03;
border-bottom: 1px solid transparent;
box-shadow: 0 1px $ui-03;
}

// parent collapsed hover
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(.#{$prefix}--expandable-row):hover td {
background: $hover-selected-ui;
border-top: 1px solid $hover-selected-ui;
border-bottom: 1px solid transparent;
box-shadow: 0 1px $hover-selected-ui;
}

// parent expanded
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row td,
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row td:first-of-type {
border-bottom: 1px solid transparent;
box-shadow: 0 1px $ui-03; //no visible border when expanded
}

// parent expanded hover
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover td,
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover td:first-of-type,
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover td,
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover td:first-of-type {
background: $hover-selected-ui;
border-top: 1px solid $hover-selected-ui;
border-bottom: 1px solid transparent;
box-shadow: 0 1px $hover-selected-ui;
}

// child row expanded
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + tr[data-child-row] td {
color: $text-01;
background-color: $hover-field;
border-bottom: 1px solid transparent;
box-shadow: 0 1px $active-01;
border-top: 1px solid $active-ui;
}

tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row + tr[data-child-row]:last-of-type td {
box-shadow: inset 0 -1px $active-01;
padding-bottom: rem(24px);
}

// child row expanded hover
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover + tr[data-child-row] td,
tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover + tr[data-child-row] td {
background: $ui-03;
}
}

@include exports('data-table-v2-expandable') {
@if feature-flag-enabled('components-x') {
@include data-table-expandable--x;
} @else {
@include data-table-v2-expandable;
}
}
@import '../data-table/data-table-expandable';
Loading

0 comments on commit 5f9024c

Please sign in to comment.