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

Font sizes differ between chips used in the variations options table and variations list (#40447) 

* Fix font sizes difference between chips used in the variations options table and variations list

* Add changelog file

* Fix unit test
This commit is contained in:
Maikel David Pérez Gómez 2023-09-28 15:13:03 -04:00 committed by GitHub
parent ec61afd387
commit 57529230ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/fix-40202 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix font sizes difference between chips used in the variations options table and variations list

1
packages/js/product-editor/src/components/attribute-control/test/attribute-field.spec.tsx
View File

@ -79,6 +79,7 @@ jest.mock( '@woocommerce/components', () => ( {
__esModule: true, __esModule: true,
__experimentalSelectControlMenuSlot: () => <div></div>, __experimentalSelectControlMenuSlot: () => <div></div>,
ListItem: ( { children }: { children: JSX.Element } ) => children, ListItem: ( { children }: { children: JSX.Element } ) => children,
Tag: ( { label }: { label: string } ) => <span>{ label }</span>,
Sortable: ( { Sortable: ( {
onOrderChange, onOrderChange,
children, children,

14
packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.scss
View File

@ -16,20 +16,6 @@
margin-bottom: -1px; margin-bottom: -1px;
} }
&__options {
display: flex;
flex-direction: row;
gap: $gap-smallest;
}
&__option-chip {
padding: $gap-smallest $gap-smaller;
gap: 2px;
background: $gray-100;
border-radius: 2px;
}
&__actions { &__actions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

19
packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { DragEventHandler } from 'react'; import { DragEventHandler } from 'react';
import { ListItem } from '@woocommerce/components'; import { ListItem, Tag } from '@woocommerce/components';
import { ProductAttribute } from '@woocommerce/data'; import { ProductAttribute } from '@woocommerce/data';
import { sprintf, __ } from '@wordpress/i18n'; import { sprintf, __ } from '@wordpress/i18n';
import { Button, Tooltip } from '@wordpress/components'; import { Button, Tooltip } from '@wordpress/components';
@ -47,24 +47,19 @@ export const AttributeListItem: React.FC< AttributeListItemProps > = ( {
onDragEnd={ onDragEnd } onDragEnd={ onDragEnd }
> >
<div>{ attribute.name }</div> <div>{ attribute.name }</div>
<div className="woocommerce-attribute-list-item__options"> <div>
{ attribute.options { attribute.options
.slice( 0, attribute.options.length > 3 ? 2 : 3 ) .slice( 0, attribute.options.length > 3 ? 2 : 3 )
.map( ( option, index ) => ( .map( ( option ) => (
<div <Tag key={ option } label={ option } />
className="woocommerce-attribute-list-item__option-chip"
key={ index }
>
{ option }
</div>
) ) } ) ) }
{ attribute.options.length > 3 && ( { attribute.options.length > 3 && (
<div className="woocommerce-attribute-list-item__option-chip"> <Tag
{ sprintf( label={ sprintf(
__( '+ %i more', 'woocommerce' ), __( '+ %i more', 'woocommerce' ),
attribute.options.length - 2 attribute.options.length - 2
) } ) }
</div> />
) } ) }
</div> </div>
<div className="woocommerce-attribute-list-item__actions"> <div className="woocommerce-attribute-list-item__actions">