Merge pull request #11 from tom2drum/floating-label

floating label for input

components/AddressModal/AddressModal.tsx

@@ -15,6 +15,8 @@ import {
   Text,
   Grid,
   GridItem,
+  FormControl,
+  FormLabel,
 } from '@chakra-ui/react';
 
 import type { TWatchlistItem } from '../../data/watchlist';
@@ -61,18 +63,14 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
           <Text lineHeight="30px" marginBottom="40px">
             An Email notification can be sent to you when an address on your watch list sends or receives any transactions.
           </Text>
-          <Input
-            placeholder="Address (0x...)*"
-            marginBottom="20px"
-            onChange={ onAddressChange }
-            value={ address || '' }
-          />
-          <Input
-            placeholder="Private tag (max 35 characters)*"
-            marginBottom="30px"
-            onChange={ onTagChange }
-            value={ tag || '' }
-          />
+          <FormControl variant="floating" id="address" marginBottom="20px" isRequired>
+            <Input placeholder=" " onChange={ onAddressChange } value={ address || '' }/>
+            <FormLabel>Address (0x...)</FormLabel>
+          </FormControl>
+          <FormControl variant="floating" id="tag" marginBottom="30px" isRequired>
+            <Input placeholder=" " onChange={ onTagChange } value={ tag || '' }/>
+            <FormLabel>Private tag (max 35 characters)</FormLabel>
+          </FormControl>
           <Text color="gray.600" fontSize="14px" marginBottom="32px">
             Please select what types of notifications you will receive:
           </Text>

theme/components/Form.ts

+import type { formAnatomy as parts } from '@chakra-ui/anatomy';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { getColor, mode } from '@chakra-ui/theme-tools';
+import type { StyleFunctionProps, PartsStyleFunction } from '@chakra-ui/theme-tools';
+import type { Dict } from '@chakra-ui/utils';
+import getDefaultFormColors from '../utils/getDefaultFormColors';
+
+const getActiveLabelStyles = (theme: Dict, fc: string) => ({
+  color: getColor(theme, fc),
+  transform: 'scale(0.75) translateY(-10px)',
+})
+
+const getActiveInputStyles = (theme: Dict, fc: string) => ({
+  paddingTop: '30px',
+  paddingBottom: '10px',
+  borderColor: getColor(theme, fc),
+  boxShadow: 'none',
+})
+
+const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionProps) => {
+  const { theme } = props;
+  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
+
+  const activeLabelStyles = getActiveLabelStyles(theme, fc);
+  const activeInputStyles = getActiveInputStyles(theme, fc);
+
+  return {
+    container: {
+      _focusWithin: {
+        label: {
+          ...activeLabelStyles,
+        },
+        input: {
+          ...activeInputStyles,
+        },
+        'label .chakra-form__required-indicator': {
+          color: getColor(theme, fc),
+        },
+      },
+      // label's styles
+      label: {
+        top: '20px',
+        left: '20px',
+        zIndex: 2,
+        position: 'absolute',
+        color: mode('gray.500', 'whiteAlpha.400')(props),
+        backgroundColor: 'transparent',
+        pointerEvents: 'none',
+        margin: 0,
+        transformOrigin: 'left top',
+        fontSize: '16px',
+        lineHeight: '20px',
+      },
+      'input:not(:placeholder-shown) + label': {
+        ...activeLabelStyles,
+      },
+      'input[aria-invalid=true] + label': {
+        color: getColor(theme, ec),
+      },
+      // input's styles
+      input: {
+        padding: '20px',
+      },
+      'input:not(:placeholder-shown)': {
+        ...activeInputStyles,
+      },
+      'input[aria-invalid=true]': {
+        borderColor: getColor(theme, ec),
+      },
+      // indicator's styles
+      'input:not(:placeholder-shown) + label .chakra-form__required-indicator': {
+        color: getColor(theme, fc),
+      },
+      'input[aria-invalid=true] + label .chakra-form__required-indicator': {
+        color: getColor(theme, ec),
+      },
+    },
+    requiredIndicator: {
+      marginStart: 0,
+      color: mode('gray.500', 'whiteAlpha.400')(props),
+    },
+  }
+}
+
+const Form: ComponentStyleConfig = {
+  variants: {
+    floating: variantFloating,
+  },
+}
+
+export default Form;

theme/components/Input.ts

+import type { inputAnatomy as parts } from '@chakra-ui/anatomy';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import type { PartsStyleFunction, SystemStyleObject } from '@chakra-ui/theme-tools';
+import { getColor, mode } from '@chakra-ui/theme-tools';
+import getDefaultFormColors from '../utils/getDefaultFormColors';
+
+const sizes: Record<string, SystemStyleObject> = {
+  md: {
+    fontSize: '16px',
+    lineHeight: '20px',
+    px: '20px',
+    py: '20px',
+    h: '60px',
+    borderRadius: 'base',
+  },
+}
+
+const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
+  const { theme } = props
+  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props)
+
+  return {
+    field: {
+      border: '1px solid',
+      borderColor: 'inherit',
+      bg: 'inherit',
+      _hover: {
+        borderColor: mode('gray.300', 'whiteAlpha.400')(props),
+      },
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all',
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed',
+      },
+      _invalid: {
+        borderColor: getColor(theme, ec),
+        boxShadow: `none`,
+      },
+      _focusVisible: {
+        zIndex: 1,
+        borderColor: getColor(theme, fc),
+        boxShadow: `none`,
+      },
+    },
+    addon: {
+      border: '1px solid',
+      borderColor: mode('inherit', 'whiteAlpha.50')(props),
+      bg: mode('gray.100', 'whiteAlpha.300')(props),
+    },
+  }
+}
+
+const Input: ComponentStyleConfig = {
+  sizes: {
+    md: {
+      field: sizes.md,
+      addon: sizes.md,
+    },
+  },
+  defaultProps: {
+    size: 'md',
+  },
+  variants: {
+    outline: variantOutline,
+  },
+}
+
+export default Input;

theme/components/index.ts

@@ -2,12 +2,16 @@ import Switch from './Switch';
 import Button from './Button';
 import Modal from './Modal';
 import Table from './Table';
+import Form from './Form';
+import Input from './Input';
 
 const components = {
   Switch,
   Button,
   Modal,
   Table,
+  Input,
+  Form,
 }
 
 export default components;

theme/utils/getDefaultFormColors.ts

+import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
+
+export default function getDefaultFormColors(props: StyleFunctionProps) {
+  const { focusBorderColor: fc, errorBorderColor: ec } = props
+  return {
+    focusColor: fc || mode('brand.700', 'brand.300')(props),
+    errorColor: ec || mode('red.400', 'red.300')(props),
+  }
+}