Plans: Use consistent font size & padding for features between treatm…

…ents (#94651)
Automattic · Sep 18, 2024 · 48a25ae · 48a25ae
1 parent a10dd90
commit 48a25ae
Show file tree

Hide file tree

Showing 7 changed files with 2 additions and 27 deletions.
diff --git a/client/my-sites/plans-features-main/index.tsx b/client/my-sites/plans-features-main/index.tsx
@@ -846,9 +846,6 @@ const PlansFeaturesMain = ( {
 										enableCategorisedFeatures={
 											simplifiedFeaturesGridExperimentVariant === 'simplified'
 										}
-										enableLargeFeatureTitles={
-											simplifiedFeaturesGridExperimentVariant === 'simplified'
-										}
 										enableStorageAsBadge={
 											simplifiedFeaturesGridExperimentVariant !== 'simplified'
 										}

diff --git a/packages/plans-grid-next/src/components/features-grid/index.stories.tsx b/packages/plans-grid-next/src/components/features-grid/index.stories.tsx
@@ -166,7 +166,6 @@ export const FewerFeaturesExperimentTreatmentVariantB = {
 		intent: 'plans-default-wpcom',
 		isInSignup: true,
 		enableCategorisedFeatures: true,
-		enableLargeFeatureTitles: true,
 		enableStorageAsBadge: false,
 		enableReducedFeatureGroupSpacing: true,
 		enableLogosOnlyForEnterprisePlan: true,

diff --git a/packages/plans-grid-next/src/components/features-grid/index.tsx b/packages/plans-grid-next/src/components/features-grid/index.tsx
@@ -379,7 +379,6 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 		className,
 		enableFeatureTooltips,
 		enableCategorisedFeatures,
-		enableLargeFeatureTitles,
 		enableStorageAsBadge,
 		enableReducedFeatureGroupSpacing,
 		enableLogosOnlyForEnterprisePlan,
@@ -425,7 +424,6 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 				allFeaturesList={ allFeaturesList }
 				enableFeatureTooltips={ enableFeatureTooltips }
 				enableCategorisedFeatures={ enableCategorisedFeatures }
-				enableLargeFeatureTitles={ enableLargeFeatureTitles }
 				enableStorageAsBadge={ enableStorageAsBadge }
 				enableReducedFeatureGroupSpacing={ enableReducedFeatureGroupSpacing }
 				enableLogosOnlyForEnterprisePlan={ enableLogosOnlyForEnterprisePlan }

diff --git a/packages/plans-grid-next/src/components/features-grid/style.scss b/packages/plans-grid-next/src/components/features-grid/style.scss
@@ -159,12 +159,6 @@
 	.plan-features-2023-grid__highlighted-feature .plan-features-2023-grid__item {
 		padding-bottom: 24px;
 	}
-
-	.plans-grid-next-features-grid__feature-group-row {
-		&.is-reduced-feature-group-spacing > .plan-features-2023-grid__table-item {
-			padding-top: 0;
-		}
-	}
 }
 
 .plan-features-2023-grid__table {
@@ -332,7 +326,7 @@
 	}
 
 	&.is-reduced-feature-group-spacing > .plan-features-2023-grid__table-item {
-		padding-top: 16px;
+		padding-top: 0;
 	}
 }
 
@@ -359,10 +353,6 @@
 		@include plans-grid-medium-large {
 			font-size: $font-body-extra-small;
 			line-height: 16px;
-
-			&.is-large {
-				font-size: $font-body-small;
-			}
 		}
 	}
 

diff --git a/packages/plans-grid-next/src/components/features.tsx b/packages/plans-grid-next/src/components/features.tsx
@@ -72,7 +72,7 @@ const PlanFeatures2023GridFeatures: React.FC< {
 	setActiveTooltipId,
 } ) => {
 	const translate = useTranslate();
-	const { enableFeatureTooltips, enableLargeFeatureTitles } = usePlansGridContext();
+	const { enableFeatureTooltips } = usePlansGridContext();
 
 	return (
 		<>
@@ -106,7 +106,6 @@ const PlanFeatures2023GridFeatures: React.FC< {
 				} );
 				const itemTitleClasses = clsx( 'plan-features-2023-grid__item-title', {
 					'is-bold': isHighlightedFeature,
-					'is-large': enableLargeFeatureTitles,
 				} );
 
 				return (

diff --git a/packages/plans-grid-next/src/grid-context.tsx b/packages/plans-grid-next/src/grid-context.tsx
@@ -22,7 +22,6 @@ interface PlansGridContext {
 	 * for rendering features with categories based on available/associated feature group map.
 	 */
 	enableCategorisedFeatures?: boolean;
-	enableLargeFeatureTitles?: boolean;
 	enableStorageAsBadge?: boolean;
 	enableReducedFeatureGroupSpacing?: boolean;
 	enableLogosOnlyForEnterprisePlan?: boolean;
@@ -46,7 +45,6 @@ const PlansGridContextProvider = ( {
 	coupon,
 	enableFeatureTooltips,
 	enableCategorisedFeatures,
-	enableLargeFeatureTitles,
 	enableStorageAsBadge,
 	enableReducedFeatureGroupSpacing,
 	enableLogosOnlyForEnterprisePlan,
@@ -79,7 +77,6 @@ const PlansGridContextProvider = ( {
 				coupon,
 				enableFeatureTooltips,
 				enableCategorisedFeatures,
-				enableLargeFeatureTitles,
 				enableStorageAsBadge,
 				enableReducedFeatureGroupSpacing,
 				enableLogosOnlyForEnterprisePlan,

diff --git a/packages/plans-grid-next/src/types.ts b/packages/plans-grid-next/src/types.ts
@@ -206,11 +206,6 @@ export type GridContextProps = {
 	 */
 	enableCategorisedFeatures?: boolean;
 
-	/**
-	 * Display the feature titles with a slightly larger font size
-	 */
-	enableLargeFeatureTitles?: boolean;
-
 	/**
 	 * Display the plan storage limit as a badge like "50GB" or as plain text like "50GB storage"
 	 */