Merge pull request #5270 from GeekyAnts/release/3.4.12

v3.4.12
GeekyAnts · Aug 12, 2022 · 8ec24ff · 8ec24ff · vercel · Aug 12, 2022
2 parents 5d75693 + 6626ff0
commit 8ec24ff
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 47 deletions.
diff --git a/example/storybook/stories/hooks/useColorModeValue/Basic.tsx b/example/storybook/stories/hooks/useColorModeValue/Basic.tsx
@@ -11,21 +11,16 @@ import {
 
 function UseColorMode() {
   const { toggleColorMode } = useColorMode();
+  const text = useColorModeValue('Light', 'Dark');
+  const bg = useColorModeValue('warmGray.50', 'coolGray.800');
+
   return (
     <Center>
-      <Box
-        p="4"
-        flex="1"
-        bg={useColorModeValue('warmGray.50', 'coolGray.800')}
-        maxW="300"
-        w="100%"
-        mt={10}
-        safeArea
-      >
+      <Box p="4" flex="1" bg={bg} maxW="300" w="100%" mt={10} safeArea>
         <Text fontSize="lg" display="flex" mb={20}>
           The active color mode is{' '}
           <Text bold fontSize="18px">
-            {useColorModeValue('Light', 'Dark')}
+            {text}
           </Text>
         </Text>
         <Button onPress={toggleColorMode} h={10}>

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.11",
+  "version": "3.4.12",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

diff --git a/src/components/primitives/Button/ButtonGroup.tsx b/src/components/primitives/Button/ButtonGroup.tsx
@@ -22,44 +22,41 @@ export default memo(
       } = usePropsResolution('ButtonGroup', props);
 
       const { borderRadius } = usePropsResolution('Button', props);
-      let computedChildren: JSX.Element | JSX.Element[];
+      let computedChildren;
 
       if (Array.isArray(children)) {
-        computedChildren = React.Children.map(
-          children,
+        computedChildren = React.Children.toArray(children).map(
           (child: any, index: number) => {
-            if (child?.type?.displayName === 'Button') {
-              return React.cloneElement(child, {
-                key: `button-group-child-${index}`,
-                variant,
-                size,
-                colorScheme,
-                isDisabled,
+            if (typeof child === 'string' || typeof child === 'number')
+              return child;
+            return React.cloneElement(child, {
+              key: `button-group-child-${index}`,
+              variant,
+              size,
+              colorScheme,
+              isDisabled,
 
-                // when buttons are attached, remove rounded corners of all buttons except extreme buttons
-                ...(isAttached ? { borderRadius: 0 } : {}),
-                ...(isAttached && index === 0
-                  ? direction === 'column'
-                    ? { borderTopRadius: borderRadius }
-                    : { borderLeftRadius: borderRadius }
-                  : {}),
-                ...(isAttached && index === children?.length - 1
-                  ? direction === 'column'
-                    ? { borderBottomRadius: borderRadius }
-                    : { borderRightRadius: borderRadius }
-                  : {}),
+              // when buttons are attached, remove rounded corners of all buttons except extreme buttons
+              ...(isAttached ? { borderRadius: 0 } : {}),
+              ...(isAttached && index === 0
+                ? direction === 'column'
+                  ? { borderTopRadius: borderRadius }
+                  : { borderLeftRadius: borderRadius }
+                : {}),
+              ...(isAttached && index === children?.length - 1
+                ? direction === 'column'
+                  ? { borderBottomRadius: borderRadius }
+                  : { borderRightRadius: borderRadius }
+                : {}),
 
-                //when buttons are attached, remove double border from them, just keep borderRight in case for direction row and borderBottom in case of direction column for every component
-                ...(isAttached && index !== 0
-                  ? direction === 'column'
-                    ? { borderTopWidth: 0 }
-                    : { borderLeftWidth: 0 }
-                  : {}),
-                ...child.props,
-              });
-            } else {
-              return child;
-            }
+              //when buttons are attached, remove double border from them, just keep borderRight in case for direction row and borderBottom in case of direction column for every component
+              ...(isAttached && index !== 0
+                ? direction === 'column'
+                  ? { borderTopWidth: 0 }
+                  : { borderLeftWidth: 0 }
+                : {}),
+              ...child.props,
+            });
           }
         );
       } else {

diff --git a/src/components/primitives/Select/Select.tsx b/src/components/primitives/Select/Select.tsx
@@ -146,7 +146,7 @@ const Select = (
     });
   }
 
-  const [layoutProps] = extractInObject(resolvedProps, [
+  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
     ...stylingProps.margin,
     ...stylingProps.flexbox,
     ...stylingProps.position,
@@ -158,7 +158,7 @@ const Select = (
     <Input
       placeholder={placeholder}
       InputRightElement={rightIcon}
-      {...resolvedProps}
+      {...nonLayoutProps}
       // NOTE: Adding ts-ignore as we're not exposing isFocused in the Input component
       // @ts-ignore-next-line
       isFocused={isFocused}
@@ -174,7 +174,7 @@ const Select = (
   );
 
   return Platform.OS === 'web' ? (
-    <Box>
+    <Box {...layoutProps}>
       {/* <Box w="100%" h="100%" position="absolute" opacity="0" zIndex={1}> */}
       <select
         aria-readonly={selectProps.readOnly}