From 97c1693e224f5d7da2f6e1175a2a10a75f778aa5 Mon Sep 17 00:00:00 2001 From: Kitson Kelly Date: Thu, 17 Oct 2024 17:42:39 +1100 Subject: [PATCH] feat: add invalid styles when editing --- components/KvKeyPartEditor.tsx | 4 ++-- components/KvValueEditor.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/KvKeyPartEditor.tsx b/components/KvKeyPartEditor.tsx index 2055782..95b0950 100644 --- a/components/KvKeyPartEditor.tsx +++ b/components/KvKeyPartEditor.tsx @@ -12,7 +12,7 @@ export function KvKeyPartEditor() { type="number" name="key_part" id="key_part" - class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" + class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 invalid:border-red-700" placeholder="Key part value" required /> @@ -24,7 +24,7 @@ export function KvKeyPartEditor() { name="key_part" id="key_part" pattern="-?\d+(\.\d+)?|-?Infinity|NaN" - class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" + class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 invalid:border-red-700" placeholder="Key part value" required /> diff --git a/components/KvValueEditor.tsx b/components/KvValueEditor.tsx index 942d567..a9e374f 100644 --- a/components/KvValueEditor.tsx +++ b/components/KvValueEditor.tsx @@ -87,7 +87,7 @@ export function KvValueEditor( name="value" type="text" pattern="-?\d+(\.\d+)?|-?Infinity|NaN" - class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" + class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 invalid:border-red-700" placeholder="Provide a number" required onChange={(evt) => valueValue.value = evt.currentTarget.value} @@ -101,7 +101,7 @@ export function KvValueEditor( id="value" name="value" type="number" - class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" + class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 invalid:border-red-700" placeholder="Provide a number" required onChange={(evt) => valueValue.value = evt.currentTarget.value} @@ -171,7 +171,7 @@ export function KvValueEditor( id="value" name="value" type="text" - class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" + class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 invalid:border-red-700" pattern="\/(?![*+?])([^\r\n\[\/\\]|\\.|\[([^\r\n\]\\]|\\.)*\])+/(g(im?|mi?)?|i(gm?|mg?)?|m(gi?|ig?)?)?" placeholder="Provide a regular expression" value={valueValue} @@ -184,7 +184,7 @@ export function KvValueEditor( id="value" name="value" type="text" - class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" + class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 invalid:border-red-700" pattern="[0-9]{4}-((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01])|(0[469]|11)-(0[1-9]|[12][0-9]|30)|(02)-(0[1-9]|[12][0-9]))T(0[0-9]|1[0-9]|2[0-3]):(0[0-9]|[1-5][0-9]):(0[0-9]|[1-5][0-9])\.[0-9]{3}Z" placeholder="Provide an ISO format Date" required @@ -195,7 +195,7 @@ export function KvValueEditor( case "json_array": case "json_object": return ( -
+