add permanent placeholder for checkable select field

hazelcast · Nov 9, 2023 · f55986e · f55986e
1 parent 529c58f
commit f55986e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/ui/src/Select/CheckableSelectField.module.scss b/packages/ui/src/Select/CheckableSelectField.module.scss
@@ -8,6 +8,10 @@
 .opener {
   input {
     cursor: pointer;
+
+    &.withPermanentPlaceholder {
+      color: c.$colorTextSecondary;
+    }
   }
 }
 

diff --git a/packages/ui/src/Select/CheckableSelectField.tsx b/packages/ui/src/Select/CheckableSelectField.tsx
@@ -21,6 +21,7 @@ export type CheckableSelectFieldCoreStaticProps<V> = {
   onChange: (newValue: V[]) => void
   allSelectedLabel?: string
   noneSelectedLabel?: string
+  permanentPlaceholder?: string
 }
 
 export type CheckableSelectFieldExtraProps<V> = {
@@ -73,6 +74,7 @@ export const CheckableSelectField = <V extends string | number = number>(props:
     'data-test': dataTest,
     allSelectedLabel = 'All selected',
     noneSelectedLabel = 'None selected',
+    permanentPlaceholder,
     noOptionsMessage = 'No options',
     id: rootId,
   } = props
@@ -99,6 +101,9 @@ export const CheckableSelectField = <V extends string | number = number>(props:
   }, [options, searchValue])
 
   const getValueLabel = () => {
+    if (permanentPlaceholder) {
+      return permanentPlaceholder
+    }
     if (value.length === 0) {
       return noneSelectedLabel
     }
@@ -123,7 +128,9 @@ export const CheckableSelectField = <V extends string | number = number>(props:
         disabled={disabled}
         showAriaLabel={showAriaLabel}
         helperText={helperText}
-        className={cls(className, styles.opener)}
+        className={cls(className, styles.opener, {
+          [styles.withPermanentPlaceholder]: !!permanentPlaceholder,
+        })}
         error={error}
         onBlur={onBlur}
         readOnly