Bot releases are visible (Hide)

NativeBase - v3.4.4-rc.0

Published by rayan1810 over 2 years ago

NativeBase - v3.4.3

Published by surajahmed over 2 years ago

Fixes

Popover close button issue on Android https://github.com/GeekyAnts/NativeBase/pull/4961/commits/9b659252c92bd1af55059262f60fba58332fffb8
Unstyled input placeholderText issue https://github.com/GeekyAnts/NativeBase/pull/4962/commits/b7332c3a86c9cafb144598ca508b39c0c73e80bf
MenuItem Design fixes PR

NativeBase - v3.4.2

Published by surajahmed over 2 years ago

Fixes

Textarea hovered and disabled state issue PR
Menu focus state issue https://github.com/GeekyAnts/NativeBase/pull/4939/commits/a47ba362a951f97fe1c2d07a026447a642d53c06
Icon consistent sizing https://github.com/GeekyAnts/NativeBase/pull/4943/commits/4a5cf9d5a5ac35e790881745345d1176c88e49b5
Menu freezing issue on Android https://github.com/GeekyAnts/NativeBase/pull/4946/commits/ae43d012c2da98939f3accc518fd699b11c0e5e6
Select press issue on iOS https://github.com/GeekyAnts/NativeBase/pull/4948/commits/ea38f62985300a18e9f64c7fbba9e42678e79556
Slider thumb size, sliderTrackHeight type fixes PR
Slider hover, pressed, and focus state added fixes PR
Input rounded prop issue https://github.com/GeekyAnts/NativeBase/pull/4953/commits/dda0f61f8fa088b662639fff4094462b9c21bc0b
Modal overlay https://github.com/GeekyAnts/NativeBase/pull/4949/commits/544e4f3ecec5720e4e2e9787949e0afe555ef578
Textarea focus state fixes https://github.com/GeekyAnts/NativeBase/pull/4955/commits/8ec8e2a6e5cf506fd4fa3a894b21569b893cb498

NativeBase - v3.4.2-rc.0

Published by surajahmed over 2 years ago

NativeBase - v3.4.1

Published by surajahmed over 2 years ago

Fixes

Slider colorScheme prop issue https://github.com/GeekyAnts/NativeBase/commit/e9ae1f9413250dd3b3011d30603191e1d80eefeb

NativeBase - v3.4.0

Published by surajahmed over 2 years ago

Changes:

Foundation

Added new color tokens for text.
All colors checked with WCAG 3.0’s APCA accessibility.
Updated derived colors for danger, error, success, and tertiary.
Added letter-spacing in headings.

Theme Decoupling

In 3.4 we have completely decoupled the theme. All the internal design props are now transferred to the theme.
This will allow you to use multiple theme files in your project and toggle between them efficiently.

New Props added.

Input
- focusOutlineColor lets you change outlineLine color of input when input is in focused State.
- invalidOutlineColor lets you change outlineLine color of input when input is in invalid state.

Breaking Changes:

With this release, there were some breaking changes introduced, majorly on the Design front. Apart from the API changes, all other things can be patched with the use of extendTheme. The doc for the same is provided [here](https://docs.nativebase.io/migration/v33xtov34x).

Design Changes.

Alert
- All solid colors for light theme are in the hue of 700. i.e. info.700, success.700, warning.700 and error.700.
- All solid colors for dark theme are in the hue of 600. i.e. info.600, success.600, warning.600 and error.600.
- Subtle colors for light and dark theme are in the hue of 200. i.e. info.200, success.200, warning.200 and error.200.
- Light outline borders are in opacity of 40%:
  - Light theme
    - info.700:alpha.40
    - success.700:alpha.40
    - warning.700:alpha.40
    - error.700:alpha.40
  - Dark theme
    - info.600:alpha.40
    - success.600:alpha.40
    - warning.600:alpha.40
    - error.600:alpha.40
Progress
- Track color changed from primary.200 to muted.200 in light theme and primary.200 to muted.700 in dark theme.
- Indicator color changed from primary.500 to primary.400 in dark theme.
Spinner
- Indicator color changed from cyan.400 to primary.600.
- Track color changed from cyan.400/20% to primary.600:alpha.20
Actionsheet
- Background colors on light theme changed from coolgray.50 to muted.50.
- Background colors on dark theme changed from gray.700 to muted.800.
- Text colors of title (light theme)changed from gray.500 to muted.500.
- Text colors of title (dark theme)changed from gray.300 to muted.400.
- Text colors of body (light theme)changed from coolgray.800 to text.900.
- Text colors of title (dark theme)changed from light.50 to text.50.
- Icon colors for light theme changed from truegray.400 to muted.500.
- Text colors of title (dark theme)changed from truegray.400 to muted.400.
AlertDialog
- Background color in light theme changed from coolgray.50 to muted.50.
- Background color in dark theme changed from gray.700 to muted.800.
- Text colors in light theme changed from coolgray.600 to text.900
- Text colors in dark theme changed from coolgray.300 to text.50
- Title color in light theme changed from coolgray.800 to text.900
- Title color in dark theme changed from warmgray.50 to text.900
Modal
- Background color in light theme changed from coolgray.50 to muted.50
- Background color in dark theme changed from gray.700 to muted.800
- Text colors in light theme changed from coolgray.600 to text.900
- Text colors in dark theme changed from coolgray.300 to text.50
- Title color in light theme changed from coolgray.800 to text.900
- Title color in light theme changed from coolgray.800 to text.900
Popover & Menu
- Background color in light theme changed from singletone/white to muted.50
- Background color in dark theme changed from gray.700 to muted.800.
- Text colors in light theme changed from:
  - Primary - coolgray.800 to text.900
  - Secondary - gray.500 to text.500
- Text colors in dark theme changed from:
  - Primary - warmgray.50 to text.50
  - Secondary - gray.300 to text.400
Tooltip
- Background color in light theme changed from gray.700 to muted.800
- Background color in dark theme changed from gray.300 to muted.50
- Text colors in light theme changed from gray.300 to text.50
- Text colors in dark theme changed from gray.700 to text.900
Slider
- Added states - Default, hover, focused, entered, error and disabled.
- Track color is muted.200 on light theme & muted.700 on dark theme.
- Thumb color is primary.600 on light theme & primary.500 on dark theme.
Radio
- Added states - Default, hover, focused, entered, error and disabled.
- Label color is text.900 on light theme & text.50 on dark theme.
- Radio color is muted.400 on light theme & muted.500 on dark theme.The color changes on state.
- Removed interactionBox scaling animation design for hover state.
Checkbox
- Label color is text.900 on light theme & text.50 on dark theme.
- Checkbox color is muted.400 on light theme & muted.500 on dark theme.The color changes on state.
- Removed interactionBox scaling animation design for hover state.
Switch
- Inactive switch - Track color is muted.300 on light theme & muted.700 on dark theme.
- Active switch - Track color is primary.600 on light theme & primary.500 on dark theme.
- Inactive & active switch - Thumb color is muted.50 on both light & dark theme.
Icon Button
- Base color is primary.600 on light theme & primary.500 on dark theme. The color changes on state.
- Icon color is muted.900 on light theme and muted.50 on dark theme.
Button
- Padding
  - Padding for xs button and sm buttons are 8px on top & bottomn and 12px on left & right.
  - Padding for lg buttons are 12px on top & bottom and 12px on left & right.
  - Padding for md buttons are 10px on top & bottom and 12px on left & right.
- Base Color
  - Base color for subtle style buttons/dark theme are primary.300, secondary.300 & tertiary.300 for light theme.
  - Base color for subtle style buttons/light theme are primary.100, secondary.100 & tertiary.100 for light theme.
  - Base color for solid style buttons are primary.600, secondary.600 & tertiary.600 for both light & dark theme.
- Text Color
  - Text colors in outline, ghost & link has primary.600, secondary.600 & tertiary.600 for light & primary.500, secondary.500 & tertiary.500 on dark theme.
  - Text colors in unstyled has text color of text.900 for light & text.50 on dark theme.
  - Text colors in subtle style has text color of primary.900, secondary.900 & tertiary.900 for light & dark theme.
  - Text colors in solid style light & dark theme has text color of text.50
- Icon
  - Icon colors in solid style are muted.100 for light & dark theme.
  - Icon colors in subtle style is primary.900, secondary.900 & tertiary.900 for light & dark theme.
  - Icon colors in outline, ghost & link has primary.600, secondary.600 & tertiary.600 for light & primary.500, secondary.500 & tertiary.500 on dark theme.
  - Icon colors in unstyled has text color of text.900 for light & text.50 on dark theme.
  - Removed xxs from sizes. Use 2xs size instead.
- Disabled states has opacity of 40%
Input including Addons, Input, Form Control & Text Area
- Default Input font-size changed from 12px to 14px.
- Input including Addons, Input, Form Control & Text Area
- Added background of muted.50 to light theme left and right addons
- Added states - Default, hover, focused, entered, error and disaabled.
- Hover states have 1px primary.600 stroke.
- Focused states have a stroke of 2px primary.600 on light theme and primary.500 on dark theme and Primary.600:alpha.10 background for both light & dark theme.
- Error state has stroke of 2px error.600 on light light theme and error.500 on dark theme.
- Text colors in light theme/default state has text.400
- Text colors in dark theme/default state has text.600
- Text colors in light theme/focused state has text.900 and in ‘md’ font thickness.
- Text colors in dark theme/focused state has text.50 and in ‘md’ font thickness.
- Text colors in light theme/entered state has text.900 and in ‘regular’ font thickness.
- Text colors in dark theme/entered state has text.50 and in ‘regular’ font thickness.
- All disabled state has 40% opacity.
- Left & right padding is 12px and top & bottom 8px.
- Label and helper text colour is text.500 on light theme and text.400 on dark theme.
- Icon colour in light theme is muted.500 and muted.400 on dark theme.
- Add on background colour in light theme is muted.50.
- Add on background colour in dark theme is muted.800.
- Add on Text colors in light theme is text.900 and in ‘regular’ font thickness.
- Add on Text colors in dark theme is text.50 and in ‘regular’ font thickness.
Divider
- Divider in light theme is muted.300 and muted.700 on dark theme.
Badge
- Added new warning variant.
- Added a variant with icon.
- Text color in light theme/solid changed from coolgray.100 to text.50
- Text color in dark theme/solid changed from coolgray.800 to text.50
- Text colors in light theme/subtle changed from 600 values to 900
- Text colors in dark theme/subtle changed from 200 values to 900
- Text colors in light theme/outline changed from 500 values to 600
- Text colors in dark theme/outline changed from 400 values to 300
- Background color in light theme/solid/default changed from coolgray.600 to muted.600
- Background color in dark theme/solid/default changed from coolgray.300 to muted.600
- Background color in light theme/solid/success changed from emerald.600 to success.600
- Background color in dark theme/solid/success changed from emerald.300 to success.600
FAB
- Base color changed to primary.600 in both light theme and dark theme.

API Changes

Toast

status and variant props of Toast are deprecated. We have added status and variant recipes in docs https://docs.nativebase.io/toast.

Pseudo Props

We have added new Pseudo Props to give more control to the user. Detailed List and working of Pseudo Prop.

Pseudo Props for Color Modes

Updated theme using _light and _dark props for light mode and dark mode respectively.

Internal props will still have higher specificity, as it will override platform props as well as color mode props.

Composites

Actionsheet.Content
- _dragIndicator
- _dragIndicatorWrapperOffSet
  - _dragIndicatorWrapper
Alert
- _icon
AlertDialog
- _backdrop
- _backdropFade
- _fade
- _slide
AlertDialog.CloseButton
- _icon
Avatar
- _image
- Group
  - _avatar
  - _hiddenAvatarPlaceholder
FormtControl.ErrorMessage
- _text
- _stack
FormControl.Label
- _astrick
IconButton
- _icon
Menu
- _overlay
- _presenceTransition
- _backdrop
Menu.Group
- _title
Menu.Item
- _text
Menu.ItemOption
- _icon
- _stack
- _text
Modal
- _backdrop
- _backdropFade
- _fade
- _slide
Modal.Body
- _scrollView
Modal.CloseButton
- _icon
Popover.CloseButton
- _icon
Skeleton.Text
- _line
Toast
- _title
- _description
- _closeIcon

Primitives

Button
- _text
- _stack
- _spinner
Checkbox
- _interactionBox
- _icon
- _stack
- _text
Checkbox.Group
- _checkbox
Image
- _alt
Input
- _stack
- _input
- _webInputBase
Radio
- _interactionBox
- _icon
- _stack
- _text
Radio.Group
- _radio
Select
- _item
- _selectedItem
- _actionSheetContent
- _actionsheetBody
- _webSelect
Select.Item
- _selectedItem
- _item
Slider.Track
- _pressable