empty, filled, disabled and error styles

theme/components/Form.ts

@@ -58,11 +58,16 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
         label: activeLabelStyles,
         'input, textarea': activeInputStyles,
       },
+      '&[aria-active=true] label': activeLabelStyles,
 
       // label styles
       label: FormLabel.sizes?.[size](props) || {},
       'input:not(:placeholder-shown) + label, textarea:not(:placeholder-shown) + label': activeLabelStyles,
-      'input[aria-invalid=true] + label, textarea[aria-invalid=true] + label': {
+      [`
+        input[aria-invalid=true] + label, 
+        textarea[aria-invalid=true] + label,
+        &[aria-invalid=true] label
+      `]: {
         color: getColor(theme, errorColor),
       },
 
@@ -74,7 +79,11 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
         padding: inputPx,
       },
       'input:not(:placeholder-shown), textarea:not(:placeholder-shown)': activeInputStyles,
-      'input[disabled] + label, textarea[disabled] + label': {
+      [`
+        input[disabled] + label, 
+        textarea[disabled] + label,
+        &[aria-disabled=true] label
+      `]: {
         backgroundColor: 'transparent',
       },
 
@@ -82,7 +91,11 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
       'input:not(:placeholder-shown) + label .chakra-form__required-indicator, textarea:not(:placeholder-shown) + label .chakra-form__required-indicator': {
         color: getColor(theme, focusPlaceholderColor),
       },
-      'input[aria-invalid=true] + label .chakra-form__required-indicator, textarea[aria-invalid=true] + label .chakra-form__required-indicator': {
+      [`
+        input[aria-invalid=true] + label .chakra-form__required-indicator,
+        textarea[aria-invalid=true] + label .chakra-form__required-indicator,
+        &[aria-invalid=true] .chakra-form__required-indicator
+      `]: {
         color: getColor(theme, errorColor),
       },
     },

theme/components/FormLabel.ts

@@ -22,14 +22,6 @@ const variantFloating = defineStyle((props) => {
   const { focusPlaceholderColor } = getDefaultFormColors(props);
   const bc = backgroundColor || mode('white', 'black')(props);
 
-  const activeStyles = {
-    backgroundColor: bc,
-    color: getColor(theme, focusPlaceholderColor),
-    fontSize: 'xs',
-    lineHeight: '16px',
-    borderTopRightRadius: 'none',
-  };
-
   return {
     left: '2px',
     top: '2px',
@@ -46,8 +38,13 @@ const variantFloating = defineStyle((props) => {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    _focusWithin: activeStyles,
-    '&[data-active=true]': activeStyles,
+    _focusWithin: {
+      backgroundColor: bc,
+      color: getColor(theme, focusPlaceholderColor),
+      fontSize: 'xs',
+      lineHeight: '16px',
+      borderTopRightRadius: 'none',
+    },
   };
 });
 
@@ -58,17 +55,14 @@ const variants = {
 const sizes = {
   lg: defineStyle((props) => {
     if (props.variant === 'floating') {
-      const activeStyles = {
-        padding: '16px 24px 2px 24px',
-      };
-
       return {
         fontSize: 'md',
         lineHeight: '24px',
         padding: '28px 24px',
         right: '26px',
-        _focusWithin: activeStyles,
-        '&[data-active=true]': activeStyles,
+        _focusWithin: {
+          padding: '16px 24px 2px 24px',
+        },
         '&[data-fancy=true]': {
           right: '36px',
         },
@@ -79,17 +73,14 @@ const sizes = {
   }),
   md: defineStyle((props) => {
     if (props.variant === 'floating') {
-      const activeStyles = {
-        padding: '10px 16px 2px 16px',
-      };
-
       return {
         fontSize: 'md',
         lineHeight: '20px',
         padding: '18px 16px',
         right: '18px',
-        _focusWithin: activeStyles,
-        '&[data-active=true]': activeStyles,
+        _focusWithin: {
+          padding: '10px 16px 2px 16px',
+        },
         '&[data-fancy=true]': {
           right: '36px',
         },

ui/shared/FancySelect/FancySelect.tsx

-import { FormControl, useBoolean, useToken } from '@chakra-ui/react';
+import { FormControl, useBoolean, useToken, useColorMode } from '@chakra-ui/react';
 import type { Size, CSSObjectWithLabel, OptionsOrGroups, GroupBase, SingleValue, MultiValue } from 'chakra-react-select';
 import { Select } from 'chakra-react-select';
 import React from 'react';
@@ -6,7 +6,7 @@ import type { FieldError } from 'react-hook-form';
 
 import type { Option } from './types';
 
-import { chakraStyles } from 'ui/shared/FancySelect/utils';
+import { getChakraStyles } from 'ui/shared/FancySelect/utils';
 import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
@@ -25,6 +25,7 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
   const [ hasValue, setHasValue ] = useBoolean(false);
 
   const menuZIndex = useToken('zIndices', 'dropdown');
+  const { colorMode } = useColorMode();
 
   const handleChange = React.useCallback((newValue: SingleValue<Option> | MultiValue<Option>) => {
     if (Array.isArray(newValue)) {
@@ -48,8 +49,17 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
     menuPortal: (provided: CSSObjectWithLabel) => ({ ...provided, zIndex: menuZIndex }),
   }), [ menuZIndex ]);
 
+  const chakraStyles = React.useMemo(() => getChakraStyles(colorMode), [ colorMode ]);
+
   return (
-    <FormControl variant="floating" size={ size } isRequired={ isRequired }>
+    <FormControl
+      variant="floating"
+      size={ size }
+      isRequired={ isRequired }
+      { ...(error ? { 'aria-invalid': true } : {}) }
+      { ...(isDisabled ? { 'aria-disabled': true } : {}) }
+      { ...(hasValue ? { 'aria-active': true } : {}) }
+    >
       <Select
         menuPortalTarget={ window.document.body }
         placeholder=""
@@ -67,7 +77,6 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
       />
       <InputPlaceholder
         text={ placeholder }
-        isActive={ hasValue }
         error={ error }
         isFancy
       />

ui/shared/FancySelect/utils.ts

+import type { ColorMode } from '@chakra-ui/react';
 import type { Size, ChakraStylesConfig } from 'chakra-react-select';
 
 import type { Option } from './types';
@@ -40,10 +41,15 @@ function getSingleValueStyles(size?: Size) {
   }
 }
 
-const chakraStyles: ChakraStylesConfig<Option> = {
-//   control: (provided) => ({
-//     ...provided,
-//   }),
+const getChakraStyles: (colorMode: ColorMode) => ChakraStylesConfig<Option> = (colorMode) => {
+  const emptyInputBorderColor = colorMode === 'dark' ? 'gray.700' : 'gray.100';
+  const filledInputBorderColor = colorMode === 'dark' ? 'gray.600' : 'gray.300';
+
+  return {
+    control: (provided, state) => ({
+      ...provided,
+      borderColor: state.hasValue ? filledInputBorderColor : emptyInputBorderColor,
+    }),
     inputContainer: (provided) => ({
       ...provided,
       py: 0,
@@ -52,6 +58,7 @@ const chakraStyles: ChakraStylesConfig<Option> = {
     valueContainer: (provided, state) => ({
       ...provided,
       ...getValueContainerStyles(state.selectProps.size),
+      py: 0,
     }),
     singleValue: (provided, state) => ({
       ...provided,
@@ -59,6 +66,7 @@ const chakraStyles: ChakraStylesConfig<Option> = {
       transform: 'none',
       ...getSingleValueStyles(state.selectProps.size),
     }),
+  };
 };
 
-export { chakraStyles };
+export { getChakraStyles };

ui/shared/InputPlaceholder.tsx

@@ -6,11 +6,10 @@ interface Props {
   text: string;
   error?: Partial<FieldError>;
   className?: string;
-  isActive?: boolean;
   isFancy?: boolean;
 }
 
-const InputPlaceholder = ({ text, error, className, isActive, isFancy }: Props) => {
+const InputPlaceholder = ({ text, error, className, isFancy }: Props) => {
   let errorMessage = error?.message;
 
   if (!errorMessage && error?.type === 'pattern') {
@@ -20,7 +19,6 @@ const InputPlaceholder = ({ text, error, className, isActive, isFancy }: Props)
   return (
     <FormLabel
       className={ className }
-      { ...(isActive ? { 'data-active': true } : {}) }
       { ...(isFancy ? { 'data-fancy': true } : {}) }
     >
       <chakra.span>{ text }</chakra.span>