search

web3ui / web3uikit

Lightweight reusable Web3 UI components for dapps.
https://web3uikit.com
MIT License
1.72k stars 269 forks source link

Feature Request: Add titles to form elements #670

Closed JulesClaussen closed 2 years ago

JulesClaussen commented 2 years ago

Hey guys!

Thank you again for the kit it's amazing! Could it be possible to add a sort of title to the elements of the form component? https://web3ui.github.io/web3uikit/?path=/docs/2-forms-form--demo-form Especially for the textarea input. From a user perspective this title would explain what to fill in the Area. I guess "title" is a good attribute name.

Thank you! Jules

AbhinavMV commented 2 years ago

Hey @JulesClaussen , Glad to hear you like our kit 🌟 This looks like a bug to me rather than feature request. Form already takes in a name attribute for each input which is displayed as label. But i guess its not being passed down to textarea. Would you like to contribute on this ?

BillyG83 commented 2 years ago

hey @AbhinavMV nice fast reply. @JulesClaussen and i were talking on Discord and what he wants is that the textArea can have a title prop to render a title, prob an H3 in the form above it. Maybe we could extend this for each element in form to have an optional H3 title?

JulesClaussen commented 2 years ago

I think I found the issue for the textArea only: https://github.com/web3ui/web3uikit/blob/master/src/components/Form/Form.tsx#L168 Should be : <H4Styled>{input.name}</H4Styled>

Not tested though, but strongly looks like it.

@BillyG83 regarding the use cases, I'm not sure yet to see how we could use a title for a checkbox for example. EDITED: Note that H3 is used for the name of the form already.

I'll quickly test this for the textArea and PR it. I'll let you know in a couple of minutes (hopefuly)

JulesClaussen commented 2 years ago

Quick one, what's the remote name? I tried to push with the usual : git push origin fix-form-titletextarea Where fix-form-titletextarea would be a new remote branch, but I have a 403 forbidden. I have never contributed to such repo, which command should I use? The fix was indeed replace input.value by input.name.

Thank you!

AbhinavMV commented 2 years ago

It's because you don't have direct access to the repo. Please follow the steps below:

  1. Create a fork of the repository.
  2. Clone the forked repo into your local.
  3. Create a new branch, make your changes and use git push origin <branch-name>
  4. Visit your forked repo in browser and you should see a notification to create a PR. Same steps with some screenshots -> PR create link Feel free to ping us on moralis discord if you face any challenges. Looking forward to see your PR. 🤩
JulesClaussen commented 2 years ago

That's it ! https://github.com/web3ui/web3uikit/pull/672 I didn't add the titles for all the field types though, I simply fixed the Form textArea one. Do you think there would be usecases of other fields types to have a Name along with the actual value of the checkbox?

Cheers!