[Draft] - Input refactor

resources/frontend/scripts/behaviors/DateInput.js

@@ -265,7 +265,7 @@ const DateInput = createBehavior(
     },
     {
         init() {
-            this.$input = this.getChild('input')
+            this.$input = this.$node.querySelector('[data-Input-input]')
             this.$isoinput = this.getChild('isoinput')
             this.$output = this.getChild('output')
             this.$minDateA11yDisplay = this.getChild('minDateA11yDisplay')

resources/frontend/theme/components/input-password.json

@@ -0,0 +1,6 @@
+{
+  "base": "absolute right-12 top-1/2 -translate-y-1/2",
+  "icon": "inline-block text-[#basa55] pointer-events-none",
+  "icon-hide": "eye-hide-24",
+  "icon-show": "eye-24"
+}

resources/frontend/theme/components/input.json

@@ -9,6 +9,7 @@
     "input": "p-12 w-full f-body-1 [.s-readonly_&]:bg-transparent",
     "textarea": "p-12 w-full f-body-1 [.s-readonly_&]:bg-transparent",
     "input-icon-right": "pr-40",
+    "button": "absolute right-12 top-1/2 -translate-y-1/2",
     "hint": "f-ui-2 text-secondary",
     "note": "f-ui-2 text-secondary mt-4",
     "link": "",

resources/views/components/form/date/date.blade.php

@@ -6,101 +6,75 @@
         window.A17.translations.form.datepicker = @json(__('vitrine-ui::fe.form.datepicker'));
     }
 </script>
+
 @php
     $behaviors[] = 'Input';
     $behaviors[] = $fuzzy ? 'DateInputFuzzy' : 'DateInput';
 @endphp
-<div @if ($picker) data-DatePicker-el="{{ $pickerID }}" @endif
-     {{ $attributes->merge(['data-behavior' => $attributes->prepends(implode(' ', $behaviors))])->twMerge(Arr::toCssClasses([$ui('input', 'base'), 's-disabled' => $disabled, 's-error' => $error, 's-readonly' => $readonly])) }}
-     {{ $dataAttrs }}
-     {{ $disabled ? 'inert' : '' }}>
-
-    <div class="{{ $ui('input', 'header') }}">
-        <x-vui-form-label :name="$name"
-                          :required="$required">
-            {{ $label }}
-        </x-vui-form-label>
-        @if ($hint)
-            <span class="{{ $ui('input', 'hint') }}"
-                  id="{{ $ariaID }}Hint">{{ $hint }}</span>
-        @endif
-    </div>
+<x-vui-form-field {{ $attributes->merge(['data-behavior' => $attributes->prepends(implode(' ', $behaviors))])->twMerge(Arr::toCssClasses([$ui('input', 'base')])) }}
+                  data-DatePicker-el="{{ $pickerID ? $pickerID : null }}"
+                  type="text"
+                  aria-describedby="{{ implode(' ', $ariaDescribedBy) }}"
+                  :label="$label ?? ''"
+                  :id="$id ? $id : $name"
+                  :name="$name ?? null"
+                  :value="$value ?? null"
+                  :placeholder="__('vitrine-ui::fe.form.datepicker.format')"
+                  pattern="\d{4}-\d{1,2}-\d{1,2}"
+                  :autocomplete="$autocomplete ?? null"
+                  :form="$form ?? null"
+                  :max="$maxDate ?? null"
+                  :min="$minDate ?? null"
+                  :autofocus="$autofocus ?? false"
+                  :disabled="$disabled ?? false"
+                  :readonly="$readonly ?? false"
+                  :required="$required ?? false"
+                  :with-icon-right="true">
 
-    {{--
-        screen reader only labels - linked with `aria-describedby`
-        (maybe hidden if inside of a date picker as not to overwhelm screen readers)
-    --}}
-    @unless ($hideA11yLabels)
-        <span class="sr-only"
-              id="{{ $ariaID }}Format">{{ __('vitrine-ui::fe.form.datepicker.date_format') }}:
-            {{ __('vitrine-ui::fe.form.datepicker.format') }}</span>
-        @if ($minDate)
-            <span class="sr-only"
-                  id="{{ $ariaID }}MinDate"
-                  data-DateInput-minDateA11yDisplay>{{ __('vitrine-ui::fe.form.datepicker.minimum_date') }}:
-                {{ $minDate }}</span>
-        @endif
-        @if ($maxDate)
+    <x-slot:postLabel>
+        {{--
+            screen reader only labels - linked with `aria-describedby`
+            (maybe hidden if inside of a date picker as not to overwhelm screen readers)
+        --}}
+        @unless ($hideA11yLabels)
             <span class="sr-only"
-                  id="{{ $ariaID }}MaxDate"
-                  data-DateInput-maxDateA11yDisplay>{{ __('vitrine-ui::fe.form.datepicker.maximum_date') }}:
-                {{ $maxDate }}</span>
-        @endif
-    @endunless
+                  id="{{ $ariaID }}Format">{{ __('vitrine-ui::fe.form.datepicker.date_format') }}:
+                {{ __('vitrine-ui::fe.form.datepicker.format') }}</span>
+            @if ($minDate)
+                <span class="sr-only"
+                      id="{{ $ariaID }}MinDate"
+                      data-DateInput-minDateA11yDisplay>{{ __('vitrine-ui::fe.form.datepicker.minimum_date') }}:
+                    {{ $minDate }}</span>
+            @endif
+            @if ($maxDate)
+                <span class="sr-only"
+                      id="{{ $ariaID }}MaxDate"
+                      data-DateInput-maxDateA11yDisplay>{{ __('vitrine-ui::fe.form.datepicker.maximum_date') }}:
+                    {{ $maxDate }}</span>
+            @endif
+        @endunless
+    </x-slot:postLabel>
 
-    <div class="{{ $ui('input', 'wrapper') }}">
-        @if ($picker)
-            {{-- Optional datepicker --}}
-            <x-vui-datepicker class="right-12top-1/2 absolute mt-2 -translate-y-1/2"
-                              :target="$pickerID"
-                              :minDate="$minDate"
-                              :minDate="$minDate" />
-        @endif
-        {{-- Visible input to user --}}
-        <input class="{{ $ui('input', 'input') }} pr-40"
-               data-DateInput-input
-               data-Input-input
-               type="text"
-               aria-describedby="{{ implode(' ', $ariaDescribedBy) }}"
-               placeholder="{{ __('vitrine-ui::fe.form.datepicker.format') }}"
-               @if ($id || $name) id="{{ $id ? $id : $name }}" @endif
-               @if ($name) name="{{ $name }}" @endif
-               @if ($value) value="{{ $value }}" @endif
-               @if ($minDate) min="{{ $minDate }}" @endif
-               @if ($maxDate) max="{{ $maxDate }}" @endif
-               @if ($form) form="{{ $form }}" @endif
-               pattern="\d{4}-\d{1,2}-\d{1,2}"
-               {{ $autofocus ? ' autofocus' : '' }}
-               {{ $disabled ? ' disabled' : '' }}
-               {{ $readonly ? ' readonly' : '' }}
-               {{ $required ? ' required' : '' }} />
-    </div>
+    <x-slot:preNote>
+        {{--
+            IF JS is enabled, this is actual input that will be submitted
+            Why? Because the visible input will display ISO entry and Today/Tomorrow
+            This hidden input will only get VALID ISO YYYY-MM-DD dates
+        --}}
+        <input data-DateInput-isoinput
+               type="hidden" />
+        {{-- Output for screen reader users, to confirm entry, give warnings --}}
+        <output class="sr-only"
+                name="{{ $name }}Result"
+                data-DateInput-output
+                for="{{ $name }}"></output>
+    </x-slot:preNote>
 
-    {{--
-        IF JS is enabled, this is actual input that will be submitted
-        Why? Because the visible input will display ISO entry and Today/Tomorrow
-        This hidden input will only get VALID ISO YYYY-MM-DD dates
-    --}}
-    <input data-DateInput-isoinput
-           type="hidden" />
-    {{-- Output for screen reader users, to confirm entry, give warnings --}}
-    <output class="sr-only"
-            name="{{ $name }}Result"
-            data-DateInput-output
-            for="{{ $name }}"></output>
-
-    @if ($note)
-        <p class="{{ $ui('input', 'note') }}"
-           id="{{ $ariaID }}Note">{{ $note }}</p>
+    @if ($picker)
+        {{-- Optional datepicker --}}
+        <x-vui-datepicker class="{{ $ui('input', 'button') }}"
+                          :target="$pickerID"
+                          :minDate="$minDate"
+                          :minDate="$minDate" />
     @endif
-
-    <p class="{{ $ui('input', 'error') }}"
-       id="{{ $errorID }}"
-       data-Input-error
-       aria-live="assertive"
-       aria-relevant="additions removals"
-       style="display: none;">
-        <x-vui-icon name="{{ $ui('input', 'error-icon-name') }}" />{{ $error ?? '' }}
-    </p>
-
-</div>
+</x-vui-form-field>

resources/views/components/form/field/field.blade.php

@@ -1,5 +1,6 @@
-<div
-    {{ $attributes->merge(['data-behavior' => $attributes->prepends('Input')])->twMerge(Arr::toCssClasses([$ui('input', 'base'), 's-disabled' => $disabled, 's-error' => $error, 's-readonly' => $readonly])) }}
+@props(['postLabel', 'preNote'])
+
+<div {{ $attributes->merge(['data-behavior' => $attributes->prepends('Input')])->twMerge(Arr::toCssClasses([$ui('input', 'base'), 's-disabled' => $disabled, 's-error' => $error, 's-readonly' => $readonly])) }}
      {{ $disabled ? 'inert' : '' }}>
     <div class="{{ $ui('input', 'header') }}">
         @if (!empty($label))
@@ -14,6 +15,10 @@
         @endif
     </div>
 
+    @if ($postLabel ?? false)
+        {{ $postLabel }}
+    @endif
+
     <div class="{{ $ui('input', 'wrapper') }}">
         {{-- Input --}}
         @switch($type)
@@ -65,6 +70,10 @@
         {{ $slot }}
     </div>
 
+    @if ($preNote ?? null)
+        {{ $preNote }}
+    @endif
+
     @if ($note)
         <p class="{{ $ui('input', 'note') }}"
            id="{{ $ariaID }}Note">{{ $note }}</p>

resources/views/components/form/password/password.blade.php

@@ -21,14 +21,14 @@
                   :readonly="$readonly ?? false"
                   :required="$required ?? false"
                   :with-icon-right="true">
-    <button class="absolute right-12 top-1/2 -translate-y-1/2"
+    <button class="{{ $ui('input-password', 'base') }}"
             data-PasswordInput-toggle>
-        <x-vui-icon class="pointer-events-none inline-block text-[#basa55]"
-                    name="eye-hide-24"
+        <x-vui-icon class="{{ $ui('input-password', 'icon') }}"
+                    name="{{ $ui('input-password', 'icon-hide') }}"
                     data-PasswordInput-iconhidden
                     aria-hidden="true" />
-        <x-vui-icon class="pointer-events-none inline-block text-[#basa55]"
-                    name="eye-24"
+        <x-vui-icon class="{{ $ui('input-password', 'icon') }}"
+                    name="{{ $ui('input-password', 'icon-show') }}"
                     data-PasswordInput-iconshown
                     aria-hidden="true"
                     style="display: none;" />

resources/views/stories/form/field/README.md

@@ -43,6 +43,7 @@ Hint and note texts are associated with the input using aria-describedby, ensuri
     "wrapper": "relative mt-4 border [.s-readonly_&]:border-quaternary [.s-error_&]:border-error [.s-readonly_&]:bg-quaternary",
     "input": "p-12 w-full f-body-1 [.s-readonly_&]:bg-transparent",
     "input-icon-right": "pr-40",
+    "button": "absolute right-12 top-1/2 -translate-y-1/2",
     "hint": "f-ui-2 text-secondary",
     "note": "f-ui-2 text-secondary mt-4",
     "link": "",
@@ -66,6 +67,9 @@ Applied to the visual input element itself.
 `input-icon-right`:
 Additionnal style applied to the input element if withIconRight boolean is true
 
+`button`:
+Applied to positioning the optionnal CTA of the field component.
+
 `hint`:
 Applied to the text element that provides additional guidance or clarification about the input element.
 

resources/views/stories/form/textarea/textarea.blade.php

@@ -23,22 +23,23 @@
 ])
 
 <div style="min-width: 500px;">
-    <x-vui-form-textarea :label="$label ?? ''"
-                         :name="$name ?? ''"
-                         :id="$id ?? ''"
-                         :value="$value ?? ''"
-                         :disabled="$disabled ?? ''"
-                         :required="$required ?? ''"
-                         :placeholder="$placeholder ?? ''"
-                         :error="$error ?? ''"
-                         :hint="$hint ?? ''"
-                         :note="$note ?? ''"
-                         :autocomplete="$autocomplete ?? ''"
-                         :autofocus="$autofocus ?? ''"
-                         :form="$form ?? ''"
-                         :maxlength="$maxlength ?? ''"
-                         :minlength="$minlength ?? ''"
-                         :readonly="$readonly ?? ''"
-                         :spellcheck="$spellcheck ?? ''"
-                         :wrap="$wrap ?? ''" />
+    <x-vui-form-field type="textarea"
+                      :label="$label ?? ''"
+                      :name="$name ?? ''"
+                      :id="$id ?? ''"
+                      :value="$value ?? ''"
+                      :disabled="$disabled ?? ''"
+                      :required="$required ?? ''"
+                      :placeholder="$placeholder ?? ''"
+                      :error="$error ?? ''"
+                      :hint="$hint ?? ''"
+                      :note="$note ?? ''"
+                      :autocomplete="$autocomplete ?? ''"
+                      :autofocus="$autofocus ?? ''"
+                      :form="$form ?? ''"
+                      :maxlength="$maxlength ?? ''"
+                      :minlength="$minlength ?? ''"
+                      :readonly="$readonly ?? ''"
+                      :spellcheck="$spellcheck ?? ''"
+                      :wrap="$wrap ?? ''" />
 </div>

src/Components/Form/Password.php

@@ -46,7 +46,6 @@ class Password extends VitrineComponent
 
     protected static array $assets = [
         'js' => ['behaviors/PasswordInput.js', 'behaviors/Input.js'],
-        'css' => ['components/form/input.css'],
     ];
 
     public function __construct(