Merge pull request #13 from protonemedia/label-for-attributes

[Bootstrap 4] Add sensible 'for' attribute to Label component

Author: pascalbaljet

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to `laravel-form-components` will be documented in this file
 
+## 2.0.0 - 2020-09-09
+
+- Added sensible 'for' attributes to the Bootstrap 4 Label components.
+
+## 1.4.1 - 2020-09-09
+
+- Support for Laravel Livewire 2.0
+
 ## 1.4.0 - 2020-09-09
 
 - Support for Laravel 8.0

resources/views/bootstrap-4/form-checkbox.blade.php

@@ -9,13 +9,16 @@
             name="{{ $name }}"
         @endif
 
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
 
         @if($checked)
             checked="checked"
         @endif
     />
 
-    <x-form-label :label="$label" :for="$name" class="form-check-label" />
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" class="form-check-label" />
 
     {!! $help ?? null !!}
 

resources/views/bootstrap-4/form-input.blade.php

@@ -1,5 +1,5 @@
 <div class="@if($type === 'hidden') d-none @else form-group @endif">
-    <x-form-label :label="$label" :for="$name" />
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
 
     <div class="input-group">
         @isset($prepend)
@@ -19,6 +19,10 @@
                 name="{{ $name }}"
                 value="{{ $value }}"
             @endif
+
+            @if($label && !$attributes->get('id'))
+                id="{{ $id() }}"
+            @endif
         />
 
         @isset($append)

resources/views/bootstrap-4/form-radio.blade.php

@@ -13,9 +13,13 @@
         @if($checked)
             checked="checked"
         @endif
+
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
     />
 
-   <x-form-label :label="$label" :for="$name" class="form-check-label" />
+   <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" class="form-check-label" />
 
     {!! $help ?? null !!}
 

resources/views/bootstrap-4/form-select.blade.php

@@ -1,5 +1,5 @@
 <div class="form-group">
-    <x-form-label :label="$label" :for="$name" />
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
 
     <select
         @if($isWired())
@@ -12,6 +12,10 @@
             multiple
         @endif
 
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+
         {!! $attributes->merge(['class' => 'form-control ' . ($hasError($name) ? 'is-invalid' : '')]) !!}>
         @foreach($options as $key => $option)
             <option value="{{ $key }}" @if($isSelected($key)) selected="selected" @endif>

resources/views/bootstrap-4/form-textarea.blade.php

@@ -1,5 +1,5 @@
 <div class="form-group">
-    <x-form-label :label="$label" :for="$name" />
+    <x-form-label :label="$label" :for="$attributes->get('id') ?: $id()" />
 
     <textarea
         @if($isWired())
@@ -8,6 +8,10 @@
             name="{{ $name }}"
         @endif
 
+        @if($label && !$attributes->get('id'))
+            id="{{ $id() }}"
+        @endif
+
         {!! $attributes->merge(['class' => 'form-control ' . ($hasError($name) ? 'is-invalid' : '')]) !!}
     >@unless($isWired()){!! $value !!}@endunless</textarea>
 

src/Components/Component.php

@@ -8,6 +8,13 @@
 
 abstract class Component extends BaseComponent
 {
+    /**
+     * ID for this component.
+     *
+     * @var string
+     */
+    private $id;
+
     /**
      * {@inheritDoc}
      */
@@ -41,4 +48,18 @@ public function isNotWired(): bool
     {
         return !$this->isWired();
     }
+
+    /**
+     * Generates an ID, once, for this component.
+     *
+     * @return string
+     */
+    public function id(): string
+    {
+        if (!$this->id) {
+            $this->id = Str::random(4);
+        }
+
+        return $this->id;
+    }
 }

tests/Feature/BootstrapTest.php

@@ -41,4 +41,22 @@ public function it_can_add_help_text()
         $this->visit('/bootstrap-help')
             ->seeInElement('.form-text', 'Your username must be 8-20 characters long.');
     }
+
+    /** @test */
+    public function it_sets_the_id_on_the_label_or_generates_one()
+    {
+        $this->registerTestRoute('bootstrap-label-for');
+
+        $page = $this->visit('/bootstrap-label-for')
+            ->seeElement('textarea[id="text_b"]')
+            ->seeElement('label[for="text_b"]');
+
+        $inputId = $page->crawler()->filter('input[type="text"]')->attr('id');
+
+        $this->assertEquals(4, strlen($inputId));
+
+        $page
+            ->seeElement('input[id="' . $inputId . '"]')
+            ->seeElement('label[for="' . $inputId . '"]');
+    }
 }

tests/Feature/views/bootstrap-label-for.blade.php

@@ -0,0 +1,4 @@
+<x-form>
+    <x-form-input name="input" label="Input" />
+    <x-form-textarea name="textarea" label="Textarea" id="text_b" />
+</x-form>