test: page in various screens

[sashuk]

FX-4090

Description

This pull request adds tests that make sure that the dropdown menu (with hamburger button) works and looks as expected on all screens.

⚠️ Additional testing was performed

The disablePortal was added to the packages/picasso/src/PageHamburger/PageHamburger.tsx in order to observe the menu when testing in Cypress (fix discovered by @mkrl)

How to test

• Compare https://picasso.toptal.net/fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test/?path=/story/layout-page--page and https://picasso.toptal.net/?path=/story/layout-page--page on various screen sizes
• (Client Portal testing) Log in as Primary Contact for any Client (for example, for https://staff-portal.toptal.net/clients/295868) on staging, compare https://portal.toptal.net/ and https://client-portal-pr-6960.toptal.rocks/ on various screens
• (Staff Portal testing) Please see the https://staff-portal-pr-10698.toptal.rocks (https://github.com/toptal/staff-portal/pull/10698), but the change should not affect portal as it it uses custom menu
• (Talent Portal testing) The Portal has not migrated to new breakpoints, so the following can be done to test it locally
  • log in as active Talent (for example, as https://staff-portal.toptal.net/talents/3747845) at staging
  • check out master branch, set up default configuration
  • go to node_modules/@toptal/picasso/PageHamburger/PageHamburger.js file and add disablePortal: true

• run portal locally and check it on various screen sizes

Development checks

• Add changeset according to guidelines (if needed)
• Read CONTRIBUTING.md and Component API principles
• [N/A] Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• [N/A] Annotate all props in component with documentation
• [N/A] Create examples for component
• Ensure that deployed demo has expected results and good examples
• [N/A] Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests
• Remove testing pull requests and branches before merge (https://github.com/toptal/staff-portal/pull/10698 and https://github.com/toptal/client-portal/pull/6960)

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 315f88e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@toptal/picasso	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[sashuk]

@toptal-bot run package:alpha-release

[sashuk]

@toptal-anvil ping reviewers

[TomasSlama]

it does not create expected images

[sashuk]

@TomasSlama Thank you for noticing, addressed!

[TomasSlama]

Looks good, I think your new screenshot revealed a style bug

we are missing bottom spacing in the header.

Also I think that the one diff is not expected

[augustobmoura]

Added some comments

[augustobmoura]

I added some comments, mostly on documenting the workarounds and non-obvious choices

[sashuk]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@48.0.1-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.28+5c2ab6a80
yarn add @toptal/picasso@37.1.3-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.8+5c2ab6a80
yarn add @toptal/picasso-charts@51.0.1-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.28+5c2ab6a80
yarn add @toptal/picasso-codemod@5.5.3-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.39+5c2ab6a80
yarn add @toptal/picasso-forms@60.0.1-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.20+5c2ab6a80
yarn add @toptal/picasso-pictograms@1.1.2-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.114+5c2ab6a80
yarn add @toptal/picasso-provider@3.1.3-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.103+5c2ab6a80
yarn add @toptal/picasso-rich-text-editor@4.0.2-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.15+5c2ab6a80
yarn add @toptal/picasso-shared@12.0.1-alpha-fx-4090-add-all-breakpoint-ranges-as-targets-in-pagetopbar-test-5c2ab6a80.159+5c2ab6a80

[augustobmoura]

Nice work @sashuk 👍