Input group tests and tweaks

[mdo]

This PR is adding a new docs/4.0/examples/tests/ folder to house more complex and dense kitchen sink examples of all the supported variations of a component. Perhaps there's a better location, so I'm open to moving this in the future.

For now, I'm using this to test additional input group tweaks in hopes of fixing our rounded corner issue from #25110. I'll split those commits out after verifying what we support is functioning as intended.

---

[mdo]

I've pushed the CSS changes now. Here's where we stand with rendering validation styles in input groups for text inputs and textareas, custom selects, and custom files. Note that custom files cannot have feedback text or tooltips; their markup makes it an immediate no-go.

With these complex CSS changes and clever selectors, nothing is lost in promised support so there's technically no backward incompatibility. However, this CSS does clarify just how far we can go with this component given today's CSS selectors.

I was hoping to have this done for v4 stable, but it'll have to roll out after. I'm going to open a PR to make a note of this bug in the docs and link to the tracking issue.

@ysds I know this isn't perfect, but it's the best we can do. These new selectors are the most effective at separately targeting normal inputs/selects/files and validated ones.

[ysds]

Let me confirm very soon.

EDIT:

The following case seems broken.

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Text</span>
  </div>
  <input type="text" class="form-control is-invalid">
  <div class="input-group-append">
    <span class="input-group-text">Text</span>
  </div>
</div>
<div class="input-group">
  <div class="input-group-prepend"><span class="input-group-text">Text</span></div>
  <select class="custom-select is-invalid">
    <option selected="">Custom select</option>
  </select>
  <div class="input-group-append"><span class="input-group-text">Text</span></div>
</div>
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Text</span>
  </div>
  <input type="text" class="form-control is-valid">
  <div class="valid-feedback">
    Example valid feedback text
  </div>
</div>
<div class="input-group">
  <div class="input-group-prepend"><span class="input-group-text">Text</span></div>
  <select class="custom-select is-valid">
    <option selected="">Custom select</option>
  </select>
  <div class="valid-feedback">
    Example valid feedback text
  </div>
</div>

[mdo]

Working on those now. I just pushed a commit to resolve the valid feedback one; I had the wrong class in the selector (.valid instead of .is-valid).

[ysds]

The following no feedback-text case are not supported?

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Text</span>
  </div>
  <input type="text" class="form-control is-invalid">
  <div class="input-group-append">
    <span class="input-group-text">Text</span>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Text</span>
  </div>
  <input type="text" class="form-control is-valid">
  <div class="input-group-append">
    <span class="input-group-text">Text</span>
  </div>
</div>

[mdo]

I'm unsure just yet on those... it's what I'm trying to work through now. This is the only situation where, so far, I don't think we can differentiate these two situations:

In both examples, the input is the second child, is the second from the last child, and comes after a prepend. There's no selector support for changing what we're using nth-last-child from (e.g., :nth-last-child(.input-group-append + 2)).

[mdo]

Oh, and for context, I'm using those outlines to differentiate what gets targeted by each selector.

The two blues in each column need to be different colors, purple is the catch all (applying to all inputs in input groups), and green is actually an unnecessary one now.

[ysds]

Your effort deserves praise. It is up to you to release V4 with some limitations. We have a great utility rounded-0 😂

[XhmikosR]

@mdo: you need to move this to docs CSS file.

[mdo]

Yup yup, just putzing around for now :).

[mdo]

Closing as stale for now.