Class targeting on shorthand input element: going ‘up’ as well as ‘down’

[kokoshneta]

As mentioned in the docs, the flux:input component renders as a wrapper div and a nested input element. Any class attributes you provide on the Flux component will be applied to the wrapper, but you can use class.input attributes to target the classes to the input element itself.

The component also does double duty as a shorthand for a field group with an input field. If no label attribute is provided to the shorthand, it still expands to just a wrapper div and a nested input element; but if you do provide a label attribute, it instead expands to a ui-field element containing a ui-label element and two div elements, one of which is the actual flux:input expansion, the other the error message container.

The trouble is that if you apply classes to the shorthand component, they’re applied exclusively to the resulting, nested div element, which I would venture is rarely what you’d want. As far as I can tell, there is no way to style the outermost containing element of a shorthand component, i.e., the field component.

This means that, if for example you have a grid container and want to control the column span of a component, you must use the full, verbose syntax – a shorthand component with a label will always have no custom classes and therefore only have its inherited column span.

To illustrate, take this Blade template:

<div class="grid grid-cols-6">
  <flux:input class="col-span-4" placeholder="Name" />
  <flux:input class="col-span-2" label="Name" />
</div>

That will render thus in the final HTML (very simplified, without Flux’ own classes and attributes):

<div class="grid grid-cols-6">
  <div class="col-span-4"> // spans 4 columns in grid container
    <input type="text" placeholder="Name" />
  </div>

  <ui-field> // spans only 1 column in grid container
    <ui-label>Name</ui-label>
    <div class="col-span-2"> // not a grid element, so no colspan
      <input type="text" />
    </div>
  </ui-field>
</div>

It would be extremely useful to also add a class.field attribute to allow you to target classes not to the nested input element, but to the containing field component.

[joshhanley]

@kokoshneta thanks for the request! The field:class attribute prefix actually already works for targeting the outermost <ui-field> element when using shorthand:

<div class="grid grid-cols-6">
    <flux:input class="col-span-4" placeholder="Name" />
    <flux:input field:class="col-span-2" label="Name" />
</div>

This follows the same nested:attribute convention used by other components (e.g., avatar:class on the profile component).

Your comment did make us realise we needed to update the input component to support the input: prefix to match this convention, so we've submitted a PR to add it as an alternative to class:input for targeting the inner <input> element.

[kokoshneta]

Aha! I hadn’t seen that anywhere at all. I thought I’d gone through all the relevant parts of the docs, but I now see that it is in fact documented under prop forwarding.

[joshhanley]

No worries! PR #2438 with the input: changes has been merged and will be in the next release.

[ghabriel25]

@joshhanley Had me thinking the first time I know about props forwarding. "Why on earth input has different syntax?"

[joshhanley]

@ghabriel25 originally, it was the only component that had multiple elements (outer div and inner input) and the main thing that was missing was being able to target classes for the input specifically. Hence class:input was added. But then we added some components like profile, which contains the avatar and there were more attributes than just class that needed to be able to be passed to the avatar. So we came up with the new standard of avatar:<attribute> and have used that ever since. Input never got updated to match.