From 134be1c08b412af138751036dd7213f089e4ce1d Mon Sep 17 00:00:00 2001 From: Paul Sealock Date: Wed, 10 Jun 2020 13:55:06 +1200 Subject: [PATCH] Update/@wordpress components base styles (https://github.com/woocommerce/woocommerce-admin/pull/4427) --- .../woocommerce-admin/bin/packages/build.js | 3 +- .../bin/packages/post-css-config.js | 22 - .../components/report-table/style.scss | 4 + .../client/dashboard/style.scss | 4 + .../client/homepage/stats-overview/style.scss | 49 +- .../homepage/stats-overview/test/index.js | 22 +- .../stats-overview/test/stats-list.js | 2 - .../client/layout/store-alerts/index.js | 2 +- .../client/quick-links/style.scss | 17 +- .../client/stylesheets/abstracts/_colors.scss | 1 + .../stylesheets/abstracts/_variables.scss | 9 +- .../client/stylesheets/shared/_embed.scss | 2 +- .../client/stylesheets/shared/_global.scss | 34 +- .../shared/_gutenberg-components.scss | 3 +- plugins/woocommerce-admin/package-lock.json | 512 ++++++++++++++++-- plugins/woocommerce-admin/package.json | 4 +- .../packages/components/src/chart/index.js | 1 - .../packages/components/src/chart/style.scss | 7 +- .../components/src/compare-filter/button.js | 4 +- .../src/date-range-filter-picker/style.scss | 42 +- .../components/src/dropdown-button/style.scss | 1 + .../components/src/filter-picker/style.scss | 3 +- .../test/__snapshots__/index.js.snap | 258 ++++----- .../components/src/section-header/style.scss | 12 +- .../src/segmented-selection/style.scss | 2 +- .../packages/components/src/summary/number.js | 83 ++- .../components/src/summary/placeholder.js | 18 +- .../components/src/summary/style.scss | 147 ++--- .../packages/components/src/table/table.js | 1 - .../packages/components/src/tag/index.js | 1 - .../src/tag/test/__snapshots__/index.js.snap | 6 +- plugins/woocommerce-admin/postcss.config.js | 4 +- plugins/woocommerce-admin/webpack.config.js | 10 +- 33 files changed, 788 insertions(+), 502 deletions(-) delete mode 100644 plugins/woocommerce-admin/bin/packages/post-css-config.js diff --git a/plugins/woocommerce-admin/bin/packages/build.js b/plugins/woocommerce-admin/bin/packages/build.js index 3358729cff3..f7c708e7e05 100755 --- a/plugins/woocommerce-admin/bin/packages/build.js +++ b/plugins/woocommerce-admin/bin/packages/build.js @@ -139,8 +139,9 @@ function buildScssFile( styleFile ) { .join( ' ' ) + fs.readFileSync( styleFile, 'utf8' ), } ); + const postCSSConfig = require( '../../postcss.config' ).plugins[ 0 ]; const postCSSSync = ( callback ) => { - postcss( require( './post-css-config' ) ) + postcss( postCSSConfig ) .process( builtSass.css, { from: 'src/app.css', to: 'dest/app.css', diff --git a/plugins/woocommerce-admin/bin/packages/post-css-config.js b/plugins/woocommerce-admin/bin/packages/post-css-config.js deleted file mode 100644 index 67caa18d3d0..00000000000 --- a/plugins/woocommerce-admin/bin/packages/post-css-config.js +++ /dev/null @@ -1,22 +0,0 @@ -module.exports = [ - require( '@wordpress/postcss-themes' )( { - defaults: { - primary: '#0085ba', - secondary: '#11a0d2', - toggle: '#11a0d2', - button: '#0085ba', - outlines: '#007cba', - }, - themes: { - 'woocommerce-page': { - primary: '#95588a', - secondary: '#95588a', - toggle: '#95588a', - button: '#95588a', - outlines: '#95588a', - }, - }, - } ), - require( 'autoprefixer' )( { grid: true } ), - require( 'postcss-color-function' ), -]; diff --git a/plugins/woocommerce-admin/client/analytics/components/report-table/style.scss b/plugins/woocommerce-admin/client/analytics/components/report-table/style.scss index 568210335ca..92f7867f4e4 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-table/style.scss +++ b/plugins/woocommerce-admin/client/analytics/components/report-table/style.scss @@ -26,6 +26,10 @@ position: relative; } + .woocommerce-table__compare.components-button { + padding: 8px; + } + &.has-compare, &.has-search { .woocommerce-card__action { diff --git a/plugins/woocommerce-admin/client/dashboard/style.scss b/plugins/woocommerce-admin/client/dashboard/style.scss index e76ba0105f1..d8d492209e5 100644 --- a/plugins/woocommerce-admin/client/dashboard/style.scss +++ b/plugins/woocommerce-admin/client/dashboard/style.scss @@ -58,6 +58,10 @@ padding: $gap; margin: $gap-smaller; + &.components-button { + height: auto; + } + .dashicons-arrow-right-alt { transform: rotate(-45deg); } diff --git a/plugins/woocommerce-admin/client/homepage/stats-overview/style.scss b/plugins/woocommerce-admin/client/homepage/stats-overview/style.scss index 64590c14146..79db6dbd089 100644 --- a/plugins/woocommerce-admin/client/homepage/stats-overview/style.scss +++ b/plugins/woocommerce-admin/client/homepage/stats-overview/style.scss @@ -1,7 +1,6 @@ // Set up some local color variables to make the CSS more clear $outer-border: $core-grey-light-700; $promo-actions-border: $core-grey-light-500; -$action-color: #3858e9; .woocommerce-stats-overview { .woocommerce-card__body { @@ -28,31 +27,7 @@ $action-color: #3858e9; border-bottom: 1px solid $outer-border; .components-button { - display: block; - padding: $gap; width: 33.33%; - margin-bottom: 4px; - - &:focus { - outline: none; - box-shadow: none; - } - - &.is-active { - border-bottom: 4px solid $action-color; - // Avoid the text "jumping" when border-bottom applied. - margin-bottom: 0; - } - - &:first-child { - text-align: left; - padding-right: 0; - } - - &:last-child { - text-align: right; - padding-left: 0; - } } } } @@ -76,6 +51,18 @@ $action-color: #3858e9; .woocommerce-summary__item-container:nth-of-type(even) .woocommerce-summary__item { border-right: none; } + + .woocommerce-summary__item { + background-color: $studio-white; + + &:hover { + background-color: $light-gray-100; + } + + &:active { + background-color: $light-gray-200; + } + } } article.woocommerce-stats-overview__install-jetpack-promo { @@ -95,22 +82,22 @@ article.woocommerce-stats-overview__install-jetpack-promo { padding: 8px 16px; margin: 16px 4px; height: inherit; - color: $action-color; + color: $theme-color; cursor: pointer; line-height: 2; border-radius: 3px; &.is-busy { - background-image: linear-gradient(-45deg, lighten($action-color, 40%) 28%, #fff 0, #fff 72%, lighten($action-color, 40%) 0); + background-image: linear-gradient(-45deg, lighten($theme-color, 40%) 28%, #fff 0, #fff 72%, lighten($theme-color, 40%) 0); cursor: progress; - color: lighten($action-color, 20%); + color: lighten($theme-color, 20%); } } .woocommerce-layout & button.components-button.is-button.is-primary { margin-left: 24px; background: transparent; - border: 1px solid $action-color; + border: 1px solid $theme-color; &:hover, &:focus { @@ -120,8 +107,8 @@ article.woocommerce-stats-overview__install-jetpack-promo { } &.is-busy:not(:disabled) { - background-image: linear-gradient(-45deg, $action-color 28%, darken($action-color, 20%) 0, darken($action-color, 20%) 72%, $action-color 0) !important; - color: $action-color; + background-image: linear-gradient(-45deg, $theme-color 28%, darken($theme-color, 20%) 0, darken($theme-color, 20%) 72%, $theme-color 0) !important; + color: $theme-color; } } } diff --git a/plugins/woocommerce-admin/client/homepage/stats-overview/test/index.js b/plugins/woocommerce-admin/client/homepage/stats-overview/test/index.js index 0cf0a2dc5ed..958078c2edb 100644 --- a/plugins/woocommerce-admin/client/homepage/stats-overview/test/index.js +++ b/plugins/woocommerce-admin/client/homepage/stats-overview/test/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen, waitFor } from '@testing-library/react'; /** * Internal dependencies @@ -76,7 +76,7 @@ describe( 'StatsOverview tracking', () => { } ); describe( 'StatsOverview toggle and persist stat preference', () => { - it( 'should update preferences', () => { + it( 'should update preferences', async () => { const updateCurrentUserData = jest.fn(); render( @@ -97,14 +97,16 @@ describe( 'StatsOverview toggle and persist stat preference', () => { } ); fireEvent.click( totalSalesBtn ); - expect( updateCurrentUserData ).toHaveBeenCalledWith( { - homepage_stats: { - hiddenStats: [ - 'revenue/net_revenue', - 'products/items_sold', - 'revenue/total_sales', - ], - }, + await waitFor( () => { + expect( updateCurrentUserData ).toHaveBeenCalledWith( { + homepage_stats: { + hiddenStats: [ + 'revenue/net_revenue', + 'products/items_sold', + 'revenue/total_sales', + ], + }, + } ); } ); } ); } ); diff --git a/plugins/woocommerce-admin/client/homepage/stats-overview/test/stats-list.js b/plugins/woocommerce-admin/client/homepage/stats-overview/test/stats-list.js index 66b28830e63..c59e8f43b7e 100644 --- a/plugins/woocommerce-admin/client/homepage/stats-overview/test/stats-list.js +++ b/plugins/woocommerce-admin/client/homepage/stats-overview/test/stats-list.js @@ -68,8 +68,6 @@ describe( 'StatsList', () => { ); // Check that there should be two. - expect( screen.getAllByText( 'Previous Period:' ) ).toHaveLength( 2 ); - expect( screen.getAllByText( '0%' ) ).toHaveLength( 2 ); expect( screen.getByText( 'Net Sales' ) ).toBeDefined(); expect( screen.getByText( 'Orders' ) ).toBeDefined(); } ); diff --git a/plugins/woocommerce-admin/client/layout/store-alerts/index.js b/plugins/woocommerce-admin/client/layout/store-alerts/index.js index d6cc7508d35..e42e06e94e2 100644 --- a/plugins/woocommerce-admin/client/layout/store-alerts/index.js +++ b/plugins/woocommerce-admin/client/layout/store-alerts/index.js @@ -70,8 +70,8 @@ class StoreAlerts extends Component { return ( @@ -33,9 +33,9 @@ const CompareButton = ( { ) : ( diff --git a/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss b/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss index deaf7478242..d9e6ee3724f 100644 --- a/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss @@ -22,10 +22,14 @@ height: calc(100% - 42px); .components-tab-panel__tabs { - display: grid; - grid-template-columns: 1fr 1fr; - border-radius: 5px; - margin: 0 1em 1em 1em; + display: flex; + justify-content: space-between; + + .components-button { + display: block; + text-align: center; + width: 50%; + } } .components-tab-panel__tab-content { @@ -39,36 +43,6 @@ @include set-grid-item-position( 2, 2 ); } -button.woocommerce-filters-date__tab { - outline: none; - border: 1px solid $studio-pink; - padding: $gap-smaller; - margin: 0; - border-radius: 4px 0 0 4px; - color: $studio-pink; - background-color: transparent; - justify-content: center; - - &:hover { - background-color: lighten($studio-pink, 50%); - cursor: pointer; - } - - &:last-child { - border-radius: 0 4px 4px 0; - } - - &.is-active, - &.is-active:focus { - background-color: $studio-pink; - color: $studio-white; - } - - &:focus { - box-shadow: inset 0 -1px 0 $button-focus-inner, 0 0 0 2px $button-focus-outer; - } -} - .woocommerce-filters-date__text { @include font-size( 12 ); font-weight: 100; diff --git a/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss b/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss index 80a4e5af98e..a32f1131136 100644 --- a/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss @@ -8,6 +8,7 @@ border-radius: 4px; padding: 0 40px 0 0; width: 100%; + height: auto; &::after { content: ''; diff --git a/plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss b/plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss index 0af1b7d957f..418921f780e 100644 --- a/plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss @@ -23,11 +23,12 @@ } .woocommerce-filters-filter__content-list-item { + border: 1px solid transparent; border-bottom: 1px solid $core-grey-light-700; margin: 0; &:last-child { - border-bottom: none; + border-bottom: 1px solid transparent; } &.is-selected { diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap index b03de0faddd..50500bbc0ce 100644 --- a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap +++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap @@ -55,7 +55,7 @@ exports[`SearchListControl should render a search box and list of hierarchical o > diff --git a/plugins/woocommerce-admin/packages/components/src/tag/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/tag/test/__snapshots__/index.js.snap index 3fe0a65eadf..26b32594aa0 100644 --- a/plugins/woocommerce-admin/packages/components/src/tag/test/__snapshots__/index.js.snap +++ b/plugins/woocommerce-admin/packages/components/src/tag/test/__snapshots__/index.js.snap @@ -67,14 +67,14 @@ exports[`Tag should render a tag with a clos