Adds floating label variant on TextArea (#764)

nsbno · Jul 12, 2023 · a522876 · a522876
1 parent 568d531
commit a522876
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/.changeset/small-nails-smile.md b/.changeset/small-nails-smile.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+Adds floating label variant on TextArea
diff --git a/packages/spor-react/src/input/Textarea.tsx b/packages/spor-react/src/input/Textarea.tsx
@@ -5,16 +5,17 @@ import {
   Textarea as ChakraTextarea,
   TextareaProps as ChakraTextareaProps,
   useFormControlContext,
+  InputGroup,
 } from "@chakra-ui/react";
 import React, { useId } from "react";
 
 export type TextareaProps = Exclude<ChakraTextareaProps, "variant" | "size"> & {
-  label: string;
+  label?: string;
 };
 /**
  * Text area that works with the `FormControl` component.
  *
- * Note that it requires you to pass a label.
+ * Providing a label is optional.
  *
  * ```tsx
  * <FormControl>
@@ -30,11 +31,16 @@ export const Textarea = forwardRef<TextareaProps, "textarea">((props, ref) => {
   const formControlProps = useFormControlContext();
   const fallbackId = `textarea-${useId()}`;
   const inputId = props.id ?? formControlProps?.id ?? fallbackId;
+
   return (
-    <Box {...spacingProps}>
-      <FormLabel htmlFor={inputId}>{label}</FormLabel>
-      <ChakraTextarea {...rest} id={inputId} ref={ref} />
-    </Box>
+    <InputGroup position="relative" {...spacingProps}>
+      <ChakraTextarea {...rest} id={inputId} ref={ref} placeholder=" " />
+      {label && (
+        <FormLabel htmlFor={inputId} id={`${inputId}-label`}>
+          {label}
+        </FormLabel>
+      )}
+    </InputGroup>
   );
 });
 

diff --git a/packages/spor-react/src/theme/components/textarea.ts b/packages/spor-react/src/theme/components/textarea.ts
@@ -5,9 +5,17 @@ const config = defineStyleConfig({
   baseStyle: (props) => ({
     ...Input.baseStyle!(props).field,
     minHeight: "5rem",
-    py: 3,
     verticalAlign: "top",
     appearance: "none",
+    paddingTop: 2,
+    "&:not(:placeholder-shown)": {
+      "&:has(+ label)": {
+        paddingTop: 4
+      },
+      "& + label": {
+        transform: "scale(0.825) translateY(-10px)",
+      },
+    },
   }),
 });