Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Help Center: Align close button position #94026

Merged
merged 2 commits into from
Aug 29, 2024
Merged

Help Center: Align close button position #94026

merged 2 commits into from
Aug 29, 2024

Conversation

renancarvalho
Copy link
Contributor

@renancarvalho renancarvalho commented Aug 29, 2024 •
edited
Loading

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

Proposed Changes

Why are these changes being made?

Testing Instructions

  • Use live link
  • Make sure when the HC is open, it is aligned like this
image
  • Test also other locations where HC is not placed on the header, for instance my home, it should be positioned as before
  • Test RTL languages

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)?

@renancarvalho 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 renancarvalho self-assigned this Aug 29, 2024
@github-actions GitHub Actions
Copy link

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

Calypso Live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-117877
Jetpack Cloud live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-117877&env=jetpack
Automattic for Agencies live (direct link)
https://calypso.live?image=registry.a8c.com/calypso/app:build-117877&env=a8c-for-agencies

@renancarvalho renancarvalho marked this pull request as ready for review August 29, 2024 15:15
@renancarvalho renancarvalho requested a review from a team as a code owner August 29, 2024 15:15
@matticbot matticbot added 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
@renancarvalho renancarvalho mentioned this pull request Aug 29, 2024
Closed
7 tasks
@matticbot
Copy link
Contributor

matticbot commented Aug 29, 2024 •
edited
Loading

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

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

name                               parsed_size           gzip_size
async-load-automattic-help-center       +109 B  (+0.0%)      +50 B  (+0.0%)

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.

@matticbot
Copy link
Contributor

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/hc_close_button_position on your sandbox.

@agrullon95 agrullon95 self-requested a review August 29, 2024 15:36
arcangelini
arcangelini approved these changes Aug 29, 2024
View reviewed changes
Copy link
Contributor

@arcangelini arcangelini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested in wp-admin, calypso, editor, site-editor, and other links. Everything worked as expected. I think this solution is much cleaner. Left a couple small suggestions.

packages/help-center/src/hooks/use-opening-coordinates.ts Outdated
@@ -31,8 +44,17 @@ export const calculateOpeningPosition = ( element: HTMLElement ) => {

const { x, y, width, height } = element.getBoundingClientRect();

const buttonLeftEdge = x;
const buttonRightEdge = x + width;
const position = getPosition( element );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One small suggestion is being a little more specific with this variable. Position is kind of ambiguous. But maybe that's me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, using now originElementOffset

packages/help-center/src/hooks/use-opening-coordinates.ts Outdated
const buttonRightEdge =
x +
width +
( element.classList.contains( 'masterbar__item' )
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make more sense to put this below where we actually calculate the coordinates? This small padding should not cause it to go off screen anywhere and at least it would keep all the adjustments in one place to better follow.

		coords.left = buttonRightEdge + offestToAlignWithIcon - helpCenterWidth;

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, any reason you don't use position here again?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have just pushed it :)

@renancarvalho renancarvalho merged commit c68b88e into trunk Aug 29, 2024
11 checks passed
@renancarvalho renancarvalho deleted the fix/hc_close_button_position branch August 29, 2024 19:39
@github-actions 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@arcangelini arcangelini arcangelini approved these changes

@agrullon95 agrullon95 Awaiting requested review from agrullon95

Assignees

@renancarvalho renancarvalho

Labels
[Feature] Help Center The new integrated Help Center in Calypso that provides support tools on all screens.
Projects
Vertex Team Board
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@renancarvalho @matticbot @arcangelini