From 60615dcf7054f8714150fbd451bc2d3a7105702e Mon Sep 17 00:00:00 2001 From: amars29 Date: Wed, 17 Aug 2022 18:44:38 +0530 Subject: [PATCH 01/12] text styles update in KitchenSink page --- docs/3.0.x/kitchen-sink.mdx | 19 ++++++++++++++++--- docs/3.1.x/kitchen-sink.mdx | 19 ++++++++++++++++--- docs/3.2.x/kitchen-sink.mdx | 19 ++++++++++++++++--- docs/3.3.x/kitchen-sink.mdx | 19 ++++++++++++++++--- docs/3.4.x/kitchen-sink.mdx | 19 ++++++++++++++++--- docs/next/kitchen-sink.mdx | 19 ++++++++++++++++--- 6 files changed, 96 insertions(+), 18 deletions(-) diff --git a/docs/3.0.x/kitchen-sink.mdx b/docs/3.0.x/kitchen-sink.mdx index 1396d3917..ecca7b82c 100644 --- a/docs/3.0.x/kitchen-sink.mdx +++ b/docs/3.0.x/kitchen-sink.mdx @@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.1.x/kitchen-sink.mdx b/docs/3.1.x/kitchen-sink.mdx index 1396d3917..ecca7b82c 100644 --- a/docs/3.1.x/kitchen-sink.mdx +++ b/docs/3.1.x/kitchen-sink.mdx @@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.2.x/kitchen-sink.mdx b/docs/3.2.x/kitchen-sink.mdx index 1396d3917..ecca7b82c 100644 --- a/docs/3.2.x/kitchen-sink.mdx +++ b/docs/3.2.x/kitchen-sink.mdx @@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.3.x/kitchen-sink.mdx b/docs/3.3.x/kitchen-sink.mdx index 1396d3917..ecca7b82c 100644 --- a/docs/3.3.x/kitchen-sink.mdx +++ b/docs/3.3.x/kitchen-sink.mdx @@ -8,7 +8,11 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -20,9 +24,18 @@ import { KitchenSinkIframe, TileLink, NBHistory } from "../../src/components"; direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/3.4.x/kitchen-sink.mdx b/docs/3.4.x/kitchen-sink.mdx index 39c084203..b7650d782 100644 --- a/docs/3.4.x/kitchen-sink.mdx +++ b/docs/3.4.x/kitchen-sink.mdx @@ -6,7 +6,11 @@ title: Kitchen Sink - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -18,9 +22,18 @@ title: Kitchen Sink direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for diff --git a/docs/next/kitchen-sink.mdx b/docs/next/kitchen-sink.mdx index 39c084203..b7650d782 100644 --- a/docs/next/kitchen-sink.mdx +++ b/docs/next/kitchen-sink.mdx @@ -6,7 +6,11 @@ title: Kitchen Sink - + Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons and much more! @@ -18,9 +22,18 @@ title: Kitchen Sink direction={{ base: "column", md: "row" }} > - + Scan with the - expo icon + expo icon {" "} Expo app on your Android device to see the special dish we cooked for From 6a43b667e87ab6d552ef826c34e8f30f17c1c971 Mon Sep 17 00:00:00 2001 From: amars29 Date: Wed, 17 Aug 2022 19:52:24 +0530 Subject: [PATCH 02/12] fix: actionsheet migration: removed repeated word --- docs/3.0.x/migration/action-sheet.md | 14 +++++++------- docs/3.1.x/migration/action-sheet.md | 14 +++++++------- docs/3.2.x/migration/action-sheet.md | 14 +++++++------- docs/3.3.x/migration/action-sheet.md | 14 +++++++------- docs/3.4.x/migration/action-sheet.md | 14 +++++++------- docs/next/migration/action-sheet.md | 14 +++++++------- 6 files changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/3.0.x/migration/action-sheet.md b/docs/3.0.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.0.x/migration/action-sheet.md +++ b/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,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { 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 { ```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(); diff --git a/docs/3.1.x/migration/action-sheet.md b/docs/3.1.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.1.x/migration/action-sheet.md +++ b/docs/3.1.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,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { 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 { ```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(); diff --git a/docs/3.2.x/migration/action-sheet.md b/docs/3.2.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.2.x/migration/action-sheet.md +++ b/docs/3.2.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,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { 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 { ```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(); diff --git a/docs/3.3.x/migration/action-sheet.md b/docs/3.3.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.3.x/migration/action-sheet.md +++ b/docs/3.3.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,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { 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 { ```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(); diff --git a/docs/3.4.x/migration/action-sheet.md b/docs/3.4.x/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/3.4.x/migration/action-sheet.md +++ b/docs/3.4.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,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { 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 { ```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(); diff --git a/docs/next/migration/action-sheet.md b/docs/next/migration/action-sheet.md index 86d49e720..d20c28299 100644 --- a/docs/next/migration/action-sheet.md +++ b/docs/next/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,7 +25,7 @@ values={[ ```tsx -import React, { Component } from 'react'; +import React, { Component } from "react"; import { Container, Header, @@ -33,8 +33,8 @@ import { 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 { ```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(); From 753cb1d7311106f194440db66132b194f07d730e Mon Sep 17 00:00:00 2001 From: amars29 Date: Thu, 18 Aug 2022 10:30:41 +0530 Subject: [PATCH 03/12] update: content changes in migration button --- docs/3.0.x/migration/button.md | 2 +- docs/3.1.x/migration/button.md | 2 +- docs/3.2.x/migration/button.md | 2 +- docs/3.3.x/migration/button.md | 2 +- docs/3.4.x/migration/button.md | 2 +- docs/next/migration/button.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/3.0.x/migration/button.md b/docs/3.0.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.0.x/migration/button.md +++ b/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. diff --git a/docs/3.1.x/migration/button.md b/docs/3.1.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.1.x/migration/button.md +++ b/docs/3.1.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. diff --git a/docs/3.2.x/migration/button.md b/docs/3.2.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.2.x/migration/button.md +++ b/docs/3.2.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. diff --git a/docs/3.3.x/migration/button.md b/docs/3.3.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.3.x/migration/button.md +++ b/docs/3.3.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. diff --git a/docs/3.4.x/migration/button.md b/docs/3.4.x/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/3.4.x/migration/button.md +++ b/docs/3.4.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. diff --git a/docs/next/migration/button.md b/docs/next/migration/button.md index 7214bbc66..e09244c3c 100644 --- a/docs/next/migration/button.md +++ b/docs/next/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. From 3a41064b04c508d791ba9a580b2662a120ad6b80 Mon Sep 17 00:00:00 2001 From: amars29 Date: Thu, 18 Aug 2022 10:46:48 +0530 Subject: [PATCH 04/12] content update in migation fab --- docs/3.0.x/migration/fab.md | 12 ++++++------ docs/3.1.x/migration/fab.md | 12 ++++++------ docs/3.2.x/migration/fab.md | 12 ++++++------ docs/3.3.x/migration/fab.md | 12 ++++++------ docs/3.4.x/migration/fab.md | 12 ++++++------ docs/next/migration/fab.md | 12 ++++++------ 6 files changed, 36 insertions(+), 36 deletions(-) diff --git a/docs/3.0.x/migration/fab.md b/docs/3.0.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.0.x/migration/fab.md +++ b/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,8 +17,8 @@ values={[ ```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 ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```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 ( diff --git a/docs/3.1.x/migration/fab.md b/docs/3.1.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.1.x/migration/fab.md +++ b/docs/3.1.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,8 +17,8 @@ values={[ ```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 ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```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 ( diff --git a/docs/3.2.x/migration/fab.md b/docs/3.2.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.2.x/migration/fab.md +++ b/docs/3.2.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,8 +17,8 @@ values={[ ```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 ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```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 ( diff --git a/docs/3.3.x/migration/fab.md b/docs/3.3.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.3.x/migration/fab.md +++ b/docs/3.3.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,8 +17,8 @@ values={[ ```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 ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```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 ( diff --git a/docs/3.4.x/migration/fab.md b/docs/3.4.x/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/3.4.x/migration/fab.md +++ b/docs/3.4.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,8 +17,8 @@ values={[ ```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 ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```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 ( diff --git a/docs/next/migration/fab.md b/docs/next/migration/fab.md index 183cc1b57..3d4f698f6 100644 --- a/docs/next/migration/fab.md +++ b/docs/next/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,8 +17,8 @@ values={[ ```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 ( @@ -26,7 +26,7 @@ export default function () { @@ -41,8 +41,8 @@ export default function () { ```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 ( From aecd94c681052a96f26be1caccbf4f13acacd936 Mon Sep 17 00:00:00 2001 From: amars29 Date: Thu, 18 Aug 2022 12:00:30 +0530 Subject: [PATCH 05/12] updated colors for DocTabs label in light mode --- src/components/Tabs/Tabs.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 34e1fa907..51ae424ed 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Box, Pressable, Text } from "native-base"; +import { Box, Pressable, Text, useColorModeValue } from "native-base"; import { DocTabContext } from "./TabContext"; export const DocTabs = ({ children, values, defaultValue }: any) => { @@ -10,6 +10,7 @@ export const DocTabs = ({ children, values, defaultValue }: any) => { React.useEffect(() => { setSelected(defaultValue); }, []); + const textColor = useColorModeValue("black", "white"); return ( // @ts-ignore @@ -18,7 +19,10 @@ export const DocTabs = ({ children, values, defaultValue }: any) => { return ( onPressHandler(index)} justifyContent={"center"} alignItems="center" @@ -35,7 +39,7 @@ export const DocTabs = ({ children, values, defaultValue }: any) => { From 324683ee4eddfb0e4f6722fa30ba1eb81bc3db53 Mon Sep 17 00:00:00 2001 From: amars29 Date: Thu, 18 Aug 2022 14:04:41 +0530 Subject: [PATCH 06/12] fix: searchbar example --- docs/3.2.x/building-search-bar.md | 15 +++++++-------- docs/3.3.x/building-search-bar.md | 9 ++++----- docs/3.4.x/building-app-bar.md | 10 +++++----- docs/3.4.x/building-search-bar.md | 9 ++++----- docs/next/building-search-bar.md | 9 ++++----- 5 files changed, 24 insertions(+), 28 deletions(-) diff --git a/docs/3.2.x/building-search-bar.md b/docs/3.2.x/building-search-bar.md index b01c8f850..bbcaf7672 100644 --- a/docs/3.2.x/building-search-bar.md +++ b/docs/3.2.x/building-search-bar.md @@ -13,7 +13,7 @@ Here are some examples to show how easily and quickly we can create so many type ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) --> ```jsx isLive -import React from 'react'; +import React from "react"; import { VStack, Input, @@ -26,9 +26,9 @@ import { Box, Divider, Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +} from "native-base"; +import { Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; function SearchBar() { return ( @@ -52,10 +52,9 @@ function SearchBar() { py="1" px="2" placeholderTextColor="gray.500" - _hover={{ bg: 'gray.200', borderWidth: 0 }} - borderWidth="0" + _hover={{ bg: "gray.200", borderWidth: 0 }} _web={{ - _focus: { style: { boxShadow: 'none' } }, + _focus: { style: { boxShadow: "none" } }, }} InputLeftElement={ ```jsx isLive=true -import React from 'react'; +import React from "react"; import { VStack, Input, @@ -26,9 +26,9 @@ import { Box, Divider, Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +} from "native-base"; +import { Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; function SearchBar() { return ( @@ -52,7 +52,6 @@ function SearchBar() { borderRadius="10" py="1" px="2" - borderWidth="0" InputLeftElement={ - + ```jsx isLive=true -import React from 'react'; +import React from "react"; import { VStack, Input, @@ -26,9 +26,9 @@ import { Box, Divider, Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +} from "native-base"; +import { Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; function SearchBar() { return ( @@ -52,7 +52,6 @@ function SearchBar() { borderRadius="10" py="1" px="2" - borderWidth="0" InputLeftElement={ ```jsx isLive=true -import React from 'react'; +import React from "react"; import { VStack, Input, @@ -26,9 +26,9 @@ import { Box, Divider, Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; +} from "native-base"; +import { Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { FontAwesome5 } from "@expo/vector-icons"; function SearchBar() { return ( @@ -52,7 +52,6 @@ function SearchBar() { borderRadius="10" py="1" px="2" - borderWidth="0" InputLeftElement={ Date: Fri, 19 Aug 2022 20:27:02 +0530 Subject: [PATCH 07/12] fix: doc content and bugs --- .prettierignore | 4 + docs.config.js | 2 +- docs/3.2.x/sidebar.json | 2 +- docs/3.2.x/typescript.mdx | 8 +- docs/3.3.x/aspect-ratio.md | 12 +-- docs/3.3.x/sidebar.json | 4 +- docs/3.3.x/typescript.md | 8 +- docs/3.4.x/action-sheet.md | 14 ++-- docs/3.4.x/alert.md | 24 ++---- docs/3.4.x/aspect-ratio.md | 12 +-- docs/3.4.x/avatar.md | 18 ++-- docs/3.4.x/breakpoints.md | 2 +- docs/3.4.x/color-mode.md | 29 ++++--- docs/3.4.x/contribution.md | 4 +- docs/3.4.x/customizing-fonts.md | 32 +++---- docs/3.4.x/dark-mode.md | 13 +-- docs/3.4.x/default-theme.md | 84 +++++++++---------- docs/3.4.x/flex.md | 59 +++++++------ docs/3.4.x/form-control.md | 17 ++-- docs/3.4.x/input.md | 20 +++-- docs/3.4.x/modal.md | 10 +-- docs/3.4.x/nativebase-factory.md | 4 +- docs/3.4.x/safe-area-view-props.md | 14 ++-- docs/3.4.x/select.md | 22 +++-- docs/3.4.x/setup-provider.md | 40 ++++----- docs/3.4.x/sidebar.json | 4 +- docs/3.4.x/slider.md | 8 +- docs/3.4.x/textarea.md | 18 ++-- docs/3.4.x/theme.md | 52 +++++++----- docs/3.4.x/typescript.mdx | 6 +- docs/3.4.x/utility-props-specificity.md | 3 + docs/next/action-sheet.md | 14 ++-- docs/next/alert.md | 24 ++---- docs/next/aspect-ratio.md | 12 +-- docs/next/breakpoints.md | 2 +- docs/next/color-mode.md | 29 ++++--- docs/next/contribution.md | 4 +- docs/next/customizing-fonts.md | 32 +++---- docs/next/dark-mode.md | 13 +-- docs/next/default-theme.md | 84 +++++++++---------- docs/next/flex.md | 59 +++++++------ docs/next/form-control.md | 17 ++-- docs/next/input.md | 20 +++-- docs/next/modal.md | 10 +-- docs/next/nativebase-factory.md | 4 +- docs/next/safe-area-view-props.md | 14 ++-- docs/next/select.md | 22 +++-- docs/next/setup-provider.md | 40 ++++----- docs/next/sidebar.json | 4 +- docs/next/slider.md | 8 +- docs/next/textarea.md | 18 ++-- docs/next/theme.md | 52 +++++++----- docs/next/typescript.mdx | 4 +- docs/next/utility-props-specificity.md | 4 +- src/components/GettingStartedHero.tsx | 12 +-- .../CodeBlock/CodeBlock.tsx | 5 +- 56 files changed, 550 insertions(+), 506 deletions(-) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..af14e1e92 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/docs.config.js b/docs.config.js index 812fd3c57..1f9fc7d4a 100644 --- a/docs.config.js +++ b/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", diff --git a/docs/3.2.x/sidebar.json b/docs/3.2.x/sidebar.json index 5deeed9fa..22aca046d 100644 --- a/docs/3.2.x/sidebar.json +++ b/docs/3.2.x/sidebar.json @@ -153,7 +153,7 @@ }, { "id": "typescript", - "title": "Typescript" + "title": "TypeScript" } ] }, diff --git a/docs/3.2.x/typescript.mdx b/docs/3.2.x/typescript.mdx index 7c6daa71a..e35674269 100644 --- a/docs/3.2.x/typescript.mdx +++ b/docs/3.2.x/typescript.mdx @@ -1,11 +1,11 @@ --- id: typescript -title: Typescript +title: TypeScript --- -To enable typescript for custom theme tokens or variants, we'll follow two simple steps. +To enable TypeScript for custom theme tokens or variants, we'll follow two simple steps. -Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button. +Below, in the [extendTheme](customizing-theme) function, we're adding a space token and a custom variant for the Button. ```jsx import { extendTheme } from 'native-base'; @@ -39,7 +39,7 @@ declare module 'native-base' { Typescript intellisense with custom theme tokens diff --git a/docs/3.3.x/aspect-ratio.md b/docs/3.3.x/aspect-ratio.md index 99f98cb06..4a49d0617 100644 --- a/docs/3.3.x/aspect-ratio.md +++ b/docs/3.3.x/aspect-ratio.md @@ -3,24 +3,16 @@ id: aspectRatio title: AspectRatio --- -Aspect ratio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. +AspectRatio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. ## Import ```jsx -import { AspectRatio } from 'native-base'; +import { AspectRatio } from "native-base"; ``` ## Example -### Basic - -```ComponentSnackPlayer path=components,composites,AspectRatio,Basic.tsx - -``` - -### Embed Image - ```ComponentSnackPlayer path=components,composites,AspectRatio,EmbedImage.tsx ``` diff --git a/docs/3.3.x/sidebar.json b/docs/3.3.x/sidebar.json index 3ac276d98..eaa2da363 100644 --- a/docs/3.3.x/sidebar.json +++ b/docs/3.3.x/sidebar.json @@ -150,7 +150,7 @@ }, { "id": "typescript", - "title": "Typescript", + "title": "TypeScript", "showToc": false } ] @@ -544,7 +544,7 @@ }, { "id": "aspect-ratio", - "title": "Aspect Ratio" + "title": "AspectRatio" } ] } diff --git a/docs/3.3.x/typescript.md b/docs/3.3.x/typescript.md index 09bac84c3..8cdb3413d 100644 --- a/docs/3.3.x/typescript.md +++ b/docs/3.3.x/typescript.md @@ -1,14 +1,14 @@ --- id: typescript -title: Typescript +title: TypeScript --- import Image from "next/Image"; import { AspectRatio } from "native-base"; -To enable typescript for custom theme tokens or variants, we'll follow two simple steps. +To enable TypeScript for custom theme tokens or variants, we'll follow two simple steps. -Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button. +Below, in the [extendTheme](customizing-theme) function, we're adding a space token and a custom variant for the Button. ```jsx import { extendTheme } from 'native-base'; @@ -43,7 +43,7 @@ declare module 'native-base' { Typescript intellisense with custom theme tokens diff --git a/docs/3.4.x/action-sheet.md b/docs/3.4.x/action-sheet.md index c8a02255b..7ecfe48b1 100644 --- a/docs/3.4.x/action-sheet.md +++ b/docs/3.4.x/action-sheet.md @@ -5,10 +5,10 @@ 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. +An Actionsheet is a dialog that displays a set of options. It appears on top of the app's content. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Button, Actionsheet, @@ -17,7 +17,7 @@ import { Box, Center, NativeBaseProvider, -} from 'native-base'; +} from "native-base"; export function Example() { const { isOpen, onOpen, onClose } = useDisclose(); return ( @@ -32,7 +32,7 @@ export function Example() { fontSize="16" color="gray.500" _dark={{ - color: 'gray.300', + color: "gray.300", }} > Albums @@ -52,14 +52,12 @@ export function Example() { ## 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'; +import { Actionsheet } from "native-base"; ``` ## Examples @@ -104,7 +102,7 @@ import { Actionsheet } from 'native-base'; ### Actionsheet.Item -ActionsheetItem implements [Button](button#props) +Actionsheet.Item implements [Button](button#props) ## Styling diff --git a/docs/3.4.x/alert.md b/docs/3.4.x/alert.md index e8a92c77f..507b82573 100644 --- a/docs/3.4.x/alert.md +++ b/docs/3.4.x/alert.md @@ -8,7 +8,7 @@ import { ComponentTheme } from '../src/components'; `Alerts` convey a state that can influence a system, feature, or page. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Alert, VStack, @@ -17,7 +17,7 @@ import { CloseIcon, Box, Heading, -} from 'native-base'; +} from "native-base"; export const Example = () => { return ( @@ -40,7 +40,7 @@ export const Example = () => { icon={} /> - + We are happy to announce that we are going live on July 28th. Get ready! @@ -52,15 +52,13 @@ export const Example = () => { ## Import -NativeBase exports 5 Alert related components: +NativeBase exports 2 Alert related components: - `Alert`: The wrapper for alert components. - `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. - - ```jsx -import { Alert } from 'native-base'; +import { Alert } from "native-base"; ``` ## Examples @@ -109,18 +107,6 @@ import { Alert } from 'native-base'; ``` -### Alert.Title - -```ComponentPropTable path=composites,Alert,AlertTitle.tsx - -``` - -### Alert.Description - -```ComponentPropTable path=composites,Alert,AlertDescription.tsx - -``` - ## Styling diff --git a/docs/3.4.x/aspect-ratio.md b/docs/3.4.x/aspect-ratio.md index 99f98cb06..4a49d0617 100644 --- a/docs/3.4.x/aspect-ratio.md +++ b/docs/3.4.x/aspect-ratio.md @@ -3,24 +3,16 @@ id: aspectRatio title: AspectRatio --- -Aspect ratio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. +AspectRatio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. ## Import ```jsx -import { AspectRatio } from 'native-base'; +import { AspectRatio } from "native-base"; ``` ## Example -### Basic - -```ComponentSnackPlayer path=components,composites,AspectRatio,Basic.tsx - -``` - -### Embed Image - ```ComponentSnackPlayer path=components,composites,AspectRatio,EmbedImage.tsx ``` diff --git a/docs/3.4.x/avatar.md b/docs/3.4.x/avatar.md index 739890371..97765f725 100644 --- a/docs/3.4.x/avatar.md +++ b/docs/3.4.x/avatar.md @@ -5,18 +5,18 @@ title: Avatar import { ComponentTheme } from '../src/components'; -The `Avatar` component can display profile pictures, initials, or a fallback icon to represent a user. +The `Avatar` component can display profile pictures, initials, or a fallback image to represent a user. ```jsx isShowcase -import React from 'react'; -import { Avatar, HStack, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { Avatar, HStack, Center, NativeBaseProvider } from "native-base"; export const Example = () => { return ( AJ @@ -24,7 +24,7 @@ export const Example = () => { TE @@ -32,7 +32,7 @@ export const Example = () => { JB @@ -40,7 +40,7 @@ export const Example = () => { TS @@ -52,14 +52,12 @@ export const Example = () => { ## Import -NativeBase exports 3 avatar-related components: - - `Avatar`: An image that represents the user. - `Avatar.Badge`: A wrapper that displays its content on the bottom right corner of the avatar. - `Avatar.Group`: A wrapper to stack multiple avatars together. ```jsx -import { Avatar } from 'native-base'; +import { Avatar } from "native-base"; ``` ## Examples diff --git a/docs/3.4.x/breakpoints.md b/docs/3.4.x/breakpoints.md index d30fb4cf1..0d430e1b8 100644 --- a/docs/3.4.x/breakpoints.md +++ b/docs/3.4.x/breakpoints.md @@ -5,7 +5,7 @@ title: Breakpoints Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. -NativeBase provides these default breakpoints and you can update with using extendTheme. +NativeBase provides these default breakpoints and you can update them by using extendTheme. ```tsx breakpoints = { diff --git a/docs/3.4.x/color-mode.md b/docs/3.4.x/color-mode.md index 3bf49f4c8..d99f55e8f 100644 --- a/docs/3.4.x/color-mode.md +++ b/docs/3.4.x/color-mode.md @@ -42,18 +42,25 @@ import { function PseudoPropsUsage() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
- - The active color mode is{' '} - - {colorMode} +
+ + + The active color mode is{' '} + + {colorMode} + - - + +
); } diff --git a/docs/3.4.x/contribution.md b/docs/3.4.x/contribution.md index d90c2a68a..7338e79fa 100644 --- a/docs/3.4.x/contribution.md +++ b/docs/3.4.x/contribution.md @@ -15,9 +15,9 @@ All work on NativeBase happens directly on [GitHub](https://github.com/GeekyAnt ### Branch Organization -According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branch for all the external PR's which is like a development branch with latest changes. If you send a pull request, please do it against the this `canary` branch. Once a release candidate is ready, `canary` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package. +According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branches which are like development branches with the latest changes. If you send a pull request, please do it against the `master` branch. Once you create your PR we will update the base branch to a more specific canary branch if required. Once a release candidate is ready, `canary-patch` or `canary-minor` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package and merged into the `master`. -![Screenshot 2022-02-07 at 1 27 46 PM](https://user-images.githubusercontent.com/62810976/161559404-c2e9064c-ae62-4395-92d9-9ddba2781d7a.png) +![Screenshot 2022-08-16 at 6 51 33 PM](https://user-images.githubusercontent.com/36300815/184890022-171cf7d9-2c37-4dfa-a302-e41e879a22d7.png) ### Bugs diff --git a/docs/3.4.x/customizing-fonts.md b/docs/3.4.x/customizing-fonts.md index c8ade5f00..c50d1c190 100644 --- a/docs/3.4.x/customizing-fonts.md +++ b/docs/3.4.x/customizing-fonts.md @@ -18,33 +18,33 @@ We extend the theme object and override `fontConfig` and `fonts` properties whic This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. ```jsx -import { NativeBaseProvider, extendTheme } from 'native-base'; +import { NativeBaseProvider, extendTheme } from "native-base"; const theme = extendTheme({ fontConfig: { Roboto: { 100: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 200: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 300: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 400: { - normal: 'Roboto-Regular', - italic: 'Roboto-Italic', + normal: "Roboto-Regular", + italic: "Roboto-Italic", }, 500: { - normal: 'Roboto-Medium', + normal: "Roboto-Medium", }, 600: { - normal: 'Roboto-Medium', - italic: 'Roboto-MediumItalic', + normal: "Roboto-Medium", + italic: "Roboto-MediumItalic", }, // Add more variants // 700: { @@ -63,9 +63,9 @@ const theme = extendTheme({ // Make sure values below matches any of the keys in `fontConfig` fonts: { - heading: 'Roboto', - body: 'Roboto', - mono: 'Roboto', + heading: "Roboto", + body: "Roboto", + mono: "Roboto", }, }); @@ -83,5 +83,5 @@ export default function App() { Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. ```jsx - + ``` diff --git a/docs/3.4.x/dark-mode.md b/docs/3.4.x/dark-mode.md index 001121f4d..bf78ac170 100644 --- a/docs/3.4.x/dark-mode.md +++ b/docs/3.4.x/dark-mode.md @@ -5,18 +5,18 @@ title: Making components dark mode compatible By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: -1. By updating component's theme -2. By using useColorModeValue +- By updating component's theme +- By using useColorModeValue ## 1. By updating component's theme -In this approach we use NativeBase's `extendTheme` function to customise the components and then use themeTools to make the component dark mode compatible. +In this approach we use NativeBase's `extendTheme` function to customise the components and then use _light and _dark props to make the component dark mode compatible. Note: Changes on the theme will be reflected on the entire application. ```tsx import React from 'react'; -import { NativeBaseProvider, themeTools } from 'native-base'; +import { NativeBaseProvider } from 'native-base'; import { extendTheme } from 'native-base'; import { Content } from './Content'; @@ -26,7 +26,8 @@ export default function () { Heading: { baseStyle: (props: any) => { return { - color: themeTools.mode('red.300', 'blue.300')(props), + _light: { color: 'red.300' }, + _dark: { color: 'blue.300' }, }; }, }, @@ -44,7 +45,7 @@ In the above example, the Heading component's color property will now respond to ## 2. By using useColorModeValue -In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. +In this approach we use NativeBase's `useColorModeValue` hook and update specific props instead of updating the entire theme. Note: Changes on the theme will be reflected on the entire application. diff --git a/docs/3.4.x/default-theme.md b/docs/3.4.x/default-theme.md index 511a8b802..c957a019c 100644 --- a/docs/3.4.x/default-theme.md +++ b/docs/3.4.x/default-theme.md @@ -15,7 +15,7 @@ You can add a `theme.colors` object to provide colors for your project. By def You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) -We recommend adding a palette that ranges from `50` to `900`. Tools like [Smart Swatch](https://smart-swatch.netlify.app/), [Palx](https://palx.jxnblk.com/) are available to generate these palettes. +We recommend adding a palette that ranges from `50` to `900`. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. @@ -32,24 +32,24 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - 'xs': '-0.05em', - 'sm': '-0.025em', - 'md': 0, - 'lg': '0.025em', - 'xl': '0.05em', - '2xl': '0.1em', + "xs": "-0.05em", + "sm": "-0.025em", + "md": 0, + "lg": "0.025em", + "xl": "0.05em", + "2xl": "0.1em", }, lineHeights: { - '2xs': '1em', - 'xs': '1.125em', - 'sm': '1.25em', - 'md': '1.375em', - 'lg': '1.5em', - 'xl': '1.75em', - '2xl': '2em', - '3xl': '2.5em', - '4xl': '3em', - '5xl': '4em', + "2xs": "1em", + "xs": "1.125em", + "sm": "1.25em", + "md": "1.375em", + "lg": "1.5em", + "xl": "1.75em", + "2xl": "2em", + "3xl": "2.5em", + "4xl": "3em", + "5xl": "4em", }, fontWeights: { hairline: 100, @@ -61,7 +61,7 @@ const typography = { bold: 700, extrabold: 800, black: 900, - extrablack: 950, + extraBlack: 950, }, fonts: { heading: undefined, @@ -69,20 +69,20 @@ const typography = { mono: undefined, }, fontSizes: { - '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, + "2xs": 10, + "xs": 12, + "sm": 14, + "md": 16, + "lg": 18, + "xl": 20, + "2xl": 24, + "3xl": 30, + "4xl": 36, + "5xl": 48, + "6xl": 60, + "7xl": 72, + "8xl": 96, + "9xl": 128, }, }; ``` @@ -130,7 +130,7 @@ The `shadow` key allows you to customize the global box shadow for your project. ```jsx export default { 0: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -140,7 +140,7 @@ export default { elevation: 1, }, 1: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -150,7 +150,7 @@ export default { elevation: 2, }, 2: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -160,7 +160,7 @@ export default { elevation: 3, }, 3: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -170,7 +170,7 @@ export default { elevation: 4, }, 4: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -180,7 +180,7 @@ export default { elevation: 5, }, 5: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -190,7 +190,7 @@ export default { elevation: 6, }, 6: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -200,7 +200,7 @@ export default { elevation: 7, }, 7: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -210,7 +210,7 @@ export default { elevation: 8, }, 8: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -220,7 +220,7 @@ export default { elevation: 9, }, 9: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 5, diff --git a/docs/3.4.x/flex.md b/docs/3.4.x/flex.md index 964b19ae5..62cb1c544 100644 --- a/docs/3.4.x/flex.md +++ b/docs/3.4.x/flex.md @@ -6,7 +6,7 @@ title: Flex `Flex` provides helpful style shorthand and is a [`Box`](box.md) with `display: flex`. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Flex, Center, @@ -15,17 +15,22 @@ import { VStack, Divider, Box, -} from 'native-base'; + useColorModeValue, +} from "native-base"; export function Example() { + const bgShade100 = useColorModeValue("primary.100", "primary.400"); + const bgShade200 = useColorModeValue("primary.200", "primary.500"); + const bgShade300 = useColorModeValue("primary.300", "primary.600"); + const bgShade400 = useColorModeValue("primary.400", "primary.700"); return ( @@ -36,19 +41,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -61,19 +66,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -85,19 +90,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -109,19 +114,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -136,7 +141,7 @@ export function Example() { ## Import ```jsx -import { Flex, Spacer } from 'native-base'; +import { Flex, Spacer } from "native-base"; ``` - `Flex`: a **[Box](box.md)** with `display: flex` diff --git a/docs/3.4.x/form-control.md b/docs/3.4.x/form-control.md index fd52eecb7..5558f25b8 100644 --- a/docs/3.4.x/form-control.md +++ b/docs/3.4.x/form-control.md @@ -8,7 +8,7 @@ import { ComponentTheme } from '../src/components'; `FormControl` is used to form elements by providing context such as `isInvalid`, `isDisabled`, and `isRequired`. ```jsx isShowcase gradient="3" -import React from 'react'; +import React from "react"; import { FormControl, Input, @@ -17,7 +17,7 @@ import { Box, Center, NativeBaseProvider, -} from 'native-base'; +} from "native-base"; const Example = () => { return ( @@ -26,9 +26,16 @@ const Example = () => { Password { return ( ); }; ``` -The `Input` component allows a user to provide input in a text field. - ## Examples ### Basic diff --git a/docs/3.4.x/modal.md b/docs/3.4.x/modal.md index de1c66ae8..52761ec54 100644 --- a/docs/3.4.x/modal.md +++ b/docs/3.4.x/modal.md @@ -8,9 +8,9 @@ import { ComponentTheme } from '../src/components'; A `Modal` is an overlay on the primary window or another dialog window. Content behind the modal dialog remains **inert** and users cannot interact with it. ```jsx isShowcase -import React from 'react'; -import { Button, Modal, FormControl, Input } from 'native-base'; -import { useState } from 'react'; +import React from "react"; +import { Button, Modal, FormControl, Input } from "native-base"; +import { useState } from "react"; export const Example = () => { const [showModal, setShowModal] = useState(false); @@ -63,7 +63,7 @@ export const Example = () => { ## Import -NativeBase exports Modal Compound component: +NativeBase export a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -73,7 +73,7 @@ NativeBase exports Modal Compound component: - `Modal.CloseButton`: The button that closes the modal. ```jsx -import { Modal } from 'native-base'; +import { Modal } from "native-base"; ``` ## Examples diff --git a/docs/3.4.x/nativebase-factory.md b/docs/3.4.x/nativebase-factory.md index 61a6e9730..27d3a26cc 100644 --- a/docs/3.4.x/nativebase-factory.md +++ b/docs/3.4.x/nativebase-factory.md @@ -3,10 +3,10 @@ id: nativebase-factory title: NativeBase Factory --- -NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. +NativeBase factory is a function that converts Non-NativeBase components to NativeBase enabled components so you can pass style props to them. ```jsx -import { Factory } from 'native-base'; +import { Factory } from "native-base"; ``` ## Usage diff --git a/docs/3.4.x/safe-area-view-props.md b/docs/3.4.x/safe-area-view-props.md index 87b69a291..a45e5d457 100644 --- a/docs/3.4.x/safe-area-view-props.md +++ b/docs/3.4.x/safe-area-view-props.md @@ -17,7 +17,7 @@ Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/la :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +SafeAreaView props can only be applied on [Box](box.md) as of now. To make your app SafeArea safe, just wrap your app with a Box and pass safeArea props to it. ::: @@ -26,8 +26,8 @@ SafeAreaView props can only be applied on [Box](box.md) as of now. To make you A ### Flexible SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look different on devices with different insets @@ -50,8 +50,8 @@ export function Example() { ### Fixed SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look same on all devices @@ -76,8 +76,8 @@ export function Example() { If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text, useSafeArea } from "native-base"; function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( diff --git a/docs/3.4.x/select.md b/docs/3.4.x/select.md index db5a45a57..836c59f20 100644 --- a/docs/3.4.x/select.md +++ b/docs/3.4.x/select.md @@ -10,11 +10,11 @@ import { AndroidBadge } from "../src/components/index"; Select creates a dropdown list of items with the selected item in closed view. ```jsx isShowcase -import React from 'react'; -import { Select, VStack, CheckIcon } from 'native-base'; +import React from "react"; +import { Select, VStack, CheckIcon } from "native-base"; export const Example = () => { - let [service, setService] = React.useState(''); + let [service, setService] = React.useState(""); return ( @@ -25,11 +25,19 @@ export const Example = () => { accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{ - bg: 'teal.600', + bg: "teal.600", endIcon: , }} - _light={{ bg: 'coolGray.100' }} - _dark={{ bg: 'coolGray.800' }} + _light={{ + bg: "coolGray.100", + _hover: { bg: "coolGray.200" }, + _focus: { bg: "coolGray.200:alpha.70" }, + }} + _dark={{ + bg: "coolGray.800", + _hover: { bg: "coolGray.900" }, + _focus: { bg: "coolGray.900:alpha.70" }, + }} onValueChange={(itemValue) => setService(itemValue)} > @@ -50,7 +58,7 @@ export const Example = () => { ## Import ```jsx -import { Select } from 'native-base'; +import { Select } from "native-base"; ``` ## Examples diff --git a/docs/3.4.x/setup-provider.md b/docs/3.4.x/setup-provider.md index 7cab1810a..c1497f317 100644 --- a/docs/3.4.x/setup-provider.md +++ b/docs/3.4.x/setup-provider.md @@ -8,9 +8,9 @@ NativeBaseProvider is a component that makes the theme available throughout your **App.js** ```jsx -import React from 'react'; +import React from "react"; // 1. import `NativeBaseProvider` component -import { NativeBaseProvider, Text, Box } from 'native-base'; +import { NativeBaseProvider, Text, Box } from "native-base"; export default function App() { // 2. Use at the root of your app @@ -32,13 +32,13 @@ NativeBase 3.0 provides an `extendTheme` function that deep merges the default ```jsx // 1. Import the extendTheme function -import { extendTheme, NativeBaseProvider } from 'native-base'; +import { extendTheme, NativeBaseProvider } from "native-base"; // 2. Extend the theme to include custom colors, fonts, etc const newColorTheme = { brand: { - 900: '#8287af', - 800: '#7c83db', - 700: '#b3bef6', + 900: "#8287af", + 800: "#7c83db", + 700: "#b3bef6", }, }; const theme = extendTheme({ colors: newColorTheme }); @@ -59,25 +59,25 @@ If you want to do something with the color modes in your app, you can use colorM In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. ```tsx -import React from 'react'; -import { NativeBaseProvider, ColorMode } from 'native-base'; -import type { StorageManager } from 'native-base'; -import AsyncStorage from '@react-native-async-storage/async-storage'; +import React from "react"; +import { NativeBaseProvider, ColorMode } from "native-base"; +import type { StorageManager } from "native-base"; +import AsyncStorage from "@react-native-async-storage/async-storage"; export default ({ children, theme }: any) => { const colorModeManager: StorageManager = { get: async () => { try { - let val = await AsyncStorage.getItem('@my-app-color-mode'); - return val === 'dark' ? 'dark' : 'light'; + let val = await AsyncStorage.getItem("@my-app-color-mode"); + return val === "dark" ? "dark" : "light"; } catch (e) { console.log(e); - return 'light'; + return "light"; } }, set: async (value: ColorMode) => { try { - await AsyncStorage.setItem('@my-app-color-mode', value); + await AsyncStorage.setItem("@my-app-color-mode", value); } catch (e) { console.log(e); } @@ -96,13 +96,13 @@ export default ({ children, theme }: any) => { If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) ```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; +import React from "react"; +import { NativeBaseProvider } from "native-base"; const config = { dependencies: { // For Expo projects (Bare or managed workflow) - 'linear-gradient': require('expo-linear-gradient').LinearGradient, + "linear-gradient": require("expo-linear-gradient").LinearGradient, // For non expo projects // 'linear-gradient': require('react-native-linear-gradient').default, }, @@ -121,11 +121,11 @@ export default () => { ## Add isSSR (Optional) -If you are using NativeBase for a server side rendering app, you can use isSSR prop to determine whether to render the theme or not. +If you are using NativeBase for a server side rendering app like Next.js, you have to pass isSSR prop. This will resolve the responsive props to media queries on the server side and fix an issue with jumping UI on hydration. ```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; +import React from "react"; +import { NativeBaseProvider } from "native-base"; export default () => { return ( diff --git a/docs/3.4.x/sidebar.json b/docs/3.4.x/sidebar.json index 9f1d028d1..83d67f331 100644 --- a/docs/3.4.x/sidebar.json +++ b/docs/3.4.x/sidebar.json @@ -170,7 +170,7 @@ }, { "id": "typescript", - "title": "Typescript", + "title": "TypeScript", "showToc": false } ] @@ -181,7 +181,7 @@ "pages": [ { "id": "aspect-ratio", - "title": "Aspect Ratio" + "title": "AspectRatio" }, { "id": "box", diff --git a/docs/3.4.x/slider.md b/docs/3.4.x/slider.md index a903e424d..e420ef51c 100644 --- a/docs/3.4.x/slider.md +++ b/docs/3.4.x/slider.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; The `Slider` allows users to select options from a given range of values. ```jsx isShowcase -import React from 'react'; -import { Slider, Box, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { Slider, Box, Center, NativeBaseProvider } from "native-base"; export const Example = () => { return ( @@ -32,7 +32,7 @@ export const Example = () => { ## Import -NativeBase exports 4 slider-related components: +NativeBase exports 4 Slider related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. @@ -40,7 +40,7 @@ NativeBase exports 4 slider-related components: - `Slider.Thumb`: The handle that's used to change the slider value. ```jsx -import { Slider } from 'native-base'; +import { Slider } from "native-base"; ``` ## Examples diff --git a/docs/3.4.x/textarea.md b/docs/3.4.x/textarea.md index 6e53fa038..ff3358227 100644 --- a/docs/3.4.x/textarea.md +++ b/docs/3.4.x/textarea.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; The `Textarea` component helps create multi-line text inputs. ```jsx isShowcase -import React from 'react'; -import { TextArea } from 'native-base'; +import React from "react"; +import { TextArea } from "native-base"; export const Example = () => { return ( @@ -18,9 +18,17 @@ export const Example = () => { h={20} placeholder="Text Area Placeholder" w="200" - _light={{ placeholderTextColor: 'trueGray.700' }} - _dark={{ bg: 'coolGray.800' }} - _hover={{ bg: 'coolGray.200' }} + _light={{ + placeholderTextColor: "trueGray.700", + bg: "coolGray.100", + _hover: { bg: "coolGray.200" }, + _focus: { bg: "coolGray.200:alpha.70" }, + }} + _dark={{ + bg: "coolGray.800", + _hover: { bg: "coolGray.900" }, + _focus: { bg: "coolGray.900:alpha.70" }, + }} /> ); }; diff --git a/docs/3.4.x/theme.md b/docs/3.4.x/theme.md index 80bce66f8..7e270b521 100644 --- a/docs/3.4.x/theme.md +++ b/docs/3.4.x/theme.md @@ -8,14 +8,14 @@ NativeBase provides multiple tools to use the central theme defined in the app. ## useTheme ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useTheme, FlatList, Center, Box, -} from 'native-base'; +} from "native-base"; function ColorPalete() { const { colors } = useTheme(); @@ -23,7 +23,7 @@ function ColorPalete() { } /> @@ -47,17 +47,17 @@ export function Example() { You can also get specific values from the theme with [`useToken`](/use-token) hook. ```jsx isLive=true -import React from 'react'; -import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { useToken, NativeBaseProvider, Center, Text } from "native-base"; function Tokens() { - const [contrastThreshold, lightText] = useToken('colors', [ - 'contrastThreshold', - 'lightText', + const [contrastThreshold, lightText] = useToken("colors", [ + "contrastThreshold", + "lightText", ]); return (
- Contrast threshold is:{' '} + Contrast threshold is:{" "} {contrastThreshold} @@ -79,20 +79,20 @@ export function Example() { ## useContrastText -If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). +If you are defining the background yourself and want to pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). ```jsx isLive=true -import React from 'react'; +import React from "react"; import { Button, Stack, useContrastText, NativeBaseProvider, Center, -} from 'native-base'; +} from "native-base"; function UseContrastingTextHook() { - const bgDark = 'primary.600'; - const bgLight = 'primary.200'; + const bgDark = "primary.600"; + const bgLight = "primary.200"; const colorContrastDark = useContrastText(bgDark); const colorContrastLight = useContrastText(bgLight); @@ -125,21 +125,25 @@ export function Example() { If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](use-color-mode). ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useColorMode, Text, Button, Center, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
+
- The active color mode is{' '} + The active color mode is{" "} {colorMode} @@ -165,7 +169,7 @@ export function Example() { If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](use-color-mode-value) hook. It takes two parameters, light mode value as the first and dark mode value as second. ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useColorMode, @@ -173,16 +177,18 @@ import { Button, Center, useColorModeValue, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { toggleColorMode } = useColorMode(); + const backgroundColor = useColorModeValue("warmGray.50", "coolGray.800"); + const colorMode = useColorModeValue("Light", "Dark"); return ( -
+
- The active color mode is{' '} + The active color mode is{" "} - {useColorModeValue('Light', 'Dark')} + {colorMode} diff --git a/docs/3.4.x/typescript.mdx b/docs/3.4.x/typescript.mdx index 30226ed8b..a94ae1c8d 100644 --- a/docs/3.4.x/typescript.mdx +++ b/docs/3.4.x/typescript.mdx @@ -1,14 +1,14 @@ --- id: typescript -title: Typescript +title: TypeScript --- import Image from "next/Image"; import { AspectRatio } from "native-base"; -To enable typescript for custom theme tokens or variants, we'll follow two simple steps. +To enable TypeScript for custom theme tokens or variants, we'll follow two simple steps. -Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button. +Below, in the [extendTheme](customizing-theme) function, we're adding a space token and a custom variant for the Button. ```jsx import { extendTheme } from 'native-base'; diff --git a/docs/3.4.x/utility-props-specificity.md b/docs/3.4.x/utility-props-specificity.md index 9abb86545..5d714e848 100644 --- a/docs/3.4.x/utility-props-specificity.md +++ b/docs/3.4.x/utility-props-specificity.md @@ -13,6 +13,9 @@ title: Utility Props Specificity - If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. +
+
+ Let's take an example of `Input` to understand better. ```jsx diff --git a/docs/next/action-sheet.md b/docs/next/action-sheet.md index c8a02255b..7ecfe48b1 100644 --- a/docs/next/action-sheet.md +++ b/docs/next/action-sheet.md @@ -5,10 +5,10 @@ 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. +An Actionsheet is a dialog that displays a set of options. It appears on top of the app's content. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Button, Actionsheet, @@ -17,7 +17,7 @@ import { Box, Center, NativeBaseProvider, -} from 'native-base'; +} from "native-base"; export function Example() { const { isOpen, onOpen, onClose } = useDisclose(); return ( @@ -32,7 +32,7 @@ export function Example() { fontSize="16" color="gray.500" _dark={{ - color: 'gray.300', + color: "gray.300", }} > Albums @@ -52,14 +52,12 @@ export function Example() { ## 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'; +import { Actionsheet } from "native-base"; ``` ## Examples @@ -104,7 +102,7 @@ import { Actionsheet } from 'native-base'; ### Actionsheet.Item -ActionsheetItem implements [Button](button#props) +Actionsheet.Item implements [Button](button#props) ## Styling diff --git a/docs/next/alert.md b/docs/next/alert.md index e8a92c77f..507b82573 100644 --- a/docs/next/alert.md +++ b/docs/next/alert.md @@ -8,7 +8,7 @@ import { ComponentTheme } from '../src/components'; `Alerts` convey a state that can influence a system, feature, or page. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Alert, VStack, @@ -17,7 +17,7 @@ import { CloseIcon, Box, Heading, -} from 'native-base'; +} from "native-base"; export const Example = () => { return ( @@ -40,7 +40,7 @@ export const Example = () => { icon={} /> - + We are happy to announce that we are going live on July 28th. Get ready! @@ -52,15 +52,13 @@ export const Example = () => { ## Import -NativeBase exports 5 Alert related components: +NativeBase exports 2 Alert related components: - `Alert`: The wrapper for alert components. - `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. - - ```jsx -import { Alert } from 'native-base'; +import { Alert } from "native-base"; ``` ## Examples @@ -109,18 +107,6 @@ import { Alert } from 'native-base'; ``` -### Alert.Title - -```ComponentPropTable path=composites,Alert,AlertTitle.tsx - -``` - -### Alert.Description - -```ComponentPropTable path=composites,Alert,AlertDescription.tsx - -``` - ## Styling diff --git a/docs/next/aspect-ratio.md b/docs/next/aspect-ratio.md index 99f98cb06..4a49d0617 100644 --- a/docs/next/aspect-ratio.md +++ b/docs/next/aspect-ratio.md @@ -3,24 +3,16 @@ id: aspectRatio title: AspectRatio --- -Aspect ratio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. +AspectRatio controls the size of the undefined dimension of a node or child component. You can refer [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. ## Import ```jsx -import { AspectRatio } from 'native-base'; +import { AspectRatio } from "native-base"; ``` ## Example -### Basic - -```ComponentSnackPlayer path=components,composites,AspectRatio,Basic.tsx - -``` - -### Embed Image - ```ComponentSnackPlayer path=components,composites,AspectRatio,EmbedImage.tsx ``` diff --git a/docs/next/breakpoints.md b/docs/next/breakpoints.md index d30fb4cf1..0d430e1b8 100644 --- a/docs/next/breakpoints.md +++ b/docs/next/breakpoints.md @@ -5,7 +5,7 @@ title: Breakpoints Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. -NativeBase provides these default breakpoints and you can update with using extendTheme. +NativeBase provides these default breakpoints and you can update them by using extendTheme. ```tsx breakpoints = { diff --git a/docs/next/color-mode.md b/docs/next/color-mode.md index 3bf49f4c8..d99f55e8f 100644 --- a/docs/next/color-mode.md +++ b/docs/next/color-mode.md @@ -42,18 +42,25 @@ import { function PseudoPropsUsage() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
- - The active color mode is{' '} - - {colorMode} +
+ + + The active color mode is{' '} + + {colorMode} + - - + +
); } diff --git a/docs/next/contribution.md b/docs/next/contribution.md index d90c2a68a..7338e79fa 100644 --- a/docs/next/contribution.md +++ b/docs/next/contribution.md @@ -15,9 +15,9 @@ All work on NativeBase happens directly on [GitHub](https://github.com/GeekyAnt ### Branch Organization -According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branch for all the external PR's which is like a development branch with latest changes. If you send a pull request, please do it against the this `canary` branch. Once a release candidate is ready, `canary` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package. +According to our [release schedule](https://github.com/GeekyAnts/NativeBase/releases), we maintain a `canary` branches which are like development branches with the latest changes. If you send a pull request, please do it against the `master` branch. Once you create your PR we will update the base branch to a more specific canary branch if required. Once a release candidate is ready, `canary-patch` or `canary-minor` branch will be released as a rc release package and once a stable release test is done it will be released to `native-base` package and merged into the `master`. -![Screenshot 2022-02-07 at 1 27 46 PM](https://user-images.githubusercontent.com/62810976/161559404-c2e9064c-ae62-4395-92d9-9ddba2781d7a.png) +![Screenshot 2022-08-16 at 6 51 33 PM](https://user-images.githubusercontent.com/36300815/184890022-171cf7d9-2c37-4dfa-a302-e41e879a22d7.png) ### Bugs diff --git a/docs/next/customizing-fonts.md b/docs/next/customizing-fonts.md index c8ade5f00..c50d1c190 100644 --- a/docs/next/customizing-fonts.md +++ b/docs/next/customizing-fonts.md @@ -18,33 +18,33 @@ We extend the theme object and override `fontConfig` and `fonts` properties whic This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. ```jsx -import { NativeBaseProvider, extendTheme } from 'native-base'; +import { NativeBaseProvider, extendTheme } from "native-base"; const theme = extendTheme({ fontConfig: { Roboto: { 100: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 200: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 300: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', + normal: "Roboto-Light", + italic: "Roboto-LightItalic", }, 400: { - normal: 'Roboto-Regular', - italic: 'Roboto-Italic', + normal: "Roboto-Regular", + italic: "Roboto-Italic", }, 500: { - normal: 'Roboto-Medium', + normal: "Roboto-Medium", }, 600: { - normal: 'Roboto-Medium', - italic: 'Roboto-MediumItalic', + normal: "Roboto-Medium", + italic: "Roboto-MediumItalic", }, // Add more variants // 700: { @@ -63,9 +63,9 @@ const theme = extendTheme({ // Make sure values below matches any of the keys in `fontConfig` fonts: { - heading: 'Roboto', - body: 'Roboto', - mono: 'Roboto', + heading: "Roboto", + body: "Roboto", + mono: "Roboto", }, }); @@ -83,5 +83,5 @@ export default function App() { Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. ```jsx - + ``` diff --git a/docs/next/dark-mode.md b/docs/next/dark-mode.md index 001121f4d..bf78ac170 100644 --- a/docs/next/dark-mode.md +++ b/docs/next/dark-mode.md @@ -5,18 +5,18 @@ title: Making components dark mode compatible By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: -1. By updating component's theme -2. By using useColorModeValue +- By updating component's theme +- By using useColorModeValue ## 1. By updating component's theme -In this approach we use NativeBase's `extendTheme` function to customise the components and then use themeTools to make the component dark mode compatible. +In this approach we use NativeBase's `extendTheme` function to customise the components and then use _light and _dark props to make the component dark mode compatible. Note: Changes on the theme will be reflected on the entire application. ```tsx import React from 'react'; -import { NativeBaseProvider, themeTools } from 'native-base'; +import { NativeBaseProvider } from 'native-base'; import { extendTheme } from 'native-base'; import { Content } from './Content'; @@ -26,7 +26,8 @@ export default function () { Heading: { baseStyle: (props: any) => { return { - color: themeTools.mode('red.300', 'blue.300')(props), + _light: { color: 'red.300' }, + _dark: { color: 'blue.300' }, }; }, }, @@ -44,7 +45,7 @@ In the above example, the Heading component's color property will now respond to ## 2. By using useColorModeValue -In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. +In this approach we use NativeBase's `useColorModeValue` hook and update specific props instead of updating the entire theme. Note: Changes on the theme will be reflected on the entire application. diff --git a/docs/next/default-theme.md b/docs/next/default-theme.md index 511a8b802..c957a019c 100644 --- a/docs/next/default-theme.md +++ b/docs/next/default-theme.md @@ -15,7 +15,7 @@ You can add a `theme.colors` object to provide colors for your project. By def You can also add `.alpha:{number}` to add levels of opacity to a colour. The number can also be added in the theme file. Ex: `red.300:alpha.30`, You can read more about this in [`opacity section`](default-theme#opacity) -We recommend adding a palette that ranges from `50` to `900`. Tools like [Smart Swatch](https://smart-swatch.netlify.app/), [Palx](https://palx.jxnblk.com/) are available to generate these palettes. +We recommend adding a palette that ranges from `50` to `900`. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. @@ -32,24 +32,24 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - 'xs': '-0.05em', - 'sm': '-0.025em', - 'md': 0, - 'lg': '0.025em', - 'xl': '0.05em', - '2xl': '0.1em', + "xs": "-0.05em", + "sm": "-0.025em", + "md": 0, + "lg": "0.025em", + "xl": "0.05em", + "2xl": "0.1em", }, lineHeights: { - '2xs': '1em', - 'xs': '1.125em', - 'sm': '1.25em', - 'md': '1.375em', - 'lg': '1.5em', - 'xl': '1.75em', - '2xl': '2em', - '3xl': '2.5em', - '4xl': '3em', - '5xl': '4em', + "2xs": "1em", + "xs": "1.125em", + "sm": "1.25em", + "md": "1.375em", + "lg": "1.5em", + "xl": "1.75em", + "2xl": "2em", + "3xl": "2.5em", + "4xl": "3em", + "5xl": "4em", }, fontWeights: { hairline: 100, @@ -61,7 +61,7 @@ const typography = { bold: 700, extrabold: 800, black: 900, - extrablack: 950, + extraBlack: 950, }, fonts: { heading: undefined, @@ -69,20 +69,20 @@ const typography = { mono: undefined, }, fontSizes: { - '2xs': 10, - 'xs': 12, - 'sm': 14, - 'md': 16, - 'lg': 18, - 'xl': 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, + "2xs": 10, + "xs": 12, + "sm": 14, + "md": 16, + "lg": 18, + "xl": 20, + "2xl": 24, + "3xl": 30, + "4xl": 36, + "5xl": 48, + "6xl": 60, + "7xl": 72, + "8xl": 96, + "9xl": 128, }, }; ``` @@ -130,7 +130,7 @@ The `shadow` key allows you to customize the global box shadow for your project. ```jsx export default { 0: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -140,7 +140,7 @@ export default { elevation: 1, }, 1: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -150,7 +150,7 @@ export default { elevation: 2, }, 2: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 1, @@ -160,7 +160,7 @@ export default { elevation: 3, }, 3: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -170,7 +170,7 @@ export default { elevation: 4, }, 4: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 2, @@ -180,7 +180,7 @@ export default { elevation: 5, }, 5: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -190,7 +190,7 @@ export default { elevation: 6, }, 6: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 3, @@ -200,7 +200,7 @@ export default { elevation: 7, }, 7: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -210,7 +210,7 @@ export default { elevation: 8, }, 8: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 4, @@ -220,7 +220,7 @@ export default { elevation: 9, }, 9: { - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 5, diff --git a/docs/next/flex.md b/docs/next/flex.md index 964b19ae5..62cb1c544 100644 --- a/docs/next/flex.md +++ b/docs/next/flex.md @@ -6,7 +6,7 @@ title: Flex `Flex` provides helpful style shorthand and is a [`Box`](box.md) with `display: flex`. ```jsx isShowcase -import React from 'react'; +import React from "react"; import { Flex, Center, @@ -15,17 +15,22 @@ import { VStack, Divider, Box, -} from 'native-base'; + useColorModeValue, +} from "native-base"; export function Example() { + const bgShade100 = useColorModeValue("primary.100", "primary.400"); + const bgShade200 = useColorModeValue("primary.200", "primary.500"); + const bgShade300 = useColorModeValue("primary.300", "primary.600"); + const bgShade400 = useColorModeValue("primary.400", "primary.700"); return ( @@ -36,19 +41,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -61,19 +66,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -85,19 +90,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -109,19 +114,19 @@ export function Example() { mb="2.5" mt="1.5" _text={{ - color: 'coolGray.800', + color: "coolGray.800", }} > -
+
100
-
+
200
-
+
300
-
+
400
@@ -136,7 +141,7 @@ export function Example() { ## Import ```jsx -import { Flex, Spacer } from 'native-base'; +import { Flex, Spacer } from "native-base"; ``` - `Flex`: a **[Box](box.md)** with `display: flex` diff --git a/docs/next/form-control.md b/docs/next/form-control.md index fd52eecb7..5558f25b8 100644 --- a/docs/next/form-control.md +++ b/docs/next/form-control.md @@ -8,7 +8,7 @@ import { ComponentTheme } from '../src/components'; `FormControl` is used to form elements by providing context such as `isInvalid`, `isDisabled`, and `isRequired`. ```jsx isShowcase gradient="3" -import React from 'react'; +import React from "react"; import { FormControl, Input, @@ -17,7 +17,7 @@ import { Box, Center, NativeBaseProvider, -} from 'native-base'; +} from "native-base"; const Example = () => { return ( @@ -26,9 +26,16 @@ const Example = () => { Password { return ( ); }; ``` -The `Input` component allows a user to provide input in a text field. - ## Examples ### Basic diff --git a/docs/next/modal.md b/docs/next/modal.md index de1c66ae8..52761ec54 100644 --- a/docs/next/modal.md +++ b/docs/next/modal.md @@ -8,9 +8,9 @@ import { ComponentTheme } from '../src/components'; A `Modal` is an overlay on the primary window or another dialog window. Content behind the modal dialog remains **inert** and users cannot interact with it. ```jsx isShowcase -import React from 'react'; -import { Button, Modal, FormControl, Input } from 'native-base'; -import { useState } from 'react'; +import React from "react"; +import { Button, Modal, FormControl, Input } from "native-base"; +import { useState } from "react"; export const Example = () => { const [showModal, setShowModal] = useState(false); @@ -63,7 +63,7 @@ export const Example = () => { ## Import -NativeBase exports Modal Compound component: +NativeBase export a Modal Compound component: - `Modal`: The wrapper that provides context for its children. - `Modal.Content`: The container for the modal dialog's content. @@ -73,7 +73,7 @@ NativeBase exports Modal Compound component: - `Modal.CloseButton`: The button that closes the modal. ```jsx -import { Modal } from 'native-base'; +import { Modal } from "native-base"; ``` ## Examples diff --git a/docs/next/nativebase-factory.md b/docs/next/nativebase-factory.md index 61a6e9730..27d3a26cc 100644 --- a/docs/next/nativebase-factory.md +++ b/docs/next/nativebase-factory.md @@ -3,10 +3,10 @@ id: nativebase-factory title: NativeBase Factory --- -NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. +NativeBase factory is a function that converts Non-NativeBase components to NativeBase enabled components so you can pass style props to them. ```jsx -import { Factory } from 'native-base'; +import { Factory } from "native-base"; ``` ## Usage diff --git a/docs/next/safe-area-view-props.md b/docs/next/safe-area-view-props.md index 87b69a291..a45e5d457 100644 --- a/docs/next/safe-area-view-props.md +++ b/docs/next/safe-area-view-props.md @@ -17,7 +17,7 @@ Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/la :::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +SafeAreaView props can only be applied on [Box](box.md) as of now. To make your app SafeArea safe, just wrap your app with a Box and pass safeArea props to it. ::: @@ -26,8 +26,8 @@ SafeAreaView props can only be applied on [Box](box.md) as of now. To make you A ### Flexible SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look different on devices with different insets @@ -50,8 +50,8 @@ export function Example() { ### Fixed SafeArea ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text } from "native-base"; function MyComponent() { return ( // This would look same on all devices @@ -76,8 +76,8 @@ export function Example() { If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. ```jsx isLive=true -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, Box, Text, useSafeArea } from "native-base"; function MyComponent() { const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); return ( diff --git a/docs/next/select.md b/docs/next/select.md index db5a45a57..836c59f20 100644 --- a/docs/next/select.md +++ b/docs/next/select.md @@ -10,11 +10,11 @@ import { AndroidBadge } from "../src/components/index"; Select creates a dropdown list of items with the selected item in closed view. ```jsx isShowcase -import React from 'react'; -import { Select, VStack, CheckIcon } from 'native-base'; +import React from "react"; +import { Select, VStack, CheckIcon } from "native-base"; export const Example = () => { - let [service, setService] = React.useState(''); + let [service, setService] = React.useState(""); return ( @@ -25,11 +25,19 @@ export const Example = () => { accessibilityLabel="Choose Service" placeholder="Choose Service" _selectedItem={{ - bg: 'teal.600', + bg: "teal.600", endIcon: , }} - _light={{ bg: 'coolGray.100' }} - _dark={{ bg: 'coolGray.800' }} + _light={{ + bg: "coolGray.100", + _hover: { bg: "coolGray.200" }, + _focus: { bg: "coolGray.200:alpha.70" }, + }} + _dark={{ + bg: "coolGray.800", + _hover: { bg: "coolGray.900" }, + _focus: { bg: "coolGray.900:alpha.70" }, + }} onValueChange={(itemValue) => setService(itemValue)} > @@ -50,7 +58,7 @@ export const Example = () => { ## Import ```jsx -import { Select } from 'native-base'; +import { Select } from "native-base"; ``` ## Examples diff --git a/docs/next/setup-provider.md b/docs/next/setup-provider.md index 7cab1810a..c1497f317 100644 --- a/docs/next/setup-provider.md +++ b/docs/next/setup-provider.md @@ -8,9 +8,9 @@ NativeBaseProvider is a component that makes the theme available throughout your **App.js** ```jsx -import React from 'react'; +import React from "react"; // 1. import `NativeBaseProvider` component -import { NativeBaseProvider, Text, Box } from 'native-base'; +import { NativeBaseProvider, Text, Box } from "native-base"; export default function App() { // 2. Use at the root of your app @@ -32,13 +32,13 @@ NativeBase 3.0 provides an `extendTheme` function that deep merges the default ```jsx // 1. Import the extendTheme function -import { extendTheme, NativeBaseProvider } from 'native-base'; +import { extendTheme, NativeBaseProvider } from "native-base"; // 2. Extend the theme to include custom colors, fonts, etc const newColorTheme = { brand: { - 900: '#8287af', - 800: '#7c83db', - 700: '#b3bef6', + 900: "#8287af", + 800: "#7c83db", + 700: "#b3bef6", }, }; const theme = extendTheme({ colors: newColorTheme }); @@ -59,25 +59,25 @@ If you want to do something with the color modes in your app, you can use colorM In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app. ```tsx -import React from 'react'; -import { NativeBaseProvider, ColorMode } from 'native-base'; -import type { StorageManager } from 'native-base'; -import AsyncStorage from '@react-native-async-storage/async-storage'; +import React from "react"; +import { NativeBaseProvider, ColorMode } from "native-base"; +import type { StorageManager } from "native-base"; +import AsyncStorage from "@react-native-async-storage/async-storage"; export default ({ children, theme }: any) => { const colorModeManager: StorageManager = { get: async () => { try { - let val = await AsyncStorage.getItem('@my-app-color-mode'); - return val === 'dark' ? 'dark' : 'light'; + let val = await AsyncStorage.getItem("@my-app-color-mode"); + return val === "dark" ? "dark" : "light"; } catch (e) { console.log(e); - return 'light'; + return "light"; } }, set: async (value: ColorMode) => { try { - await AsyncStorage.setItem('@my-app-color-mode', value); + await AsyncStorage.setItem("@my-app-color-mode", value); } catch (e) { console.log(e); } @@ -96,13 +96,13 @@ export default ({ children, theme }: any) => { If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) ```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; +import React from "react"; +import { NativeBaseProvider } from "native-base"; const config = { dependencies: { // For Expo projects (Bare or managed workflow) - 'linear-gradient': require('expo-linear-gradient').LinearGradient, + "linear-gradient": require("expo-linear-gradient").LinearGradient, // For non expo projects // 'linear-gradient': require('react-native-linear-gradient').default, }, @@ -121,11 +121,11 @@ export default () => { ## Add isSSR (Optional) -If you are using NativeBase for a server side rendering app, you can use isSSR prop to determine whether to render the theme or not. +If you are using NativeBase for a server side rendering app like Next.js, you have to pass isSSR prop. This will resolve the responsive props to media queries on the server side and fix an issue with jumping UI on hydration. ```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; +import React from "react"; +import { NativeBaseProvider } from "native-base"; export default () => { return ( diff --git a/docs/next/sidebar.json b/docs/next/sidebar.json index 9f1d028d1..83d67f331 100644 --- a/docs/next/sidebar.json +++ b/docs/next/sidebar.json @@ -170,7 +170,7 @@ }, { "id": "typescript", - "title": "Typescript", + "title": "TypeScript", "showToc": false } ] @@ -181,7 +181,7 @@ "pages": [ { "id": "aspect-ratio", - "title": "Aspect Ratio" + "title": "AspectRatio" }, { "id": "box", diff --git a/docs/next/slider.md b/docs/next/slider.md index a903e424d..e420ef51c 100644 --- a/docs/next/slider.md +++ b/docs/next/slider.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; The `Slider` allows users to select options from a given range of values. ```jsx isShowcase -import React from 'react'; -import { Slider, Box, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { Slider, Box, Center, NativeBaseProvider } from "native-base"; export const Example = () => { return ( @@ -32,7 +32,7 @@ export const Example = () => { ## Import -NativeBase exports 4 slider-related components: +NativeBase exports 4 Slider related components: - `Slider`: The wrapper that provides context and functionality for all children. - `Slider.Track`: The empty part of the slider that shows the track. @@ -40,7 +40,7 @@ NativeBase exports 4 slider-related components: - `Slider.Thumb`: The handle that's used to change the slider value. ```jsx -import { Slider } from 'native-base'; +import { Slider } from "native-base"; ``` ## Examples diff --git a/docs/next/textarea.md b/docs/next/textarea.md index 6e53fa038..ff3358227 100644 --- a/docs/next/textarea.md +++ b/docs/next/textarea.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; The `Textarea` component helps create multi-line text inputs. ```jsx isShowcase -import React from 'react'; -import { TextArea } from 'native-base'; +import React from "react"; +import { TextArea } from "native-base"; export const Example = () => { return ( @@ -18,9 +18,17 @@ export const Example = () => { h={20} placeholder="Text Area Placeholder" w="200" - _light={{ placeholderTextColor: 'trueGray.700' }} - _dark={{ bg: 'coolGray.800' }} - _hover={{ bg: 'coolGray.200' }} + _light={{ + placeholderTextColor: "trueGray.700", + bg: "coolGray.100", + _hover: { bg: "coolGray.200" }, + _focus: { bg: "coolGray.200:alpha.70" }, + }} + _dark={{ + bg: "coolGray.800", + _hover: { bg: "coolGray.900" }, + _focus: { bg: "coolGray.900:alpha.70" }, + }} /> ); }; diff --git a/docs/next/theme.md b/docs/next/theme.md index 80bce66f8..7e270b521 100644 --- a/docs/next/theme.md +++ b/docs/next/theme.md @@ -8,14 +8,14 @@ NativeBase provides multiple tools to use the central theme defined in the app. ## useTheme ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useTheme, FlatList, Center, Box, -} from 'native-base'; +} from "native-base"; function ColorPalete() { const { colors } = useTheme(); @@ -23,7 +23,7 @@ function ColorPalete() { } /> @@ -47,17 +47,17 @@ export function Example() { You can also get specific values from the theme with [`useToken`](/use-token) hook. ```jsx isLive=true -import React from 'react'; -import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { useToken, NativeBaseProvider, Center, Text } from "native-base"; function Tokens() { - const [contrastThreshold, lightText] = useToken('colors', [ - 'contrastThreshold', - 'lightText', + const [contrastThreshold, lightText] = useToken("colors", [ + "contrastThreshold", + "lightText", ]); return (
- Contrast threshold is:{' '} + Contrast threshold is:{" "} {contrastThreshold} @@ -79,20 +79,20 @@ export function Example() { ## useContrastText -If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). +If you are defining the background yourself and want to pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). ```jsx isLive=true -import React from 'react'; +import React from "react"; import { Button, Stack, useContrastText, NativeBaseProvider, Center, -} from 'native-base'; +} from "native-base"; function UseContrastingTextHook() { - const bgDark = 'primary.600'; - const bgLight = 'primary.200'; + const bgDark = "primary.600"; + const bgLight = "primary.200"; const colorContrastDark = useContrastText(bgDark); const colorContrastLight = useContrastText(bgLight); @@ -125,21 +125,25 @@ export function Example() { If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](use-color-mode). ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useColorMode, Text, Button, Center, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { colorMode, toggleColorMode } = useColorMode(); return ( -
+
- The active color mode is{' '} + The active color mode is{" "} {colorMode} @@ -165,7 +169,7 @@ export function Example() { If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](use-color-mode-value) hook. It takes two parameters, light mode value as the first and dark mode value as second. ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, useColorMode, @@ -173,16 +177,18 @@ import { Button, Center, useColorModeValue, -} from 'native-base'; +} from "native-base"; function UseColorMode() { const { toggleColorMode } = useColorMode(); + const backgroundColor = useColorModeValue("warmGray.50", "coolGray.800"); + const colorMode = useColorModeValue("Light", "Dark"); return ( -
+
- The active color mode is{' '} + The active color mode is{" "} - {useColorModeValue('Light', 'Dark')} + {colorMode} diff --git a/docs/next/typescript.mdx b/docs/next/typescript.mdx index 299cda84e..a94ae1c8d 100644 --- a/docs/next/typescript.mdx +++ b/docs/next/typescript.mdx @@ -6,9 +6,9 @@ title: TypeScript import Image from "next/Image"; import { AspectRatio } from "native-base"; -To enable typescript for custom theme tokens or variants, we'll follow two simple steps. +To enable TypeScript for custom theme tokens or variants, we'll follow two simple steps. -Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button. +Below, in the [extendTheme](customizing-theme) function, we're adding a space token and a custom variant for the Button. ```jsx import { extendTheme } from 'native-base'; diff --git a/docs/next/utility-props-specificity.md b/docs/next/utility-props-specificity.md index 9abb86545..b09639c6e 100644 --- a/docs/next/utility-props-specificity.md +++ b/docs/next/utility-props-specificity.md @@ -11,9 +11,9 @@ title: Utility Props Specificity In the above example, we have two similar props for the Input component, but as you might have noticed `px="2"` is more specific than `p="0"` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px="2"` will be applied when the Input component is rendered. -- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. +- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle - Let's take an example of `Input` to understand better. + . Let's take an example of `Input` to understand better. ```jsx diff --git a/src/components/GettingStartedHero.tsx b/src/components/GettingStartedHero.tsx index 0a9349563..380812e5f 100644 --- a/src/components/GettingStartedHero.tsx +++ b/src/components/GettingStartedHero.tsx @@ -1,13 +1,5 @@ import React from "react"; -import { - Box, - Heading, - Link, - Text, - VStack, - Stack, - useColorModeValue, -} from "native-base"; +import { Box, Text, VStack, Stack, useColorModeValue } from "native-base"; import { CodePlaygroundIcon, BookMarkIcon, @@ -54,7 +46,7 @@ export function GettingStartedHero() { /> { setCopied(false); }, 2000); } - + const bgColor = useColorModeValue("#f9fafb", "#171E2E"); const borderColor = useColorModeValue("#e5e7eb", "#1e293b"); return ( @@ -57,6 +57,7 @@ export const CodeBlock = ({ children, props }: any) => { p="1" _text={{ fontSize: "sm", + lineHeight: "1.5em", // hack for now fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif", @@ -85,6 +86,8 @@ export const CodeBlock = ({ children, props }: any) => { backgroundColor: bgColor, borderWidth: "1", borderColor: borderColor, + fontSize: "13px", + lineHeight: "normal", }} > {tokens.map((line, i) => ( From bba6b4aa11744547231e6d5e2f5922b835b84343 Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 22 Aug 2022 15:38:45 +0530 Subject: [PATCH 08/12] fix: doc content and bugs --- docs/3.0.x/action-sheet.md | 4 +- docs/3.0.x/alert-dialog.md | 14 +-- docs/3.0.x/select.md | 10 +- docs/3.0.x/tooltip.md | 4 +- docs/3.0.x/utility-props.md | 80 +++++++------- docs/3.1.x/action-sheet.md | 4 +- docs/3.1.x/alert-dialog.md | 14 +-- docs/3.1.x/select.md | 10 +- docs/3.1.x/tooltip.md | 4 +- docs/3.1.x/utility-props.md | 80 +++++++------- docs/3.2.x/action-sheet.md | 4 +- docs/3.2.x/alert-dialog.md | 4 +- docs/3.2.x/tooltip.md | 4 +- docs/3.2.x/utility-props.md | 90 ++++++++-------- docs/3.3.x/action-sheet.md | 10 +- docs/3.3.x/alert-dialog.md | 8 +- docs/3.3.x/tooltip.md | 8 +- docs/3.3.x/utility-props.md | 90 ++++++++-------- docs/3.4.x/action-sheet.md | 2 +- docs/3.4.x/alert-dialog.md | 8 +- docs/3.4.x/presence-transition.md | 12 +-- docs/3.4.x/tooltip.md | 8 +- docs/3.4.x/use-accessible-colors.md | 4 +- docs/3.4.x/use-contrast-text.md | 6 +- docs/3.4.x/utility-props.md | 90 ++++++++-------- docs/next/action-sheet.md | 2 +- docs/next/alert-dialog.md | 8 +- docs/next/presence-transition.md | 12 +-- docs/next/tooltip.md | 8 +- docs/next/use-accessible-colors.md | 4 +- docs/next/use-contrast-text.md | 6 +- docs/next/utility-props.md | 90 ++++++++-------- lib/docs/propsMap.js | 156 ++++++++++++++-------------- 33 files changed, 429 insertions(+), 429 deletions(-) diff --git a/docs/3.0.x/action-sheet.md b/docs/3.0.x/action-sheet.md index 6a2d64efd..19fd22b1c 100644 --- a/docs/3.0.x/action-sheet.md +++ b/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 diff --git a/docs/3.0.x/alert-dialog.md b/docs/3.0.x/alert-dialog.md index a3f5672d8..81bf39b88 100644 --- a/docs/3.0.x/alert-dialog.md +++ b/docs/3.0.x/alert-dialog.md @@ -17,7 +17,7 @@ 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 @@ -25,8 +25,8 @@ import { AlertDialog } from 'native-base'; ### 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"} > @@ -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 | | ------------------- | --------- | -------------------------------------------------------------- | ------- | diff --git a/docs/3.0.x/select.md b/docs/3.0.x/select.md index 0268ca229..08816d99f 100644 --- a/docs/3.0.x/select.md +++ b/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,11 +50,11 @@ 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). | - | @@ -62,7 +62,7 @@ import { Select } from 'native-base'; | \_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 | `dialog`, `dropdown` | On Android, specifies how to display the selection items when the user taps on the picker (only for native variant). | `dialog` | | androidIconColor | string | On Android, specifies color of dropdown triangle. Input value can any color from theme like `default.300` (only for native variant). | - | | androidPrompt | 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 diff --git a/docs/3.0.x/tooltip.md b/docs/3.0.x/tooltip.md index 1862f97ad..6a7826d79 100644 --- a/docs/3.0.x/tooltip.md +++ b/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 diff --git a/docs/3.0.x/utility-props.md b/docs/3.0.x/utility-props.md index a2851b9da..6a8d79aaf 100644 --- a/docs/3.0.x/utility-props.md +++ b/docs/3.0.x/utility-props.md @@ -12,8 +12,8 @@ The following table shows a list of every style prop and the properties within e ### Margin and padding ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -64,8 +64,8 @@ export function Example() { ### Color and background color ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center, Text } from "native-base"; const NBBox = (props) => { return ; @@ -81,7 +81,7 @@ function Component() { {/* using theme colors to set text color */} - {' '} + {" "} I ❤️ NativeBase @@ -113,8 +113,8 @@ export function Example() { ### Typography ```jsx isLive=true -import React from 'react'; -import { Text, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Text, NativeBaseProvider, Center } from "native-base"; const NBText = (props) => { return ; @@ -127,15 +127,15 @@ function Component() { Sample Text {/* font-size `32px` */} - Sample Text{' '} + Sample Text{" "} {/* font-size `'2em'` */} {/* font-size of `theme.fontWeights.bold` */} - Sample Text{' '} + Sample Text{" "} {/* text-align `left` on all viewports and `center` from the first breakpoint and up */} - Sample Text + Sample Text ); } @@ -165,8 +165,8 @@ export function Example() { ### Layout, width and height ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -221,8 +221,8 @@ export function Example() { ### Flexbox ```jsx isLive=true -import React from 'react'; -import { Box, Flex, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, Flex, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -277,8 +277,8 @@ export function Example() { ### Borders ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -332,8 +332,8 @@ export function Example() { ### Borders Radius ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -381,8 +381,8 @@ export function Example() { ### Position ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -427,8 +427,8 @@ export function Example() { ### Shadow ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -470,17 +470,17 @@ export function Example() { Provides a way to pass props to child components inside Composite componets. ```jsx isLive=true -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Button, NativeBaseProvider, Center } from "native-base"; function App() { return ( { w="200" h="100" _text={{ - color: 'white', + color: "white", }} shadow={2} > @@ -65,7 +65,7 @@ export const Example = () => { ## Props -```ComponentPropTable path=components,composites,Transitions,PresenceTransition.tsx showStylingProps=true +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true ``` @@ -88,7 +88,7 @@ interface ISupportedTransitions { ```js interface ITransitionStyleProps extends ISupportedTransitions { transition?: { - type?: 'timing' | 'spring', + type?: "timing" | "spring", easing?: (value: number) => number, overshootClamping?: boolean, restDisplacementThreshold?: number, diff --git a/docs/3.4.x/tooltip.md b/docs/3.4.x/tooltip.md index efa3e0440..1992c7bc9 100644 --- a/docs/3.4.x/tooltip.md +++ b/docs/3.4.x/tooltip.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; A tooltip provides a brief, informative message when a user interacts with an element. Methods of tooltip initiation include: through a mouse-hover gesture or a keyboard-hover gesture. ```jsx isShowcase -import React from 'react'; -import { Tooltip, Button } from 'native-base'; +import React from "react"; +import { Tooltip, Button } from "native-base"; export function Example() { return ( @@ -23,7 +23,7 @@ export function Example() { ## Import ```jsx -import { Tooltip } from 'native-base'; +import { Tooltip } from "native-base"; ``` ## Examples @@ -42,7 +42,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=components,composites,Tooltip,CustomTooltip.tsx diff --git a/docs/3.4.x/use-accessible-colors.md b/docs/3.4.x/use-accessible-colors.md index 7878e776a..e0c971dfe 100644 --- a/docs/3.4.x/use-accessible-colors.md +++ b/docs/3.4.x/use-accessible-colors.md @@ -3,12 +3,12 @@ id: use-accessible-colors title: useAccessibleColors --- -`useAccessibleColors` is a custom hook that enhance color settings for better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are off. This allows better color matching to the theme of the app. You can also use this hook if you want to continue using accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](/setup-provider#add-custom-theme-optional). +`useAccessibleColors` is a custom hook that updates your color config for better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are off. You can also use this hook if you want to continue using accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](/setup-provider#h2-add-custom-theme-optional). ## Import ```jsx -import { useAccessibleColors } from 'native-base'; +import { useAccessibleColors } from "native-base"; ``` ## Example diff --git a/docs/3.4.x/use-contrast-text.md b/docs/3.4.x/use-contrast-text.md index 41c0c0888..65d425e7c 100644 --- a/docs/3.4.x/use-contrast-text.md +++ b/docs/3.4.x/use-contrast-text.md @@ -3,12 +3,12 @@ id: use-contrast-text title: useContrastText --- -`useContrastText` is a custom hook that provides color contrast (either `lightText` or `darkText`) to the color being used as a parameter. +`useContrastText` is a custom hook that provides color contrast text color (either `lightText` or `darkText`) against the background color that is passed as a parameter. ## Import ```jsx -import { useContrastText } from 'native-base'; +import { useContrastText } from "native-base"; ``` ## Examples @@ -29,4 +29,4 @@ By default, NativeBase provides contrasting color based on its theme. You can al ## Return value -Accepts and returns a color defined in the theme. +Accepts a background color and returns a text color that maintains the contrast ratio for better accessibility. diff --git a/docs/3.4.x/utility-props.md b/docs/3.4.x/utility-props.md index 44e8c3e57..20281f505 100644 --- a/docs/3.4.x/utility-props.md +++ b/docs/3.4.x/utility-props.md @@ -12,8 +12,8 @@ The following table shows a list of every style prop and the properties within e ### Margin and padding ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -64,8 +64,8 @@ export function Example() { ### Color and background color ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center, Text } from "native-base"; function NBBox(props) { return ; @@ -81,7 +81,7 @@ function Component() { {/* using theme colors to set text color */} - {' '} + {" "} I love NativeBase @@ -121,8 +121,8 @@ Above props can be written in the format: [`color`]:alpha.[`opacityToken`], this
```jsx isLive=true -import React from 'react'; -import { HStack, Stack, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { HStack, Stack, Center, NativeBaseProvider } from "native-base"; function App() { return ( @@ -132,7 +132,7 @@ function App() { bg="primary.400:alpha.30" rounded="md" _text={{ - color: 'white', + color: "white", }} > Box 1 @@ -142,7 +142,7 @@ function App() { bg="primary.400:alpha.70" rounded="md" _text={{ - color: 'white', + color: "white", }} > Box 2 @@ -152,7 +152,7 @@ function App() { size="16" rounded="md" _text={{ - color: 'white', + color: "white", }} shadow="1" > @@ -177,8 +177,8 @@ export function Example() { ### Typography ```jsx isLive=true -import React from 'react'; -import { Text, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Text, NativeBaseProvider, Center } from "native-base"; const NBText = (props) => { return ; @@ -189,7 +189,7 @@ function Component() { <> {/* font-size of `theme.fontSizes.2xl` */} - Thank You{' '} + Thank You{" "} {/* text decoration `underline` */} Merci Beaucoup @@ -227,8 +227,8 @@ export function Example() { ### Layout, width and height ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -283,8 +283,8 @@ export function Example() { ### Flexbox ```jsx isLive=true -import React from 'react'; -import { Box, Flex, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, Flex, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -339,8 +339,8 @@ export function Example() { ### Borders ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -393,8 +393,8 @@ export function Example() { ### Borders Radius ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -442,8 +442,8 @@ export function Example() { ### Position ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -483,8 +483,8 @@ export function Example() { ### Shadow ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -526,17 +526,17 @@ export function Example() { Provides a way to pass props to child components inside Composite components. ```jsx isLive=true -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Button, NativeBaseProvider, Center } from "native-base"; function App() { return ( { w="200" h="100" _text={{ - color: 'white', + color: "white", }} shadow={2} > @@ -65,7 +65,7 @@ export const Example = () => { ## Props -```ComponentPropTable path=components,composites,Transitions,PresenceTransition.tsx showStylingProps=true +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true ``` @@ -88,7 +88,7 @@ interface ISupportedTransitions { ```js interface ITransitionStyleProps extends ISupportedTransitions { transition?: { - type?: 'timing' | 'spring', + type?: "timing" | "spring", easing?: (value: number) => number, overshootClamping?: boolean, restDisplacementThreshold?: number, diff --git a/docs/next/tooltip.md b/docs/next/tooltip.md index efa3e0440..1992c7bc9 100644 --- a/docs/next/tooltip.md +++ b/docs/next/tooltip.md @@ -8,8 +8,8 @@ import { ComponentTheme } from '../src/components'; A tooltip provides a brief, informative message when a user interacts with an element. Methods of tooltip initiation include: through a mouse-hover gesture or a keyboard-hover gesture. ```jsx isShowcase -import React from 'react'; -import { Tooltip, Button } from 'native-base'; +import React from "react"; +import { Tooltip, Button } from "native-base"; export function Example() { return ( @@ -23,7 +23,7 @@ export function Example() { ## Import ```jsx -import { Tooltip } from 'native-base'; +import { Tooltip } from "native-base"; ``` ## Examples @@ -42,7 +42,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=components,composites,Tooltip,CustomTooltip.tsx diff --git a/docs/next/use-accessible-colors.md b/docs/next/use-accessible-colors.md index 7878e776a..e0c971dfe 100644 --- a/docs/next/use-accessible-colors.md +++ b/docs/next/use-accessible-colors.md @@ -3,12 +3,12 @@ id: use-accessible-colors title: useAccessibleColors --- -`useAccessibleColors` is a custom hook that enhance color settings for better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are off. This allows better color matching to the theme of the app. You can also use this hook if you want to continue using accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](/setup-provider#add-custom-theme-optional). +`useAccessibleColors` is a custom hook that updates your color config for better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are off. You can also use this hook if you want to continue using accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](/setup-provider#h2-add-custom-theme-optional). ## Import ```jsx -import { useAccessibleColors } from 'native-base'; +import { useAccessibleColors } from "native-base"; ``` ## Example diff --git a/docs/next/use-contrast-text.md b/docs/next/use-contrast-text.md index 41c0c0888..65d425e7c 100644 --- a/docs/next/use-contrast-text.md +++ b/docs/next/use-contrast-text.md @@ -3,12 +3,12 @@ id: use-contrast-text title: useContrastText --- -`useContrastText` is a custom hook that provides color contrast (either `lightText` or `darkText`) to the color being used as a parameter. +`useContrastText` is a custom hook that provides color contrast text color (either `lightText` or `darkText`) against the background color that is passed as a parameter. ## Import ```jsx -import { useContrastText } from 'native-base'; +import { useContrastText } from "native-base"; ``` ## Examples @@ -29,4 +29,4 @@ By default, NativeBase provides contrasting color based on its theme. You can al ## Return value -Accepts and returns a color defined in the theme. +Accepts a background color and returns a text color that maintains the contrast ratio for better accessibility. diff --git a/docs/next/utility-props.md b/docs/next/utility-props.md index 44e8c3e57..20281f505 100644 --- a/docs/next/utility-props.md +++ b/docs/next/utility-props.md @@ -12,8 +12,8 @@ The following table shows a list of every style prop and the properties within e ### Margin and padding ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -64,8 +64,8 @@ export function Example() { ### Color and background color ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center, Text } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center, Text } from "native-base"; function NBBox(props) { return ; @@ -81,7 +81,7 @@ function Component() { {/* using theme colors to set text color */} - {' '} + {" "} I love NativeBase @@ -121,8 +121,8 @@ Above props can be written in the format: [`color`]:alpha.[`opacityToken`], this
```jsx isLive=true -import React from 'react'; -import { HStack, Stack, Center, NativeBaseProvider } from 'native-base'; +import React from "react"; +import { HStack, Stack, Center, NativeBaseProvider } from "native-base"; function App() { return ( @@ -132,7 +132,7 @@ function App() { bg="primary.400:alpha.30" rounded="md" _text={{ - color: 'white', + color: "white", }} > Box 1 @@ -142,7 +142,7 @@ function App() { bg="primary.400:alpha.70" rounded="md" _text={{ - color: 'white', + color: "white", }} > Box 2 @@ -152,7 +152,7 @@ function App() { size="16" rounded="md" _text={{ - color: 'white', + color: "white", }} shadow="1" > @@ -177,8 +177,8 @@ export function Example() { ### Typography ```jsx isLive=true -import React from 'react'; -import { Text, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Text, NativeBaseProvider, Center } from "native-base"; const NBText = (props) => { return ; @@ -189,7 +189,7 @@ function Component() { <> {/* font-size of `theme.fontSizes.2xl` */} - Thank You{' '} + Thank You{" "} {/* text decoration `underline` */} Merci Beaucoup @@ -227,8 +227,8 @@ export function Example() { ### Layout, width and height ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -283,8 +283,8 @@ export function Example() { ### Flexbox ```jsx isLive=true -import React from 'react'; -import { Box, Flex, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, Flex, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -339,8 +339,8 @@ export function Example() { ### Borders ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -393,8 +393,8 @@ export function Example() { ### Borders Radius ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -442,8 +442,8 @@ export function Example() { ### Position ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -483,8 +483,8 @@ export function Example() { ### Shadow ```jsx isLive=true -import React from 'react'; -import { Box, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Box, NativeBaseProvider, Center } from "native-base"; const NBBox = (props) => { return ; @@ -526,17 +526,17 @@ export function Example() { Provides a way to pass props to child components inside Composite components. ```jsx isLive=true -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; +import React from "react"; +import { Button, NativeBaseProvider, Center } from "native-base"; function App() { return ( + + + + + {children} +
+ + + + + Playground + + + } + h="9" + py="1.5" + space="1.5" + > + + + } + /> + + + {/* + + + } + /> + + */} + + + } + /> + + + + + + setParsedCode(code)} + /> + + + + + + ); +}; + export const Showcase = ( { children, gradient, youtubeEmbedd }: IShowcaseProps, props: any @@ -138,14 +406,23 @@ export const Showcase = ( setLightModeGradientArray(pickLightModeGradient(gradient)); }, []); - const [showCode, setShowCode] = useState(false); - const [showMagicWand, setShowMagicWand] = useState(false); const [gradientIndex, setGradientIndex] = useState("random"); React.useEffect(() => { setDarkModeGradientArray(pickDarkModeGradient(gradientIndex)); setLightModeGradientArray(pickLightModeGradient(gradientIndex)); }, [gradientIndex]); - + const internalProps = { + lightModeGradientArray, + darkModeGradientArray, + setDarkModeGradientArray, + setLightModeGradientArray, + youtubeEmbedd, + expoCode, + activeVersion, + copied, + handleCopy, + setParsedCode, + }; return ( -
{ - setShowMagicWand(true); - }} - onMouseLeave={() => { - setShowMagicWand(false); - }} - minH="48" - px="4" - py="10" - mb="4" - // borderWidth="0" - rounded="lg" - // _dark={{ borderColor: "blueGray.800" }} - // _light={{ borderColor: "blueGray.300" }} - _light={{ - bg: { - linearGradient: { - colors: lightModeGradientArray, - start: [0, 0], - end: [1, 0], - }, - }, - }} - _dark={{ - bg: { - linearGradient: { - colors: darkModeGradientArray, - start: [0, 0], - end: [1, 0], - }, - }, - }} - // _light={{ - // style: { - // // @ts-ignore - // backgroundImage: - // "linear-gradient(135deg," + lightModeGradientArray + ")", - // }, - // }} - // _dark={{ - // style: { - // // @ts-ignore - // backgroundImage: - // "linear-gradient(135deg," + darkModeGradientArray + ")", - // }, - // }} - style={{ - // @ts-ignore - transition: "background-image 1s", - }} - > - {showMagicWand && ( - { - setDarkModeGradientArray(pickDarkModeGradient()); - }, - }} - _light={{ - onPress: () => { - setLightModeGradientArray(pickLightModeGradient()); - }, - }} - _hover={{ _icon: { opacity: "100" } }} - _icon={{ opacity: "60", color: "white" }} - icon={} - position="absolute" - top="2" - right="2" - /> - )} - - - - - - + -
+ {/* { @@ -277,143 +448,6 @@ export const Showcase = ( }} /> */} {/* */} - - - - - Playground - - - } - h="9" - py="1.5" - space="1.5" - > - - - } - /> - - - {/* - - - } - /> - - */} - - - } - /> - - - - - - setParsedCode(code)} - /> - - - - diff --git a/src/new-components/markdown-components/ComponentOfWeek.tsx b/src/new-components/markdown-components/ComponentOfWeek.tsx index c8a060355..b245cf0ed 100644 --- a/src/new-components/markdown-components/ComponentOfWeek.tsx +++ b/src/new-components/markdown-components/ComponentOfWeek.tsx @@ -6,10 +6,16 @@ export function ComponentOfTheWeek({ youtubeEmbedd?: string; }) { return youtubeEmbedd ? ( - +