Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Commit 405a45f

Browse files
rawilkrawilk
committed
Add optional and hint attributes to form-group
1 parent 8b32cd5 commit 405a45f

17 files changed

+234
-23
lines changed

‎config/form-components.php‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,20 @@
190190
*/
191191
'timezone_subset' => false,
192192

193+
/*
194+
|--------------------------------------------------------------------------
195+
| Global Optional Hint
196+
|--------------------------------------------------------------------------
197+
|
198+
| You may set a global "optional" hint text for all optional form inputs
199+
| when you set the `optional` attribute on `<x-form-group>` components
200+
| to `true`. Set to `null` to disable showing it. The default provided
201+
| by the package is a translation key which will be translated
202+
| automatically for you.
203+
|
204+
*/
205+
'optional_hint_text' => 'form-components::messages.optional',
206+
193207
/*
194208
|--------------------------------------------------------------------------
195209
| Third Party Asset Libraries

‎resources/lang/en/messages.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@
1111
'date_picker_placeholder' => 'Y-m-d',
1212
'timezone_select_placeholder' => 'Select a timezone',
1313
'switch_button_label' => 'Turn on',
14+
'optional' => 'Optional',
1415
];

‎resources/views/components/form-group.blade.php‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
<div {{ $attributes->merge(['class' => $groupClass()]) }}>
2-
@unless ($label === false)
3-
<x-dynamic-component :component="formComponentName('label')"
4-
:for="$inputId"
5-
class="{{ $inline && ! $isCheckboxGroup ? 'form-group__inline-label sm:mt-px sm:pt-2' : '' }}"
6-
:id="$labelId"
7-
>
8-
{{ $label }}
9-
</x-dynamic-component>
10-
@endunless
2+
@include('form-components::partials.form-group-label')
113

124
<div class="form-group__content mt-1 {{ $inline ? 'form-group__content--inline sm:mt-0 sm:col-span-2' : '' }}">
135
{{ $slot }}
@@ -16,6 +8,14 @@ class="{{ $inline && ! $isCheckboxGroup ? 'form-group__inline-label sm:mt-px sm:
168
<x-dynamic-component :component="formComponentName('form-error')" :name="$name" :input-id="$inputId" />
179
@endif
1810

11+
@if ($inline && $hint)
12+
<span class="text-sm mt-1 text-blue-gray-500 hidden sm:block"
13+
@if ($inputId) id="{{ $inputId }}-hint-inline" @endif
14+
>
15+
{{ $hint }}
16+
</span>
17+
@endif
18+
1919
@if ($helpText)
2020
<p class="form-help mt-2 text-sm text-blue-gray-500" id="{{ $inputId }}-description">{{ $helpText }}</p>
2121
@endif

‎resources/views/partials/form-group-label.blade.php‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@if ($label !== false || ! is_null($hint))
2+
<div class="{{ is_null($hint) ? '' : 'flex justify-between' }}">
3+
@unless ($label === false)
4+
<x-dynamic-component :component="formComponentName('label')"
5+
:for="$inputId"
6+
class="{{ $inline && ! $isCheckboxGroup ? 'form-group__inline-label sm:mt-px sm:pt-2' : '' }}"
7+
:id="$labelId"
8+
>
9+
{{ $label }}
10+
</x-dynamic-component>
11+
@endunless
12+
13+
@unless (is_null($hint))
14+
<span class="text-sm text-blue-gray-500 {{ $inline ? 'inline-block sm:hidden' : '' }}"
15+
@if ($inputId) id="{{ $inputId }}-hint" @endif
16+
>
17+
{{ $hint }}
18+
</span>
19+
@endunless
20+
</div>
21+
@endif

‎src/Components/FormGroup.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,15 @@ public function __construct(
1919
public bool $isCheckboxGroup = false,
2020
public null|string $labelId = null,
2121
public bool $marginBottom = true,
22+
public null|string $hint = null,
23+
public bool $optional = false,
2224
) {
2325
$this->inputId = $this->inputId ?? $this->name;
2426
$this->showErrors = $showErrors;
27+
28+
if ($this->optional && ! $this->hint) {
29+
$this->hint = __(config('form-components.optional_hint_text'));
30+
}
2531
}
2632

2733
public function groupClass(): string

‎tests/Components/FormGroupTest.php‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,4 +139,50 @@ public function label_can_be_omitted(): void
139139
$this->renderComponent($template)
140140
);
141141
}
142+
143+
/** @test */
144+
public function can_have_optional_help_text(): void
145+
{
146+
config()->set('form-components.optional_hint_text', 'Optional');
147+
148+
$this->withViewErrors([]);
149+
150+
$template = <<<HTML
151+
<x-form-group name="foo" optional>
152+
<x-input name="foo" aria-describedby="foo-hint" />
153+
</x-form-group>
154+
HTML;
155+
156+
$this->assertMatchesSnapshot($this->renderComponent($template));
157+
}
158+
159+
/** @test */
160+
public function can_have_optional_hint_when_inline(): void
161+
{
162+
config()->set('form-components.optional_hint_text', 'Optional');
163+
164+
$this->withViewErrors([]);
165+
166+
$template = <<<HTML
167+
<x-form-group name="foo" optional inline>
168+
<x-input name="foo" aria-describedby="foo-hint foo-hint-inline" />
169+
</x-form-group>
170+
HTML;
171+
172+
$this->assertMatchesSnapshot($this->renderComponent($template));
173+
}
174+
175+
/** @test */
176+
public function can_have_custom_hint_text(): void
177+
{
178+
$this->withViewErrors([]);
179+
180+
$template = <<<HTML
181+
<x-form-group name="foo" hint="My hint text">
182+
<x-input name="foo" aria-describedby="foo-hint" />
183+
</x-form-group>
184+
HTML;
185+
186+
$this->assertMatchesSnapshot($this->renderComponent($template));
187+
}
142188
}

‎tests/Components/__snapshots__/FormGroupTest__border_top_can_be_disabled_when_inline__1.txt‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<div class="form-group form-group-inline sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start mb-5 last:mb-0">
2-
<label for="first_name" class="form-label block text-sm font-medium leading-5 text-blue-gray-700 form-group__inline-label sm:mt-px sm:pt-2">
2+
<div class="">
3+
<label for="first_name" class="form-label block text-sm font-medium leading-5 text-blue-gray-700 form-group__inline-label sm:mt-px sm:pt-2">
34
First name
45
</label>
5-
6+
7+
</div>
8+
69
<div class="form-group__content mt-1 form-group__content--inline sm:mt-0 sm:col-span-2">
710
Name field
811

912

13+
1014
</div>
1115
</div>

‎tests/Components/__snapshots__/FormGroupTest__can_be_inline__1.txt‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<div class="form-group form-group-inline sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start form-group-inline--border sm:pt-5 sm:border-t sm:border-blue-gray-200 first:sm:pt-0 first:sm:border-none mb-5 last:mb-0">
2-
<label for="first_name" class="form-label block text-sm font-medium leading-5 text-blue-gray-700 form-group__inline-label sm:mt-px sm:pt-2">
2+
<div class="">
3+
<label for="first_name" class="form-label block text-sm font-medium leading-5 text-blue-gray-700 form-group__inline-label sm:mt-px sm:pt-2">
34
First name
45
</label>
5-
6+
7+
</div>
8+
69
<div class="form-group__content mt-1 form-group__content--inline sm:mt-0 sm:col-span-2">
710
Name field
811

912

13+
1014
</div>
1115
</div>

‎tests/Components/__snapshots__/FormGroupTest__can_be_rendered__1.txt‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<div class="form-group mb-5 last:mb-0">
2-
<label for="first_name" class="form-label block text-sm font-medium leading-5 text-blue-gray-700">
2+
<div class="">
3+
<label for="first_name" class="form-label block text-sm font-medium leading-5 text-blue-gray-700">
34
First name
45
</label>
5-
6+
7+
</div>
8+
69
<div class="form-group__content mt-1 ">
710
Name input
811

912

13+
1014
</div>
1115
</div>

‎tests/Components/__snapshots__/FormGroupTest__can_have_custom_hint_text__1.txt‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="form-group mb-5 last:mb-0">
2+
<div class="flex justify-between">
3+
<label for="foo" class="form-label block text-sm font-medium leading-5 text-blue-gray-700">
4+
Foo
5+
</label>
6+
7+
<span class="text-sm text-blue-gray-500 "
8+
id="foo-hint" >
9+
My hint text
10+
</span>
11+
</div>
12+
13+
<div class="form-group__content mt-1 ">
14+
<div class="form-text-container flex rounded-sm shadow-sm relative">
15+
16+
<input
17+
class="form-input form-text flex-1 block w-full px-3 py-2 border-blue-gray-300 rounded-md placeholder-blue-gray-400 sm:text-sm focus:border-blue-300 focus:ring-opacity-50 focus:ring-4 focus:ring-blue-400" aria-describedby="foo-hint"
18+
19+
20+
name="foo" id="foo" type="text"
21+
22+
23+
/>
24+
25+
</div>
26+
27+
28+
29+
</div>
30+
</div>

0 commit comments

Comments
 (0)