Merge pull request #4855 from GeekyAnts/fix/Input-outline

fix: input shift on focus

Author: surajahmed

src/components/primitives/Input/Input.tsx

@@ -112,7 +112,12 @@ const Input = (
   }
 
   return (
-    <Stack {..._stack} {...layoutProps} ref={mergeRefs([_ref, wrapperRef])}>
+    <Stack
+      {..._stack}
+      {...layoutProps}
+      ref={mergeRefs([_ref, wrapperRef])}
+      isFocused={isFocused}
+    >
       {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}
       <StyledInput
         {...inputProps}

src/components/primitives/Stack/Stack.tsx

@@ -28,6 +28,26 @@ export interface InterfaceStackProps extends InterfaceBoxProps<IStackProps> {
   direction?: ResponsiveValue<
     'column' | 'row' | 'column-reverse' | 'row-reverse'
   >;
+  /**
+   * If true, the Stack will be in hovered state.
+   */
+  isHovered?: boolean;
+  /**
+   * If true, the Stack will be focused.
+   */
+  isFocused?: boolean;
+  /**
+   * If true, the Stack will be disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * If true, the Stack will be invalid.
+   */
+  isInvalid?: boolean;
+  /**
+   * If true, prevents the value of the children from being edited. Used with FormControls.
+   */
+  isReadOnly?: boolean;
 }
 
 export type IStackProps = InterfaceStackProps | CustomProps<'Stack'>;
@@ -44,7 +64,13 @@ const Stack = ({ space, ...props }: IStackProps, ref?: any) => {
   }: any = usePropsResolution(
     'Stack',
     { ...props, size: space },
-    {},
+    {
+      isDisabled: props.isDisabled,
+      isHovered: props.isHovered,
+      isFocused: props.isFocused,
+      isInvalid: props.isInvalid,
+      isReadOnly: props.isReadOnly,
+    },
     { resolveResponsively: ['space', 'direction'] }
   );
 

src/theme/components/icon-button.ts

@@ -2,12 +2,17 @@ import { mode } from './../tools';
 
 const baseStyle = (props: any) => {
   const { colorScheme } = props;
+  const colors = props.theme.colors;
   const focusRing = mode(
     {
-      boxShadow: `${colorScheme[400]} 0px 0px 0px 2px`,
+      outlineWidth: '2px',
+      outlineColor: `${colors[colorScheme][600]}`,
+      outlineStyle: 'solid',
     },
     {
-      boxShadow: `${colorScheme[500]} 0px 0px 0px 2px`,
+      outlineWidth: '2px',
+      outlineColor: `${colors[colorScheme][500]}`,
+      outlineStyle: 'solid',
     }
   )(props);
 
@@ -30,9 +35,7 @@ const baseStyle = (props: any) => {
       borderColor: `${colorScheme}.400`,
     },
     _focusVisible: {
-      borderWidth: 2,
       _web: {
-        outlineWidth: '0',
         style: { ...focusRing },
       },
     },

src/theme/components/input.ts

@@ -1,22 +1,19 @@
-import { transparentize } from '../tools';
-
-const baseStyle = () => {
-  // const { primary } = props.theme.colors;
-  // Todo: Resolve boxShadow Color or Provide some alternatiove prop for user to change focusRing color
-  // // Todo: Update to support similar focusRing on iOS , Android and Web
-  // const focusRing =
-  //   Platform.OS === 'web'
-  //     ? {
-  //         boxShadow:
-  //           props.variant !== 'underlined'
-  //             ? `${primary[400]} 0px 0px 0px 1px`
-  //             : `${primary[400]} 0px 1px 0px 0px`,
-  //         zIndex: 1,
-  //       }
-  //     : {
-  //         // boxShadow: `${useToken('colors', ['primary.400'])} 0px 0px 0px 1px`,
-  //       };
+import { transparentize, mode } from '../tools';
 
+const baseStyle = (props: any) => {
+  const { primary } = props.theme.colors;
+  const focusRing = mode(
+    {
+      outlineWidth: '1px',
+      outlineColor: `${primary[600]}`,
+      outlineStyle: 'solid',
+    },
+    {
+      outlineWidth: '1px',
+      outlineColor: `${primary[500]}`,
+      outlineStyle: 'solid',
+    }
+  )(props);
   return {
     fontFamily: 'body',
     py: '2',
@@ -37,12 +34,7 @@ const baseStyle = () => {
       style: { outline: 'none' },
       cursor: 'auto',
     },
-    _stack: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      // justifyContent: 'space-between',
-      overflow: 'hidden',
-    },
+
     _input: {
       bg: 'transparent',
       flex: 1,
@@ -72,6 +64,15 @@ const baseStyle = () => {
           borderColor: 'muted.300',
         },
       },
+      _stack: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        // justifyContent: 'space-between',
+        overflow: 'hidden',
+        _focus: {
+          style: { ...focusRing },
+        },
+      },
     },
     _dark: {
       placeholderTextColor: 'text.600',
@@ -98,6 +99,15 @@ const baseStyle = () => {
           borderColor: 'muted.700',
         },
       },
+      _stack: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        // justifyContent: 'space-between',
+        overflow: 'hidden',
+        _focus: {
+          style: { ...focusRing },
+        },
+      },
     },
   };
 };
@@ -108,7 +118,6 @@ function roundedStyle(props: Record<string, any>) {
     borderRadius: 'full',
     borderWidth: '1',
     _focus: {
-      borderWidth: '2',
       bg: transparentize('primary.600', 0.1)(theme),
     },
     _invalid: {
@@ -121,7 +130,6 @@ function outlineStyle(props: Record<string, any>) {
   return {
     borderWidth: '1',
     _focus: {
-      borderWidth: '2',
       bg: transparentize('primary.600', 0.1)(theme),
     },
     _invalid: {
@@ -132,10 +140,8 @@ function outlineStyle(props: Record<string, any>) {
 function filledStyle(props: Record<string, any>) {
   const { theme } = props;
   return {
-    borderWidth: '0',
-    borderColor: 'transparent',
+    borderWidth: '1',
     _focus: {
-      borderWidth: '2',
       bg: transparentize('primary.600', 0.1)(theme),
     },
     _hover: {
@@ -149,9 +155,11 @@ function filledStyle(props: Record<string, any>) {
     },
     _light: {
       bg: 'muted.100',
+      borderColor: 'muted.100',
     },
     _dark: {
       bg: 'muted.800',
+      borderColor: 'muted.800',
     },
   };
 }
@@ -167,16 +175,27 @@ function unstyledStyle() {
     _focus: {
       bg: 'transparent',
     },
+    _stack: {
+      _focus: {
+        style: {
+          outlineWidth: '0',
+        },
+      },
+    },
   };
 }
 function underlinedStyle() {
   return {
     borderWidth: '0',
     pl: '0',
     borderBottomWidth: '1',
-    _focus: {
-      borderBottomWidth: '2',
-      fontWeight: '500',
+    _stack: {
+      _focus: {
+        style: {
+          outlineWidth: '0',
+          boxShadow: '0 1px 0 0 #0891B2',
+        },
+      },
     },
     _invalid: {
       borderBottomWidth: '2',