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 <github-actions@github.com>

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: <Icon icon={ helpIcon } />,
 			visible:
 				currentUserCan( 'manage_woocommerce' ) &&
@@ -374,7 +373,6 @@ export const ActivityPanel = ( { isEmbedded, query } ) => {
 		const previewStore = {
 			name: 'previewStore',
 			title: __( 'Preview store', 'woocommerce' ),
-			icon: <Icon icon={ external } />,
 			visible: isHomescreen() && query.task !== 'appearance',
 			onClick: () => {
 				window.open( getAdminSetting( 'shopUrl' ) );

plugins/woocommerce-admin/client/activity-panel/display-options/icons/display.js

@@ -1,43 +1,19 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 export const DisplayIcon = () => (
-	<>
+	<svg
-		<svg
+		width="24"
-			className="woocommerce-layout__activity-panel-tab-icon"
+		height="24"
-			width="24"
+		viewBox="0 0 24 24"
-			height="24"
+		fill="none"
-			viewBox="3 3 24 24"
+		xmlns="http://www.w3.org/2000/svg"
-			fill="none"
+	>
-			xmlns="http://www.w3.org/2000/svg"
+		<g id="block-template-part-sidebar">
-		>
 			<path
-				d="M13.8053 15.3982C13.8053 15.7965 13.4867 16.1947 13.0089 16.1947H6.79646C6.55752 16.1947 6.39823 16.115 6.23894 15.9558C6.07965 15.7965 6 15.6372 6 15.3982V6.79646C6 6.63717 6.15929 6.39823 6.23894 6.23894C6.39823 6.07965 6.55752 6 6.79646 6H13.0089C13.4071 6 13.8053 6.31858 13.8053 6.79646V15.3982Z"
+				id="Shape"
-				strokeWidth="1.5"
+				fillRule="evenodd"
-				strokeLinecap="round"
+				clipRule="evenodd"
-				strokeLinejoin="round"
+				d="M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4ZM18 5.5H6C5.72386 5.5 5.5 5.72386 5.5 6V9H18.5V6C18.5 5.72386 18.2761 5.5 18 5.5ZM18.5 10.5H10L10 18.5H18C18.2761 18.5 18.5 18.2761 18.5 18V10.5Z"
+				fill="#1E1E1E"
 			/>
-			<path
+		</g>
-				d="M23.9203 10.6195C23.9203 11.0177 23.6017 11.4159 23.1238 11.4159H16.9115C16.6725 11.4159 16.5132 11.3363 16.3539 11.177C16.1946 11.0177 16.115 10.8584 16.115 10.6195V6.79646C16.115 6.39823 16.4336 6 16.9115 6H23.1238C23.5221 6 23.9203 6.31858 23.9203 6.79646V10.6195Z"
+	</svg>
-				strokeWidth="1.5"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-			<path
-				d="M13.8053 23.2035C13.8053 23.4424 13.7257 23.6017 13.5664 23.761C13.4071 23.9203 13.2478 23.9999 13.0089 23.9999H6.79646C6.39823 23.9999 6 23.6813 6 23.2035V19.3804C6 19.1415 6.07965 18.9822 6.23894 18.8229C6.39823 18.6636 6.55752 18.584 6.79646 18.584H13.0089C13.4071 18.584 13.8053 18.9026 13.8053 19.3804V23.2035Z"
-				strokeWidth="1.5"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-			<path
-				d="M16.9912 23.9999C16.7522 23.9999 16.5929 23.9202 16.4336 23.7609C16.2743 23.6016 16.1947 23.4423 16.1947 23.2034V14.6016C16.1947 14.3627 16.2743 14.2034 16.4336 14.0441C16.5929 13.8848 16.7522 13.8052 16.9912 13.8052H23.2036C23.4425 13.8052 23.6018 13.8848 23.7611 14.0441C23.9204 14.2034 24 14.3627 24 14.6016V23.2034C24 23.6016 23.6814 23.9999 23.2036 23.9999H16.9912Z"
-				strokeWidth="1.5"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-		</svg>
-		{ __( 'Display', 'woocommerce' ) }
-	</>
 );

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;

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 );
 			} }

plugins/woocommerce-admin/client/activity-panel/test/index.js

@@ -115,13 +115,15 @@ describe( 'Activity Panel', () => {
 			<ActivityPanel query={ { page: 'wc-admin', path: '/customers' } } />
 		);
 
-		expect( screen.queryByText( 'Help' ) ).toBeNull();
+		expect( screen.queryByTestId( 'activity-panel-tab-help' ) ).toBeNull();
 	} );
 
 	it( 'should render help tab if on home screen', () => {
 		render( <ActivityPanel query={ { page: 'wc-admin' } } /> );
 
-		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(
 				<ActivityPanel
 					query={ {
 						task: 'products',
@@ -403,11 +407,13 @@ describe( 'Activity Panel', () => {
 			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(
 				<ActivityPanel
 					query={ {
 						task: '',
@@ -421,13 +427,17 @@ describe( 'Activity Panel', () => {
 				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(
 				<ActivityPanel
 					query={ {
 						task: '',
@@ -444,13 +454,17 @@ describe( 'Activity Panel', () => {
 				/>
 			);
 			// 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(

plugins/woocommerce/changelog/46353-update-admin-header-icons

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Update WC Admin Homescreen header icons