v3.4.4-rc.0

Merge pull request #4993 from GeekyAnts/release/3.4.4-rc.0

release 3.4.4-rc.0

v3.4.3

Fixes

• Popover close button issue on Android 9b65925
• Unstyled input placeholderText issue b7332c3
• MenuItem Design fixes PR

v3.4.2

Fixes

• Textarea hovered and disabled state issue PR
• Menu focus state issue a47ba36
• Icon consistent sizing 4a5cf9d
• Menu freezing issue on Android ae43d01
• Select press issue on iOS ea38f62
• Slider thumb size, sliderTrackHeight type fixes PR
• Slider hover, pressed, and focus state added fixes PR
• Input rounded prop issue dda0f61
• Modal overlay 544e4f3
• Textarea focus state fixes 8ec8e2a

v3.4.2-rc.0

Merge pull request #4956 from GeekyAnts/release/3.4.2-rc.0

Release/3.4.2 rc.0

v3.4.1

Fixes

• Slider colorScheme prop issue e9ae1f9

v3.4.0

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/succe...

v3.4.0-rc.12

Merge pull request #4913 from GeekyAnts/release/3.4.0-rc.12

Release/3.4.0 rc.12

v3.4.0-rc.11

Merge pull request #4908 from GeekyAnts/release/3.4.0-rc.11

Release/3.4.0 rc.11

v3.3.12

Fixes

• Input, TextArea platform typing improvement (_web, _ios, _android, _light, _dark) 23baa80
• AlertDialog flicker issue cec6f16
• Checkbox.Group - multiple checkbox selection issue ad12bc9

v3.3.11

Fixes

• Typing improvement
• Menu and Popover position issue fixes