Merge pull request #322 from GeekyAnts/staging

Update -> promote staging to production

Author: rayan1810

.prettierignore

@@ -0,0 +1,4 @@
+/docs/3.4.x/color-mode.md
+/docs/next/color-mode.md
+/docs/3.4.x/dark-mode.md
+/docs/next/dark-mode.md

docs.config.js

@@ -10,7 +10,7 @@ module.exports = {
     "3.1.x": "3.1.0",
     "3.2.x": "3.2.2",
     "3.3.x": "3.3.10",
-    "3.4.x": "3.4.0-rc.1",
+    "3.4.x": "3.4.11",
   },
   componentOfTheWeek: {
     switch: "https://www.youtube.com/embed/VGUhi8IQHDw",

docs/3.0.x/action-sheet.md

@@ -16,7 +16,7 @@ NativeBase exports 3 modal-related components:
 - **Actionsheet.Item**: A button to wrap the options of the Actionsheet.
 
 ```jsx
-import { Actionsheet } from 'native-base';
+import { Actionsheet } from "native-base";
 ```
 
 ## Examples
@@ -61,7 +61,7 @@ import { Actionsheet } from 'native-base';
 
 ### Actionsheet.Item
 
-ActionsheetItem implements [Button](button#props)
+ActionsheetItem implements [Button](button#h2-props)
 
 ## Styling
 

docs/3.0.x/alert-dialog.md

@@ -17,16 +17,16 @@ import { ComponentTheme } from '../../src/components';
 - `AlertDialog.CloseButton`: The button that closes the dialog.
 
 ```jsx
-import { AlertDialog } from 'native-base';
+import { AlertDialog } from "native-base";
 ```
 
 ## Examples
 
 ### Basic
 
 ```jsx isLive=true
-import React from 'react';
-import { AlertDialog, Button, Center, NativeBaseProvider } from 'native-base';
+import React from "react";
+import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base";
 
 function AlertDialogComponent() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -38,7 +38,7 @@ function AlertDialogComponent() {
         leastDestructiveRef={cancelRef}
         isOpen={isOpen}
         onClose={onClose}
-        motionPreset={'fade'}
+        motionPreset={"fade"}
       >
         <AlertDialog.Content>
           <AlertDialog.Header fontSize="lg" fontWeight="bold">
@@ -75,8 +75,8 @@ export function Example() {
 ### Transition
 
 ```jsx isLive=true
-import React from 'react';
-import { AlertDialog, Button, Center, NativeBaseProvider } from 'native-base';
+import React from "react";
+import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base";
 
 function AlertDialogComponent() {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -127,7 +127,7 @@ export function Example() {
 
 ## Props
 
-AlertDialog and its components compose the **[Modal](/modal)** component, so all the [`Modal props`](/modal#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`.
+AlertDialog and its components compose the **[Modal](/modal)** component, so all the [`Modal props`](/modal#h2-props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`.
 
 | Name                | Type      | Description                                                    | Default |
 | ------------------- | --------- | -------------------------------------------------------------- | ------- |

docs/3.0.x/kitchen-sink.mdx

@@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
 <Box>
   <Box m="0">
     <Box p="0" mb="12">
-      <Box>
+      <Box
+        _text={{ fontSize: "md" }}
+        _dark={{ _text: { color: "coolGray.400" } }}
+        _light={{ _text: { color: "coolGray.700" } }}
+      >
         Kitchen Sink is a comprehensive demo app showcasing all the NativeBase
         components in action. It includes buttons, forms, icons and much more!
       </Box>
@@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components";
         direction={{ base: "column", md: "row" }}
       >
         <Box w={{ base: "100%", md: "75%" }}>
-          <Text>
+          <Text
+            fontSize="md"
+            _dark={{ color: "coolGray.400" }}
+            _light={{ color: "coolGray.700" }}
+          >
             <Text>Scan with the </Text>
-            <Image alt="expo icon" mb="-1" size="5" source={{ uri: "/img/expo-icon.svg" }} />
+            <Image
+              alt="expo icon"
+              mb="-1"
+              size="5"
+              source={{ uri: "/img/expo-icon.svg" }}
+            />
             <Text>
               {" "}
               Expo app on your Android device to see the special dish we cooked for

docs/3.0.x/migration/action-sheet.md

@@ -10,7 +10,7 @@ We have sliced [`Actionsheet`](/action-sheet) into multiple smaller component wh
 Migrating Checkbox components can broadly described in these points:
 
 - **options** (prop) → `Actionsheet.Item` (component).
-- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
+- Props like **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need.
 - **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title.
 - Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`.
 
@@ -25,16 +25,16 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
   Container,
   Header,
   Button,
   Content,
   ActionSheet,
   Text,
-} from 'native-base';
-var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel'];
+} from "native-base";
+var BUTTONS = ["Option 1", "Option 2", "Option 3", "Delete", "Cancel"];
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 export default class ActionSheetExample extends Component {
@@ -53,7 +53,7 @@ export default class ActionSheetExample extends Component {
                   options: BUTTONS,
                   cancelButtonIndex: CANCEL_INDEX,
                   destructiveButtonIndex: DESTRUCTIVE_INDEX,
-                  title: 'Header',
+                  title: "Header",
                 },
                 (buttonIndex) => {
                   this.setState({ clicked: BUTTONS[buttonIndex] });
@@ -74,8 +74,8 @@ export default class ActionSheetExample extends Component {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Button, Actionsheet, useDisclose } from 'native-base';
+import React from "react";
+import { Button, Actionsheet, useDisclose } from "native-base";
 
 export default function () {
   const { isOpen, onOpen, onClose } = useDisclose();

docs/3.0.x/migration/button.md

@@ -16,7 +16,7 @@ Migrating Button components can broadly described in these points:
 - Colors of the Buttons:
   In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props.
 - Design of the Button:
-  With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
+  With v3 we're providing some most frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation.
 - Sizes of the Button:
   In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values.
 

docs/3.0.x/migration/fab.md

@@ -2,7 +2,7 @@ Migrating [`FAB`](/fab) to v3 will provide a lot more **design**, **size**, **co
 
 ## Overview
 
-Migrating Badge components can broadly described in these points:
+Migrating Fab components can broadly described in these points:
 
 - Instead of Passing Icon as child, use `icon` prop.
 
@@ -17,16 +17,16 @@ values={[
 <DocTabItem value="v2">
 
 ```tsx
-import React, { Component } from 'react';
-import { Container, Header, View, Icon, Fab } from 'native-base';
+import React, { Component } from "react";
+import { Container, Header, View, Icon, Fab } from "native-base";
 export default function () {
   return (
     <Container>
       <Header />
       <View style={{ flex: 1 }}>
         <Fab
           direction="up"
-          style={{ backgroundColor: '#5067FF' }}
+          style={{ backgroundColor: "#5067FF" }}
           position="bottomRight"
         >
           <Icon name="share" />
@@ -41,8 +41,8 @@ export default function () {
 <DocTabItem value="v3">
 
 ```tsx
-import React from 'react';
-import { Fab, Icon } from 'native-base';
+import React from "react";
+import { Fab, Icon } from "native-base";
 
 export default function () {
   return (

docs/3.0.x/select.md

@@ -12,7 +12,7 @@ Select creates a dropdown list of items with the selected item in closed view.
 ## Import
 
 ```jsx
-import { Select } from 'native-base';
+import { Select } from "native-base";
 ```
 
 ## Examples
@@ -50,19 +50,19 @@ import { Select } from 'native-base';
 | -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
 | variant                          | `native`, `styled`           | The variant of the select style to use.                                                                                              | `native`   |
 | placeholder                      | string                       | The placeholder attribute specifies a short hint that describes the expected value of a selected field (only for styled variant).    | -          |
-| \_placeholder                    | [`TextProps`](text.md#props) | Text props to be applied to placeholder (only for styled variant).                                                                   | -          |
+| \_placeholder                    | [`TextProps`](text.md#h2-props) | Text props to be applied to placeholder (only for styled variant).                                                                   | -          |
 | selectedValue                    | string                       | The default value which is selected.                                                                                                 | -          |
 | onValueChange                    | function                     | Callback for on change on the input value.                                                                                           | -          |
 | selectedItemBg                   | string                       | Background color for the selected item (only for styled variant).                                                                    | `blue.500` |
-| \_selectedItem                   | [`TextProps`](text.md#props) | Text prop for selected item (only for styled variant).                                                                               | -          |
+| \_selectedItem                   | [`TextProps`](text.md#h2-props) | Text prop for selected item (only for styled variant).                                                                               | -          |
 | isDisabled                       | boolean                      | If true, the button will be disabled (not supported on ios for native variant).                                                      | -          |
 | dropdownIcon                     | JSX.Element                  | If given, updates the dropdown Icon (only for styled variant).                                                                       | -          |
 | dropdownOpenIcon                 | JSX.Element                  | If given, updates the dropdown Icon when opened (only for styled variant).                                                           | -          |
 | dropdownCloseIcon                | JSX.Element                  | If given, updates the dropdown Icon when closed (only for styled variant).                                                           | -          |
 | \_ios                            | _StyleProps_                 | Props which you only want to pass to ios device.                                                                                     | -          |
 | \_android                        | _StyleProps_                 | Props which you only want to pass to android device.                                                                                 | -          |
 | \_web                            | _StyleProps_                 | Props which you only want to pass to web device.                                                                                     | -          |
-| \_item                           | [`TextProps`](text.md#props) | TextProps to be applied to the label (only for styled variant).                                                                      | -          |
+| \_item                           | [`TextProps`](text.md#h2-props) | TextProps to be applied to the label (only for styled variant).                                                                      | -          |
 | androidMode <AndroidBadge/>      | `dialog`, `dropdown`         | On Android, specifies how to display the selection items when the user taps on the picker (only for native variant).                 | `dialog`   |
 | androidIconColor <AndroidBadge/> | string                       | On Android, specifies color of dropdown triangle. Input value can any color from theme like `default.300` (only for native variant). | -          |
 | androidPrompt <AndroidBadge/>    | string                       | On Android, prompt string for this picker, used on Android in dialog mode as the title of the dialog (only for native variant).      | -          |
@@ -76,7 +76,7 @@ import { Select } from 'native-base';
 | label      | string                       | The label which will be displayed.                                                             | -       |
 | value      | string                       | The value to be used for the item. This is the value that will be returned on form submission. | -       |
 | isDisabled | boolean                      | If true, the item will be disabled (only for `styled` variant).                                | -       |
-| \_label    | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant).                                  | -       | -->
+| \_label    | [`TextProps`](text.md#h2-props) | TextProps to be applied to label (only for `styled` variant).                                  | -       | -->
 
 ## Styling
 

docs/3.0.x/tooltip.md

@@ -10,7 +10,7 @@ A tooltip is a brief, informative message that appears when a user interacts wit
 ## Import
 
 ```jsx
-import { Tooltip } from 'native-base';
+import { Tooltip } from "native-base";
 ```
 
 ## Examples
@@ -29,7 +29,7 @@ import { Tooltip } from 'native-base';
 
 ### Customizing tooltip
 
-Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props.
+Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#h2-props) props.
 
 ```ComponentSnackPlayer path=composites,Tooltip,CustomTooltip.tsx