feat(interpretations): visual design and UX improvements#1830
feat(interpretations): visual design and UX improvements#1830cooper-joe wants to merge 3 commits intomasterfrom
Conversation
|
There was a problem hiding this comment.
Most of the changes look good, but I have some doubts about this delete confirmation UX. Firstly, it has a small bug that can be triggered like so:
- Click delete button once
- Move mouse to the right so that the cursor is over the right end of the now-expanded button. You'll see the "Click again to delete" tooltip
- Wait until the timeout expires, now the cursor is no longer over the button. So this means there was a mouse-enter event but never a mouse-leave event and the tooltip remains visible
I think by applying different markup and keeping the delete button the same size you'd be able to avoid all of this.
From a UX perspective this button is quite nice, because it's quite subtle. But it's not a conventional solution (I think) and since the timeout is fairly short and because you don't see a counter, it's also a bit surprising/confusing. It'd be very nice if there would be some sort of visual clue to what is happening. Possibly you could have a circle with an animation or animate the fill of the background or sth?
Good catch on that bug. A markup change to avoid the issue completely sounds ideal.
Could you elaborate or reword this? I don't follow? Specifically,
What do you mean by counter? I do think a label appearing saying Delete?, plus the colour change, does bring the user's attention to the fact that "confirmation is required to perform that action". But I'm curious to know the solution you describe above. |
| <Tooltip closeDelay={200} content={tooltipContent}> | ||
| {({ ref, onMouseOver, onMouseOut }) => ( | ||
| <span | ||
| ref={ref} | ||
| onMouseOver={onMouseOver} | ||
| onMouseOut={onMouseOut} | ||
| className="wrapper" | ||
| > | ||
| <button | ||
| onClick={(event) => { | ||
| event.stopPropagation() | ||
| onClick() | ||
| }} | ||
| className={cx('button', { selected, viewOnly })} | ||
| className={cx('button', { | ||
| selected, | ||
| viewOnly, | ||
| confirming, | ||
| })} | ||
| disabled={disabled} | ||
| data-test={dataTest} | ||
| > | ||
| {count && count} | ||
| <Icon /> | ||
| {label !== undefined && label !== null && ( | ||
| <span className="label">{label}</span> | ||
| )} | ||
| </button> |
There was a problem hiding this comment.
I'm thinking that if you wrap <Icon /> with the tooltip anchor span, then that anchor will have a constant size which will avoid the bug I reported earlier. Downside would be that if you hover the right end of the button now the tooltip will disappear, but I think this is less of an issue.
There was a problem hiding this comment.
I don't think a best-of-both-worlds solution is possible:
- If the anchor element changes size then the mouse can move out of the button without a mouseout event and the tooltips keeps showing.
- If the additional content is outside the tooltip anchor, then hovering over the additional content will not keep the tooltip in view
|
I opened #1831, a PR against this branch. It does the following:
@cooper-joe let me know if you like it! |
2 participants
Implements UX-198
Key features
Interpretationand related componentsDescription
This PR makes visual and ux-focused changes to the
Interpretationand its related components. The changes remove some unnecessary elements.Summary of major changes to each component:
Message
List
Thread/Modal
Rich text editor
Storybook stories were added to support testing, I kept these in as they seem useful.
TODO
Screenshots