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

Update default visibility settings for variation options (#40949) 

* Replace hidden icon by seen icon

* The 'visible' icon is only shown when the Show in product details box in the variation option is checked

* The tooltip displayed when the user hovers over the 'hidden' icon is updated to: Visible in product details

* On hover, the cursor changes to help

* Add changelog file
This commit is contained in:
Maikel David Pérez Gómez 2023-10-23 13:19:33 -04:00 committed by GitHub
parent 16ce05109f
commit eff2b8cca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/add-40198 Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: enhancement
Update default visibility settings for variation options

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

@ -38,7 +38,9 @@
&-icon {
color: $gray-600;
cursor: help;
}
&-help-icon {
position: absolute;
right: -2px;

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

@ -13,7 +13,7 @@ import { createElement } from '@wordpress/element';
* Internal dependencies
*/
import NotFilterableIcon from './not-filterable-icon';
import HiddenIcon from '../../icons/hidden-icon';
import SeenIcon from '../../icons/seen-icon';
type AttributeListItemProps = {
attribute: ProductAttribute;
@ -25,7 +25,7 @@ type AttributeListItemProps = {
onRemoveClick?: ( attribute: ProductAttribute ) => void;
};
const NOT_VISIBLE_TEXT = __( 'Not visible', 'woocommerce' );
const VISIBLE_TEXT = __( 'Visible in product details', 'woocommerce' );
const NOT_FILTERABLE_CUSTOM_ATTR_TEXT = __(
'Custom attribute. Customers can’t filter or search by it to find this product',
'woocommerce'
@ -75,15 +75,15 @@ export const AttributeListItem: React.FC< AttributeListItemProps > = ( {
</div>
</Tooltip>
) }
{ ! attribute.visible && (
{ attribute.visible && (
<Tooltip
// @ts-expect-error className is missing in TS, should remove this when it is included.
className="woocommerce-attribute-list-item__actions-tooltip"
position="top center"
text={ NOT_VISIBLE_TEXT }
text={ VISIBLE_TEXT }
>
<div className="woocommerce-attribute-list-item__actions-icon-wrapper">
<HiddenIcon className="woocommerce-attribute-list-item__actions-icon-wrapper-icon" />
<SeenIcon className="woocommerce-attribute-list-item__actions-icon-wrapper-icon" />
</div>
</Tooltip>
) }

30
packages/js/product-editor/src/icons/seen-icon.tsx Normal file
View File

@ -0,0 +1,30 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import classNames from 'classnames';
export default function SeenIcon( {
width = 24,
height = 24,
className,
...props
}: React.SVGProps< SVGSVGElement > ) {
return (
<svg
{ ...props }
width={ width }
height={ height }
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
className={ classNames( className, 'woocommerce-hidden-icon' ) }
>
<path
d="M3.99863 13C4.66945 13.3354 4.66932 13.3357 4.66919 13.3359L4.672 13.3305C4.67523 13.3242 4.68086 13.3135 4.6889 13.2985C4.70497 13.2686 4.73062 13.2218 4.76597 13.1608C4.83672 13.0385 4.94594 12.8592 5.09443 12.6419C5.39214 12.2062 5.84338 11.624 6.45337 11.0431C7.6721 9.88241 9.49621 8.75 11.9986 8.75C14.501 8.75 16.3251 9.88241 17.5439 11.0431C18.1539 11.624 18.6051 12.2062 18.9028 12.6419C19.0513 12.8592 19.1605 13.0385 19.2313 13.1608C19.2666 13.2218 19.2923 13.2686 19.3083 13.2985C19.3164 13.3135 19.322 13.3242 19.3252 13.3305L19.3281 13.3359C19.3279 13.3357 19.3278 13.3354 19.9986 13C20.6694 12.6646 20.6693 12.6643 20.6691 12.664L20.6678 12.6614L20.6652 12.6563L20.6573 12.6408C20.6507 12.6282 20.6417 12.6108 20.63 12.5892C20.6068 12.5459 20.5734 12.4852 20.5296 12.4096C20.4422 12.2584 20.3131 12.0471 20.1413 11.7956C19.7984 11.2938 19.2809 10.626 18.5784 9.9569C17.1721 8.61759 14.9962 7.25 11.9986 7.25C9.00105 7.25 6.82516 8.61759 5.41889 9.9569C4.71638 10.626 4.19886 11.2938 3.85596 11.7956C3.68413 12.0471 3.55507 12.2584 3.46762 12.4096C3.42386 12.4852 3.39044 12.5459 3.3672 12.5892C3.35558 12.6108 3.3465 12.6282 3.33994 12.6408L3.33199 12.6563L3.32943 12.6614L3.3285 12.6632C3.32833 12.6635 3.32781 12.6646 3.99863 13ZM11.9986 16C13.9316 16 15.4986 14.433 15.4986 12.5C15.4986 10.567 13.9316 9 11.9986 9C10.0656 9 8.49863 10.567 8.49863 12.5C8.49863 14.433 10.0656 16 11.9986 16Z"
fill="#949494"
/>
</svg>
);
}