[popover2] feat(Tooltip2): compact appearance #5822
Conversation
[popover2] feat(Popover2, Tooltip2): compact appearancePreviews: documentation | landing | table | demo |
| } | ||
|
|
||
| // any descendant ContextMenu2s may update this ctxState | ||
| private renderPopover = (ctxState: Tooltip2ContextState) => { | ||
| const { children, disabled, intent, popoverClassName, ...restProps } = this.props; | ||
| const classes = classNames( | ||
| Classes.TOOLTIP2, | ||
| { [CoreClasses.MINIMAL]: this.props.minimal }, |
There was a problem hiding this comment.
this line was intentionally removed. it's not necessary to apply this class here because Popover2 will do it anyway since we're passing through the minimal prop
|
Do we need it for Popover? Tooltips should only have a couple lines of text in it where Popover have more content. At the same time, compact mode make the spacing from elements to sides lower than between elements. This is "wrong" information architecture and end-up looking unbalanced. |
|
@CPerinet I found a bunch of popovers in our internal code bases with 10px padding, so I figured this compact modifier might be useful for those use cases. I did also find a handful of popovers with 5px or 15px padding (even some 12px, 8px...), so maybe this styling isn't as standard as I'd like it to be. I will have to think some more about this problem.
Good point... in the docs example this is an issue because the "footer" content section uses a 15px top margin:
For now, I'll revert the Popover2 changes and just keep this PR scoped to Tooltip2. |
Revert Popover2 changes, scope to Tooltip2 onlyPreviews: documentation | landing | table | demo |
reduce padding just a bitPreviews: documentation | landing | table | demo |
adidahiya
changed the title
|
Iterated with @CPerinet over Slack, we've settled on a 5/7px padding for the compact tooltip. We may adjust this later if necessary. |
Changes proposed in this pull request:
This PR introduces the
compactprop for Tooltip2, which allows the components to render their content with smaller padding than the default appearance.The new compact appearance is encouraged in data-dense UIs:
I also noticed a minor typographic issue for
<Code>spans inside text which stood out in the example for this new prop. The defaultvertical-align: baselinemakes inline<Code>too low compared to its adjacent text, and I've found that a value ofvertical-align: text-bottomlooks better. Right now I'm conservatively applying this fix to the new.bp4-compactmodifier class only.Not in this PR (considered, but reverted)
For Popover2,compact={true}applies whenpopoverClassName={Popover2Classes.POPOVER2_CONTENT_SIZING}is set. The default 20px padding for this modifier class has often felt too large in practical usage, which forced Blueprint users to apply style overrides.