Improved input layout to support proper positioning for right-to-left…

… languages (#322) * feat: FwbInput: Improved input layout to support proper positioning for different lang directions * Some fixed in focus managements and sizes for prefix/suffix
themesberg · Jan 9, 2025 · 6d39697 · 6d39697
1 parent 8810269
commit 6d39697
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 39 deletions.
diff --git a/docs/components/input/examples/FwbInputExampleSuffix.vue b/docs/components/input/examples/FwbInputExampleSuffix.vue
@@ -1,32 +1,100 @@
 <template>
   <div class="vp-raw">
-    <fwb-input
-      v-model="name"
-      label="Search"
-      placeholder="enter your search query"
-      size="lg"
-    >
-      <template #prefix>
-        <svg
-          aria-hidden="true"
-          class="w-5 h-5 text-gray-500 dark:text-gray-400"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-          />
-        </svg>
-      </template>
-      <template #suffix>
-        <fwb-button>Search</fwb-button>
-      </template>
-    </fwb-input>
+    <div class="mb-4">
+      <fwb-input
+        v-model="name"
+        label="Search"
+        placeholder="enter your search query"
+        size="lg"
+      >
+        <template #prefix>
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </template>
+        <template #suffix>
+          <fwb-button size="md">
+            Search
+          </fwb-button>
+        </template>
+      </fwb-input>
+    </div>
+
+    <div class="mb-4">
+      <fwb-input
+        v-model="name"
+        label="Search"
+        placeholder="enter your search query"
+        size="md"
+      >
+        <template #prefix>
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </template>
+        <template #suffix>
+          <fwb-button size="sm">
+            Search
+          </fwb-button>
+        </template>
+      </fwb-input>
+    </div>
+
+    <div class="mb-4">
+      <fwb-input
+        v-model="name"
+        label="Search"
+        placeholder="enter your search query"
+        size="sm"
+      >
+        <template #prefix>
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </template>
+        <template #suffix>
+          <fwb-button size="xs">
+            Search
+          </fwb-button>
+        </template>
+      </fwb-input>
+    </div>
   </div>
 </template>
 

diff --git a/src/components/FwbInput/FwbInput.vue b/src/components/FwbInput/FwbInput.vue
@@ -4,10 +4,13 @@
       v-if="label"
       :class="labelClasses"
     >{{ label }}</label>
-    <div class="flex relative">
+    <div
+      class="flex relative items-center"
+      :class="[inputBlockClasses]"
+    >
       <div
         v-if="$slots.prefix"
-        class="w-10 flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none overflow-hidden"
+        class="flex items-center ms-2 flex-shrink-0"
       >
         <slot name="prefix" />
       </div>
@@ -18,11 +21,11 @@
         :type="type"
         :required="required"
         :autocomplete="autocomplete"
-        :class="[inputClasses, $slots.prefix ? 'pl-10' : '']"
+        :class="[inputClasses]"
       >
       <div
         v-if="$slots.suffix"
-        class="absolute right-2.5 bottom-2.5"
+        class="flex items-center me-2 flex-shrink-0"
       >
         <slot name="suffix" />
       </div>
@@ -85,7 +88,7 @@ const props = withDefaults(defineProps<InputProps>(), {
 
 const model = useVModel(props, 'modelValue')
 
-const { inputClasses, labelClasses } = useInputClasses(toRefs(props))
+const { inputClasses, inputBlockClasses, labelClasses } = useInputClasses(toRefs(props))
 
 const validationWrapperClasses = computed(() => twMerge(
   'mt-2 text-sm',

diff --git a/src/components/FwbInput/composables/useInputClasses.ts b/src/components/FwbInput/composables/useInputClasses.ts
@@ -10,17 +10,21 @@ import {
 const baseLabelClasses = 'block mb-2 text-sm font-medium'
 
 // INPUT
-const defaultInputClasses =
-  'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'
+const defaultInputClasses = 'block flex-grow w-full p-0 bg-transparent text-inherit ring-offset-0 ring-0 border-0 focus:ring-offset-0 focus:ring-0 focus:border-0'
+
+// BLOCK
+const defaultBlockClasses =
+  'has-[input:focus]:ring-offset-0 has-[input:focus]:ring-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg has-[input:focus]:ring-blue-500 has-[input:focus]:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:has-[input:focus]:ring-blue-500 dark:has-[input:focus]:border-blue-500'
+
 const disabledInputClasses = 'cursor-not-allowed bg-gray-100'
 const inputSizeClasses: Record<InputSize, string> = {
   lg: 'p-4',
   md: 'p-2.5 text-sm',
   sm: 'p-2 text-sm',
 }
 
-const successInputClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500'
-const errorInputClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
+const successInputClasses = 'bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 has-[input:focus]:ring-green-500 has-[input:focus]:border-green-500'
+const errorInputClasses = 'bg-red-50 border-red-500 text-red-900 placeholder-red-700 has-[input:focus]:ring-red-500 has-[input:focus]:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
 
 export type UseInputClassesProps = {
   size: Ref<InputSize>
@@ -29,10 +33,11 @@ export type UseInputClassesProps = {
 }
 
 export function useInputClasses (props: UseInputClassesProps): {
+  inputBlockClasses: Ref<string>
   inputClasses: Ref<string>
   labelClasses: Ref<string>
 } {
-  const inputClasses = computed(() => {
+  const inputBlockClasses = computed(() => {
     const vs = props.validationStatus.value
 
     const classByStatus = vs === validationStatusMap.Success
@@ -42,13 +47,16 @@ export function useInputClasses (props: UseInputClassesProps): {
         : ''
 
     return twMerge(
-      defaultInputClasses,
+      defaultBlockClasses,
       classByStatus,
-      inputSizeClasses[props.size.value],
       props.disabled.value ? disabledInputClasses : '',
     )
   })
 
+  const inputClasses = computed(() => {
+    return twMerge(defaultInputClasses, inputSizeClasses[props.size.value])
+  })
+
   const labelClasses = computed(() => {
     const vs = props.validationStatus.value
     const classByStatus = vs === validationStatusMap.Success
@@ -61,6 +69,7 @@ export function useInputClasses (props: UseInputClassesProps): {
   })
 
   return {
+    inputBlockClasses,
     inputClasses,
     labelClasses,
   }