From ff8217165da63625873ae1d5ffa52e5e7aa6038d Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 13 Aug 2018 11:25:32 -0400 Subject: [PATCH] Table: Update style to match design (https://github.com/woocommerce/woocommerce-admin/pull/289) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Table: Add a hover state for rows * Expand target area for table links to take over entire cell * Add a purple link style for default links * Increase contrast for links-on-hover-color * Add “isNumeric” column identifier & right-align these cols --- .../client/analytics/report/revenue.js | 6 +++ .../components/filter-picker/style.scss | 47 ++++++++++--------- .../client/components/table/README.md | 1 + .../client/components/table/style.scss | 30 +++++++++++- .../client/components/table/table.js | 27 ++++++----- .../client/stylesheets/shared/_global.scss | 21 +++++++++ 6 files changed, 96 insertions(+), 36 deletions(-) diff --git a/plugins/woocommerce-admin/client/analytics/report/revenue.js b/plugins/woocommerce-admin/client/analytics/report/revenue.js index 706a33fea02..81b4307f190 100644 --- a/plugins/woocommerce-admin/client/analytics/report/revenue.js +++ b/plugins/woocommerce-admin/client/analytics/report/revenue.js @@ -87,36 +87,42 @@ class RevenueReport extends Component { key: 'gross_revenue', required: true, isSortable: true, + isNumeric: true, }, { label: __( 'Refunds', 'wc-admin' ), key: 'refunds', required: false, isSortable: true, + isNumeric: true, }, { label: __( 'Coupons', 'wc-admin' ), key: 'coupons', required: false, isSortable: true, + isNumeric: true, }, { label: __( 'Taxes', 'wc-admin' ), key: 'taxes', required: false, isSortable: false, // For example + isNumeric: true, }, { label: __( 'Shipping', 'wc-admin' ), key: 'shipping', required: false, isSortable: true, + isNumeric: true, }, { label: __( 'Net Revenue', 'wc-admin' ), key: 'net_revenue', required: false, isSortable: true, + isNumeric: true, }, ]; } diff --git a/plugins/woocommerce-admin/client/components/filter-picker/style.scss b/plugins/woocommerce-admin/client/components/filter-picker/style.scss index 71995d2ecf2..58df78c009a 100644 --- a/plugins/woocommerce-admin/client/components/filter-picker/style.scss +++ b/plugins/woocommerce-admin/client/components/filter-picker/style.scss @@ -74,30 +74,33 @@ } } } -} -.woocommerce-filter-picker__content-list-item-btn { - padding: 1em 1em 1em 3em; - display: block; - width: 100%; - text-align: left; - background-color: $core-grey-light-100; - color: $core-grey-dark-500; - position: relative; - - &:hover { - background-color: $core-grey-light-200; - color: $core-grey-dark-500; - } - - &.components-button:not(:disabled):not([aria-disabled='true']):focus { + .woocommerce-filter-picker__content-list-item-btn { + position: relative; + display: block; + width: 100%; + padding: 1em 1em 1em 3em; background-color: $core-grey-light-100; - } + text-align: left; - .dashicon { - position: absolute; - left: 1em; - top: 50%; - transform: translate(0, -50%); + &.components-button { + color: $core-grey-dark-500; + } + + &:hover { + background-color: $core-grey-light-200; + color: $core-grey-dark-500; + } + + &.components-button:not(:disabled):not([aria-disabled='true']):focus { + background-color: $core-grey-light-100; + } + + .dashicon { + position: absolute; + left: 1em; + top: 50%; + transform: translate(0, -50%); + } } } diff --git a/plugins/woocommerce-admin/client/components/table/README.md b/plugins/woocommerce-admin/client/components/table/README.md index a06b35aa10d..fc2eb7f3b2a 100644 --- a/plugins/woocommerce-admin/client/components/table/README.md +++ b/plugins/woocommerce-admin/client/components/table/README.md @@ -50,6 +50,7 @@ render: function() { * `className`: Optional additional classes * `headers`: An array of column headers, as objects with the following properties: * `headers[].defaultSort`: Boolean, true if this column is the default for sorting. Only one column should have this set. + * `headers[].isNumeric`: Boolean, true if this column is a number value. * `headers[].isSortable`: Boolean, true if this column is sortable. * `headers[].key`: The API parameter name for this column, passed to `orderby` when sorting via API. * `headers[].label`: The display label for this column. diff --git a/plugins/woocommerce-admin/client/components/table/style.scss b/plugins/woocommerce-admin/client/components/table/style.scss index 77a4a1e452c..d8739452491 100644 --- a/plugins/woocommerce-admin/client/components/table/style.scss +++ b/plugins/woocommerce-admin/client/components/table/style.scss @@ -25,6 +25,11 @@ border-collapse: collapse; width: 100%; } + + tr:hover, + tr:focus-within { + background-color: $core-grey-light-200; + } } .woocommerce-table__header, @@ -32,6 +37,29 @@ padding: $gap $gap-large; border-bottom: 1px solid $core-grey-light-500; text-align: left; + + a { + display: block; + margin: ($gap*-1) ($gap-large*-1); + padding: $gap $gap-large; + + &:hover, + &:focus { + color: $woocommerce-700; + } + + &:focus { + box-shadow: none; + } + } + + &.is-numeric { + text-align: right; + + button { + justify-content: flex-end; + } + } } .woocommerce-table__header, @@ -50,9 +78,9 @@ th.woocommerce-table__item { } .components-button.is-button { - padding: $gap-smaller $gap $gap-smaller 0; height: auto; width: 100%; + padding: $gap-smaller $gap-large $gap-smaller 0; vertical-align: middle; line-height: 1; border: none; diff --git a/plugins/woocommerce-admin/client/components/table/table.js b/plugins/woocommerce-admin/client/components/table/table.js index fa6b42262d6..0953da5b16b 100644 --- a/plugins/woocommerce-admin/client/components/table/table.js +++ b/plugins/woocommerce-admin/client/components/table/table.js @@ -85,11 +85,12 @@ class Table extends Component { { headers.map( ( header, i ) => { - const { isSortable, key, label } = header; + const { isSortable, isNumeric, key, label } = header; const thProps = { className: classnames( 'woocommerce-table__header', { 'is-sortable': isSortable, 'is-sorted': sortedBy === key, + 'is-numeric': isNumeric, } ), }; if ( isSortable ) { @@ -135,18 +136,18 @@ class Table extends Component { { rows.map( ( row, i ) => ( - { row.map( - ( cell, j ) => - rowHeader === j ? ( - - { getDisplay( cell ) } - - ) : ( - - { getDisplay( cell ) } - - ) - ) } + { row.map( ( cell, j ) => { + const { isNumeric } = headers[ j ]; + const Cell = rowHeader === j ? 'th' : 'td'; + const cellClasses = classnames( 'woocommerce-table__item', { + 'is-numeric': isNumeric, + } ); + return ( + + { getDisplay( cell ) } + + ); + } ) } ) ) } diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss index 23c2d9a7934..3233f2fc112 100644 --- a/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss +++ b/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss @@ -29,3 +29,24 @@ opacity: 0.7; } } + +.woocommerce-layout { + a:link, + a:visited, + .components-button.is-link { + color: $woocommerce-500; + } + + a:hover, + a:active, + a:focus, + .components-button.is-link:hover, + .components-button.is-link:active, + .components-button.is-link:focus { + color: $woocommerce-400; + } + + a:focus { + box-shadow: 0 0 0 1px $woocommerce-300, 0 0 2px 1px rgba($woocommerce-300, 0.8); + } +}