Skip to content

Commit

Permalink
feat(data-table): add zebra styles (#2262)
Browse files Browse the repository at this point in the history
* feat: add zebra example

* feat: add zebra styles

* fix: remove editable config

* fix: zebra selected even child styles

* fix: regular zebra hover bug

* fix: zebra select hover bug

* fix: zebra select hover bug

* fix: overflow menu td bottom padding

* fix: switch zebra stripe even/odd colors

* fix: remove sortable first column left padding override
  • Loading branch information
jnm2377 authored Apr 8, 2019
1 parent 7123b00 commit ca2a759
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 62 deletions.
45 changes: 42 additions & 3 deletions src/components/data-table-v2/_data-table-v2-core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,10 @@
padding-right: $spacing-03;
}

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

.#{$prefix}--data-table td.#{$prefix}--table-column-menu .#{$prefix}--overflow-menu[aria-expanded='false']:hover {
background: $ui-03;
}
Expand Down Expand Up @@ -323,6 +327,26 @@
top: rem(3px); //used to center svg without setting display flex //display block needed for overflow text truncation
}

//----------------------------------------------------------------------------
//ZEBRA
//----------------------------------------------------------------------------

.#{$prefix}--data-table--zebra tbody tr:nth-child(even) td {
border-bottom: 1px solid $ui-01;
}

.#{$prefix}--data-table--zebra tbody tr:nth-child(odd) td {
background-color: $data-table-zebra-color;
border-bottom: 1px solid $data-table-zebra-color;
border-top: 1px solid $data-table-zebra-color;
}

.#{$prefix}--data-table--zebra tbody tr:hover td {
background-color: $hover-field;
border-bottom: 1px solid $hover-field;
border-top: 1px solid $hover-field;
}

//----------------------------------------------------------------------------
// Select
//----------------------------------------------------------------------------
Expand All @@ -344,25 +368,40 @@
background: $data-table-column-hover;
}

// default selected row
// default selected row + zebra select - even child
.#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected td,
tr.#{$prefix}--data-table--selected td {
color: $text-01;
background-color: $ui-03;
border-top: 1px solid $ui-03;
border-bottom: 1px solid $active-01; //bottom border acts as separator from other rows
}

// first row
.#{$prefix}--data-table--zebra tbody tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
tr.#{$prefix}--data-table--selected:first-of-type td {
border-top: 1px solid $active-01; //top border acts as separator from thead
}

// last row
// last row + zebra select last
.#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected td,
.#{$prefix}--data-table--zebra tbody tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected td,
tr.#{$prefix}--data-table--selected:last-of-type td {
border-top: 1px solid $ui-03; // doesn't need separators
border-bottom: 1px solid $ui-03;
}

// hover
// zebra select - odd child
.#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected td {
border-bottom: 1px solid $active-01;
}

.#{$prefix}--data-table--zebra tbody tr:nth-child(even).#{$prefix}--data-table--selected:hover td {
border-bottom: 1px solid $data-table-column-hover;
}

// hover + zebra select - even child
.#{$prefix}--data-table--zebra tbody tr:nth-child(odd).#{$prefix}--data-table--selected:hover td,
.#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
color: $text-01;
background: $data-table-column-hover;
Expand Down
5 changes: 0 additions & 5 deletions src/components/data-table-v2/_data-table-v2-sort.scss
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,6 @@
padding-right: $spacing-03;
}

.#{$prefix}--data-table--sort th:first-of-type.#{$prefix}--table-column-checkbox,
.#{$prefix}--data-table--sort td:first-of-type {
padding-left: $spacing-04;
}

.#{$prefix}--data-table--sort th:first-of-type .#{$prefix}--table-sort {
padding-left: $spacing-04;
}
Expand Down
94 changes: 41 additions & 53 deletions src/components/data-table-v2/data-table-v2.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -201,12 +201,6 @@ const columnsExpandable = [
},
];

const columnsEditable = columns.slice(1, 7).map((column, i) => ({
...column,
editable: true,
editing: i === 0,
}));

const columnsSmall = columns.slice(1, -1).map(column => ({
...column,
sortable: false,
Expand Down Expand Up @@ -356,39 +350,6 @@ const rowsExpandable = [
},
];

const rowsEditable = [
{
id: 'row-id-15',
name: 'Load Balancer 3',
protocol: 'HTTP',
port: '3000',
rule: 'Round Robin',
attachedGroups: 'Kevins VM Groups',
status: 'Disabled',
},
{
id: 'row-id-11',
name: 'Load Balancer 1',
protocol: 'HTTP',
port: '443',
rule: 'Round Robin',
attachedGroups: 'Maureens VM Groups',
status: 'Starting',
},
{
id: 'row-id-10',
name: 'Load Balancer 2',
protocol: 'HTTP',
port: '80',
rule: 'DNS delegation',
attachedGroups: 'Andrews VM Groups',
status: 'Active',
},
].map((row, i) => ({
...row,
editable: i === 0,
}));

module.exports = {
label: 'Data Table V2',
context: {
Expand Down Expand Up @@ -426,6 +387,47 @@ module.exports = {
sort: true,
},
},
{
name: 'zebra-select',
label: 'Zebra Select',
notes: `
Data Tables are used to represent a collection of resources, displaying a
subset of their fields in columns, or headers.
`,
context: {
state: 'default',
title: 'Table title',
optionalHelper: 'Optional Helper Text',
batchActions,
toolbarActions,
toolbarActionsX,
columns,
rows,
selectedItemsCounterLabel: `
<span data-items-selected>3</span> items selected
`,
searchInputId: 'search__input-2',
searchLabelId: 'search-input-label-1',
searchLabel: 'Search',
clearSearchLabel: 'Clear search input',
addNewLabel: 'Add new',
cancelLabel: 'Cancel',
sortLabel: 'Sort rows by this header in descending order',
hasToolbar: true,
sort: true,
zebra: true,
},
},
{
name: 'zebra',
label: 'Zebra',
context: {
small: true,
columns: columnsSmall,
rows,
zebra: true,
},
},
{
name: 'expandable',
label: 'Expandable',
Expand All @@ -451,20 +453,6 @@ module.exports = {
sortLabel: 'Sort rows by this header in descending order',
},
},
{
name: 'editable',
label: 'Inline Edit',
context: {
title: 'Table title',
columns: columnsEditable,
rows: rowsEditable,
cancelLabel: 'Cancel',
saveLabel: 'Save',
sortLabel: 'Sort rows by this header in descending order',
zebra: true,
sort: true,
},
},
{
name: 'small',
label: 'Small',
Expand Down
2 changes: 1 addition & 1 deletion src/components/data-table-v2/data-table-v2.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@
<section class="{{@root.prefix}}--data-table_inner-container">
{{/if}}
<!-- Table -->
<table class="{{@root.prefix}}--data-table {{#if truncate}}{{@root.prefix}}--data-table--overflow-truncate{{/if}} {{#if sticky}}{{@root.prefix}}--data-table--sticky-header{{/if}} {{#if zebra}} {{@root.prefix}}--data-table--no-border {{@root.prefix}}--data-table--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table--compact{{/if}} {{#if tall}}{{@root.prefix}}--data-table--tall {{/if}}{{#if sort}} {{@root.prefix}}--data-table--sort {{/if}}" >
<table class="{{@root.prefix}}--data-table {{#if truncate}}{{@root.prefix}}--data-table--overflow-truncate{{/if}} {{#if sticky}}{{@root.prefix}}--data-table--sticky-header{{/if}} {{#if zebra}}{{@root.prefix}}--data-table--zebra{{/if}}{{#if small}} {{@root.prefix}}--data-table--compact{{/if}} {{#if tall}}{{@root.prefix}}--data-table--tall {{/if}}{{#if sort}} {{@root.prefix}}--data-table--sort {{/if}}" >
<thead>
<tr>
{{#each columns}}
Expand Down

0 comments on commit ca2a759

Please sign in to comment.