UI bug fixes reported (#436)

* rename re-render issue * moved the rename logic to the center component * update homepage title as editor view changes * fixed linting * fixed custom fonts icon * fixed linting * added ellipses for longer version names in editor header * two previews on Ipad * trim whitespace and update only when needed * width according to device * fixed lint * fixed heart svg size on mobile
newfold-labs · Feb 1, 2024 · 5c0a76a · 5c0a76a
1 parent 907dd94
commit 5c0a76a
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 100 deletions.
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
@@ -8,14 +8,9 @@
 	justify-content: center;
 	flex-wrap: wrap;
 
-	@media (min-width: #{ ($break-mobile) }) and (max-width: #{ ($break-wide) }) {
-		width: 340px;
-		padding: 15px;
-	}
-
 	@media (max-width: #{ ($break-mobile) }) {
 		width: 300px;
-		padding: 10px;
+		padding: 20px 0;
 	}
 
 	&__live-preview-container {

diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js
@@ -2,7 +2,7 @@
 import { forwardRef, useImperativeHandle } from 'react';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { PanelBody, PanelRow, Button, Dashicon } from '@wordpress/components';
+import { PanelBody, PanelRow, Button } from '@wordpress/components';
 import './stylesheet.scss';
 import { store as nfdOnboardingStore } from '../../../../../store';
 import { __ } from '@wordpress/i18n';
@@ -154,17 +154,11 @@ const CustomFontsDisplay = ( {
 				role="presentation"
 				onClick={ () => handleGroupSelect( 'custom' ) }
 			>
-				<Dashicon
-					className={ `${ baseClassName }__font-group__container__button__icon` }
-					icon={ 'yes-alt' }
-					size={ 30 }
-					style={ {
-						color:
-							selectedGroup === 'custom'
-								? 'var(--nfd-onboarding-sitegen-customize-icon-selected)'
-								: 'var(--nfd-onboarding-sitegen-customize-grey-1)',
-					} }
-				/>
+				<span
+					className={ `${ baseClassName }__font-group__container__button__icon${
+						selectedGroup === 'custom' ? ` selected` : ``
+					}` }
+				></span>
 				<div
 					className={ `${ baseClassName }__font-group__container__button__font-name__container` }
 				>

diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
@@ -1,73 +1,19 @@
 import { Icon, chevronDown, reusableBlock } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import { useRef } from '@wordpress/element';
+import { useRef, useState, useEffect, memo } from '@wordpress/element';
 import { ReactComponent as FavoriteIconStroked } from '../../../../static/icons/sitegen/heart-stroked.svg';
 import { ReactComponent as FavoriteFilled } from '../../../../static/icons/sitegen/heart-filled.svg';
 import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
 
-const StepEditorHeaderCenter = ( {
-	handleFavorite,
-	handleRename,
-	handleViewAll,
-	handleRegenerate,
-	handleCustomize,
-	handleIsRenaming,
-	isRenaming,
-	homepageTitle,
-	isFavorite,
-} ) => {
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const inputRef = useRef( null );
-
-	const onRegenerate = () => {
-		if ( typeof handleRegenerate === 'function' ) {
-			return handleRegenerate();
-		}
-	};
-
-	const onFavorite = () => {
-		if ( typeof onFavorite === 'function' ) {
-			return handleFavorite();
-		}
-	};
-
-	const onCustomize = () => {
-		if ( typeof handleCustomize === 'function' ) {
-			return handleCustomize();
-		}
-	};
-
-	const onViewAll = () => {
-		if ( typeof handleViewAll === 'function' ) {
-			return handleViewAll();
-		}
-	};
-
-	const onRenameItemSelect = () => {
-		if ( typeof handleIsRenaming === 'function' ) {
-			handleIsRenaming( true );
-			return inputRef.current.focus();
-		}
-	};
-
-	const onRename = () => {
-		if ( typeof handleRename === 'function' ) {
-			handleRename( inputRef.current.value );
-		}
-	};
-
-	const onTitleInputBlur = () => {
-		if ( typeof handleIsRenaming === 'function' ) {
-			return handleIsRenaming( false );
-		}
-	};
-
-	if ( isRenaming ) {
-		inputRef.current.focus();
-	}
-
-	const DropDownMenu = () => {
+const DropDownMenu = memo(
+	( {
+		onRegenerate,
+		onCustomize,
+		onRenameItemSelect,
+		onViewAll,
+		isLargeViewport,
+	} ) => {
 		return (
 			<MenuGroup className="nfd-onboarding-header__version_dropdown-menu">
 				{ ! isLargeViewport && (
@@ -91,9 +37,49 @@ const StepEditorHeaderCenter = ( {
 				</MenuItem>
 			</MenuGroup>
 		);
-	};
+	}
+);
+
+const TitleContent = memo(
+	( {
+		isFavorite,
+		homepageTitle,
+		onFavorite,
+		onRename,
+		inputRef,
+		onRegenerate,
+		onCustomize,
+		onRenameItemSelect,
+		onViewAll,
+		isLargeViewport,
+		isInputEnabled,
+		enableInput,
+	} ) => {
+		const [ renameInputValue, setRenameInputValue ] =
+			useState( homepageTitle );
+
+		const handleOnChange = () => {
+			setRenameInputValue( inputRef.current.value );
+		};
+
+		const onTitleInputBlur = () => {
+			const newTitleValue = inputRef.current.value.trim();
+			if ( newTitleValue && newTitleValue !== homepageTitle ) {
+				onRename( newTitleValue );
+			}
+			enableInput( false );
+		};
+
+		useEffect( () => {
+			if ( isInputEnabled ) {
+				inputRef.current?.focus();
+			}
+		}, [ isInputEnabled, inputRef ] );
+
+		useEffect( () => {
+			setRenameInputValue( homepageTitle );
+		}, [ homepageTitle ] );
 
-	const TitleContent = () => {
 		return (
 			<Dropdown
 				renderToggle={ ( { isOpen, onToggle } ) => (
@@ -122,12 +108,12 @@ const StepEditorHeaderCenter = ( {
 						</div>
 						<input
 							ref={ inputRef }
+							disabled={ ! isInputEnabled }
 							className="nfd-onboarding-header__center-input"
-							disabled={ ! isRenaming }
 							type="text"
-							value={ homepageTitle }
+							value={ renameInputValue }
 							onBlur={ onTitleInputBlur }
-							onChange={ onRename }
+							onChange={ handleOnChange }
 						/>
 						<Icon
 							icon={ chevronDown }
@@ -140,14 +126,89 @@ const StepEditorHeaderCenter = ( {
 						/>
 					</div>
 				) }
-				renderContent={ DropDownMenu }
+				renderContent={ () => (
+					<DropDownMenu
+						onRegenerate={ onRegenerate }
+						onCustomize={ onCustomize }
+						onRenameItemSelect={ onRenameItemSelect }
+						onViewAll={ onViewAll }
+						isLargeViewport={ isLargeViewport }
+					/>
+				) }
 			/>
 		);
+	}
+);
+
+const StepEditorHeaderCenter = ( {
+	handleFavorite,
+	handleRename,
+	handleViewAll,
+	handleRegenerate,
+	handleCustomize,
+	homepageTitle,
+	isFavorite,
+} ) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const inputRef = useRef( null );
+	const [ isInputEnabled, setInputEnabled ] = useState( false );
+	const enableInput = ( isEnabled ) => {
+		setInputEnabled( isEnabled );
+		if ( isEnabled ) {
+			inputRef.current?.focus();
+		}
+	};
+
+	const onRegenerate = () => {
+		if ( typeof handleRegenerate === 'function' ) {
+			return handleRegenerate();
+		}
+	};
+
+	const onFavorite = () => {
+		if ( typeof onFavorite === 'function' ) {
+			return handleFavorite();
+		}
+	};
+
+	const onCustomize = () => {
+		if ( typeof handleCustomize === 'function' ) {
+			return handleCustomize();
+		}
+	};
+
+	const onViewAll = () => {
+		if ( typeof handleViewAll === 'function' ) {
+			return handleViewAll();
+		}
+	};
+
+	const onRenameItemSelect = () => {
+		enableInput( true );
+	};
+
+	const onRename = ( newTitleValue ) => {
+		if ( typeof handleRename === 'function' ) {
+			handleRename( newTitleValue );
+		}
 	};
 
 	return (
 		<div className="nfd-onboarding-header__step-navigation">
-			<TitleContent />
+			<TitleContent
+				isFavorite={ isFavorite }
+				homepageTitle={ homepageTitle }
+				onFavorite={ onFavorite }
+				onRename={ onRename }
+				inputRef={ inputRef }
+				onRegenerate={ onRegenerate }
+				onCustomize={ onCustomize }
+				onRenameItemSelect={ onRenameItemSelect }
+				onViewAll={ onViewAll }
+				isLargeViewport={ isLargeViewport }
+				isInputEnabled={ isInputEnabled }
+				enableInput={ enableInput }
+			/>
 		</div>
 	);
 };

diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js
@@ -24,7 +24,6 @@ const StepSiteGenEditorHeader = () => {
 	const [ homepage, setHomepage ] = useState();
 	const [ isSaving, setIsSaving ] = useState( false );
 	const [ isRegenerating, setIsRegenerating ] = useState( false );
-	const [ isEditingTitle, setIsEditingTitle ] = useState( false );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -176,13 +175,9 @@ const StepSiteGenEditorHeader = () => {
 							handleViewAll={ handleViewAll }
 							handleCustomize={ handleCustomize }
 							handleRegenerate={ handleRegenerate }
-							handleIsRenaming={ ( isRenaming ) =>
-								setIsEditingTitle( isRenaming )
-							}
 							handleRename={ handleRename }
 							homepageTitle={ homepage.title }
 							isFavorite={ homepage.isFavorite }
-							isRenaming={ isEditingTitle }
 						/>
 					</div>
 				) }

diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss
@@ -15,10 +15,19 @@
 		color: var(--nfd-onboarding-header-contrast);
 		background-color: var(--nfd-onboarding-header-base);
 		width: 150px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 
 		@media (max-width: #{ ($break-small) }) {
 			width: 80px;
 		}
+
+		&:focus {
+			overflow: visible;
+			white-space: normal;
+			text-overflow: clip;
+		}
 	}
 }