docs: usage example for Tab Items (react-native-elements#3576)

Co-authored-by: Arpit Bhalla <[email protected]>
haeniya · Jul 19, 2022 · 4dc1c0f · 4dc1c0f
1 parent 70db3d3
commit 4dc1c0f
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 23 deletions.
diff --git a/packages/base/src/Skeleton/Skeleton.tsx b/packages/base/src/Skeleton/Skeleton.tsx
@@ -48,15 +48,19 @@ export interface SkeletonProps extends ViewProps {
  * ### Variants
  * The component supports 2 shape variants, i.e. `circle`, `rectangle`.
  * ```tsx live
- * <Skeleton width={120} height={40} />
- * <Skeleton circle width={40} height={40} />
+ * <Stack row align="center" spacing={4}>
+ *    <Skeleton width={120} height={40} />
+ *    <Skeleton circle width={40} height={40} />
+ * </Stack>
  * ```
  * ### Animations
  * By default, the skeleton pulsates, but you can change the animation to a wave or disable it entirely.
  * ```tsx live
+ * <Stack row align="center" spacing={4}>
  * <Skeleton animation="pulse"width={80} height={40} />
  * <Skeleton LinearGradientComponent={LinearGradient} animation="wave"width={80} height={40} />
  * <Skeleton animation="none"width={80} height={40} />
+ * </Stack>
  * ```
  *
  */

diff --git a/packages/base/src/Tab/Tab.Item.tsx b/packages/base/src/Tab/Tab.Item.tsx
@@ -47,7 +47,19 @@ export interface TabItemProps
 /**
  * They are individual item of the parent Tab.
  * They are clickable and allows users to click and change Tab.
- * Receives all [Button](https://reactnativeelements.com/docs/button#props) props.
+ * @usage
+ *
+ * ### Active Tab Items
+ * ```tsx
+ *   <Tab.Item
+ *     containerStyle={(active) => ({
+ *       backgroundColor: active ? 'red' : undefined,
+ *     })}
+ *   >
+ *     Tab
+ *   </Tab.Item>
+ * ```
+ *
  *  */
 export const TabItem: RneFunctionComponent<TabItemProps> = ({
   active,

diff --git a/packages/base/src/Tab/Tab.tsx b/packages/base/src/Tab/Tab.tsx
@@ -42,13 +42,35 @@ export interface TabProps extends ViewProps {
  * This component is not for (complex) navigation. Use [React Navigation](https://reactnavigation.org) for that.
  * :::
  * @usage
+ * ### Basic Tabs
  *  ```tsx live
  * <Tab value={0} variant='primary'>
- * <Tab.Item>Tab 1</Tab.Item>
- * <Tab.Item>Tab 2</Tab.Item>
+ * <Tab.Item>Tab</Tab.Item>
+ * <Tab.Item>Tab</Tab.Item>
  * </Tab>
  * ```
  *
+ * ### Active Tab Items
+ * ```tsx live
+* <Tab value={0} variant="primary" scrollable>
+*   <Tab.Item
+*     containerStyle={(active) => ({
+*       backgroundColor: active ? 'red' : undefined,
+*     })}
+*   >
+*     Tab
+*   </Tab.Item>
+*   <Tab.Item
+*     buttonStyle={(active) => ({
+*       backgroundColor: active ? 'red' : undefined,
+*     })}
+*   >
+*     Tab
+*   </Tab.Item>
+* </Tab>
+* ```
+ *
+
  *  */
 export const TabBase: RneFunctionComponent<TabProps> = ({
   theme = defaultTheme,

diff --git a/website/docs/components/Skeleton.mdx b/website/docs/components/Skeleton.mdx
@@ -24,18 +24,27 @@ import { Skeleton } from "@rneui/themed";
 The component supports 2 shape variants, i.e. `circle`, `rectangle`.
 
 ```tsx live
-<Skeleton width={120} height={40} />
-<Skeleton circle width={40} height={40} />
+<Stack row align="center" spacing={4}>
+  <Skeleton width={120} height={40} />
+  <Skeleton circle width={40} height={40} />
+</Stack>
 ```
 
 ### Animations
 
 By default, the skeleton pulsates, but you can change the animation to a wave or disable it entirely.
 
 ```tsx live
-<Skeleton animation="pulse" width={80} height={40} />
-<Skeleton LinearGradientComponent={LinearGradient} animation="wave" width={80} height={40} />
-<Skeleton animation="none" width={80} height={40} />
+<Stack row align="center" spacing={4}>
+  <Skeleton animation="pulse" width={80} height={40} />
+  <Skeleton
+    LinearGradientComponent={LinearGradient}
+    animation="wave"
+    width={80}
+    height={40}
+  />
+  <Skeleton animation="none" width={80} height={40} />
+</Stack>
 ```
 
 ## Props

diff --git a/website/docs/components/Tab.Item.mdx b/website/docs/components/Tab.Item.mdx
@@ -11,14 +11,27 @@ import TabItem from "@theme/TabItem";
 
 They are individual item of the parent Tab.
 They are clickable and allows users to click and change Tab.
-Receives all [Button](https://reactnativeelements.com/docs/button#props) props.
 
 ## Import
 
 ```tsx
 import { Tab } from "@rneui/themed";
 ```
 
+## Usage
+
+### Active Tab Items
+
+```tsx
+<Tab.Item
+  containerStyle={(active) => ({
+    backgroundColor: active ? "red" : undefined,
+  })}
+>
+  Tab
+</Tab.Item>
+```
+
 ## Props
 
 :::note

diff --git a/website/docs/components/Tab.mdx b/website/docs/components/Tab.mdx
@@ -25,10 +25,33 @@ import { Tab } from "@rneui/themed";
 
 ## Usage
 
+### Basic Tabs
+
 ```tsx live
 <Tab value={0} variant="primary">
-  <Tab.Item>Tab 1</Tab.Item>
-  <Tab.Item>Tab 2</Tab.Item>
+  <Tab.Item>Tab</Tab.Item>
+  <Tab.Item>Tab</Tab.Item>
+</Tab>
+```
+
+### Active Tab Items
+
+```tsx live
+<Tab value={0} variant="primary" scrollable>
+  <Tab.Item
+    containerStyle={(active) => ({
+      backgroundColor: active ? "red" : undefined,
+    })}
+  >
+    Tab
+  </Tab.Item>
+  <Tab.Item
+    buttonStyle={(active) => ({
+      backgroundColor: active ? "red" : undefined,
+    })}
+  >
+    Tab
+  </Tab.Item>
 </Tab>
 ```
 

diff --git a/website/src/theme/Playground/index.js b/website/src/theme/Playground/index.js
@@ -70,7 +70,7 @@ function ThemedLiveEditor() {
 }
 
 function EditorWithHeader() {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(true);
 
   const handleToggle = () => {
     setOpen((isOpen) => !isOpen);
@@ -94,14 +94,14 @@ function EditorWithHeader() {
       {open && (
         <>
           {' '}
-          <Header>
+          {/* <Header>
             <Translate
               id="theme.Playground.liveEditor"
               description="The live editor label of the live codeblocks"
             >
               Live Editor
             </Translate>
-          </Header>
+          </Header> */}
           <ThemedLiveEditor />
         </>
       )}

diff --git a/website/versioned_docs/version-4.0.0-rc.5/components/Tab.Item.mdx b/website/versioned_docs/version-4.0.0-rc.5/components/Tab.Item.mdx
@@ -24,16 +24,16 @@ import { Tab } from "@rneui/themed";
 :::note
 Includes all [Button](button#props) props.
 :::
-
 <div class='table-responsive'>
 
-| Name                 | Type                                          | Default | Description                                      |
-| -------------------- | --------------------------------------------- | ------- | ------------------------------------------------ |
+| Name                 | Type                                          | Default | Description | Usage Example                                     |
+| -------------------- | --------------------------------------------- | ------- | ------------------------------------------------ | ------------ |
 | `active`             | boolean                                       |         | Allows to define if TabItem is active.           |
-| `buttonStyle`        | `ViewStyle or (active: boolean) => ViewStyle` |         | Additional button style                          |
-| `containerStyle`     | ViewStyle or (active: boolean) => ViewStyle   |         | Additional Styling for button container.         |
+| `buttonStyle`        | `ViewStyle or (active: boolean) => ViewStyle` |         | Additional button styles | `buttonStyle={(active) => ({backgroundColor: active ? "red": "blue",})}` 
+|
+| `containerStyle`     | ViewStyle or (active: boolean) => ViewStyle   |         | Additional Styling for button container.   | `containerStyle={(active) => ({backgroundColor: active ? "red": "blue",})}` |
 | `iconContainerStyle` | ViewStyle or (active: boolean) => ViewStyle   |         | Additional Styling for Icon Component container. |
-| `titleStyle`         | TextStyle or (active: boolean) => TextStyle   |         | Additional button title style                    |
-| `variant`            | `primary` \| `default`                        |         | Define the background Variant.                   |
+| `titleStyle`         | TextStyle or (active: boolean) => TextStyle   |         | Additional button title style                    | `titleStyle={(active) => ({backgroundColor: active ? "red": "blue",})}` |
+| `variant`            | `primary` \| `default`                        |         | Define the background Variant.                   | 
 
 </div>