Merge pull request #4838 from GeekyAnts/feat/v3.4-design-updates

Feat/v3.4 design updates

Author: surajahmed

src/components/primitives/Input/InputGroup.tsx

@@ -6,6 +6,34 @@ import { extractInObject, stylingProps } from '../../../theme/tools/utils';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 
 const supplyPropsToChildren = (children: any, props: any) => {
+  if (children.length >= 2) {
+    const result = [];
+    const firstChild = children[0];
+    const firstChildProps = {
+      ...firstChild.props.children,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    };
+    result.push(
+      React.cloneElement(firstChild, firstChildProps, firstChild.props.children)
+    );
+    for (let i = 1; i < children.length - 1; i++) {
+      const child = children[i];
+      const newProps = { ...props, borderRadius: '0' };
+      result.push(React.cloneElement(child, newProps, child.props.children));
+    }
+    const lastChild = children[children.length - 1];
+    const lastChildProps = {
+      ...lastChild.props.children,
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    };
+    result.push(
+      React.cloneElement(lastChild, lastChildProps, lastChild.props.children)
+    );
+    return result;
+  }
+
   return React.Children.map(children, (child: JSX.Element) => {
     return React.cloneElement(child, props, child.props.children);
   });

src/theme/components/actionsheet.ts

@@ -63,6 +63,14 @@ export const ActionsheetItem = {
         bg: 'muted.200',
       },
       _pressed: {
+        bg: 'muted.400',
+      },
+      _focusVisible: {
+        _web: {
+          outlineWidth: '0',
+          style: { boxShadow: `none` },
+          bg: 'muted.300',
+        },
         bg: 'muted.300',
       },
     },
@@ -74,7 +82,14 @@ export const ActionsheetItem = {
         bg: 'muted.700',
       },
       _pressed: {
-        bg: 'muted.600',
+        bg: 'muted.500',
+      },
+      _focusVisible: {
+        _web: {
+          outlineWidth: '0',
+          style: { boxShadow: `none` },
+          bg: 'muted.600',
+        },
       },
     },
   }),

src/theme/components/icon-button.ts

@@ -27,10 +27,10 @@ const baseStyle = (props: any) => {
       userSelect: 'none',
     },
     _focus: {
-      borderWidth: 2,
       borderColor: `${colorScheme}.400`,
     },
     _focusVisible: {
+      borderWidth: 2,
       _web: {
         outlineWidth: '0',
         style: { ...focusRing },

src/theme/components/inputleftaddon.ts

@@ -4,6 +4,7 @@ const baseStyle = () => {
     p: '2',
     borderWidth: '1',
     borderRightWidth: '0',
+    borderLeftRadius: 'sm',
     _text: {
       fontWeight: 400,
     },

src/theme/components/inputrightaddon.ts

@@ -4,6 +4,7 @@ const baseStyle = () => {
     p: '2',
     borderWidth: '1',
     borderLeftWidth: '0',
+    borderRightRadius: 'sm',
     _text: {
       fontWeight: 400,
     },