Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

[MM-24963] Fix inconsistent hover/tooltips UX #6853

Merged
merged 6 commits into from
Oct 24, 2020
Merged

Conversation

calebroseland
Copy link
Member

Summary

A number of <OverlayTrigger/>s are inside their corresponding buttons/links. This can cause a discrepancy between the CSS hover state and activation of said trigger (some imperceivable, others noticeable, depending on the padding/styling). This PR inverts these so the buttons/links are inside <OverlayTrigger/>.

  • MM-24963 - Fix hover box/tooltip target for following interactive elements:
    • Header
      • Channel Members
      • Help Menu/Dropdown
    • LHS/Sidebar (new)
      • Filter by unread
      • New Category
      • Category/Channel Menu
      • DMs: Sort By and New
    • Center Channel
      • Post Reaction (original in ticket)
    • RHS
      • Info Card "back to search results" button (when opened from search results)
  • <OverlayTrigger/>: new disabled prop to disable overlay content from being displayed via visibility: hidden (prevents positional glitches vs. wholly removing from DOM)
    e.g. turning off the tooltip of a button that also has a popover/content overlay.
    The overriding show=false in [email protected]+ could replace this if/when upgraded.

2020-10-19 17 33 17

@calebroseland calebroseland added 2: Dev Review Requires review by a core commiter 3: QA Review Requires review by a QA tester labels Oct 19, 2020
@calebroseland calebroseland changed the title [MM-24963] Fix inconsistant hover/tooltips UX [MM-24963] Fix inconsistent hover/tooltips UX Oct 19, 2020
components/overlay_trigger.tsx Show resolved Hide resolved
Copy link
Contributor

@jfrerich jfrerich left a comment

Choose a reason for hiding this comment

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

All of the inversions look good to me.

@calebroseland
Copy link
Member Author

/update-branch

@calebroseland calebroseland added the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Oct 21, 2020
Copy link
Contributor

@jgilliam17 jgilliam17 left a comment

Choose a reason for hiding this comment

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

Thank you @calebroseland
Tested, looks good to merge.

  • Verified tooltip appears on hover as cursor changes to pointer. Verified the list of items listed in accompanying jira ticket.

@jgilliam17 jgilliam17 added 4: Reviews Complete All reviewers have approved the pull request and removed 2: Dev Review Requires review by a core commiter 3: QA Review Requires review by a QA tester Setup Cloud Test Server Setup a test server using Mattermost Cloud labels Oct 23, 2020
@mm-cloud-bot
Copy link

Test server destroyed

@calebroseland calebroseland merged commit 6d29b6c into master Oct 24, 2020
@calebroseland calebroseland deleted the MM-24963 branch October 24, 2020 17:34
calebroseland added a commit that referenced this pull request Oct 27, 2020
* invert overlays/btns

* hide overlay when disabled

* simplify, invert remaining triggers

* invert filter-unread overlay/button

Co-authored-by: Mattermod <[email protected]>
@amyblais amyblais added this to the v5.30.0 milestone Nov 13, 2020
@amyblais amyblais added Changelog/Not Needed Does not require a changelog entry Docs/Not Needed Does not require documentation labels Nov 16, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
4: Reviews Complete All reviewers have approved the pull request Changelog/Not Needed Does not require a changelog entry Docs/Not Needed Does not require documentation
Projects
None yet
7 participants