Merge pull request #137 from GeekyAnts/new-version/3.2.2

New version added

Author: surajahmed

package.json

@@ -35,7 +35,7 @@
     "clsx": "^1.1.1",
     "dedent": "^0.7.0",
     "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
-    "native-base": "3.2.1",
+    "native-base": "3.2.2",
     "object.fromentries": "^2.0.3",
     "patch-package": "^6.4.7",
     "postcss": "^7.0.34",

versioned_docs/version-3.2.2/FAB.md

@@ -0,0 +1,44 @@
+---
+id: FAB
+title: FAB
+---
+
+import { ComponentTheme } from '../../src/components';
+
+A floating action button is a circular icon button that hovers over content to promote a primary action in the application.
+
+## Import
+
+```jsx
+import { Fab } from 'native-base';
+```
+
+## Example
+
+### Basic
+
+```ComponentSnackPlayer path=components,composites,Fab,Basic.tsx
+
+```
+
+### Placement
+
+```ComponentSnackPlayer path=components,composites,Fab,Placement.tsx
+
+```
+
+### Custom Position
+
+```ComponentSnackPlayer path=components,composites,Fab,CustomPosition.tsx
+
+```
+
+## Styling
+
+<ComponentTheme name="fab" componentName="FAB" />
+
+## Props
+
+```ComponentPropTable path=composites,Fab,Fab.tsx
+
+```

versioned_docs/version-3.2.2/VStack.md

@@ -0,0 +1,24 @@
+---
+id: v-stack
+title: VStack / Column
+---
+
+`VStack` aligns items vertically.`Column` is also an alias for `VStack`.
+
+## Import
+
+```jsx
+import { VStack } from 'native-base';
+```
+
+## Usage
+
+```ComponentSnackPlayer path=components,primitives,VStack,basic.tsx
+
+```
+
+## Props
+
+```ComponentPropTable path=primitives,Stack,VStack.tsx
+
+```

versioned_docs/version-3.2.2/ZStack.md

@@ -0,0 +1,28 @@
+---
+id: z-stack
+title: ZStack
+---
+
+`ZStack` aligns items absolutely in the z-axis.
+
+## Examples
+
+### Basic
+
+```ComponentSnackPlayer path=components,primitives,ZStack,example.tsx
+
+```
+
+### Items Centered
+
+You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children.
+
+```ComponentSnackPlayer path=components,primitives,ZStack,CenterStack.tsx
+
+```
+
+## Props
+
+```ComponentPropTable path=primitives,ZStack,index.tsx
+
+```

versioned_docs/version-3.2.2/accessibility.md

@@ -0,0 +1,24 @@
+---
+id: accessibility
+title: Accessibility
+---
+
+NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation.
+
+## Accessible Roles
+
+NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform.
+
+## 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://react-native-aria.geekyants.com/) does this for you out of the box.
+
+## Keyboard Navigation
+
+Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/).
+
+## Focus Management
+
+Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling.
+
+In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt.

versioned_docs/version-3.2.2/actionSheet.md

@@ -0,0 +1,78 @@
+---
+id: action-sheet
+title: ActionSheet
+---
+
+import { ComponentTheme } from '../../src/components';
+
+An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content.
+
+## Import
+
+NativeBase exports 3 modal-related components:
+
+- **Actionsheet**: Provides the context and state for all components.
+- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components.
+- **Actionsheet.Item**: A button to wrap the options of the Actionsheet.
+
+```jsx
+import { Actionsheet } from 'native-base';
+```
+
+## Examples
+
+### Usage
+
+```ComponentSnackPlayer path=components,composites,Actionsheet,Usage.tsx
+
+```
+
+### Composition
+
+```ComponentSnackPlayer path=components,composites,Actionsheet,Composition.tsx
+
+```
+
+### DisableOverlay
+
+```ComponentSnackPlayer path=components,composites,Actionsheet,DisableOverlay.tsx
+
+```
+
+### Icons
+
+```ComponentSnackPlayer path=components,composites,Actionsheet,Icon.tsx
+
+```
+
+## Props
+
+### Actionsheet
+
+```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx
+
+```
+
+### Actionsheet.Content
+
+```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx
+
+```
+
+### Actionsheet.Item
+
+ActionsheetItem implements [Button](button.md#props)
+
+## Styling
+
+<ComponentTheme name="actionsheet" />
+
+## Accessibility
+
+- ActionSheet has `aria-modal` set to true.
+- ActionSheet has `role` set to `dialog`.
+- When the ActionSheet opens, focus is trapped within it.
+- Pressing Esc closes the ActionSheet.
+- When the ActionSheet opens, focus is automatically set to the first enabled element.
+- Clicking on the overlay closes the ActionSheet.
+- Scrolling is blocked on the elements behind the ActionSheet.

versioned_docs/version-3.2.2/alert.md

@@ -0,0 +1,87 @@
+---
+id: alert
+title: Alert
+---
+
+import { ComponentTheme } from '../../src/components';
+
+`Alerts` are used to communicate a state that affects a system, feature or page.
+
+## Import
+
+NativeBase exports 5 Alert related components:
+
+- `Alert`: The wrapper for alert components.
+- `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop.
+  <!-- - `Alert.Title`: The title of the alert to be announced by screen readers. -->
+  <!-- - `Alert.Description`: The description of the alert to be announced by screen readers. -->
+
+```jsx
+import { Alert } from 'native-base';
+```
+
+## Examples
+
+### Basic
+
+```ComponentSnackPlayer path=components,composites,Alert,usage.tsx
+
+```
+
+### Status
+
+```ComponentSnackPlayer path=components,composites,Alert,status.tsx
+
+```
+
+### Variant
+
+```ComponentSnackPlayer path=components,composites,Alert,variant.tsx
+
+```
+
+### Composition
+
+```ComponentSnackPlayer path=components,composites,Alert,composition.tsx
+
+```
+
+### Action
+
+```ComponentSnackPlayer path=components,composites,Alert,action.tsx
+
+```
+
+## Props
+
+### Alert
+
+```ComponentPropTable path=composites,Alert,Alert.tsx
+
+```
+
+### Alert.Icon
+
+```ComponentPropTable path=composites,Alert,AlertIcon.tsx
+
+```
+
+### Alert.Title
+
+```ComponentPropTable path=composites,Alert,AlertTitle.tsx
+
+```
+
+### Alert.Description
+
+```ComponentPropTable path=composites,Alert,AlertDescription.tsx
+
+```
+
+## Styling
+
+<ComponentTheme name="alert" />
+
+## Accessibility
+
+Alert has `role` set to `alert`.

versioned_docs/version-3.2.2/alertDialog.md

@@ -0,0 +1,55 @@
+---
+id: alert-dialog
+title: AlertDialog
+---
+
+import { ComponentTheme } from '../../src/components';
+
+`AlertDialog` component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes [`Modal`](modal.md) so you can use all its props.
+
+## Import
+
+- `AlertDialog`: provides context and state for the dialog.
+- `AlertDialog.Header`: contains the title announced by screen readers.
+- `AlertDialog.Body`: contains the description announced by screen readers.
+- `AlertDialog.Footer`: contains the actions of the dialog.
+- `AlertDialog.Content`: The wrapper for the alert dialog's content.
+- `AlertDialog.CloseButton`: The button that closes the dialog.
+
+```jsx
+import { AlertDialog } from 'native-base';
+```
+
+## Examples
+
+### Basic
+
+```ComponentSnackPlayer path=components,composites,AlertDialog,Basic.tsx
+
+```
+
+## Styling
+
+<ComponentTheme name="alertDialog" />
+
+## Props
+
+AlertDialog and its components compose the **[Modal](modal.md)** component, so all the [`Modal props`](modal.md#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 |
+| ------------------- | --------- | -------------------------------------------------------------- | ------- |
+| leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | -       |
+
+## Accessibility
+
+Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog)
+
+### Keyboard Interactions
+
+| Name        | Description                                               |
+| ----------- | --------------------------------------------------------- |
+| Space       | Opens/closes the dialog.                                  |
+| Enter       | Opens/closes the dialog.                                  |
+| Tab         | Moves focus to the next focusable element.                |
+| Shift + Tab | Moves focus to the previous focusable element.            |
+| Esc         | Closes the dialog and moves focus to AlertDialog.Trigger. |