Signup: fix the title overflow of the classic signup flows. (#95426)

* Implement the functionality of disabling the prevent widows functionality of <FormattedHeader> * Disable preventing widows of <FormattedHeader> and set `text-wrap` as `pretty` for the classic sign-up flows
Automattic · Oct 17, 2024 · e3b0492 · e3b0492
1 parent 5495065
commit e3b0492
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/client/components/formatted-header/README.md b/client/components/formatted-header/README.md
@@ -22,3 +22,4 @@ function render() {
 - `subHeaderText` (`node`) - Sub header text (optional)
 - `compactOnMobile` (`bool`) - Display a compact header on small screens (optional)
 - `isSecondary` (`bool`) - Use the H2 element instead of the H1 (optional)
+- `disablePreventWidows` (`bool`) - Disable the default behavior of inserting non-breaking space to prevent dangling words.
diff --git a/client/components/formatted-header/index.tsx b/client/components/formatted-header/index.tsx
@@ -18,6 +18,7 @@ interface Props extends PropsWithChildren {
 	subHeaderAs?: ElementType;
 	subHeaderText?: ReactNode;
 	tooltipText?: ReactNode;
+	disablePreventWidows?: boolean;
 }
 
 const FormattedHeader: FC< Props > = ( {
@@ -35,6 +36,7 @@ const FormattedHeader: FC< Props > = ( {
 	subHeaderAs: SubHeaderAs = 'p',
 	subHeaderText,
 	tooltipText,
+	disablePreventWidows,
 } ) => {
 	const classes = clsx( 'formatted-header', className, {
 		'is-without-subhead': ! subHeaderText,
@@ -54,24 +56,27 @@ const FormattedHeader: FC< Props > = ( {
 		</InfoPopover>
 	);
 
+	const formattedHeaderText = disablePreventWidows ? headerText : preventWidows( headerText, 2 );
+	const formattedSubHeaderText = disablePreventWidows
+		? subHeaderText
+		: preventWidows( subHeaderText, 2 );
+
 	return (
 		<header id={ id } className={ classes }>
 			<div>
 				{ ! isSecondary && (
 					<h1 className={ headerClasses }>
-						{ preventWidows( headerText, 2 ) } { tooltip }
+						{ formattedHeaderText } { tooltip }
 					</h1>
 				) }
 				{ isSecondary && (
 					<h2 className={ headerClasses }>
-						{ preventWidows( headerText, 2 ) } { tooltip }
+						{ formattedHeaderText } { tooltip }
 					</h2>
 				) }
 				{ screenReader && <h2 className="screen-reader-text">{ screenReader }</h2> }
-				{ subHeaderText && (
-					<SubHeaderAs className={ subtitleClasses }>
-						{ preventWidows( subHeaderText, 2 ) }
-					</SubHeaderAs>
+				{ formattedSubHeaderText && (
+					<SubHeaderAs className={ subtitleClasses }>{ formattedSubHeaderText }</SubHeaderAs>
 				) }
 			</div>
 			{ children }

diff --git a/client/signup/step-wrapper/index.jsx b/client/signup/step-wrapper/index.jsx
@@ -233,6 +233,7 @@ class StepWrapper extends Component {
 								headerText={ this.headerText() }
 								subHeaderText={ this.subHeaderText() }
 								align={ align }
+								disablePreventWidows
 							/>
 							{ headerImageUrl && (
 								<div className="step-wrapper__header-image">

diff --git a/client/signup/step-wrapper/style.scss b/client/signup/step-wrapper/style.scss
@@ -8,6 +8,7 @@
 
 	.formatted-header {
 		flex-grow: 1;
+		text-wrap: pretty;
 	}
 
 	@include breakpoint-deprecated( "<660px" ) {