fix: select placeholder

abelflopes · Jul 5, 2024 · c98a1b5 · c98a1b5
1 parent 8b92f04
commit c98a1b5
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/form-field/src/styles/_mixins.scss b/packages/components/form-field/src/styles/_mixins.scss
@@ -13,6 +13,7 @@
 
 @mixin form-field-container {
   @include wrapper;
+
   background: theme.get-color(neutral-light-1);
 }
 
@@ -26,6 +27,10 @@
   }
 }
 
+@mixin placeholder {
+  color: theme.get-color(neutral-dark-1);
+}
+
 @mixin form-field-input {
   @include spacing;
   @include text.text-base;
@@ -39,12 +44,12 @@
 
   // TODO: focus mixin
   outline: solid theme.get-css-var(spacing, border) transparent;
-  transition-property: outline, outline-offset;
   transition-duration: 0.3s;
+  transition-property: outline, outline-offset;
   transition-timing-function: ease;
 
   &::placeholder {
-    color: theme.get-color(neutral-dark-1);
+    @include placeholder;
   }
 
   &:disabled {

diff --git a/packages/components/select/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/select/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -11,6 +11,10 @@ exports[`snapshot Select renders correctly 1`] = `
     onFocus={[Function]}
     role="button"
     tabIndex={0}
-  />,
+  >
+    <span
+      className="placeholder"
+    />
+  </div>,
 ]
 `;
diff --git a/packages/components/select/src/index.tsx b/packages/components/select/src/index.tsx
@@ -17,6 +17,7 @@ import { SelectContext, type SelectContextProps } from "./context";
  * @returns a React element
  */
 
+// eslint-disable-next-line max-lines-per-function -- TODO: fix
 const Select = ({
   skin = "default",
   placeholder,
@@ -177,7 +178,9 @@ const Select = ({
           onFocus?.(e);
         }}>
         {selectedValuesList.length > 0 && selectedValuesList.join(", ")}
-        {selectedValuesList.length === 0 && placeholder}
+        {selectedValuesList.length === 0 && (
+          <span className={styles.placeholder}>{placeholder}</span>
+        )}
       </div>
 
       <Dropdown

diff --git a/packages/components/select/src/styles/index.module.scss b/packages/components/select/src/styles/index.module.scss
@@ -25,3 +25,7 @@
 .search_input {
   outline: none !important;
 }
+
+.placeholder {
+  @include form-field.placeholder;
+}
diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
@@ -1,7 +1,7 @@
 import { type InputProps } from "@react-ck/input";
 import { type MenuItemProps } from "@react-ck/provisional";
 
-export type UserValue = string | string[];
+export type UserValue = string | string[] | undefined;
 
 export type SelectedValues = string[];
 

diff --git a/packages/components/select/src/utils.ts b/packages/components/select/src/utils.ts
@@ -12,7 +12,7 @@ import {
 } from "./types";
 
 export const valueAsArray = (value: UserValue): SelectedValues =>
-  value instanceof Array ? value : [value];
+  value ? (value instanceof Array ? value : [value]) : [];
 
 export const getChildrenData = (children: React.ReactNode): SelectChildrenData[] =>
   getChildrenListWithoutFragments(children).map<SelectChildrenData>((i) => {

diff --git a/packages/docs/stories/src/select.stories.tsx b/packages/docs/stories/src/select.stories.tsx
@@ -25,9 +25,7 @@ const args: SelectProps = {
   children: (
     <>
       <Select.Option value="Apple" disabled />
-      <Select.Option value="bnn" disabled selected>
-        Banana
-      </Select.Option>
+      <Select.Option value="bnn">Banana</Select.Option>
       <Select.Option value="orange">Orange</Select.Option>
       <Select.Option value="lemon">Lemon</Select.Option>
       <h1>Exotic</h1>