jsdrupal / drupal-admin-ui

This is an admin UI for Drupal, built with JavaScript & React. ⬅️✌️➡️
Other
238 stars 91 forks source link

[#691] First pass at adding a generic <Label> component #708

Closed eojthebrave closed 5 years ago

eojthebrave commented 5 years ago

Issue

https://github.com/jsdrupal/drupal-admin-ui/issues/691

Add a generic <Label/> component for use on forms.

There's not really anything to see yet since the component isn't used anywhere. You can run storybook to see it in action though.

This is probably also not complete as this is just a first pass at figuring out how to create one of these generic form components. It's also my first go at creating a component for this project so feel free to suggest alternative approaches to anything. :)

Example use:

<Label htmlFor="username" required={true} htmlAttributes={['data-username' => 'snorfblat']}>Username:</Label>

In order to allow someone to pass along generic HTML attributes to the component I've added an htmlAttributes prop. With the idea that you populate that with any attributes as key/value pairs, and they get spread to the component. e.g. <Label htmlFor="username" htmlAttribues={{'data-username': 'snorfblat'}}>Username:</Label>. And alternative option would be to just spread all non-used props into the <label> element. I personally like using htmlAttributes as it gives us a property we can document. But open to whatever.

I think whatever we decide here should be the pattern we use for the remaining generic components.

Anyway, here's a start at least.