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

Fix legend item width (https://github.com/woocommerce/woocommerce-admin/pull/8442) 

* Fix legend item width

* Add testing instructions

* Add changelog entry

* Fix changelog

* Add changelog
This commit is contained in:
berislav grgičak 2022-03-10 15:09:45 +01:00 committed by GitHub
parent 7bba8dcdee
commit a2a53ab6c2
3 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md
View File

@ -90,6 +90,7 @@
``` ```
2. Navigate to the profile wizard. `wp-admin/admin.php?page=wc-admin&path=%2Fanalytics%2Fproducts`. 2. Navigate to the profile wizard. `wp-admin/admin.php?page=wc-admin&path=%2Fanalytics%2Fproducts`.
3. Make sure the chart line colors are purple. 3. Make sure the chart line colors are purple.
4. Confirm that chart legend items are not overflowing.
### Add additional store profiler track for the business details tab. #8265 ### Add additional store profiler track for the business details tab. #8265
1. Open your console and make sure you have tracks outputted ( `localStorage.setItem( 'debug', 'wc-admin:*' );` ) 1. Open your console and make sure you have tracks outputted ( `localStorage.setItem( 'debug', 'wc-admin:*' );` )

5
plugins/woocommerce-admin/changelogs/fix-8442 Normal file
View File

@ -0,0 +1,5 @@
Significance: patch
Type: Fix
Comment: This fixes chart legend width #8442

9
plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
View File

@ -12,6 +12,11 @@
border-right: none; border-right: none;
} }
} }
&.woocommerce-legend__direction-row {
flex-grow: 1;
flex-direction: row;
}
} }
.woocommerce-legend__list { .woocommerce-legend__list {
@ -20,6 +25,7 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
flex-flow: row wrap; flex-flow: row wrap;
flex-wrap: wrap;
.woocommerce-legend__direction-column & { .woocommerce-legend__direction-column & {
flex-direction: column; flex-direction: column;
@ -166,7 +172,8 @@
.woocommerce-legend__direction-row & { .woocommerce-legend__direction-row & {
padding: 0; padding: 0;
margin: 0; margin: 0;
flex-basis: 20%; flex: 1 0 20%;
max-width: 338px;
& > button { & > button {
padding: 0 17px; padding: 0 17px;