[FX-5908] Fix initial position of Slider

[TomasSlama]

FX-5908

Description

Fix initial position of Slider when rendered directly on visible screen. useOnScreen is returning false by default, so before the IntersectionObserver actually starts observing, the tooltip blinks from the bottom to the top. I enhanced the hook to also return isObserved, so the component can check if the returned value is correct.

How to test

• Temploy
• Go to the slider default story and add tooltip='on'
• there should not be any jumping of the tooltip

Screenshots

Before.	After.
Insert screenshots or screen recordings	Insert screenshots or screen recordings

Development checks

• Add changeset according to guidelines (if needed)
• Double check if picasso-tailwind-merge requires major update (check its README.md)
• Read CONTRIBUTING.md and Component API principles
• 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
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• codemod is created and showcased in the changeset
• test alpha package of Picasso in StaffPortal

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: 36bd2a8

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

This PR includes changesets to release 80 packages

Name	Type
@toptal/picasso-slider	Patch
@toptal/picasso	Major
@toptal/picasso-carousel	Patch
@toptal/picasso-utils	Major
@toptal/picasso-pictograms	Patch
@toptal/picasso-charts	Patch
@toptal/picasso-forms	Patch
@toptal/picasso-query-builder	Patch
@toptal/picasso-rich-text-editor	Patch
@toptal/picasso-tailwind-merge	Patch
@topkit/analytics-charts	Patch
@toptal/picasso-accordion	Patch
@toptal/picasso-account-select	Patch
@toptal/picasso-alert	Patch
@toptal/picasso-amount	Patch
@toptal/picasso-application-update-notification	Patch
@toptal/picasso-autocomplete	Patch
@toptal/picasso-avatar	Patch
@toptal/picasso-avatar-upload	Patch
@toptal/picasso-backdrop	Patch
@toptal/picasso-badge	Patch
@toptal/picasso-breadcrumbs	Patch
@toptal/picasso-button	Patch
@toptal/picasso-calendar	Patch
@toptal/picasso-checkbox	Patch
@toptal/picasso-collapse	Patch
@toptal/picasso-container	Patch
@toptal/picasso-date-picker	Patch
@toptal/picasso-date-select	Patch
@toptal/picasso-drawer	Patch
@toptal/picasso-dropdown	Patch
@toptal/picasso-dropzone	Patch
@toptal/picasso-fade	Patch
@toptal/picasso-file-input	Patch
@toptal/picasso-form	Patch
@toptal/picasso-grid	Patch
@toptal/picasso-helpbox	Patch
@toptal/picasso-icons	Patch
@toptal/picasso-image	Patch
@toptal/picasso-input	Patch
@toptal/picasso-input-adornment	Patch
@toptal/picasso-link	Patch
@toptal/picasso-list	Patch
@toptal/picasso-loader	Patch
@toptal/picasso-logo	Patch
@toptal/picasso-menu	Patch
@toptal/picasso-modal	Patch
@toptal/picasso-notification	Patch
@toptal/picasso-number-input	Patch
@toptal/picasso-outlined-input	Patch
@toptal/picasso-overview-block	Patch
@toptal/picasso-page	Patch
@toptal/picasso-pagination	Patch
@toptal/picasso-paper	Patch
@toptal/picasso-password-input	Patch
@toptal/picasso-popper	Patch
@toptal/picasso-prompt-modal	Patch
@toptal/picasso-radio	Patch
@toptal/picasso-rating	Patch
@toptal/picasso-section	Patch
@toptal/picasso-select	Patch
@toptal/picasso-skeleton-loader	Patch
@toptal/picasso-slide	Patch
@toptal/picasso-step	Patch
@toptal/picasso-table	Patch
@toptal/picasso-tabs	Patch
@toptal/picasso-tag	Patch
@toptal/picasso-tagselector	Patch
@toptal/picasso-timeline	Patch
@toptal/picasso-timepicker	Patch
@toptal/picasso-tooltip	Patch
@toptal/picasso-tree-view	Patch
@toptal/picasso-typography	Patch
@toptal/picasso-typography-overflow	Patch
@toptal/picasso-user-badge	Patch
@toptal/picasso-note	Patch
@toptal/picasso-show-more	Patch
@toptal/picasso-empty-state	Patch
@toptal/picasso-quote	Patch
@toptal/picasso-switch	Patch

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

[ruslan-sed]

Works nice. However, some changes seem unnecessary. Maybe it is some kind of leftover, or I am missing something. Lets double check.

[TomasSlama]

@toptal-anvil ping reviewers

[ruslan-sed]

@TomasSlama is it intentional that the label is shifted to right instead of being centered as before?

[TomasSlama]

it is not, thank you for noticing, I will take a look

[TomasSlama]

@toptal-anvil ping reviewers

[ruslan-sed]

Good job!

Please check this comment.

[sashuk]

Code looks good, compared both staging and temploy, works as expected!

[sashuk]

Merging anyway, as the problem is only with docs deployment, so CI issue

10:23:01  Identity added: /var/lib/jenkins/jenkins_root/workspace/picasso-docs@tmp/_____REDACTED_____.key (/var/lib/jenkins/jenkins_root/workspace/picasso-docs@tmp/_____REDACTED_____.key)
10:23:01  [ssh-agent] Started.
10:23:01  [Pipeline] {
10:23:01  [Pipeline] sh
10:23:01  + rsync -avz --delete -e ssh /var/lib/jenkins/jenkins_root/workspace/picasso-docs/deploy-docs/ '_____REDACTED_____:~/docs/picasso/fx-5908-slider'
10:23:02  Host key verification failed.
10:23:02  rsync: connection unexpectedly closed (0 bytes received so far) [sender]
10:23:02  rsync error: unexplained error (code 255) at io.c(228) [sender=3.2.3]