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

Truncate attribute option name to a max of 32 chars in variations list (#36134) 

* Truncate attribute option name to a max of 32 chars in variations list

* Use PRODUCT_VARIATION_TITLE_LIMIT to truncate attribute option names

* Fix up lint error

Co-authored-by: Joshua Flowers <joshuatf@gmail.com>
This commit is contained in:
Maikel David Pérez Gómez 2022-12-23 16:29:44 -03:00 committed by GitHub
parent 8c2180e144
commit 5b3b5dab59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-admin/client/products/constants.ts
View File

@ -5,3 +5,4 @@ export const ONLY_ONE_DECIMAL_SEPARATOR = '[%s](?=%s*[%s])';
export const ADD_NEW_SHIPPING_CLASS_OPTION_VALUE =
'__ADD_NEW_SHIPPING_CLASS_OPTION__';
export const UNCATEGORIZED_CATEGORY_SLUG = 'uncategorized';
export const PRODUCT_VARIATION_TITLE_LIMIT = 32;

40
plugins/woocommerce-admin/client/products/fields/variations/variations.tsx
View File

@ -12,10 +12,12 @@ import { useContext, useState } from '@wordpress/element';
import { useParams } from 'react-router-dom';
import { useSelect, useDispatch } from '@wordpress/data';
import classnames from 'classnames';
import truncate from 'lodash/truncate';
/**
* Internal dependencies
*/
import { PRODUCT_VARIATION_TITLE_LIMIT } from '~/products/constants';
import useVariationsOrder from '~/products/hooks/use-variations-order';
import HiddenIcon from '~/products/images/hidden-icon';
import VisibleIcon from '~/products/images/visible-icon';
@ -130,16 +132,34 @@ export const Variations: React.FC = () => {
{ sortedVariations.map( ( variation ) => (
<ListItem key={ getVariationKey( variation ) }>
<div className="woocommerce-product-variations__attributes">
{ variation.attributes.map( ( attribute ) => (
/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
/* @ts-ignore Additional props are not required. */
<Tag
id={ attribute.id }
className="woocommerce-product-variations__attribute"
key={ attribute.id }
label={ attribute.option }
/>
) ) }
{ variation.attributes.map( ( attribute ) => {
const tag = (
/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
/* @ts-ignore Additional props are not required. */
<Tag
id={ attribute.id }
className="woocommerce-product-variations__attribute"
key={ attribute.id }
label={ truncate( attribute.option, {
length: PRODUCT_VARIATION_TITLE_LIMIT,
} ) }
screenReaderLabel={ attribute.option }
/>
);
return attribute.option.length <=
PRODUCT_VARIATION_TITLE_LIMIT ? (
tag
) : (
<Tooltip
key={ attribute.id }
text={ attribute.option }
position="top center"
>
<span>{ tag }</span>
</Tooltip>
);
} ) }
</div>
<div
className={ classnames(

5
plugins/woocommerce-admin/client/products/utils/get-product-variation-title.ts
View File

@ -3,7 +3,10 @@
*/
import { ProductVariation } from '@woocommerce/data';
export const PRODUCT_VARIATION_TITLE_LIMIT = 32;
/**
* Internal dependencies
*/
import { PRODUCT_VARIATION_TITLE_LIMIT } from '../constants';
/**
* Get the product variation title for use in the header.

4
plugins/woocommerce/changelog/add-36116 Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Truncate attribute option name to a max of 32 chars in variations list