Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Chi-Hsuan Huang 2024-04-09 15:46:33 +08:00 committed by GitHub
parent 98ab2f81d6
commit 7a90da9d6b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 67 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/client/activity-panel/activity-panel.js
View File

@ -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' ) );

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

@ -1,43 +1,19 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
export const DisplayIcon = () => (
<>
<svg
className="woocommerce-layout__activity-panel-tab-icon"
width="24"
height="24"
viewBox="3 3 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
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"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
id="Shape"
fillRule="evenodd"
clipRule="evenodd"
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
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"
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' ) }
</>
</g>
</svg>
);

22
plugins/woocommerce-admin/client/activity-panel/style.scss
View File

@ -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;

1
plugins/woocommerce-admin/client/activity-panel/tab/index.js
View File

@ -29,6 +29,7 @@ export const Tab = ( {
aria-controls={ `activity-panel-${ name }` }
key={ tabKey }
id={ tabKey }
data-testid={ tabKey }
onClick={ () => {
onTabClick( name );
} }

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

@ -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(

4
plugins/woocommerce/changelog/46353-update-admin-header-icons Normal file
View File

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