Foundation 5 Adaptation &co. #8

esolitos · 2014-06-17T23:04:06Z

Hi, I made some improvements to this nice package. Mostly with the idea to port it to Foundation 5.

Those are the changes:

Added the new withLabel($name, $label) that allows to define a label for a
form item.
Label that are added using this new method will wrap around the element as suggested
by Foundation 5 [http://foundation.zurb.com/docs/components/forms.html]
Checkboxes and Radio that are going to use this new method will have a specific
ID so the labels can be correctly clicked to check the input item.
Tests have been improved using assertTag() instead of an intricate and unsafe
assertTrue() using strpos.

Taking the README example for the Usage chapter here's how it simplifies:

<div class="large-8 small-12 columns">
    {{ Form::model($user,array('route' => 'route.name','class' => 'custom')) }}
        <fieldset>
            <legend>Create New Account</legend>
            {{ Form::withLabel('name', "Full Name")->text('name',$user->name,array('placeholder'=>'Tell us your whole name')) }}
            {{ Form::withLabel('email', 'Email')->text('email',$user->email,array('placeholder'=>'Valid email used to login and receive information from us')) }}
            {{ Form::withLabel('password', 'Password')->password('password',$user->password,array('placeholder'=>'Gimme your password')) }}
            {{ Form::submit('Create Account',array('class'=>'button')) }}
        </fieldset>
    {{ Form::close() }}
</div>

will render without errors

<div class="large-8 small-12 columns">
    <form accept-charset="UTF-8" action="http://host/action/from/route" class="custom" method="post">
        <fieldset>
            <legend>Create New Account</legend> 
            <label for="name">Full Name <input id="name" name="name" placeholder="Tell us your whole name" type="text"></label> 
            <label for="email">Email <input id="email" name="email" placeholder="Valid email used to login and receive information from us" type="text"> </label> 
            <label for="password">Password<input id="password" name="password" placeholder="Gimme your password" type="password" value=""> </label> 
            <input class="button" type="submit" value="Create Account">
        </fieldset>
    </form>
</div>

and in case of errors a <span class="error">$error_message</small> will be added inside the label and the class error will be applied to both the <label> and the input/select/textarea/....

The method withLabel() can also be used to define all the labels like:

Form::withLabel('name', 'Your Name')->withLabel('password', 'Password')-withLabel('email', 'The eMail');

and I'm planning to allow to accept an associative array as parameter or to add a defineLabels() method to define all the labels at once (but i'm not not sure how to manage checkboxes).
Let me know what do you think about it.
In case you don't want to merge I'll make a separate package keeping you in the credits as original author.

Note: If you look at the full diff of FormBuilder it is "complex" to understand, look at the single commits and the steps are going to be more clear.

PS: This is the laravel view I use for testing the output:

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>foundation-form.blade</title>
    <link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="http://cdn.foundation5.zurb.com/foundation.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body id="form.blade">
    <div class="row container">
      <div class="small-12 medium-10 large-6 small-centered columns end">
        {{ Form::open(['url' => 'route.name','class' => 'custom']) }}
        <fieldset>
          <legend>Just a Fieldset</legend>
          {{ Form::withLabel('name', "Your full Name")->text('name', "MyUsername", ['placeholder'=>'Tell us your whole name'] ) }}
          {{ Form::label('another_name') }}
          {{ Form::text('another_name', "MyUsername", ['placeholder'=>'Tell us your whole name'] ) }}
          {{ Form::withLabel('an_email', "Email")->email('an_email', "email@example.com") }}
          {{ Form::withLabel('your_password', 'Password')->password('your_password', ['placeholder'=>'Gimme your password'] ) }}
          {{ Form::withLabel('long_text', 'Long Text?')->textarea('long_text', "Something written down", ['placeholder'=>'Gimme your password'] ) }}
          {{ Form::withLabel('some_month', 'Select a Month')->selectMonth('some_month', 2) }}
          {{ Form::withLabel('choose_one', 'Select Something')->select('choose_one', ["First", "Second", "Third", 'Last'], 2) }}

          {{ Form::label('choose', "Two Options") }}
          {{ Form::withLabel('choose', 'Red')->checkbox('choose', 1, TRUE) }}
          {{ Form::withLabel('choose', 'Yellow')->checkbox('choose', 2, FALSE) }}

          {{ Form::label('check', "Other Checkboxes") }}
          {{ Form::withLabel('check', 'Box')->checkbox('check', 'box', FALSE) }}
          {{ Form::withLabel('check', 'Cartboard')->checkbox('check', 'board', FALSE) }}
          {{ Form::withLabel('check', 'Paper')->checkbox('check', 'paper', FALSE) }}

          {{ Form::label('qty', "Radio Selection") }}
          {{ Form::withLabel('qty', 'Full')->radio('qty', '1', FALSE) }}
          {{ Form::withLabel('qty', 'Half Full')->radio('qty', '0.5', FALSE, ['id'=>'half-full']) }}
          {{ Form::withLabel('qty', 'Half Empty')->radio('qty', '0.5', FALSE, ['id'=>'half-empty']) }}
          {{ Form::withLabel('qty', 'Empty')->radio('qty', '0', FALSE) }}

          {{ Form::submit('Create Account',array('class'=>'button')) }}
        </fieldset>
        {{ Form::close() }}
      </div>
    </div>
  </body>
</html>

- Password field uses input() function that is teased in the Email field tests - SelectMonth and SelectRange are unchanged and they both use select() which is tested in its own tests

- Textbox field uses input() function that is teased in the Email field tests

- Added the new ``withLabel($name, $label)`` that allows to define a label for a form item. - Label that are added using this new method will wrap around the element as suggested by Foundation 5 [http://foundation.zurb.com/docs/components/forms.html] - Checkboxes and Radio that are going to use this new method will have a specific ID so the labels can be correctly clicked to check the input item. - Tests have been improved using ``assertTag()`` instead of an intricate and unsafe ``assertTrue()`` using ``strpos``.

stevenmaguire · 2014-06-19T15:14:34Z

This is pretty cool. I will take a closer look at this over the weekend and take action.

Thank you for contributing!

esolitos · 2014-06-19T15:29:09Z

Ok, if you'll have any question just ask me. :-)

Esolitos Marlon

Sent from mobile.

On 19/giu/2014, at 17:14, Steven Maguire notifications@github.com wrote:

This is pretty cool. I will take a closer look at this over the weekend and take action.

Thank you for contributing!

—
Reply to this email directly or view it on GitHub.

stevenmaguire · 2014-06-26T13:37:31Z

tests/When_Building_Email_Test.php

+          'tag' => 'input',
+          'attributes' => ['type' => 'email']
+        ];
+        $this->assertTag( $expected_tag, $result );


Thank you for porting all the tests to use AssetTag. This makes a lot of sense.

Stolz · 2014-06-26T16:23:47Z

I didn't take a look of the full code changes but I saw there is a new method withLabel(). Does it replace the Form::label() exiting method or does it affect it's behaviour?

I hope it doesn't because so far this package was a drop-in replacement for the official Laravel FormBuilder. If anyone starts using the withLabel() method then he/she will have problems in case he/she wants to jump to, lets say, a similar package but for Twitter Bootstrap.

stevenmaguire · 2014-06-26T17:02:14Z

I agree with @Stolz here. Part of my immediate hesitation is that this is adding new functionality that I am still deliberating on it's value here. I will continue to deliberate.

esolitos · 2014-06-26T19:18:32Z

No it does not, label() works as expected, it remains untouched, only labels set using the method withLabel() are going to wrap the element. ;)

stevenmaguire · 2014-06-27T05:28:48Z

@esolitos Thank you for the contributions. I appreciate the thought and time you have put into your solution. I really like your ideas and feedback regarding the tag assertions.

I feel that @Stolz's point regarding the "withLabel" is a valid one, in that the solution is meant to be invisible to the normal Laravel development process. If this package promises new functionality, it could cause some individuals a great deal of headache should they decide to no longer use this package in their project. I do like what you are proposing and would encourage you to contribute your solution to the laravel/framework repository. If @taylorotwell et al agree to merge it, I think it will be a valuable addition to the FormBuilder class.

I took note of some of your changes to add support for the checkable elements. I have been reluctant to move forward with support for those as displaying validation messages for checkboxes and radio buttons, within and outside of a group, as it is a bit tricky. I am interested to hear more about your ideas on how you would go about this. Would you be interested in opening a new pull request that focused solely on that feature enhancement?

Lastly, I did just push an update to the package that implements the tag assertions as you recommended.

Esolitos (Marlon Saglia) added 4 commits June 17, 2014 21:13

Removing functions that are going to be substituted.

22c6f0c

Removed superfluous tests.

20e1467

- Password field uses input() function that is teased in the Email field tests - SelectMonth and SelectRange are unchanged and they both use select() which is tested in its own tests

Removed superfluous tests.

6c7ed8f

- Textbox field uses input() function that is teased in the Email field tests

stevenmaguire reviewed Jun 26, 2014
View reviewed changes

stevenmaguire closed this Jun 27, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Foundation 5 Adaptation &co. #8

Foundation 5 Adaptation &co. #8

esolitos commented Jun 17, 2014

stevenmaguire commented Jun 19, 2014

esolitos commented Jun 19, 2014

stevenmaguire Jun 26, 2014

Stolz commented Jun 26, 2014

stevenmaguire commented Jun 26, 2014

esolitos commented Jun 26, 2014

stevenmaguire commented Jun 27, 2014

Foundation 5 Adaptation &co. #8

Foundation 5 Adaptation &co. #8

Conversation

esolitos commented Jun 17, 2014

stevenmaguire commented Jun 19, 2014

esolitos commented Jun 19, 2014

stevenmaguire Jun 26, 2014

Choose a reason for hiding this comment

Stolz commented Jun 26, 2014

stevenmaguire commented Jun 26, 2014

esolitos commented Jun 26, 2014

stevenmaguire commented Jun 27, 2014