Help Center: Align 'X' close button with Help Center icon #94021

renancarvalho · 2024-08-29T09:18:33Z

Related to https://github.com/Automattic/dotcom-forge/issues/8829
Fixes https://github.com/Automattic/dotcom-forge/issues/8829

Proposed Changes

Align the Help Center 'X' with the '?' icon, now it considers the question mark's padding in the alignment.

Why are these changes being made?

Fix https://github.com/Automattic/dotcom-forge/issues/8829

Testing Instructions

Use live link
Make sure when the HC is open, it is aligned like this

Test also other locations where HC is not placed on the header, for instance my home, it should be positioned as before

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-08-29T09:18:46Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-117854

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-117854&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-117854&env=a8c-for-agencies

matticbot · 2024-08-29T09:20:47Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

help-center
notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/helpcenter_close_button_alignment on your sandbox.

matticbot · 2024-08-29T09:25:11Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~120 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
async-load-automattic-help-center       +264 B  (+0.0%)     +120 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

arcangelini · 2024-08-29T09:55:40Z

Any chance you would want to account for the left edge also? Now that everything is squared up in the Help Center it would also look nice to have this side too.

alshakero · 2024-08-29T10:14:55Z

packages/help-center/src/hooks/use-opening-coordinates.ts

@@ -24,6 +24,10 @@ export const calculateOpeningPosition = ( element: HTMLElement ) => {
 		return defaultPosition;
 	}

+	// This takes into account the '?' button's padding and align the close button with the help center icon
+	const computedStyle = window.getComputedStyle( element );


FYI, this call is reallly slow. It will typically force style recalc.

Hey 👋 Thank you for the tip. I know it can be relatively slow. Since this happens only when opening help center and is not part of a loop or anything like that, I think this is fine.

Are you concerned about it? I could try other potential solutions, but I am afraid it might bring more complexity.

It happens on every click anywhere on the page when the Help Center is closed :(

It will make every button click slower.

I have pushed a new commit that relies on getComputedStyles just once, subsequently, it relies on data-attributes which is faster than getComputedStyles.

I am happy with this approach, but you are welcome to propose another idea :)

That's beautiful! Testing now.

alshakero

The caching idea is perfect! Left some cosmetic comments and found a tiny issue in RTL.

alshakero · 2024-08-29T12:47:33Z

packages/help-center/src/hooks/use-opening-coordinates.ts

-	const helpCenterPaddingRight = parseInt( computedStyle.paddingRight, 10 );
+	const helpCenterIconPaddingRight =
+		parseInt( element.style.paddingRight, 10 ) ||
+		parseInt( element.getAttribute( 'data-padding-right' ) || '0', 10 );


You can do element.dataset.paddingRight btw. It automatically covnerts kebab case to camel case.

alshakero · 2024-08-29T12:50:46Z

packages/help-center/src/hooks/use-opening-coordinates.ts

@@ -36,7 +37,7 @@ export const calculateOpeningPosition = ( element: HTMLElement ) => {
 	const { x, y, width, height } = element.getBoundingClientRect();

 	const buttonLeftEdge = x;
-	const buttonRightEdge = x + width + helpCenterPaddingRight;
+	const buttonRightEdge = x + width + helpCenterIconPaddingRight;


Would we need to make this - helpCenterIconPaddingRight in RTL?

alshakero · 2024-08-29T12:51:10Z

packages/help-center/src/hooks/use-opening-coordinates.ts

@@ -24,6 +24,10 @@ export const calculateOpeningPosition = ( element: HTMLElement ) => {
 		return defaultPosition;
 	}

+	// This takes into account the '?' button's padding and align the close button with the help center icon
+	const computedStyle = window.getComputedStyle( element );


That's beautiful! Testing now.

alshakero · 2024-08-29T12:52:37Z

packages/help-center/src/hooks/use-opening-coordinates.ts

+					// Cache the computed padding-right if not already done
+					// This will be used to align the help center close button with the "?" icon
+					if ( ! openingElement.hasAttribute( 'data-padding-right' ) ) {
+						const computedStyle = window.getComputedStyle( openingElement );
+						openingElement.setAttribute( 'data-padding-right', computedStyle.paddingRight );
+					}


This should happen inside calculateOpeningPosition.

I can move it there, still works fine.
I am, honestly, not sure where is the best place to put this logic. Would you please elaborate a bit more why you believe inside the function is a better place?

Moved.

Because this value is used in calculateOpeningPosition and useOpeningCoordinates doesn't need it.

renancarvalho · 2024-08-29T15:16:53Z

After discussing p1724940421518469/1724923219.497729-slack-C02T4NVL4JJ with team vertex, I have decided to change the approach to addressing this issue, new PR

Align 'x' close button with help center icon

d4c3713

renancarvalho added the [Feature] Help Center The new integrated Help Center in Calypso that provides support tools on all screens. label Aug 29, 2024

renancarvalho self-assigned this Aug 29, 2024

renancarvalho requested a review from a team as a code owner August 29, 2024 09:18

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Aug 29, 2024

alshakero reviewed Aug 29, 2024

View reviewed changes

Cache padding value

ba88c0c

alshakero requested changes Aug 29, 2024

View reviewed changes

Fix help center alignment in the editor

fe0172f

renancarvalho requested a review from a team August 29, 2024 15:15

renancarvalho closed this Aug 29, 2024

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Help Center: Align 'X' close button with Help Center icon #94021

Help Center: Align 'X' close button with Help Center icon #94021

renancarvalho commented Aug 29, 2024

github-actions bot commented Aug 29, 2024 •

edited by matticbot

Loading

matticbot commented Aug 29, 2024

matticbot commented Aug 29, 2024 •

edited

Loading

arcangelini commented Aug 29, 2024

alshakero Aug 29, 2024

renancarvalho Aug 29, 2024

alshakero Aug 29, 2024

renancarvalho Aug 29, 2024

alshakero Aug 29, 2024

alshakero left a comment

alshakero Aug 29, 2024

alshakero Aug 29, 2024

alshakero Aug 29, 2024

alshakero Aug 29, 2024

renancarvalho Aug 29, 2024

alshakero Aug 29, 2024 •

edited

Loading

renancarvalho commented Aug 29, 2024

Help Center: Align 'X' close button with Help Center icon #94021

Help Center: Align 'X' close button with Help Center icon #94021

Conversation

renancarvalho commented Aug 29, 2024

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Aug 29, 2024 • edited by matticbot Loading

matticbot commented Aug 29, 2024

matticbot commented Aug 29, 2024 • edited Loading

arcangelini commented Aug 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alshakero left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alshakero Aug 29, 2024 • edited Loading

Choose a reason for hiding this comment

renancarvalho commented Aug 29, 2024

github-actions bot commented Aug 29, 2024 •

edited by matticbot

Loading

matticbot commented Aug 29, 2024 •

edited

Loading

alshakero Aug 29, 2024 •

edited

Loading