From 7a90da9d6b1aaa5f0cb01cc5b09292fd5fe107b2 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 9 Apr 2024 15:46:33 +0800 Subject: [PATCH] Update WC Admin Homescreen header icons (#46353) * Update admin header icons * Update admin header icons * Add changefile(s) from automation for the following project(s): woocommerce * Fix tests * Fix lint --------- Co-authored-by: github-actions --- .../client/activity-panel/activity-panel.js | 2 - .../display-options/icons/display.js | 54 ++++++------------- .../client/activity-panel/style.scss | 22 ++++++++ .../client/activity-panel/tab/index.js | 1 + .../client/activity-panel/test/index.js | 36 +++++++++---- .../changelog/46353-update-admin-header-icons | 4 ++ 6 files changed, 67 insertions(+), 52 deletions(-) create mode 100644 plugins/woocommerce/changelog/46353-update-admin-header-icons diff --git a/plugins/woocommerce-admin/client/activity-panel/activity-panel.js b/plugins/woocommerce-admin/client/activity-panel/activity-panel.js index be9fb12ac5d..d6c338f164d 100644 --- a/plugins/woocommerce-admin/client/activity-panel/activity-panel.js +++ b/plugins/woocommerce-admin/client/activity-panel/activity-panel.js @@ -338,7 +338,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => { const help = { name: 'help', - title: __( 'Help', 'woocommerce' ), icon: , visible: currentUserCan( 'manage_woocommerce' ) && @@ -374,7 +373,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => { const previewStore = { name: 'previewStore', title: __( 'Preview store', 'woocommerce' ), - icon: , visible: isHomescreen() && query.task !== 'appearance', onClick: () => { window.open( getAdminSetting( 'shopUrl' ) ); diff --git a/plugins/woocommerce-admin/client/activity-panel/display-options/icons/display.js b/plugins/woocommerce-admin/client/activity-panel/display-options/icons/display.js index d79ea4d570a..b9d30082201 100644 --- a/plugins/woocommerce-admin/client/activity-panel/display-options/icons/display.js +++ b/plugins/woocommerce-admin/client/activity-panel/display-options/icons/display.js @@ -1,43 +1,19 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; - export const DisplayIcon = () => ( - <> - + + - - - - - { __( 'Display', 'woocommerce' ) } - + + ); diff --git a/plugins/woocommerce-admin/client/activity-panel/style.scss b/plugins/woocommerce-admin/client/activity-panel/style.scss index 12f89120ab8..c1af35c80c5 100644 --- a/plugins/woocommerce-admin/client/activity-panel/style.scss +++ b/plugins/woocommerce-admin/client/activity-panel/style.scss @@ -161,6 +161,28 @@ } } +.woocommerce-layout:has(.woocommerce-homescreen) { + .woocommerce-layout__activity-panel-tabs { + .woocommerce-layout__activity-panel-tab { + color: var(--wp-admin-theme-color) !important; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 153.846% */ + + + &.has-icon { + padding: 6px 12px; + } + + svg { + fill: #1e1e1e; + } + } + } +} + + .woocommerce-layout__activity-panel-toggle-bubble.has-unread::after { content: " "; position: absolute; diff --git a/plugins/woocommerce-admin/client/activity-panel/tab/index.js b/plugins/woocommerce-admin/client/activity-panel/tab/index.js index 38f0cd43bae..c3abe11be63 100644 --- a/plugins/woocommerce-admin/client/activity-panel/tab/index.js +++ b/plugins/woocommerce-admin/client/activity-panel/tab/index.js @@ -29,6 +29,7 @@ export const Tab = ( { aria-controls={ `activity-panel-${ name }` } key={ tabKey } id={ tabKey } + data-testid={ tabKey } onClick={ () => { onTabClick( name ); } } diff --git a/plugins/woocommerce-admin/client/activity-panel/test/index.js b/plugins/woocommerce-admin/client/activity-panel/test/index.js index b63524bb4e3..8e0f3c4ef3d 100644 --- a/plugins/woocommerce-admin/client/activity-panel/test/index.js +++ b/plugins/woocommerce-admin/client/activity-panel/test/index.js @@ -115,13 +115,15 @@ describe( 'Activity Panel', () => { ); - expect( screen.queryByText( 'Help' ) ).toBeNull(); + expect( screen.queryByTestId( 'activity-panel-tab-help' ) ).toBeNull(); } ); it( 'should render help tab if on home screen', () => { render( ); - expect( screen.getByText( 'Help' ) ).toBeDefined(); + expect( + screen.queryByTestId( 'activity-panel-tab-help' ) + ).toBeDefined(); } ); it( 'should render help tab before options load', async () => { @@ -140,7 +142,9 @@ describe( 'Activity Panel', () => { // Expect that the only tab is "Help". expect( tabs ).toHaveLength( 1 ); - expect( screen.getByText( 'Help' ) ).toBeDefined(); + expect( + screen.queryByTestId( 'activity-panel-tab-help' ) + ).toBeDefined(); } ); it( 'should not render help tab when not on main route', () => { @@ -391,7 +395,7 @@ describe( 'Activity Panel', () => { } ); it( 'should have panel open and panel switching as false by default', () => { - const { queryByText, getByRole } = render( + const { queryByText } = render( { expect( queryByText( '[panelSwitching=false]' ) ).toBeInTheDocument(); - fireEvent.click( getByRole( 'tab', { name: 'Help' } ) ); + fireEvent.click( + screen.queryByTestId( 'activity-panel-tab-help' ) + ); } ); it( 'should allow user to toggle, an individual panel without setting panelSwitching to true', () => { - const { queryByText, getByRole } = render( + const { queryByText } = render( { queryByText( '[panelSwitching=false]' ) ).toBeInTheDocument(); // toggle open - fireEvent.click( getByRole( 'tab', { name: 'Help' } ) ); + fireEvent.click( + screen.queryByTestId( 'activity-panel-tab-help' ) + ); expect( queryByText( '[panelOpen=true]' ) ).toBeInTheDocument(); expect( queryByText( '[panelSwitching=false]' ) ).toBeInTheDocument(); // toggle close - fireEvent.click( getByRole( 'tab', { name: 'Help' } ) ); + fireEvent.click( + screen.queryByTestId( 'activity-panel-tab-help' ) + ); expect( queryByText( '[panelOpen=false]' ) ).toBeInTheDocument(); expect( queryByText( '[panelSwitching=false]' ) @@ -435,7 +445,7 @@ describe( 'Activity Panel', () => { } ); it( 'should remove panel element after clearPanel is triggered', () => { - const { queryByText, getByRole } = render( + const { queryByText } = render( { /> ); // toggle open - fireEvent.click( getByRole( 'tab', { name: 'Help' } ) ); + fireEvent.click( + screen.queryByTestId( 'activity-panel-tab-help' ) + ); expect( queryByText( '[panelOpen=true]' ) ).toBeInTheDocument(); expect( queryByText( '[panelSwitching=false]' ) ).toBeInTheDocument(); // toggle close - fireEvent.click( getByRole( 'tab', { name: 'Help' } ) ); + fireEvent.click( + screen.queryByTestId( 'activity-panel-tab-help' ) + ); expect( queryByText( '[panelOpen=false]' ) ).toBeInTheDocument(); expect( queryByText( '[hasTab=true]' ) ).toBeInTheDocument(); expect( diff --git a/plugins/woocommerce/changelog/46353-update-admin-header-icons b/plugins/woocommerce/changelog/46353-update-admin-header-icons new file mode 100644 index 00000000000..de6aa2caefb --- /dev/null +++ b/plugins/woocommerce/changelog/46353-update-admin-header-icons @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Update WC Admin Homescreen header icons \ No newline at end of file