Skip to content

Commit

Permalink
feat(data-table-v2): add inline edit styles for cell (#780)
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshblack @tw15egan
joshblack authored and tw15egan committed May 18, 2018
1 parent fcc1ba5 commit f32f476
Show file tree
Hide file tree
Showing 2 changed files with 444 additions and 0 deletions.
355 changes: 355 additions & 0 deletions src/components/data-table-v2/_data-table-v2-inline-edit-cell.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,355 @@
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/import-once';
@import '../../globals/scss/layer';
@import '../../globals/scss/layout';

@mixin assistive-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
visibility: visible;
white-space: nowrap;
}

@include exports('data-table-v2-inline-edit-cell') {
// Spacing for cells that are the first in their row
$spacing--columns--first: 1.5rem;
// Spacing before columns in cell
$spacing--columns--before: 0.75rem;
// Spacing for activity areas in a cell, namely status and actions
$spacing--cell--activity: 3.5rem;
// Offset used on input nodes to offer space to activity indicators such that
// the input doesn't overlap with the status
$spacing--cell--status: 2rem;

//----------------------------------------------------------------------------
// Table
//----------------------------------------------------------------------------

// Reset hover styles while editing
.#{$prefix}--data-table--editing tr:hover td {
background-color: inherit;
border-top: 1px solid $ui-04;
border-bottom: 1px solid $ui-04;
}

.#{$prefix}--data-table--editing tr:hover td:first-of-type {
border-left: 1px solid $ui-04;
}

.#{$prefix}--data-table--editing tr:hover td:last-of-type {
border-right: 1px solid $ui-04;
}

//----------------------------------------------------------------------------
// Cell Edit
//----------------------------------------------------------------------------

// Buffer is created on the right-hand side so that status indicators have the
// appropriate space to display.
.#{$prefix}--data-table-cell--editable {
position: relative;
padding-right: $spacing--cell--activity;
}

td.#{$prefix}--data-table-cell--editable:last-of-type {
// Reset the styles inherited from data-table-v2 for padding-right styles
// but adding our manual offset plus the spacing used before columns to get
// a similar look for when an editable cell is in the middle of a table.
padding-right: #{$spacing--cell--activity + $spacing--columns--before};
}

// Minor offset for the last cell in a row so that the action bar does not
// touch the edge of the cell
td.#{$prefix}--data-table-cell--editable:last-of-type > .#{$prefix}--data-table-cell__activity {
margin-right: $spacing--columns--before;
}

//----------------------------------------------------------------------------
// Cell Edit - Content
//----------------------------------------------------------------------------
.#{$prefix}--data-table-cell__content {
position: relative;
z-index: 1000;
// Set line-height to match that within inputs
line-height: normal;
}

//----------------------------------------------------------------------------
// Cell Edit - Activity
//----------------------------------------------------------------------------

// Styles used for getting 100% width and height on an descendant of a table
// cell. Display is used for alignment of most items to the end of the cell
.#{$prefix}--data-table-cell__activity {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
left: 0;
}

//----------------------------------------------------------------------------
// Cell Edit - Trigger
//----------------------------------------------------------------------------

.#{$prefix}--data-table-cell__edit {
@include button-reset(false);
opacity: 0;
}

.#{$prefix}--data-table-cell__edit:focus,
.#{$prefix}--data-table-cell--editable:hover .#{$prefix}--data-table-cell__edit {
opacity: 1;
}

.#{$prefix}--data-table-cell__icon--edit {
fill: $ui-05;
}

.#{$prefix}--data-table-cell__edit:active > .#{$prefix}--data-table-cell__icon--edit {
fill: $brand-01;
}

.#{$prefix}--data-table-cell__edit:focus {
outline: 1px solid $brand-01;
outline-offset: 2px;
}

//----------------------------------------------------------------------------
// Cell Edit - Fields // Inputs
//----------------------------------------------------------------------------

.#{$prefix}--data-table__edit-field {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
}

.#{$prefix}--data-table__edit-field > label.#{$prefix}--label {
@include assistive-text();
}

// Spacing resets on inputs

// All inputs should span as much height and width as possible, but should
// still buffer the right hand side with some padding to allow space for
// status indicators to render without clipping the input content
.#{$prefix}--data-table__edit-field > input {
min-height: 100%;
min-width: 100%;
padding: 0 $spacing--cell--status 0 0;
}

// Set the default padding on the left-hand side of the input to match what is
// given by the default table class. Visually this makes it look like the
// content is aligned with the other cells in the table.
td.#{$prefix}--data-table-cell--editable input {
padding-left: $spacing--columns--before;
}

// Substitute the left-hand padding for the padding specified on the first td
// of each row
td.#{$prefix}--data-table-cell--editable:first-of-type input {
padding-left: $spacing--columns--first;
}

//----------------------------------------------------------------------------
// Cell Edit - Actions
//----------------------------------------------------------------------------

// Spacing that should exist around, and in-between, elements in the action
// bar
$spacing--cell-actions: 0.5rem;
$size--edit-actions--height: 3rem;

.#{$prefix}--data-table__edit-actions {
@include layer('overlay');

display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: $size--edit-actions--height;
right: 0;
bottom: 0;
height: $size--edit-actions--height;
background-color: $inverse-01;
padding: $spacing--cell-actions;
z-index: z('overlay');
}

// Undo default margin-left from btn classes
.#{$prefix}--data-table__edit-actions .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary {
margin-left: $spacing--cell-actions;
}

//----------------------------------------------------------------------------
// Cell Edit - Status
//----------------------------------------------------------------------------

// Containing node
.#{$prefix}--data-table__edit-status {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: 0;
// Value should be 0.5rem, but doing so will cause the loading box to clip
// the bounding box of the last cells in a row. This will cause the
// overflow-x scrollbar to behave erratically as it constantly shifts to
// adjust to the new width of the table
right: 1rem;
bottom: 0;
left: 0;
}

// Status - Saving -----------------------------------------------------------

.#{$prefix}--data-table-cell--saving {
cursor: not-allowed;
}

// Cell should go to 25% opacity when saving
.#{$prefix}--data-table-cell--saving input {
background-color: inherit;
opacity: 0.25;
}

// Manually center the loading indicator given the offset of its bounding box
.#{$prefix}--data-table-cell--saving .#{$prefix}--loading {
position: relative;
left: rem(7px);
}

// Status - Success ----------------------------------------------------------
.#{$prefix}--data-table__icon--success {
fill: $support-02;
}

// Status - Error ------------------------------------------------------------

.#{$prefix}--data-table__status--error {
display: flex;
justify-content: flex-end;
align-items: center;
fill: $support-01;
width: 100%;
height: 100%;
}

.#{$prefix}--data-table__edit-field--error {
border-bottom: 2px solid $support-01;
}

.#{$prefix}--data-table__status--error {
position: relative;
}

.#{$prefix}--data-table__error-text {
@include layer('overlay');

position: absolute;
top: rem(-1px);
right: -1rem;
color: $support-01;
// TODO: sync with caption sizes
font-size: rem(12px);
background-color: $inverse-01;
padding: 1rem;
transform: translateY(-100%);
border: 1px solid $ui-03;
z-index: 1000;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
opacity: 0;
}

.#{$prefix}--data-table__error-text::after {
content: '';
position: absolute;
// Manually offset and center triangle
right: 1rem;
// TODO: shift down half of height
bottom: -7px;
width: rem(10px);
height: rem(10px);
background-color: $inverse-01;
border: 1px solid $ui-03;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
transform: rotate(45deg);
z-index: 10;
opacity: 0;
}

.#{$prefix}--data-table__icon--error {
z-index: 1000;
}

.#{$prefix}--data-table__status--error {
// Specify outline on child SVG node instead
outline: none;
}

.#{$prefix}--data-table__status--error:focus .#{$prefix}--data-table__error-text {
box-shadow: 0 0 0 1px $brand-01;
}

.#{$prefix}--data-table__status--error:focus .#{$prefix}--data-table__error-text::after {
border-right-color: $brand-01;
border-bottom-color: $brand-01;
}

// Visually show the error message

// Display the text area itself on hover
.#{$prefix}--data-table__icon--error:hover
~ .#{$prefix}--data-table__error-text,

// Display text area triangle on hover
.#{$prefix}--data-table__icon--error:hover
~ .#{$prefix}--data-table__error-text::after,

// Display text area on focus
.#{$prefix}--data-table__status--error:focus
> .#{$prefix}--data-table__error-text,

// Display text area triangle on focus
.#{$prefix}--data-table__status--error:focus
> .#{$prefix}--data-table__error-text::after,

// Display when user is typing in edit field
.#{$prefix}--data-table__edit-field--editing.#{$prefix}--data-table__edit-field--error +
.#{$prefix}--data-table__edit-status .#{$prefix}--data-table__error-text,

.#{$prefix}--data-table__edit-field--editing.#{$prefix}--data-table__edit-field--error +
.#{$prefix}--data-table__edit-status
.#{$prefix}--data-table__error-text::after {
opacity: 1;
}

//----------------------------------------------------------------------------
// Browser Quirks
//----------------------------------------------------------------------------

// IE11 - cells are not going full height. Set min-height to compensate
.#{$prefix}--data-table__edit-field,
.#{$prefix}--data-table-cell__activity,
.#{$prefix}--data-table__edit-status {
min-height: 3rem;
}
}
Loading

0 comments on commit f32f476

Please sign in to comment.