Blueprint: Dividers in Control Groups have incorrect margins

[cmslewis]

Environment

• __Package version(s)__: @blueprintjs/core ^3.22.3
• __Browser and OS versions__: Mac OS X Chrome 79.0.3945.88

If possible, link to a minimal repro (fork this code sandbox):

Steps to reproduce

Spotted this while building a <ControlGroup> that contained buttons, selects, and some dividers.

<ControlGroup>
    // ...Other controls...
    <Button />
    <Divider />
    <Button />
    // ...Other controls...
</ControlGroup>

Actual behavior

The divider doesn't have its usual 5px padding. Instead, <ControlGroup> overrides with a default -1px padding for all controls.

Expected behavior

The divider should have a 5px padding when inside a <ControlGroup>.

Possible solution

// Special case for dividers
.bp3-control-group .bp3-divider {
    margin: 5px;
}

Labeling P3 because it's an easy 1-line fix of custom CSS for application authors. Filing quickly for tracking, but may be able to open a PR soon.

[lidyho0708]

Hi

[lidyho0708]

Im Clueless

[aug-mx]

hi!how are you

[adidahiya]

Actually, I'm not so sure about this. Why put a divider inside a control group instead of separating multiple control groups by dividers? From the existing documentation it feels like a control group is supposed to be one cohesive unit. Can you demonstrate a strong use case for this proposed change?

[cmslewis]

This is relevant only if all controls in the control group are minimal - in that case, you might want to chunk controls into sub-groups using vertical dividers, without introducing a bunch of extra padding or rounded border radii (on hover) between sub-groups. Consider this example of a floating text-formatting toolbar, which includes buttons and native select menus:

I'll send you a PR link internally. Let me know if I'm missing an obvious workaround though.

[adidahiya]

@cmslewis ok that makes sense. There is still some visual weirdness with border radii in this setup, but #4215 looks like a good step in the right direction.