Foundation-sites: Button group doesn't inherit hollow as expected

[ekampp]

I would expect the .button-group to parse down the .hollow like they do .secondary or .warning.

In this example I would have expected the first button-group to look like the second one.

https://jsbin.com/cuwituyego/edit?html,output

Here is my current hack:

.button-group {
  &.hollow {
    .button {
      background: none;
      color: inherit;
    }

    &.secondary {
      .button {
        border: solid 1px $secondary-color !important;
        color: inherit;
      }
    }
  }
}

[alexkrolick]

The inner borders on button groups with hollow buttons are also slightly overlapping, so they look off.

[kball]

This seems like it is against the direction we're heading in terms of more specific classes rather than less, what think you @ncoden @brettsmason @andycochran ?

[ncoden]

@kball True. We currently use sometimes a specificity of a 2 classes (.object.modifier), but it's must be avoided. A specificity of 3 or 4 classes is even worst because it arbitrary overwrite everything else.

Unfortunately, there is no perfect solution. You want a behavior that is applied on _button_ (1) inside a _secondary_/_warning_ (2) and _hollow_ (3) _button-group_ (4).

You can do two things:

• No mercy for specificity and no breaking changes: .button-group.secondary.hollow .button (specificity of 040). It works, but good luck to apply your own properties on the button without using #id or !important.
• Care about specificity (which is a good thing, even if I feel I'm repeating myself) but with breaking changes: .button-group--hollow--secondary .button (specificity of 020).

It could be even better to try to not apply properties on elements from their parents. I don't know any approach that resolves that problem.

[ekampp]

My issue is with the inconsistency. If the decision is to never inherit from parent, then that's a clear rule I can live with. But at the moment the buttons in a button group inherits some, but not of it's parent's classes. This is confusing and inconsistent.

So either way solved my issue. 👍

[kball]

I agree on the inconsistency... does anyone know the backstory of the button group is this way? (cc @andycochran @gakimball @rafibomb @brettsmason @zurbrandon ). My inclination is that we should move towards flat classes and not have parent dependency, but I don't have the historical context on this one.

[ncoden]

.foo-group .foo {
    ...
    color: red;
    ...
}

.my-foo {
    color: green;
}

<div class="foo-group">
    <div class="foo my-foo">Too bad, this text is in red !</div>
</div>

[rafibomb]

I agree that we should solve the inconsistency.

History: Button Group parent styles were mainly for convenience.
In Foundation 5: radius and round, colors, even and stacked could be added to the parent to affect the children

It makes sense that a style like .stacked and .expanded can be added to the parent to affect all.

[DanielRuf]

What do we do with this?

[ncoden]

@DanielRuf See https://github.com/zurb/foundation-sites/pull/10081.

I think we can close this issue as everything that was not done in #10081 will be ignored (due to specificity issue) or kept for v7.