feat(input): add labelless input

cft-group · Dec 30, 2020 · 8aaa570 · 8aaa570
1 parent 4c00f70
commit 8aaa570
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/src/packages/core/src/base-input/BaseInput.tsx b/src/packages/core/src/base-input/BaseInput.tsx
@@ -11,6 +11,7 @@ export function BaseInput<T extends HTMLAttributesComposite>(props: BaseInputPro
     error,
     hint,
     label,
+    placeholder = '',
     width = '100%',
     icons,
     isIconPassive = false,
@@ -20,6 +21,7 @@ export function BaseInput<T extends HTMLAttributesComposite>(props: BaseInputPro
   const inputClassNames = classNames({
     [`${className}`]: className,
     _e_input: true,
+    _e_input_labelless: !label,
     [`_e_input_size_${width}`]: width !== '100%',
     [`_e_input_appearance_${appearance}`]: appearance !== 'default',
   });
@@ -38,14 +40,16 @@ export function BaseInput<T extends HTMLAttributesComposite>(props: BaseInputPro
           cloneElement<T>(children, {
             className: '_e_input__control',
             disabled: appearance === 'disabled' || (children.type === 'select' && appearance === 'readonly'),
-            placeholder: ' ',
+            placeholder: label ? ' ' : placeholder,
             readOnly: appearance === 'readonly' && children.type !== 'select',
             ...rest,
           })
          }
-        <span className="_e_input__label">
-          { label }
-        </span>
+        { label && (
+          <span className="_e_input__label">
+            { label }
+          </span>
+        )}
         <span className="_e_input__background" />
         <span className="_e_input__line" />
         { icons && (

diff --git a/src/packages/core/src/base-input/types.ts b/src/packages/core/src/base-input/types.ts
@@ -41,9 +41,14 @@ export type AbstractInput<T extends HTMLAttributesComposite> = T & {
   isIconPassive?: boolean;
 
   /**
-   * Field label.
+   * Field label. If not provided, input will become labelless.
    */
-  label: string;
+  label?: string;
+
+  /**
+   * Placeholder. Only shown on labelless inputs.
+   */
+  placeholder?: string;
 
   /**
    * Field width.

diff --git a/src/packages/core/src/input/Input.stories.mdx b/src/packages/core/src/input/Input.stories.mdx
@@ -74,3 +74,11 @@ import { Input } from '.';
     />
   </section>
 </Preview>
+
+<Preview>
+  <Input
+    placeholder="Фильтровать..."
+    type="text"
+    width="8"
+  />
+</Preview>