Skip to content
GitLab

Rewrite input group component

Merged Mark Otto requested to merge input-group-rewrite into v4-dev

I've rewritten the input group HTML (slightly) and CSS (mostly). This was primarily motivated by a need to support our HTML5 form validation and an urge to improve the readability of this component's CSS. Prior to this PR, adding form validation feedback and styles wasn't possible without visually breaking the component.

This is a breaking change from Beta 2.

Changes

  • Input group addons are now specific to their placement relative to an input. We've dropped .input-group-addon and .input-group-btn for two new classes, .input-group-prepend and .input-group-append. You must explicitly use an append or a prepend now, simplifying much of our CSS.

  • Multiple inputs are now supported, though I'm unsure on the accessibility angle here (/cc @patrickhlauke). I'm also unsure how this affects form validation. Fixes #23454 (closed).

  • Added support for form validation feedback in input groups. .input-group now has flex-wrap: wrap; on by default, allowing you to place validation feedback within the .input-group and style it based on the input's overall state. This isn't applicable to file inputs though.

  • Buttons now must all be of the same element type for :last-of-type to work. We use :last-of-type to avoid border-radius issues from HTML5 form validation and dropdowns being the true :last-child elements.

  • We no longer allow .form-control-sm or .form-control-lg on the input group elements. Instead, use .input-group-sm and .input-group-lg on the parent .input-group. Currently I'm unclear how to handle custom file and select sizing.

  • There are a few more direct children selectors. While we strive to avoid direct children selectors in Bootstrap 4 (e.g., .parent > .child), input groups require them to avoid cascading styles into additional components. For example, we have to target only the children buttons in a prepend or append otherwise we could affect dropdown menu content.

  • More consistently handles double borders, fixes #25005 (closed).

  • We've dropped ~50 lines of source Sass in the process.

I'll update this list as I work through todos listed below.

Todos

  • Double check files and selects
  • Form validation example added to form docs (verifying multiple inputs? file inputs?)
  • Update input groups everywhere else in docs and examples
  • Migration docs added w/ breaking changes detailed
  • Explore a custom input group button, styled to match the input with a white background and same color border
  • Do we try to do file input and custom select sizes?