Update variation visibility icon in variations table (woocommerce#40150)

* Create re-usuable hidden icon and re-use in variations table * Add changelog
kawsarahmedr · Sep 15, 2023 · 26f5cd5 · 26f5cd5
1 parent 6c47589
commit 26f5cd5
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 64 deletions.
diff --git a/packages/js/product-editor/changelog/update-40072_variation_visibility_icon b/packages/js/product-editor/changelog/update-40072_variation_visibility_icon
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Remove visibility toggle from variations table and remove with tooltip icon.
diff --git a/packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.tsx b/packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.tsx
@@ -12,9 +12,9 @@ import { createElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import HiddenIcon from '../variations-table/hidden-icon';
-import HelpIcon from './help-icon';
+import HelpIcon from '../../icons/help-icon';
 import NotFilterableIcon from './not-filterable-icon';
+import HiddenWithHelpIcon from '../../icons/hidden-with-help-icon';
 
 type AttributeListItemProps = {
 	attribute: ProductAttribute;
@@ -89,10 +89,7 @@ export const AttributeListItem: React.FC< AttributeListItemProps > = ( {
 						position="top center"
 						text={ NOT_VISIBLE_TEXT }
 					>
-						<div className="woocommerce-attribute-list-item__actions-icon-wrapper">
-							<HiddenIcon className="woocommerce-attribute-list-item__actions-icon-wrapper-icon" />
-							<HelpIcon className="woocommerce-attribute-list-item__actions-icon-wrapper-help-icon" />
-						</div>
+						<HiddenWithHelpIcon />
 					</Tooltip>
 				) }
 				{ typeof onEditClick === 'function' && (

diff --git a/packages/js/product-editor/src/components/variations-table/styles.scss b/packages/js/product-editor/src/components/variations-table/styles.scss
@@ -1,4 +1,5 @@
 @import "./variations-actions-menu/styles.scss";
+@import "../../icons/hidden-with-help-icon.scss";
 
 $table-row-height: calc($grid-unit * 9);
 
@@ -82,6 +83,7 @@ $table-row-height: calc($grid-unit * 9);
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
+		gap: $gap-smaller;
 
 		&--delete {
 			&.components-button.components-menu-item__button.is-link {

diff --git a/packages/js/product-editor/src/components/variations-table/variations-table.tsx b/packages/js/product-editor/src/components/variations-table/variations-table.tsx
@@ -40,8 +40,6 @@ import { useEntityId } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import HiddenIcon from './hidden-icon';
-import VisibleIcon from './visible-icon';
 import { getProductStockStatus, getProductStockStatusClass } from '../../utils';
 import {
 	DEFAULT_VARIATION_PER_PAGE_OPTION,
@@ -51,10 +49,9 @@ import {
 import { VariationActionsMenu } from './variation-actions-menu';
 import { useSelection } from '../../hooks/use-selection';
 import { VariationsActionsMenu } from './variations-actions-menu';
+import HiddenWithHelpIcon from '../../icons/hidden-with-help-icon';
 
 const NOT_VISIBLE_TEXT = __( 'Not visible to customers', 'woocommerce' );
-const VISIBLE_TEXT = __( 'Visible to customers', 'woocommerce' );
-const UPDATING_TEXT = __( 'Updating product variation', 'woocommerce' );
 
 export function VariationsTable() {
 	const [ currentPage, setCurrentPage ] = useState( 1 );
@@ -417,63 +414,14 @@ export function VariationsTable() {
 						<div className="woocommerce-product-variations__actions">
 							{ variation.status === 'private' && (
 								<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 }
 								>
-									<Button
-										className="components-button--hidden"
-										aria-label={
-											isUpdating[ variation.id ]
-												? UPDATING_TEXT
-												: NOT_VISIBLE_TEXT
-										}
-										aria-disabled={
-											isUpdating[ variation.id ]
-										}
-										onClick={ () =>
-											handleVariationChange(
-												variation.id,
-												{ status: 'publish' }
-											)
-										}
-									>
-										{ isUpdating[ variation.id ] ? (
-											<Spinner />
-										) : (
-											<HiddenIcon />
-										) }
-									</Button>
-								</Tooltip>
-							) }
-
-							{ variation.status === 'publish' && (
-								<Tooltip
-									position="top center"
-									text={ VISIBLE_TEXT }
-								>
-									<Button
-										className="components-button--visible"
-										aria-label={
-											isUpdating[ variation.id ]
-												? UPDATING_TEXT
-												: VISIBLE_TEXT
-										}
-										aria-disabled={
-											isUpdating[ variation.id ]
-										}
-										onClick={ () =>
-											handleVariationChange(
-												variation.id,
-												{ status: 'private' }
-											)
-										}
-									>
-										{ isUpdating[ variation.id ] ? (
-											<Spinner />
-										) : (
-											<VisibleIcon />
-										) }
-									</Button>
+									<div>
+										<HiddenWithHelpIcon />
+									</div>
 								</Tooltip>
 							) }
 							<VariationActionsMenu

diff --git a/...ponents/attribute-list-item/help-icon.tsx → ...js/product-editor/src/icons/help-icon.tsx b/...ponents/attribute-list-item/help-icon.tsx → ...js/product-editor/src/icons/help-icon.tsx
diff --git a/...mponents/variations-table/hidden-icon.tsx → .../product-editor/src/icons/hidden-icon.tsx b/...mponents/variations-table/hidden-icon.tsx → .../product-editor/src/icons/hidden-icon.tsx
diff --git a/packages/js/product-editor/src/icons/hidden-with-help-icon.scss b/packages/js/product-editor/src/icons/hidden-with-help-icon.scss
@@ -0,0 +1,14 @@
+.woocommerce-hidden-with-help-icon {
+	display: flex;
+	align-items: center;
+	position: relative;
+
+	&__hidden-icon {
+		color: $gray-600;
+	}
+	&__help-icon {
+		position: absolute;
+		right: -2px;
+		bottom: 0px;
+	}
+}
diff --git a/packages/js/product-editor/src/icons/hidden-with-help-icon.tsx b/packages/js/product-editor/src/icons/hidden-with-help-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HelpIcon from './help-icon';
+import HiddenIcon from './hidden-icon';
+
+export default function HiddenWithHelpIcon( {
+	width = 24,
+	height = 24,
+	...props
+}: React.HTMLProps< HTMLDivElement > ) {
+	return (
+		<div className="woocommerce-hidden-with-help-icon" { ...props }>
+			<HiddenIcon
+				className="woocommerce-hidden-with-help-icon__hidden-icon"
+				width={ width }
+				height={ height }
+			/>
+			<HelpIcon className="woocommerce-hidden-with-help-icon__help-icon" />
+		</div>
+	);
+}