flux:button should have a label property

[timgavin]

To keep the API consistent with other elements (and bc we're lazy), I think it would be nice if the flux:button component got a label property.

<flux:button type="submit" variant="primary" label="Join Our Cult" />

Produces

<button type="submit">Join Our Cult</button>

[timgavin]

Also, if the label element contains a label attribute it should be allowed to self-close.

<flux:label name="foo" label="Foo" />

// produces
<label for="foo">Foo</label>

I think this goes for all applicable elements, really. Would keep the API consistent across all elements and would allow for more rapid development. Currently I keep having to go to the docs because I can't remember which elements self close and which don't.

[ju5t]

I understand, but I wouldn't prefer it that way.

Flux generally mimics the behavior of standard HTML elements. label is a nice feature for things like flux:input, but in those situations it actually renders a label-element. Button's don't have a label so that's why I don't think this would be useful.

[timgavin]

I used label as the term for the button because it would be consistent with everything else. If it were called text or string that's one more thing you have to remember. Regardless, the term label is only a suggestion to get the conversation started.

My thinking is why not do both? If the label attribute is present, self-close. Otherwise don't and continue on.

For example, a Flux textarea is self-closing... or not. However, (as far as I know) an HTML textarea cannot be self-closing. So having some things self-close and others not self-close is inconsistent and kind of confusing. Like how you always have to Google how some PHP functions are used because you can't remember if the string or the array is the first argument lol

I don't want to see that happen to Flux, and it kind of already feels that way. But this is also because I'm expecting things to work this way, which is my issue.

Also, Flux is a self-described system of components, not HTML elements. In my opinion, a system is designed to make your life easier by taking away the pain points of development and giving you a smooth, enjoyable experience.

I'll close with this: https://fluxui.dev/docs/principles

Thanks for your time.

[ju5t]

I used label as the term for the button because it would be consistent with everything else.

I get where you're coming from, but for me label should only be used to generate an actual <label>-element. That's what Flux does at the moment. It never generates the inner html of a component. Technically, buttons can have labels as they are labelable so if anything, it should generate that.

For example, a Flux textarea is self-closing... or not. However, (as far as I know) an HTML textarea cannot be self-closing. So having some things self-close and others not self-close is inconsistent and kind of confusing.

The fact that flux:textarea can be self-closing is a Blade-thing. You don't have to self-close it though. It would work all the same if you'd close it yourself.

Also, Flux is a self-described system of components, not HTML elements. In my opinion, a system is designed to make your life easier by taking away the pain points of development and giving you a smooth, enjoyable experience.

I'm with you on this, you shouldn't have to think too much to use Flux. I think we have different opinions on how that looks like in a component library. For me it's similarity to the HTML-element I'm familiar with already.

[timgavin]

I get where you're coming from, but for me label should only be used to generate an actual -element. That's what Flux does at the moment. It never generates the inner html of a component. Technically, buttons can have labels as they are labelable so if anything, it should generate that.

I agree with you on this, and it definitely makes sense. My broader point is that we should be able to self-close a button element, etc. and that it really doesn't matter what the attribute is called as long as it's intuitive. So for a button you could call it text?

<flux:button text="Click me" />

<button>Click me</button>

[ju5t]

I think that's where our opinions differ, and that's fine. Eventually it's up to the maintainers to decide.

[timgavin]

No reason to keep this open and clutter things up.