Add error state to select

awell-health · Jan 17, 2025 · 3364514 · 3364514
1 parent 58e995f
commit 3364514
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/design-system",
-  "version": "0.12.35",
+  "version": "0.12.36",
   "type": "module",
   "files": [
     "dist"

diff --git a/src/components/ui/form/select/select.tsx b/src/components/ui/form/select/select.tsx
@@ -17,6 +17,7 @@ export interface Props {
   disabled?: boolean;
   placeholder?: string;
   menuPosition?: 'fixed' | 'absolute';
+  hasError?: boolean;
 }
 
 function SelectComponent(props: Props) {
@@ -32,7 +33,8 @@ function SelectComponent(props: Props) {
     isClearable = false,
     disabled = false,
     placeholder = 'Select...',
-    menuPosition = 'absolute'
+    menuPosition = 'absolute',
+    hasError = false
   } = props;
   const iconPadding = cn(!isMulti && icon && 'pl-5');
 
@@ -74,7 +76,8 @@ function SelectComponent(props: Props) {
             control: (state) =>
               cn(
                 '!rounded-lg !shadow border !border-slate-300 text-slate-500 text-sm font-normal',
-                state.isFocused && 'border-blue-500 text-black'
+                state.isFocused && '!border-blue-500 !text-black',
+                hasError && '!border-red-500 !text-red-500'
               ),
             menu: () =>
               '!rounded-lg !shadow border-1 !border-slate-200 text-slate-700 text-sm font-normal',

diff --git a/src/stories/Form/Select.stories.tsx b/src/stories/Form/Select.stories.tsx
@@ -24,6 +24,7 @@ export const Example = {
     disabled: false,
     isSearchable: false,
     icon: <Icon icon='RiSearchLine' />,
+    hasError: false,
     onChange: (option: SelectValue) => {
       if (option !== null) {
         console.log('Selected value:', option);

diff --git a/style.css b/style.css
@@ -4476,6 +4476,16 @@ input.tab:checked + .tab-content,
   border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
 }
 
+.\!border-blue-500{
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)) !important;
+}
+
+.\!border-red-500{
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;
+}
+
 .\!bg-slate-100{
   --tw-bg-opacity: 1 !important;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)) !important;
@@ -4993,6 +5003,16 @@ input.tab:checked + .tab-content,
   color: rgb(133 77 14 / var(--tw-text-opacity, 1));
 }
 
+.\!text-black{
+  --tw-text-opacity: 1 !important;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
+}
+
+.\!text-red-500{
+  --tw-text-opacity: 1 !important;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important;
+}
+
 .opacity-0{
   opacity: 0;
 }