Pricing grid redesign: style / UX fixes (#112445)

* Auto-open the storage dropdown when clicked

* Add the border to feature badges

* Add the border to plan savings badges

* Fix the plan price currency color

* Fix the crossed-out price color

* Fix the top padding on plan headers

* Adjust line-height and padding for plan badges

* Remove the background which was overlapping with the pricing grid rounded border

* Refactor the dropdown trigger to avoid race conditions

Author: dlind1

packages/plans-grid-next/src/components/features-grid/style.scss

@@ -726,8 +726,6 @@
 	}
 
 	.plan-features-2023-grid__table-item {
-		background-color: var( --studio-white );
-
 		&:is( td, th ) {
 			border-left-color: #e0e0e0;
 		}
@@ -758,7 +756,7 @@
 		align-items: flex-start;
 		background-color: transparent;
 		flex-direction: column;
-		padding: 36px 16px 0;
+		padding: 32px 16px 0;
 	}
 
 	.plan-features-2023-grid__header-title {
@@ -802,14 +800,14 @@
 			}
 
 			&.is-original {
-				color: var( --studio-gray-40 );
+				color: var( --wp-components-color-gray-600, #949494 );
 				font-size: 24px;
 				margin-bottom: 3px;
 
 				.plan-price__currency-symbol,
 				.plan-price__integer,
 				.plan-price__tax-amount {
-					color: var( --studio-gray-40 );
+					color: var( --wp-components-color-gray-600, #949494 );
 				}
 
 				.plan-price__integer {
@@ -820,6 +818,7 @@
 
 		.plan-price__currency-symbol,
 		.plan-price.is-discounted .plan-price__currency-symbol {
+			color: inherit;
 			font-size: 14px;
 			margin-top: 3px;
 		}
@@ -837,6 +836,7 @@
 	.plans-grid-next-header-price__badge {
 		background-color: rgba( 184, 230, 191, 0.68 );
 		border-radius: 2px;
+		box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.08 );
 		color: var( --studio-green-80 );
 		font-size: 11px;
 		font-weight: 500;
@@ -923,6 +923,7 @@
 	}
 
 	.plan-features-2023-grid__feature-badge {
+		box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.08 );
 		flex: 0 0 auto;
 		font-weight: 500;
 		margin-inline-start: auto;
@@ -1036,8 +1037,8 @@
 					justify-content: center;
 					left: 16px;
 					letter-spacing: 0;
-					line-height: 16px;
-					padding: 0 10px;
+					line-height: 20px;
+					padding: 0 8px;
 					position: absolute;
 					right: auto;
 					text-transform: none;

packages/plans-grid-next/src/components/shared/storage/components/plan-storage.tsx

@@ -80,6 +80,7 @@ const PlanStorage = ( {
 			<StorageDropdown
 				planSlug={ planSlug }
 				onStorageAddOnClick={ onStorageAddOnClick }
+				openOnMount={ showFeatureCheckmarks }
 				onStorageOptionChange={
 					showFeatureCheckmarks ? () => setIsStorageDropdownVisible( false ) : undefined
 				}

packages/plans-grid-next/src/components/shared/storage/components/storage-dropdown.tsx

@@ -2,7 +2,7 @@
 import { type AddOnMeta, AddOns, WpcomPlansUI } from '@automattic/data-stores';
 import { CustomSelectControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback, useEffect, useMemo } from '@wordpress/element';
+import { useCallback, useEffect, useMemo, useRef } from '@wordpress/element';
 import { useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../../../../grid-context';
 import DropdownOption from '../../../dropdown-option';
@@ -15,6 +15,7 @@ type StorageDropdownProps = {
 	planSlug: PlanSlug;
 	onStorageAddOnClick?: ( addOnSlug: AddOns.StorageAddOnSlug ) => void;
 	onStorageOptionChange?: () => void;
+	openOnMount?: boolean;
 };
 
 type StorageDropdownOptionProps = {
@@ -77,9 +78,12 @@ const StorageDropdown = ( {
 	planSlug,
 	onStorageAddOnClick,
 	onStorageOptionChange,
+	openOnMount,
 }: StorageDropdownProps ) => {
 	const translate = useTranslate();
 	const { siteId } = usePlansGridContext();
+	const containerRef = useRef< HTMLDivElement >( null );
+	const hasOpenedOnMount = useRef( false );
 
 	const { setSelectedStorageOptionForPlan } = useDispatch( WpcomPlansUI.store );
 	const storageAddOns = AddOns.useStorageAddOns( { siteId } );
@@ -141,6 +145,26 @@ const StorageDropdown = ( {
 		} );
 	}, [ availableStorageAddOns, defaultStorageOptionSlug, planStorage, storageAddOns ] );
 
+	useEffect( () => {
+		if ( ! openOnMount || hasOpenedOnMount.current || ! selectControlOptions?.length ) {
+			return;
+		}
+
+		const openDropdownTimeout = window.setTimeout( () => {
+			const trigger = containerRef.current?.querySelector< HTMLElement >( '[role="combobox"]' );
+
+			if ( ! trigger ) {
+				return;
+			}
+
+			hasOpenedOnMount.current = true;
+			trigger?.focus();
+			trigger?.click();
+		}, 0 );
+
+		return () => window.clearTimeout( openDropdownTimeout );
+	}, [ openOnMount, selectControlOptions?.length ] );
+
 	const selectedStorageAddOn = getSelectedStorageAddOn(
 		storageAddOns,
 		selectedStorageOptionForPlan
@@ -194,7 +218,7 @@ const StorageDropdown = ( {
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-		<div tabIndex={ 1 }>
+		<div ref={ containerRef } tabIndex={ 1 }>
 			<CustomSelectControl
 				__next40pxDefaultSize
 				hideLabelFromVision

packages/plans-grid-next/src/components/test/plan-storage.tsx

@@ -15,7 +15,11 @@ jest.mock( '../shared/storage/components/storage-dropdown', () => {
 
 	return {
 		__esModule: true,
-		default: () => ReactActual.createElement( 'div', { 'data-testid': 'storage-dropdown' } ),
+		default: ( { openOnMount } ) =>
+			ReactActual.createElement( 'div', {
+				'data-open-on-mount': openOnMount ? 'true' : 'false',
+				'data-testid': 'storage-dropdown',
+			} ),
 	};
 } );
 jest.mock( '../shared/storage/components/storage-feature-label', () => {
@@ -72,6 +76,10 @@ describe( 'PlanStorage', () => {
 		fireEvent.click( screen.getByRole( 'button', { name: 'Add more' } ) );
 
 		expect( screen.getByTestId( 'storage-dropdown' ) ).toBeInTheDocument();
+		expect( screen.getByTestId( 'storage-dropdown' ) ).toHaveAttribute(
+			'data-open-on-mount',
+			'true'
+		);
 
 		await new Promise( ( resolve ) => window.setTimeout( resolve, 0 ) );
 
@@ -92,6 +100,10 @@ describe( 'PlanStorage', () => {
 		);
 
 		expect( screen.getByTestId( 'storage-dropdown' ) ).toBeInTheDocument();
+		expect( screen.getByTestId( 'storage-dropdown' ) ).toHaveAttribute(
+			'data-open-on-mount',
+			'false'
+		);
 
 		fireEvent.click( screen.getByRole( 'button', { name: 'Outside' } ) );
 

packages/plans-grid-next/src/components/test/storage-dropdown.tsx

@@ -0,0 +1,108 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const mockComboboxClick = jest.fn();
+const mockSetSelectedStorageOptionForPlan = jest.fn();
+
+jest.mock( '@wordpress/components', () => {
+	const ReactActual = jest.requireActual< typeof import('react') >( 'react' );
+
+	return {
+		CustomSelectControl: ( { label }: { label: string } ) =>
+			ReactActual.createElement(
+				'button',
+				{
+					'aria-label': label,
+					onClick: mockComboboxClick,
+					role: 'combobox',
+					type: 'button',
+				},
+				'Storage options'
+			),
+	};
+} );
+jest.mock( '@automattic/calypso-products', () => ( {
+	FEATURE_1GB_STORAGE: '1gb-storage',
+	FEATURE_6GB_STORAGE: '6gb-storage',
+	FEATURE_13GB_STORAGE: '13gb-storage',
+	FEATURE_50GB_STORAGE: '50gb-storage',
+	FEATURE_100GB_STORAGE: '100gb-storage',
+	FEATURE_200GB_STORAGE: '200gb-storage',
+	FEATURE_P2_3GB_STORAGE: 'p2-3gb-storage',
+	FEATURE_P2_13GB_STORAGE: 'p2-13gb-storage',
+	PLAN_BUSINESS: 'business-bundle',
+	PLAN_ECOMMERCE: 'ecommerce-bundle',
+	PRODUCT_1GB_SPACE: '1gb-space',
+} ) );
+jest.mock( '@wordpress/data', () => ( {
+	useDispatch: jest.fn( () => ( {
+		setSelectedStorageOptionForPlan: mockSetSelectedStorageOptionForPlan,
+	} ) ),
+	useSelect: jest.fn(),
+} ) );
+jest.mock( '@automattic/data-stores', () => ( {
+	AddOns: {
+		useAvailableStorageAddOns: jest.fn(),
+		useStorageAddOns: jest.fn(),
+	},
+	Purchases: {
+		useSitePurchasesByProductSlug: jest.fn(),
+	},
+	WpcomPlansUI: {
+		store: {},
+	},
+} ) );
+jest.mock( '../../grid-context', () => ( { usePlansGridContext: jest.fn() } ) );
+
+import { FEATURE_50GB_STORAGE, PLAN_BUSINESS } from '@automattic/calypso-products';
+import { AddOns, Purchases } from '@automattic/data-stores';
+import { render } from '@testing-library/react';
+import { useSelect } from '@wordpress/data';
+import React from 'react';
+import { usePlansGridContext } from '../../grid-context';
+import StorageDropdown from '../shared/storage/components/storage-dropdown';
+
+describe( 'StorageDropdown', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		( AddOns.useStorageAddOns as jest.Mock ).mockReturnValue( [] );
+		( AddOns.useAvailableStorageAddOns as jest.Mock ).mockReturnValue( [
+			{
+				addOnSlug: 'add-on-100gb-storage',
+				prices: { formattedMonthlyPrice: '$10' },
+				quantity: 100,
+			},
+		] );
+		( Purchases.useSitePurchasesByProductSlug as jest.Mock ).mockReturnValue( null );
+		( useSelect as jest.Mock ).mockReturnValue( FEATURE_50GB_STORAGE );
+		( usePlansGridContext as jest.Mock ).mockReturnValue( {
+			gridPlansIndex: {
+				[ PLAN_BUSINESS ]: {
+					features: {
+						storageFeature: {
+							getSlug: () => FEATURE_50GB_STORAGE,
+						},
+					},
+				},
+			},
+			siteId: 1,
+		} );
+	} );
+
+	test( 'opens the select control after mounting when requested', async () => {
+		render( <StorageDropdown planSlug={ PLAN_BUSINESS } openOnMount /> );
+
+		await new Promise( ( resolve ) => window.setTimeout( resolve, 0 ) );
+
+		expect( mockComboboxClick ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	test( 'does not open the select control after mounting by default', async () => {
+		render( <StorageDropdown planSlug={ PLAN_BUSINESS } /> );
+
+		await new Promise( ( resolve ) => window.setTimeout( resolve, 0 ) );
+
+		expect( mockComboboxClick ).not.toHaveBeenCalled();
+	} );
+} );