Merge pull request #4906 from GeekyAnts/release/3.4.0-rc.11

surajahmed · web-flow · commit 55d64d37cdd1 · 2022-04-11T11:29:55.000+05:30
Release/3.4.0 rc.11
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # <img src="https://raw.githubusercontent.com/GeekyAnts/NativeBase/master/img/header_new.png" alt="Nativebase Logo">
 
-[![Financial Contributors on Open Collective](https://opencollective.com/NativeBase/all/badge.svg?label=financial+contributors)](https://opencollective.com/NativeBase) [![](http://slack.nativebase.io/badge.svg)](http://slack.nativebase.io/) [![Build Status](https://travis-ci.org/GeekyAnts/NativeBase.svg?branch=master)](https://travis-ci.org/GeekyAnts/NativeBase) [![npm version](https://badge.fury.io/js/native-base.svg)](https://badge.fury.io/js/native-base) [![npm downloads](https://img.shields.io/npm/dt/native-base.svg)](https://npm-stat.com/charts.html?package=native-base&from=2016-04-01&to=2018-02-17)
+[![Financial Contributors on Open Collective](https://opencollective.com/NativeBase/all/badge.svg?label=financial+contributors)](https://opencollective.com/NativeBase) [![](https://img.shields.io/discord/785491682719301643?label=Discord&logo=discord&logoColor=%237289DA)](https://discord.com/invite/TSgCw2UPmb) [![Build Status](https://travis-ci.org/GeekyAnts/NativeBase.svg?branch=master)](https://travis-ci.org/GeekyAnts/NativeBase) [![npm version](https://badge.fury.io/js/native-base.svg)](https://badge.fury.io/js/native-base) [![npm downloads](https://img.shields.io/npm/dt/native-base.svg)](https://npm-stat.com/charts.html?package=native-base&from=2016-04-01&to=2018-02-17)
 
 ## NativeBase is a mobile-first, accessible component library for building a consistent design system across android, iOS & web.
 
diff --git a/example/storybook/stories/components/composites/Alert/action.tsx b/example/storybook/stories/components/composites/Alert/action.tsx
@@ -37,7 +37,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
                 onPress={() => setShow(false)}
               />
             </HStack>
diff --git a/example/storybook/stories/components/composites/Alert/basic.tsx b/example/storybook/stories/components/composites/Alert/basic.tsx
@@ -30,7 +30,8 @@ export const Example = () => {
             <IconButton
               variant="unstyled"
               _focus={{ borderWidth: 0 }}
-              icon={<CloseIcon size="3" color="coolGray.600" />}
+              icon={<CloseIcon size="3" />}
+              _icon={{ color: 'coolGray.600' }}
             />
           </HStack>
           <Box pl="6" _text={{ color: 'coolGray.600' }}>
diff --git a/example/storybook/stories/components/composites/Alert/colorScheme.tsx b/example/storybook/stories/components/composites/Alert/colorScheme.tsx
@@ -31,7 +31,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
               />
             </HStack>
             <Box pl="6" _text={{ color: 'coolGray.600' }}>
diff --git a/example/storybook/stories/components/composites/Alert/composition.tsx b/example/storybook/stories/components/composites/Alert/composition.tsx
@@ -35,7 +35,8 @@ export function Example() {
               <IconButton
                 variant="unstyled"
                 _focus={{ borderWidth: 0 }}
-                icon={<CloseIcon size="3" color="coolGray.600" />}
+                icon={<CloseIcon size="3" />}
+                _icon={{ color: 'coolGray.600' }}
               />
             </HStack>
             <Box pl="6" _dark={{ _text: { color: 'coolGray.600' } }}>
diff --git a/example/storybook/stories/components/composites/Alert/status.tsx b/example/storybook/stories/components/composites/Alert/status.tsx
@@ -46,7 +46,8 @@ export function Example() {
                   <IconButton
                     variant="unstyled"
                     _focus={{ borderWidth: 0 }}
-                    icon={<CloseIcon size="3" color="coolGray.600" />}
+                    icon={<CloseIcon size="3" />}
+                    _icon={{ color: 'coolGray.600' }}
                   />
                 </HStack>
               </VStack>
diff --git a/example/storybook/stories/components/composites/Alert/usage.tsx b/example/storybook/stories/components/composites/Alert/usage.tsx
@@ -29,7 +29,8 @@ export function Example() {
             <IconButton
               variant="unstyled"
               _focus={{ borderWidth: 0 }}
-              icon={<CloseIcon size="3" color="coolGray.600" />}
+              icon={<CloseIcon size="3" />}
+              _icon={{ color: 'coolGray.600' }}
             />
           </HStack>
           <Box pl="6" _text={{ color: 'coolGray.600' }}>
diff --git a/example/storybook/stories/components/composites/Divider/Basic.tsx b/example/storybook/stories/components/composites/Divider/Basic.tsx
@@ -8,7 +8,11 @@ export const Example = () => {
         <Heading mx="3" alignItems="center" flexDirection="row">
           Chrome
         </Heading>
-        <Divider my="2" />
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
         <Heading mx="3" alignItems="center" flexDirection="row">
           Firefox
         </Heading>
diff --git a/example/storybook/stories/components/composites/Divider/Orientation.tsx b/example/storybook/stories/components/composites/Divider/Orientation.tsx
@@ -6,10 +6,19 @@ export const Example = () => {
     <Box alignItems="center">
       <Box w="160">
         <Heading mx="auto">Shoes</Heading>
-        <Divider my="2" />
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
         <Flex mx="3" direction="row" justify="space-evenly" h="60">
           <Heading py="2">Girls</Heading>
-          <Divider orientation="vertical" mx="3" />
+          <Divider
+            orientation="vertical"
+            mx="3"
+            _light={{ bg: 'muted.800' }}
+            _dark={{ bg: 'muted.50' }}
+          />
           <Heading py="2">Boys</Heading>
         </Flex>
       </Box>
diff --git a/example/storybook/stories/components/primitives/Input/Basic.tsx b/example/storybook/stories/components/primitives/Input/Basic.tsx
@@ -4,7 +4,7 @@ import { Input, Box } from 'native-base';
 export const Example = () => {
   return (
     <Box alignItems="center">
-      <Input mx="3" placeholder="Input" w="75%" maxWidth="300px" />
+      <Input mx="3" placeholder="Input" w="100%" />
     </Box>
   );
 };
diff --git a/example/storybook/stories/components/primitives/Input/Controlled.tsx b/example/storybook/stories/components/primitives/Input/Controlled.tsx
@@ -8,8 +8,7 @@ export const Example = () => {
     <Box alignItems="center">
       <Input
         value={value}
-        w="75%"
-        maxW="300px"
+        w="100%"
         onChangeText={handleChange}
         placeholder="Value Controlled Input"
       />
diff --git a/example/storybook/stories/components/primitives/Input/Masked.tsx b/example/storybook/stories/components/primitives/Input/Masked.tsx
@@ -9,8 +9,7 @@ export const Example = () => {
     <Box alignItems="center">
       <Input
         type={show ? 'text' : 'password'}
-        w="75%"
-        maxW="300px"
+        w="100%"
         py="0"
         InputRightElement={
           <Button
diff --git a/example/storybook/stories/components/primitives/Input/Size.tsx b/example/storybook/stories/components/primitives/Input/Size.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import { Input, Stack, Center } from 'native-base';
+import { Input, Stack } from 'native-base';
 
 export const Example = () => {
   return (
-    <Center>
-      <Stack mt={3} space={4} w="75%" maxW="300px">
-        <Input size="xs" placeholder="xs Input" />
-        <Input size="sm" placeholder="sm Input" />
-        <Input size="md" placeholder="md Input" />
-        <Input size="lg" placeholder="lg Input" />
-        <Input size="xl" placeholder="xl Input" />
-        <Input size="2xl" placeholder="2xl Input" />
-      </Stack>
-    </Center>
+    <Stack space={4} w="75%" maxW="300px">
+      <Input size="xs" placeholder="xs Input" />
+      <Input size="sm" placeholder="sm Input" />
+      <Input size="md" placeholder="md Input" />
+      <Input size="lg" placeholder="lg Input" />
+      <Input size="xl" placeholder="xl Input" />
+      <Input size="2xl" placeholder="2xl Input" />
+    </Stack>
   );
 };
diff --git a/example/storybook/stories/components/primitives/Input/Variant.tsx b/example/storybook/stories/components/primitives/Input/Variant.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Input, Stack, Center } from 'native-base';
+import { Input, Stack } from 'native-base';
 export const Example = () => {
   return (
-    <Stack space={4} w="75%">
+    <Stack space={4} w="75%" maxW="300px">
       <Input variant="outline" placeholder="Outline" />
       <Input variant="filled" placeholder="Filled" />
       <Input variant="underlined" placeholder="Underlined" />
diff --git a/example/storybook/stories/components/primitives/Pressable/Basic.tsx b/example/storybook/stories/components/primitives/Pressable/Basic.tsx
@@ -4,16 +4,18 @@ import { Pressable, Text, Box, HStack, Spacer, Flex, Badge } from 'native-base';
 export function Example() {
   return (
     <Box alignItems="center">
-      <Pressable onPress={() => console.log("I'm Pressed")}>
-        <Box
-          maxW="96"
-          borderWidth="1"
-          borderColor="coolGray.300"
-          shadow="3"
-          bg="coolGray.100"
-          p="5"
-          rounded="8"
-        >
+      <Pressable
+        onPress={() => console.log("I'm Pressed")}
+        rounded="8"
+        overflow="hidden"
+        borderWidth="1"
+        borderColor="coolGray.300"
+        maxW="96"
+        shadow="3"
+        bg="coolGray.100"
+        p="5"
+      >
+        <Box>
           <HStack alignItems="center">
             <Badge
               colorScheme="darkBlue"
diff --git a/example/storybook/stories/components/primitives/Pressable/Events.tsx b/example/storybook/stories/components/primitives/Pressable/Events.tsx
@@ -4,23 +4,24 @@ import { Pressable, Text, Box, HStack, Spacer, Flex, Badge } from 'native-base';
 export function Example() {
   return (
     <Box alignItems="center">
-      <Pressable>
+      <Pressable
+        maxW="96"
+        borderWidth="1"
+        borderColor="coolGray.300"
+        shadow="3"
+        rounded="8"
+        p="5"
+      >
         {({ isHovered, isFocused, isPressed }) => {
           return (
             <Box
-              maxW="96"
-              borderWidth="1"
-              borderColor="coolGray.300"
-              shadow="3"
               bg={
                 isPressed
                   ? 'coolGray.200'
                   : isHovered
                   ? 'coolGray.200'
                   : 'coolGray.100'
               }
-              p="5"
-              rounded="8"
               style={{
                 transform: [
                   {
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.0-rc.10",
+  "version": "3.4.0-rc.11",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",
diff --git a/src/components/composites/Fab/Fab.tsx b/src/components/composites/Fab/Fab.tsx
@@ -5,7 +5,7 @@ import { usePropsResolution } from '../../../hooks/useThemeProps';
 import { OverlayContainer } from '@react-native-aria/overlays';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 
-const Fab = (props: IFabProps, ref: any) => {
+const Fab = ({ variant, ...props }: IFabProps, ref: any) => {
   const themeProps = usePropsResolution('FAB', props);
   const {
     label,
@@ -18,6 +18,7 @@ const Fab = (props: IFabProps, ref: any) => {
 
   const fabComponent = (
     <Button
+      variant={variant}
       {...placementProps[placement]}
       ref={ref}
       startIcon={icon}
diff --git a/src/components/composites/Menu/Menu.tsx b/src/components/composites/Menu/Menu.tsx
@@ -79,36 +79,35 @@ const Menu = (
   return (
     <>
       {updatedTrigger()}
-      {isOpen && (
-        <Overlay
-          isOpen={isOpen}
-          onRequestClose={handleClose}
-          useRNModalOnAndroid
-          {..._overlay}
-        >
-          <PresenceTransition visible={isOpen} {..._presenceTransition}>
-            <Popper
-              triggerRef={triggerRef}
-              onClose={handleClose}
-              placement={placement}
-              {...resolvedProps}
-            >
-              <Backdrop onPress={handleClose} {..._backdrop} />
-              <Popper.Content isOpen={isOpen}>
-                <MenuContext.Provider
-                  value={{ closeOnSelect, onClose: handleClose }}
-                >
-                  <FocusScope contain restoreFocus autoFocus>
-                    <MenuContent menuRef={ref} {...resolvedProps}>
-                      {children}
-                    </MenuContent>
-                  </FocusScope>
-                </MenuContext.Provider>
-              </Popper.Content>
-            </Popper>
-          </PresenceTransition>
-        </Overlay>
-      )}
+      <Overlay
+        isOpen={isOpen}
+        onRequestClose={handleClose}
+        useRNModalOnAndroid
+        {..._overlay}
+        unmountOnExit
+      >
+        <PresenceTransition visible={isOpen} {..._presenceTransition}>
+          <Popper
+            triggerRef={triggerRef}
+            onClose={handleClose}
+            placement={placement}
+            {...resolvedProps}
+          >
+            <Backdrop onPress={handleClose} {..._backdrop} />
+            <Popper.Content isOpen={isOpen}>
+              <MenuContext.Provider
+                value={{ closeOnSelect, onClose: handleClose }}
+              >
+                <FocusScope contain restoreFocus autoFocus>
+                  <MenuContent menuRef={ref} {...resolvedProps}>
+                    {children}
+                  </MenuContent>
+                </FocusScope>
+              </MenuContext.Provider>
+            </Popper.Content>
+          </Popper>
+        </PresenceTransition>
+      </Overlay>
     </>
   );
 };
diff --git a/src/components/composites/Popover/Popover.tsx b/src/components/composites/Popover/Popover.tsx
diff --git a/src/components/primitives/Input/Input.tsx b/src/components/primitives/Input/Input.tsx
diff --git a/src/components/primitives/Input/types.ts b/src/components/primitives/Input/types.ts
diff --git a/src/components/primitives/Overlay/Overlay.tsx b/src/components/primitives/Overlay/Overlay.tsx
diff --git a/src/theme/components/input.ts b/src/theme/components/input.ts
diff --git a/src/theme/types.ts b/src/theme/types.ts
