Add input-group and button-group

[reinerBa]

As suggested in issue #159 . The code needs his own file because margin-bottom of inputs is set in the input file, which is parsed after the _button.scss

[leoherzog]

With the way that the buttons currently handle border-radius, you end up with funny-looking buttons side-by-side:

https://jsfiddle.net/leoherzog/arux1js6/

Do you think it makes more sense to add a

.button-group > button {
  border-radius: 0;
}

.button-group > button:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.button-group > button:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

like this?

https://jsfiddle.net/leoherzog/u6aL0m4p/

[reinerBa]

With the way that the buttons currently handle border-radius, you end up with funny-looking buttons side-by-side:

https://jsfiddle.net/leoherzog/arux1js6/

Thanks for your Feedback ✌ and your friendly recommendation but for me it works fine when i use "SCSS" als styling language.

[yus-ham]

maybe consider to use role=group

[lucaslarroche]

@reinerBa, Thank you for this new contribution, and sorry for the delay.

role="group"

As suggested by @yus-ham, I would prefer to use role="group" instead of class="button-group". It seems to fit perfectly in our case (documentation).

<div role="group">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>

It would also allow us not to have 2 different classes .button-group and .input-group.

aria-current

With version 1.5.0 we added the aria-current support. Nothing to do here as it's already working if you rebase your branch from master.

<div role="group">
  <button aria-current="page">Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>

Architecture

I would suggest components/group instead of content/form-input-group.

[lucaslarroche]

Sorry, closed by mistake

[lucaslarroche]

@reinerBa, I'm closing this PR because this feature has been added to the v2 (#261).