Skip to content
This repository has been archived by the owner on Sep 25, 2022. It is now read-only.

fix(deps): update dependency native-base to v3 #21

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(deps): update dependency native-base to v3 #21

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link

@renovate renovate bot commented Jul 4, 2021 •
edited
Loading

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
native-base ^2.15.2 -> ^3.0.0 age adoption passing confidence

Release Notes

GeekyAnts/NativeBase

v3.4.7

Compare Source

Fixes

v3.4.6

Compare Source

Fixes:

v3.4.5

Compare Source

HotFix:
  • Typo fix changed prop name in Input from inValidOutlineColor to invalidOutlineColor.

v3.4.4

Compare Source

Fixes
  • Checkbox multiple rerender in Checkbox.Group .

v3.4.3

Compare Source

Fixes

v3.4.2

Compare Source

Fixes

v3.4.1

Compare Source

Fixes

v3.4.0

Compare Source

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

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
Extend previous version's theme for backward compatibility.

You need to add v33xTheme to your NativeBaseProvider which preserves all the old design that was changed or removed in `v3.4.0.

v3.3.12

Compare Source

Fixes

v3.3.11

Compare Source

Fixes
  • Typing improvement
  • Menu and Popover position issue fixes

v3.3.10

Compare Source

Fixes

v3.3.9

Compare Source

Fixes

v3.3.8

Compare Source

Fixes

v3.3.7

Compare Source

Fixes

v3.3.6

Compare Source

Fixes
Changes

v3.3.5

Compare Source

Fixes

v3.3.4

Compare Source

Fixes

v3.3.3

Compare Source

Fixes

v3.3.2

Compare Source

Fixes

v3.3.1

Compare Source

Fixes

v3.3.0

Compare Source

Fixes

Changes

v3.2.2

Compare Source

Fixes

  • Fix FormControlErrorMessage rendering PR
  • Fix shadow/opacity not working with Input PR
  • Fix dependency issues when installing with npm 7+ PR
  • Fix Text variant typing PR
  • Fix textAlign property PR
  • Fix nested text styling PR
  • Fix TextArea alignment on Android PR
  • Fix SSRProvider warning PR
  • Avatar group flex direction error PR

Changes

  • Removed styled components and styled system dependencies PR
  • Added prop to control Scrollview in Modal.Body PR
  • Added tintColor prop for Image PR

v3.2.1

Compare Source

v3.2.1

Features

TypeScript enhancement for custom theme tokens and variants - PR

Fixes

  • Overlay press not closing ActionSheet - PR
  • Background prop - PR
  • Radio error message when not in Group - PR
  • theme[\_base.themePropertyMap[property]] is not a function error - PR
  • Button loading style not working - PR
  • Select component height prop not working - PR
  • Spinner size prop typings - PR
  • Replace Clipboard with @​react-native-clipboard/clipboard - PR
  • Typing fixes on Stack and Modal - PR
  • Select items appear behind keyboard - PR

v3.2.0

Compare Source

Minor update

Changes

Fixes

  • Responsive SSR fixes
  • Improved typing

Migration from 3.x to 3.2.0:

Migration guide

v3.1.0

Compare Source

Fixes
Features

v3.0.7

Compare Source

Minor Fix
  • Added a feature to suppress accessible color warning #​3849
  • Fixed support for numberOfLines props on Text #​3852
  • Fixed _text not working in Link component's baseStyle/variants #​3854
  • Fixed custom id not being passed in a custom toast #​3870
  • Exported IPressableProps #​3872
  • Fixed Overlay/Backdrop cursor pointer issue. #​3880
  • Fixed Avatar.Badge conditional rendering #​3885
  • Added _backdrop prop in actionsheet and modal to apply styles to backrop(overlay) #​3886
  • Added typings for left and right for placement prop in Slide. #​3889
  • Added xxs typing for fontSize in Text. #​3890
  • Added support for React.Fragment as Children in Box. #​3891
  • Fixed Stack space extend issue. #​3897
  • Fixed Radio Size issue on happening on iOS and Android. #​3913

v3.0.6

Compare Source

Minor fix
  • Spinner visibility issue fixed

v3.0.5

Compare Source

Minor fix
  • Fixed bold and italics issue in typography

v3.0.4

Compare Source

Version bump from 3.0.3 to 3.0.4
  • Add tokenised fontFamily support in Input #​3796
  • Make drag indicator optional in actionsheet #​3797
  • Export Toast TS props definition #​3795
  • Set fontFamily to heading in Heading component #​3788
  • Fix SSR not working #​3786
  • Fix box with linear gradient warning #​3777
  • Add color prop in Select's TS definition #​3779
  • Remove additional wrapper from Checkbox group #​3798
  • Add a prop to render FAB outside of portal #​3829
  • Fix input padding(top/bottom) not working on android #​3825
  • Fix custom fonts not working on android for some cases #​3821

v3.0.3

Compare Source

Version update from v3.0.2 to v3.0.3

Features

  • [Android] Shift accessibility focus on modal open
  • Disabled style in button
  • Drag indicator in ActionSheet

Fixes

  • Radio and checkbox accessibility warnings on web
  • Modal multiple clicks lead to screen freeze on web
  • Select scrolling fix for long list
  • ActionSheet flicker on swipe
  • Add safearea bottom inset in ActionSheet
  • Select option invisible on iOS (Safari)
  • Platform props type definitions fixes in Basic components
  • Button type fixes

v3.0.2

Compare Source

Version bump

  • Version bumped from v3.0.1 to v3.0.2

v3.0.1

Compare Source

Image link fixes in README.md

  • Images are working in NPM

v3.0.0

Compare Source

Features

  • Exported styled variants of React native core components
  • Added _focusVisible prop in Pressable to support focus styling when keyboard is being used on web. Docs

Fixes

  • Fixed useClipboard - onCopy not working on Native
  • Fixed Text component to accept strikeThrough and underline

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by Mend Renovate. View repository job log here.

@renovate renovate bot force-pushed the renovate/native-base-3.x branch 2 times, most recently from 641fac0 to efb9d11 Compare August 7, 2021 11:27
@renovate renovate bot force-pushed the renovate/native-base-3.x branch 2 times, most recently from c961771 to 660a1ac Compare November 7, 2021 10:09
@renovate renovate bot force-pushed the renovate/native-base-3.x branch from 660a1ac to c9b98d2 Compare November 7, 2021 14:17
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@renovate-bot