diff --git a/docs/accessibility.md b/docs/accessibility.md index a59a76697..3ccb492bb 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -11,7 +11,7 @@ NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to ## Accessible Labels -When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://www.notion.so/Accessibility-83852d7c4b094e69a3e4f1047994bd1c) does this for you out of the box. +When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://react-native-aria.geekyants.com/) does this for you out of the box. ## Keyboard Navigation diff --git a/docs/icon.md b/docs/icon.md index b1438011d..4b19156e5 100644 --- a/docs/icon.md +++ b/docs/icon.md @@ -11,14 +11,6 @@ You can use icons in multiple ways in NativeBase: ## Examples -### NativeBase Icons - -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. - -```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx - -``` - ### Basic ```ComponentSnackPlayer path=primitives,Icon,Basic.tsx @@ -27,6 +19,14 @@ We provides a set of commonly used interface icons. So you can directly use them Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). +### NativeBase Icons + +We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. + +```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx + +``` + ### Custom Icon ```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx diff --git a/docs/install-cra.mdx b/docs/install-cra.mdx index 3c319f38b..5cb6b9652 100644 --- a/docs/install-cra.mdx +++ b/docs/install-cra.mdx @@ -62,6 +62,7 @@ cd my-app ```bash yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context ``` + @@ -85,7 +86,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world diff --git a/docs/install-expo.mdx b/docs/install-expo.mdx index 99a117f78..08b909648 100644 --- a/docs/install-expo.mdx +++ b/docs/install-expo.mdx @@ -62,7 +62,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world diff --git a/docs/install-rn.mdx b/docs/install-rn.mdx index 576daca24..7ccf696ff 100644 --- a/docs/install-rn.mdx +++ b/docs/install-rn.mdx @@ -56,7 +56,7 @@ Put the below code in your App.js import React from 'react'; import { NativeBaseProvider, Box } from 'native-base'; -function App() { +export default function App() { return ( Hello world diff --git a/docs/migration/v31tov32.md b/docs/migration/v31tov32.md index d46c07a5c..efa3ee6c6 100644 --- a/docs/migration/v31tov32.md +++ b/docs/migration/v31tov32.md @@ -10,7 +10,7 @@ But like everything comes at a price, `version 3.2.0` also comes with a few brea To upgrade to 3.2.0 just go into your root directory and run the below command. ```bash -npx upgrade native-base-code-mode +npx upgrade native-base-code-mod ``` :::caution diff --git a/docs/nativebase.mdx b/docs/nativebase.mdx index 7f3c5e962..cbdd8b907 100644 --- a/docs/nativebase.mdx +++ b/docs/nativebase.mdx @@ -37,7 +37,7 @@ import TOCInline from '@theme/TOCInline'; /> diff --git a/docs/pseudoProps.md b/docs/pseudoProps.md new file mode 100644 index 000000000..5142576f8 --- /dev/null +++ b/docs/pseudoProps.md @@ -0,0 +1,86 @@ +--- +id: pseudo-props +title: Pseudo Props 101 +--- + +Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. + +## Nesting pseudo props: + +In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind. + +Example: So assume you want to change the text color of a button on its hover state. + +### Do's + +```jsx + +``` + +### Dont's + +```jsx + +``` + +The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . + +## Precedence Order for Pseudo Props: + +Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. + +```jsx +_disabled(100); + +_pressed(70); +_hover(60); +_focus(50); +_focusVisible(55); + +_active(30); +_checked(30); +_readOnly(40); +_invalid(40); + +_web(10); +_android(10); +_ios(10); + +_light(10); +_dark(10); +``` + +```SnackPlayer name=Pseudo%20Props%20Precedence +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Component() { + return ( + // Here you can see _hover will be overrided by _pressed + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/docs/psuedoProps.md b/docs/psuedoProps.md deleted file mode 100644 index 0a7d6a905..000000000 --- a/docs/psuedoProps.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: psuedo-props -title: Psuedo Props 101 ---- - -Before getting into details of all the common Psuedo Props NativeBase has to offer let's check some key points that these psuedo props follow. - -## Nesting psuedo props: - -In versions before 3.2.0 there was a set order in which psuedo props can be nested, but it had a steep learning curve therefore we decided to remove it now. Any psuedo prop can be now nested to any level. With one small thing to keep in mind. - -Example: So assume you want to change the text color of a button on its hover state. - -### Do's - -```jsx - -``` - -### Dont's - -```jsx - -``` - -The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . - -## Precedence Order for Psuedo Props: - -Now all the psuedo props follows a specific order that defines which psuedo prop can override the other psuedo prop. You can find the precedence values associated with each psuedo prop. - -```jsx -_disabled(100); - -_pressed(70); -_hover(60); -_focus(50); -_focusVisible(55); - -_active(30); -_checked(30); -_readOnly(40); -_invalid(40); - -_web(10); -_android(10); -_ios(10); - -_light(10); -_dark(10); -``` diff --git a/nb-plugins/storybook-example-transformer/index.js b/nb-plugins/storybook-example-transformer/index.js index 9df2d7640..514aec533 100644 --- a/nb-plugins/storybook-example-transformer/index.js +++ b/nb-plugins/storybook-example-transformer/index.js @@ -61,7 +61,7 @@ const endingTemplate = ` export default () => { return ( -
+
diff --git a/sidebars.js b/sidebars.js index 8a6ea1169..105821e02 100644 --- a/sidebars.js +++ b/sidebars.js @@ -14,7 +14,7 @@ module.exports = { 'utility-first', 'utility-props-specificity', 'design-tokens', - 'psuedo-props', + 'pseudo-props', 'interaction-styles', 'responsive-style', ], diff --git a/src/css/custom.css b/src/css/custom.css index 3d70403d5..d2f57f78a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -472,7 +472,8 @@ html[data-theme='dark'] .navbar-small { .menu__link[href*='/utility-props']:after, .menu__link[href*='/utility-props-specificity']:after, .menu__link[href*='/color-mode']:after, -.menu__link[href*='/psuedo-props']:after, +.menu__link[href*='/pseudo-props']:after, +.menu__link[href*='/migration/v3.1.0-to-3.2.0']:after, .menu__link[href*='/strict-mode']:after, .menu__link[href*='/default-theme']:after { content: 'New'; diff --git a/versioned_docs/version-3.1.0/default-theme.md b/versioned_docs/version-3.1.0/default-theme.md index 6126f0909..f4412006d 100644 --- a/versioned_docs/version-3.1.0/default-theme.md +++ b/versioned_docs/version-3.1.0/default-theme.md @@ -30,32 +30,28 @@ To manage Typography options, the theme object supports the following keys: ```jsx const typography = { letterSpacings: { - xxs: -1.5, - xs: -0.5, - sm: 0, - md: 0.1, - lg: 0.15, - xl: 0.25, + '2xs': -1.5, + 'xs': -0.5, + 'sm': 0, + 'md': 0.1, + 'lg': 0.15, + 'xl': 0.25, '2xl': 0.4, '3xl': 0.5, '4xl': 1.25, '5xl': 1.5, }, lineHeights: { - none: 1, - shorter: 1.25, - short: 1.375, - base: 1.5, - tall: 1.625, - taller: '2', - 3: '12px', - 4: '16px', - 5: '20px', - 6: '24px', - 7: '28px', - 8: '32px', - 9: '36px', - 10: '40px', + '2xs': 16, + 'xs': 18, + 'sm': 20, + 'md': 22, + 'lg': 24, + 'xl': 28, + '2xl': 32, + '3xl': 40, + '4xl': 48, + '5xl': 64, }, fontWeights: { hairline: 100, @@ -67,19 +63,20 @@ const typography = { bold: 700, extrabold: 800, black: 900, + extrablack: 950, }, fonts: { - heading: '', - body: '', - mono: '', + heading: undefined, + body: undefined, + mono: undefined, }, fontSizes: { - xxs: 10, - xs: 12, - sm: 14, - md: 16, - lg: 18, - xl: 20, + '2xs': 10, + 'xs': 12, + 'sm': 14, + 'md': 16, + 'lg': 18, + 'xl': 20, '2xl': 24, '3xl': 30, '4xl': 36, @@ -100,6 +97,30 @@ The `size` key allows you to customize the global spacing and sizing scale for +## Opacity + +The `opacity` key is mainly used to allow you to define colors opacity using the red-green-blue-alpha (RGBA) model. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. + +```jsx +const opacity = { + 0: 0, + 5: 0.05, + 10: 0.1, + 20: 0.2, + 25: 0.25, + 30: 0.3, + 40: 0.4, + 50: 0.5, + 60: 0.6, + 70: 0.7, + 75: 0.75, + 80: 0.8, + 90: 0.9, + 95: 0.95, + 100: 1, +}; +``` + ## Shadows The `shadow` key allows you to customize the global box shadow for your project. @@ -209,4 +230,4 @@ export default { }; ``` -Still confused? You can always explore [here](https://github.com/GeekyAnts/nativebase-v3/tree/development/src/theme/base). +Still confused? You can always explore [here](https://github.com/GeekyAnts/NativeBase/tree/master/src/theme/base). diff --git a/versioned_docs/version-3.2.0/customizingComponents.md b/versioned_docs/version-3.2.0/customizingComponents.md index def40ff7a..c78a88e27 100644 --- a/versioned_docs/version-3.2.0/customizingComponents.md +++ b/versioned_docs/version-3.2.0/customizingComponents.md @@ -53,14 +53,14 @@ As shown above, we can customize components by passing the **components** object - As the name suggests, it's used to define the base style of a component. - Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object. -Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L5) +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/components/button.ts#L5) #### Default Props - Default props can be used to initialize props of a component. - For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. -Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts#L201) +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/components/button.ts#L201) ```jsx