Merge pull request #97 from alleslabs/styles/text-input

style: change input floating label to always afloat

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#97](https://github.com/alleslabs/celatone-frontend/pull/97) Change label style to always afloat
 - [#96](https://github.com/alleslabs/celatone-frontend/pull/96) Fix incorrect instantiated block height explorer link
 - [#95](https://github.com/alleslabs/celatone-frontend/pull/95) Add network to url path
 - [#89](https://github.com/alleslabs/celatone-frontend/pull/89) Update feedback link

src/lib/components/forms/ControllerInput.tsx

@@ -55,18 +55,9 @@ export const ControllerInput = <T extends FieldValues>({
 
   const isError = !!error;
   return (
-    <FormControl
-      className={`${size}-form`}
-      size={size}
-      isInvalid={isError}
-      {...componentProps}
-      {...field}
-    >
+    <FormControl size={size} isInvalid={isError} {...componentProps} {...field}>
       {label && (
-        <FormLabel
-          className={field.value.length ? "floating" : ""}
-          bgColor={labelBgColor}
-        >
+        <FormLabel className={`${size}-label`} bgColor={labelBgColor}>
           {label}
         </FormLabel>
       )}

src/lib/components/forms/ControllerTextarea.tsx

@@ -44,18 +44,9 @@ export const ControllerTextarea = <T extends FieldValues>({
   const isError = !!error;
 
   return (
-    <FormControl
-      className="textarea-form"
-      size="md"
-      isInvalid={isError}
-      {...componentProps}
-      {...field}
-    >
+    <FormControl size="md" isInvalid={isError} {...componentProps} {...field}>
       {label && (
-        <FormLabel
-          bgColor={labelBgColor}
-          className={field.value.length ? "floating" : ""}
-        >
+        <FormLabel className="textarea-label" bgColor={labelBgColor}>
           {label}
         </FormLabel>
       )}

src/lib/components/forms/NumberInput.tsx

@@ -58,15 +58,11 @@ export const NumberInput = ({
   // Design system size: md = 40px, lg = 56px
   return (
     <FormControl
-      className={`${size}-form`}
       isInvalid={!!error || status?.state === "error"}
       size={size}
       {...componentProps}
     >
-      <FormLabel
-        className={value.length ? "floating" : ""}
-        backgroundColor={labelBgColor}
-      >
+      <FormLabel className={`${size}-label`} backgroundColor={labelBgColor}>
         {label}
       </FormLabel>
 

src/lib/components/forms/TextAreaInput.tsx

@@ -35,16 +35,12 @@ export const TextAreaInput = ({
 }: TextAreaProps) => {
   return (
     <FormControl
-      className="textarea-form"
       isInvalid={!!error || status?.state === "error"}
       size="md"
       {...componentProps}
     >
       {label && (
-        <FormLabel
-          bgColor={labelBgColor}
-          className={value.length ? "floating" : ""}
-        >
+        <FormLabel className="textarea-label" bgColor={labelBgColor}>
           {label}
         </FormLabel>
       )}

src/lib/components/forms/TextInput.tsx

@@ -43,16 +43,12 @@ export const TextInput = ({
   // Design system size: md = 40px, lg = 56px
   return (
     <FormControl
-      className={`${size}-form`}
       isInvalid={!!error || status?.state === "error"}
       size={size}
       {...componentProps}
     >
       {label && (
-        <FormLabel
-          className={value.length ? "floating" : ""}
-          backgroundColor={labelBgColor}
-        >
+        <FormLabel className={`${size}-label`} backgroundColor={labelBgColor}>
           {label}
         </FormLabel>
       )}

src/lib/styles/theme/components/form.ts

@@ -1,32 +1,5 @@
 import type { ComponentStyleConfig } from "@chakra-ui/react";
 
-const activeLabelStyles = {
-  "&.md-form, &.textarea-form": {
-    _focusWithin: {
-      label: {
-        transform: "scale(0.75) translateY(-20px)",
-        lineHeight: "1.2",
-      },
-    },
-    "& .floating": {
-      transform: "scale(0.75) translateY(-20px)",
-      lineHeight: "1.2",
-    },
-  },
-  "&.lg-form": {
-    _focusWithin: {
-      label: {
-        lineHeight: "1.2",
-        transform: "scale(0.75) translateY(-28px)",
-      },
-    },
-    "& .floating": {
-      transform: "scale(0.75) translateY(-28px)",
-      lineHeight: "1.2",
-    },
-  },
-};
-
 export const Form: ComponentStyleConfig = {
   baseStyle: {
     container: {
@@ -38,7 +11,6 @@ export const Form: ComponentStyleConfig = {
   variants: {
     floating: {
       container: {
-        ...activeLabelStyles,
         label: {
           top: 0,
           left: 0,
@@ -47,6 +19,7 @@ export const Form: ComponentStyleConfig = {
           px: 1,
           position: "absolute",
           fontWeight: "400",
+          lineHeight: "1.2",
           pointerEvents: "none",
           transformOrigin: "left top",
           color: "text.dark",
@@ -56,6 +29,12 @@ export const Form: ComponentStyleConfig = {
           _active: {
             color: "primary.main",
           },
+          "&.md-label, &.textarea-label": {
+            transform: "scale(0.75) translateY(-20px)",
+          },
+          "&.lg-label": {
+            transform: "scale(0.75) translateY(-28px)",
+          },
         },
         "div.helper-text, .error-text": {
           ml: 3,