Docs update for 3.2.0

docs/accessibility.md

@@ -11,7 +11,7 @@ NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to
 
 ## Accessible Labels
 
-When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://www.notion.so/Accessibility-83852d7c4b094e69a3e4f1047994bd1c) does this for you out of the box.
+When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://react-native-aria.geekyants.com/) does this for you out of the box.
 
 ## Keyboard Navigation
 

docs/icon.md

@@ -11,14 +11,6 @@ You can use icons in multiple ways in NativeBase:
 
 ## Examples
 
-### NativeBase Icons
-
-We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase.
-
-```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx
-
-```
-
 ### Basic
 
 ```ComponentSnackPlayer path=primitives,Icon,Basic.tsx
@@ -27,6 +19,14 @@ We provides a set of commonly used interface icons. So you can directly use them
 
 Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg).
 
+### NativeBase Icons
+
+We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase.
+
+```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx
+
+```
+
 ### Custom Icon
 
 ```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx

docs/install-cra.mdx

@@ -62,6 +62,7 @@ cd my-app
 ```bash
 yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context
 ```
+
 </div>
   </TabItem>
 
@@ -85,7 +86,7 @@ Put the below code in your App.js
 import React from 'react';
 import { NativeBaseProvider, Box } from 'native-base';
 
-function App() {
+export default function App() {
   return (
     <NativeBaseProvider>
       <Box>Hello world</Box>

docs/install-expo.mdx

@@ -62,7 +62,7 @@ Put the below code in your App.js
 import React from 'react';
 import { NativeBaseProvider, Box } from 'native-base';
 
-function App() {
+export default function App() {
   return (
     <NativeBaseProvider>
       <Box>Hello world</Box>

docs/install-rn.mdx

@@ -56,7 +56,7 @@ Put the below code in your App.js
 import React from 'react';
 import { NativeBaseProvider, Box } from 'native-base';
 
-function App() {
+export default function App() {
   return (
     <NativeBaseProvider>
       <Box>Hello world</Box>

docs/migration/v31tov32.md

@@ -10,7 +10,7 @@ But like everything comes at a price, `version 3.2.0` also comes with a few brea
 To upgrade to 3.2.0 just go into your root directory and run the below command.
 
 ```bash
-npx upgrade native-base-code-mode
+npx upgrade native-base-code-mod
 ```
 
 :::caution

docs/nativebase.mdx

@@ -37,7 +37,7 @@ import TOCInline from '@theme/TOCInline';
           />
           <TileLink
             title="Recipes"
-            url="loginsignupforms"
+            url="login-signup-forms"
             description="Popular Recipes for Apps"
             className="bg-indigo-600"
           />

docs/pseudoProps.md

@@ -0,0 +1,86 @@
+---
+id: pseudo-props
+title: Pseudo Props 101
+---
+
+Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow.
+
+## Nesting pseudo props:
+
+In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind.
+
+Example: So assume you want to change the text color of a button on its hover state.
+
+### Do's
+
+```jsx
+<Button
+  _hover={{
+    _text: { color: 'secondary.400' },
+  }}
+>
+  Change My Color
+</Button>
+```
+
+### Dont's
+
+```jsx
+<Button
+  _text={{
+    _hover: { color: 'secondary.400' },
+  }}
+>
+  Change My Color
+</Button>
+```
+
+The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` .
+
+## Precedence Order for Pseudo Props:
+
+Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence.
+
+```jsx
+_disabled(100);
+
+_pressed(70);
+_hover(60);
+_focus(50);
+_focusVisible(55);
+
+_active(30);
+_checked(30);
+_readOnly(40);
+_invalid(40);
+
+_web(10);
+_android(10);
+_ios(10);
+
+_light(10);
+_dark(10);
+```
+
+```SnackPlayer name=Pseudo%20Props%20Precedence
+import React from 'react';
+import { Button, NativeBaseProvider, Center } from 'native-base';
+
+function Component() {
+  return (
+      // Here you can see _hover will be overrided by _pressed
+      <Button _hover={{ bg: 'red.500' }} _pressed={{ bg: 'green.500' }}>
+        Press and Hover here
+      </Button>
+  );
+}
+export default function () {
+  return (
+    <NativeBaseProvider>
+      <Center flex={1}>
+        <Component />
+      </Center>
+    </NativeBaseProvider>
+  );
+}
+```

nb-plugins/storybook-example-transformer/index.js

@@ -61,7 +61,7 @@ const endingTemplate = `
 export default () => {
     return (
       <NativeBaseProvider>
-        <Center flex={1}>
+        <Center flex={1} px={3}>
             <Example />
         </Center>
       </NativeBaseProvider>

sidebars.js

@@ -14,7 +14,7 @@ module.exports = {
         'utility-first',
         'utility-props-specificity',
         'design-tokens',
-        'psuedo-props',
+        'pseudo-props',
         'interaction-styles',
         'responsive-style',
       ],

src/css/custom.css

@@ -472,7 +472,8 @@ html[data-theme='dark'] .navbar-small {
 .menu__link[href*='/utility-props']:after,
 .menu__link[href*='/utility-props-specificity']:after,
 .menu__link[href*='/color-mode']:after,
-.menu__link[href*='/psuedo-props']:after,
+.menu__link[href*='/pseudo-props']:after,
+.menu__link[href*='/migration/v3.1.0-to-3.2.0']:after,
 .menu__link[href*='/strict-mode']:after,
 .menu__link[href*='/default-theme']:after {
   content: 'New';

versioned_docs/version-3.1.0/default-theme.md

@@ -30,32 +30,28 @@ To manage Typography options, the theme object supports the following keys:
 ```jsx
 const typography = {
   letterSpacings: {
-    xxs: -1.5,
-    xs: -0.5,
-    sm: 0,
-    md: 0.1,
-    lg: 0.15,
-    xl: 0.25,
+    '2xs': -1.5,
+    'xs': -0.5,
+    'sm': 0,
+    'md': 0.1,
+    'lg': 0.15,
+    'xl': 0.25,
     '2xl': 0.4,
     '3xl': 0.5,
     '4xl': 1.25,
     '5xl': 1.5,
   },
   lineHeights: {
-    none: 1,
-    shorter: 1.25,
-    short: 1.375,
-    base: 1.5,
-    tall: 1.625,
-    taller: '2',
-    3: '12px',
-    4: '16px',
-    5: '20px',
-    6: '24px',
-    7: '28px',
-    8: '32px',
-    9: '36px',
-    10: '40px',
+    '2xs': 16,
+    'xs': 18,
+    'sm': 20,
+    'md': 22,
+    'lg': 24,
+    'xl': 28,
+    '2xl': 32,
+    '3xl': 40,
+    '4xl': 48,
+    '5xl': 64,
   },
   fontWeights: {
     hairline: 100,
@@ -67,19 +63,20 @@ const typography = {
     bold: 700,
     extrabold: 800,
     black: 900,
+    extrablack: 950,
   },
   fonts: {
-    heading: '',
-    body: '',
-    mono: '',
+    heading: undefined,
+    body: undefined,
+    mono: undefined,
   },
   fontSizes: {
-    xxs: 10,
-    xs: 12,
-    sm: 14,
-    md: 16,
-    lg: 18,
-    xl: 20,
+    '2xs': 10,
+    'xs': 12,
+    'sm': 14,
+    'md': 16,
+    'lg': 18,
+    'xl': 20,
     '2xl': 24,
     '3xl': 30,
     '4xl': 36,
@@ -100,6 +97,30 @@ The `size` key allows you to customize the global spacing and sizing scale for
 
 <SpaceBlocks/>
 
+## Opacity
+
+The `opacity` key is mainly used to allow you to define colors opacity using the red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color.
+
+```jsx
+const opacity = {
+  0: 0,
+  5: 0.05,
+  10: 0.1,
+  20: 0.2,
+  25: 0.25,
+  30: 0.3,
+  40: 0.4,
+  50: 0.5,
+  60: 0.6,
+  70: 0.7,
+  75: 0.75,
+  80: 0.8,
+  90: 0.9,
+  95: 0.95,
+  100: 1,
+};
+```
+
 ## Shadows
 
 The `shadow` key allows you to customize the global box shadow for your project.
@@ -209,4 +230,4 @@ export default {
 };
 ```
 
-Still confused? You can always explore [here](https://github.com/GeekyAnts/nativebase-v3/tree/development/src/theme/base).
+Still confused? You can always explore [here](https://github.com/GeekyAnts/NativeBase/tree/master/src/theme/base).