fix(tw): add styling to input groups (#4711)

* added styling to checkbox and radio input groups; added support for other themes

apps/tailwind-components/assets/css/main.css

@@ -89,6 +89,7 @@
 
     --background-color-input: var(--color-white);
     --background-color-input-checked: var(--color-blue-500);
+    --background-color-input-focused: var(--color-blue-800);
     --background-color-listbox: var(--color-white);
     --background-color-listbox-hover: var(--color-gray-100);
     --background-color-listbox-selected: var(--color-blue-500);
@@ -171,6 +172,7 @@
     --border-color-search-input-mobile: var(--color-gray-100);
     --border-color-pagination: var(--color-transparent);
     --border-color-input: var(--color-gray-400);
+    --border-color-input-focused: var(--color-blue-800);
     --border-color-input-inverted: var(--color-gray-600);
     --border-color-listbox-option: var(--color-gray-100);
     --border-color-listbox: var(--border-color-input);

apps/tailwind-components/assets/css/theme/dark.css

@@ -16,6 +16,10 @@
     --background-color-button-primary-hover: var(--color-white);
     --background-color-button-secondary: var(--color-gray-700);
     --background-color-button-secondary-hover: var(--color-gray-700);
+
+    --background-color-input: var(--gray-800);
+    --background-color-input-focused: var(--color-green-200);
+    --background-color-input-checked: var(--color-green-500);
     --background-color-pagination: var(--color-gray-600);
     --background-color-pagination-hover: var(--color-gray-700);
     --background-color-input: var(--color-gray-600);
@@ -37,7 +41,9 @@
     --border-color-button-primary-hover: var(--color-white);
     --border-color-button-secondary: var(--color-gray-600);
     --border-color-button-secondary-hover: var(--color-green-200);
+
     --border-color-input: var(--color-gray-600);
+    --border-color-input-focused: var(--color-green-200);
 
     --border-radius-pagination: 3px;
 }    

apps/tailwind-components/assets/css/theme/molgenis.css

@@ -36,6 +36,7 @@
     --background-color-invalid: var(--color-red-200);
     --background-color-input: var(--color-white);
     --background-color-input-checked: var(--color-yellow-500);
+    --background-color-input-focused: var(--color-yellow-500);
     --background-color-table: var(--color-white);
 
 

apps/tailwind-components/components/button/Text.vue

@@ -5,9 +5,11 @@ defineProps<{
 </script>
 
 <template>
-  <button class="flex items-center text-button-text">
-    <BaseIcon v-if="icon" :name="icon" :width="18" />
-    <span class="ml-2 text-body-sm hover:underline">
+  <button
+    class="group flex items-center text-button-text cursor-pointer disabled:cursor-not-allowed disabled:text-disabled"
+  >
+    <BaseIcon v-if="icon" :name="icon" :width="18" class="mr-2" />
+    <span class="text-body-sm group-enabled:hover:underline">
       <slot />
     </span>
   </button>

apps/tailwind-components/components/input/CheckboxGroup.vue

@@ -1,21 +1,33 @@
 <template>
-  <div :id="`${id}-checkbox-group`" :aria-describedby="describedBy">
+  <div
+    :id="`${id}-checkbox-group`"
+    :aria-describedby="describedBy"
+    class="border-l-4 border-transparent"
+    :class="{
+      'border-l-invalid': invalid,
+      'border-l-valid': valid,
+    }"
+  >
     <div class="flex flex-row" v-for="option in options">
-      <input
-        type="checkbox"
-        :id="`${id}-checkbox-group-${option.value}`"
-        :name="id"
-        :value="option.value"
-        v-model="modelValue"
-        :checked="modelValue!.includes(option.value)"
-        :disabled="disabled"
-        @change="toggleSelect"
-        class="absolute ml-4 mt-2 opacity-0"
-      />
       <InputLabel
         :for="`${id}-checkbox-group-${option.value}`"
-        class="hover:cursor-pointer flex justify-start items-center text-title"
+        class="group flex justify-start items-center"
+        :class="{
+          'text-disabled cursor-not-allowed': disabled,
+          'text-title cursor-pointer ': !disabled,
+        }"
       >
+        <input
+          type="checkbox"
+          :id="`${id}-checkbox-group-${option.value}`"
+          :name="id"
+          :value="option.value"
+          v-model="modelValue"
+          :checked="modelValue!.includes(option.value)"
+          :disabled="disabled"
+          @change="toggleSelect"
+          class="peer sr-only"
+        />
         <InputCheckboxIcon
           :checked="modelValue!.includes(option.value)"
           :invalid="invalid"
@@ -30,16 +42,17 @@
         </span>
       </InputLabel>
     </div>
-    <div class="mt-2" v-if="showClearButton">
-      <button
-        type="reset"
-        :id="`${id}-checkbox-group-clear`"
-        :form="`${id}-checkbox-group`"
-        @click.prevent="resetModelValue"
-      >
-        Clear
-      </button>
-    </div>
+    <ButtonText
+      v-if="showClearButton"
+      type="reset"
+      :id="`${id}-checkbox-group-clear`"
+      class="mt-2 ml-3"
+      :form="`${id}-checkbox-group`"
+      @click.prevent="resetModelValue"
+      :disabled="disabled || null"
+    >
+      Clear
+    </ButtonText>
   </div>
 </template>
 

apps/tailwind-components/components/input/CheckboxIcon.vue

@@ -4,28 +4,34 @@
     height="20"
     view-box="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
-    class="hover:cursor-pointer w-[20px] mr-2.5"
+    class="w-[20px] mr-2.5"
     :data-checked="checked"
     :data-indeterminate="indeterminate"
   >
     <rect
       width="20"
       height="20"
-      :style="{ 'stroke-width': invalid ? 4 : 1 }"
+      :style="{ 'stroke-width': invalid ? 4 : 2 }"
       :class="{
         'fill-input': !checked && !indeterminate,
-        'fill-input-checked': checked || indeterminate,
+        'fill-input-checked group-hover:fill-input-focused group-focus-within:fill-input-focused':
+          (checked || indeterminate) && !disabled && !invalid && !valid,
         'fill-invalid': checked && invalid,
         'fill-valid': checked && valid,
-        'stroke-current': !disabled,
+        'stroke-input peer-focus:stroke-input-focused group-focus-within:stroke-input-focused group-hover:stroke-input-focused':
+          !checked && !disabled && !invalid && !valid,
         'stroke-valid': valid,
         'stroke-invalid': invalid,
+        'stroke-disabled fill-disabled': disabled,
       }"
     />
     <path
       v-if="checked"
       d="M5,10 L 9,14 L 16,6"
       class="stroke-check"
+      :class="{
+        'stroke-check-disabled': disabled && checked,
+      }"
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -34,7 +40,7 @@
     <path
       v-if="indeterminate"
       d="M5,10 L 15,10"
-      class="stroke-gray-900"
+      class="stroke-input-checked"
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"

apps/tailwind-components/components/input/RadioGroup.vue

@@ -2,28 +2,35 @@
   <div
     :id="`${id}-radio-group`"
     :aria-describedby="describedBy"
-    class="flex gap-1"
+    class="flex gap-1 border-l-4 border-transparent"
     :class="{
       'flex-row': align === 'horizontal',
       'flex-col': align === 'vertical',
+      'border-l-invalid': invalid,
+      'border-l-valid': valid,
     }"
   >
-    <div v-for="option in options" class="flex justify-start align-center">
-      <InputRadio
-        :id="`${id}-radio-group-${option.value}`"
-        class="opacity-0 absolute mt-1"
-        :value="option.value"
-        v-model="modelValue"
-        @input="toggleSelect"
-        :checked="option.value === modelValue"
-        :invalid="invalid"
-        :valid="valid"
-        :disabled="disabled"
-      />
+    <div v-for="option in options" class="flex flex-row">
       <InputLabel
         :for="`${id}-radio-group-${option.value}`"
-        class="hover:cursor-pointer flex flex-row gap-1 text-title"
+        class="group flex justify-start items-center gap-1"
+        :class="{
+          'text-disabled cursor-not-allowed': disabled,
+          'text-title cursor-pointer ': !disabled,
+        }"
       >
+        <InputRadio
+          :id="`${id}-radio-group-${option.value}`"
+          class="peer sr-only"
+          :value="option.value"
+          :name="id"
+          v-model="modelValue"
+          @input="toggleSelect"
+          :checked="option.value === modelValue"
+          :invalid="invalid"
+          :valid="valid"
+          :disabled="disabled"
+        />
         <InputRadioIcon
           :checked="modelValue === option.value"
           class="mr-1"
@@ -39,26 +46,25 @@
         </template>
       </InputLabel>
     </div>
-
-    <button
-      v-show="isClearBtnShow"
-      class="ml-2 w-8 text-center text-button-outline hover:text-button-outline hover:underline"
-      :class="{ 'ml-2': align === 'horizontal', 'mt-2': align === 'vertical' }"
+    <ButtonText
+      v-if="showClearButton"
       type="reset"
       :id="`${id}-radio-group-clear`"
+      class="w-8 ml-3"
       :form="`${id}-radio-group`"
       @click.prevent="resetModelValue"
+      :disabled="disabled || null"
     >
       Clear
-    </button>
+    </ButtonText>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { columnValue } from "../../../metadata-utils/src/types";
-import { type IInputProps, type IValueLabel } from "~/types/types";
+import type { IInputProps, IValueLabel } from "~/types/types";
 
-const props = withDefaults(
+withDefaults(
   defineProps<
     IInputProps & {
       options: IValueLabel[];
@@ -92,13 +98,4 @@ function toggleSelect(event: Event) {
 function resetModelValue() {
   modelValue.value = undefined;
 }
-
-const isClearBtnShow = computed(() => {
-  return (
-    props.showClearButton &&
-    (modelValue.value === true ||
-      modelValue.value === false ||
-      (modelValue.value && modelValue.value !== ""))
-  );
-});
 </script>

apps/tailwind-components/components/input/RadioIcon.vue

@@ -12,16 +12,17 @@
       r="9"
       :style="{ 'stroke-width': invalid ? 2 : 1 }"
       fill="none"
-      class="stroke-current"
       :class="{
-        'fill-input hover:fill-input-checked hover:stroke-none focus:fill-input-checked focus:stroke-none':
-          !checked,
-        'fill-input-checked stroke-none': checked && !invalid && !valid,
+        'fill-input': !checked,
+        'fill-input-checked group-hover:fill-input-focused group-focus-within:fill-input-focused':
+          checked && !disabled && !invalid && !valid,
         'fill-invalid': checked && invalid,
         'fill-valid': checked && valid,
-        'stroke-current ': valid,
-        'stroke-invalid': invalid,
+        'stroke-input peer-focus:stroke-input-focused group-focus-within:stroke-input-focused group-hover:stroke-input-focused':
+          !checked && !disabled && !invalid && !valid,
         'stroke-valid': valid,
+        'stroke-invalid': invalid,
+        'stroke-disabled fill-disabled': disabled,
       }"
     />
     <circle

apps/tailwind-components/components/input/String.vue

@@ -16,7 +16,7 @@ const emit = defineEmits(["focus", "blur", "update:modelValue"]);
     :type="type || 'text'"
     :placeholder="placeholder"
     :disabled="disabled"
-    class="w-full h-[56px] pr-4 font-sans text-black text-gray-300 outline-none ring-red-500 pl-3 shadow-search-input focus:shadow-search-input hover:shadow-search-input search-input-mobile border border-solid rounded-input"
+    class="w-full h-[56px] pr-4 font-sans text-black text-gray-300 ring-red-500 pl-3 shadow-search-input focus:outline-2 hover:shadow-search-input search-input-mobile border border-solid rounded-input"
     :class="{
       'border-invalid text-invalid border-2': invalid,
       'border-valid text-valid border-2': valid,