PCH Title Suggestions: Update UI with QA feedback (#2279)

* Fix dropdown pop-over width * Fix spacing issues with the accordion sections * Removed `fill` from AiIcon * Update src/content-helper/common/css/common.scss Co-authored-by: Alex Cicovic <[email protected]> --------- Co-authored-by: Alex Cicovic <[email protected]>
Parsely · Mar 11, 2024 · ad29cba · ad29cba
1 parent d095398
commit ad29cba
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 39 deletions.
diff --git a/build/content-helper/editor-sidebar.asset.php b/build/content-helper/editor-sidebar.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => 'a727f0bb3d0187a297dd');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => '135fcbc9d535df4d3f4c');
diff --git a/build/content-helper/editor-sidebar.css b/build/content-helper/editor-sidebar.css
diff --git a/build/content-helper/editor-sidebar.js b/build/content-helper/editor-sidebar.js
diff --git a/src/content-helper/common/css/common.scss b/src/content-helper/common/css/common.scss
@@ -70,12 +70,15 @@
 	border-top: none;
 	margin: 0;
 	padding: 0;
+	margin-bottom: to_rem(8px);
 
 	.components-panel__body-title {
 		display: flex;
 		align-items: center;
 		gap: var(--grid-unit-10, to_rem(8px));
 		align-self: stretch;
+		margin: 0 to_rem(-16px) to_rem(6px);
+		padding: 0;
 
 		.components-panel__icon,
 		svg {
@@ -97,18 +100,13 @@
 		}
 
 		.components-panel__body-title {
-			padding:
-				var(--grid-unit-15, to_rem(12px))
-				var(--grid-unit-20, to_rem(16px))
-				var(--grid-unit-20, to_rem(16px))
-				var(--grid-unit-20, to_rem(16px));
-			margin: to_rem(-12px) to_rem(-16px) 0;
+			margin: 0 calc(-1 * var(--grid-unit-20, to_rem(16px))) to_rem(6px);
 			padding-bottom: 0;
 		}
 	}
 
 	.components-panel__body-toggle.components-button {
-		padding: var(--grid-unit-20, to_rem(16px)) 0;
+		padding: var(--grid-unit-20, to_rem(16px)) var(--grid-unit-20, to_rem(16px));
 		color: var(--Gutenberg-Gray-900, #1e1e1e);
 		font-size: to_rem(11px);
 		font-style: normal;
@@ -117,7 +115,14 @@
 		text-transform: uppercase;
 
 		.components-panel__arrow {
-			right: 0;
+			margin-right: 0;
+		}
+	}
+
+	.components-panel__body {
+
+		&.is-opened {
+			padding: 0;
 		}
 	}
 }
diff --git a/src/content-helper/common/icons/ai-icon.tsx b/src/content-helper/common/icons/ai-icon.tsx
@@ -9,14 +9,11 @@ export const AiIcon = ( { size = 24, className = 'wp-parsely-icon' }: { size?: n
 			viewBox="0 0 24 24"
 			fill="none">
 			<Path
-				d="M8.18983 5.90381L8.83642 7.54325L10.4758 8.18983L8.83642 8.8364L8.18983 10.4759L7.54324 8.8364L5.90381 8.18983L7.54324 7.54325L8.18983 5.90381Z"
-				fill="#1E1E1E" />
+				d="M8.18983 5.90381L8.83642 7.54325L10.4758 8.18983L8.83642 8.8364L8.18983 10.4759L7.54324 8.8364L5.90381 8.18983L7.54324 7.54325L8.18983 5.90381Z" />
 			<Path
-				d="M15.048 5.90381L15.9101 8.08972L18.0961 8.95186L15.9101 9.81397L15.048 11.9999L14.1859 9.81397L12 8.95186L14.1859 8.08972L15.048 5.90381Z"
-				fill="#1E1E1E" />
+				d="M15.048 5.90381L15.9101 8.08972L18.0961 8.95186L15.9101 9.81397L15.048 11.9999L14.1859 9.81397L12 8.95186L14.1859 8.08972L15.048 5.90381Z" />
 			<Path
-				d="M11.238 10.4761L12.3157 13.2085L15.048 14.2861L12.3157 15.3638L11.238 18.0962L10.1603 15.3638L7.42798 14.2861L10.1603 13.2085L11.238 10.4761Z"
-				fill="#1E1E1E" />
+				d="M11.238 10.4761L12.3157 13.2085L15.048 14.2861L12.3157 15.3638L11.238 18.0962L10.1603 15.3638L7.42798 14.2861L10.1603 13.2085L11.238 10.4761Z" />
 		</SVG>
 	);
 };
diff --git a/src/content-helper/editor-sidebar/title-suggestions/component-pinned.tsx b/src/content-helper/editor-sidebar/title-suggestions/component-pinned.tsx
@@ -57,13 +57,15 @@ export const PinnedTitleSuggestions = ( {
 				title={ __( 'Pinned', 'wp-parsely' ) }
 				onToggle={ toggleCollapse }
 				opened={ isCollapsed }>
-				{ pinnedTitles.map( ( title ) => (
-					<TitleSuggestion
-						key={ title.title }
-						title={ title }
-						type={ TitleType.PostTitle }
-					/>
-				) ) }
+				<div className="title-suggestions-container">
+					{ pinnedTitles.map( ( title ) => (
+						<TitleSuggestion
+							key={ title.title }
+							title={ title }
+							type={ TitleType.PostTitle }
+						/>
+					) ) }
+				</div>
 			</PanelBody>
 		</Panel>
 	);

diff --git a/src/content-helper/editor-sidebar/title-suggestions/title-suggestions.scss b/src/content-helper/editor-sidebar/title-suggestions/title-suggestions.scss
@@ -66,19 +66,6 @@
 		text-transform: uppercase;
 	}
 
-	.wp-parsely-popover {
-
-		button.components-button.components-menu-item__button.is-selected {
-			outline: 3px solid transparent;
-			box-shadow: 0 0 0 2px var(--parsely-green);
-
-			&:focus {
-				outline: 3px solid transparent;
-				box-shadow: 0 0 0 2px var(--parsely-green);
-			}
-		}
-	}
-
 	// Accepted Title view.
 	// TODO: Remove, unused?
 	.parsely-write-titles-accepted-title-container {
@@ -194,14 +181,17 @@
 
 	.wp-parsely-pinned-suggestions {
 		display: flex;
-		padding: to_rem(6px) 0 var(--grid-unit-20, to_rem(16px)) 0;
 		flex-direction: column;
 		align-items: flex-start;
 		align-self: stretch;
 	}
 
 }
 
+.wp-parsely-popover .components-popover__content {
+	width: to_rem(248px);
+}
+
 .wp-parsely-suggested-title-modal {
 	display: flex;
 	width: to_rem(320px);
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => 'a727f0bb3d0187a297dd');
		<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => '135fcbc9d535df4d3f4c');