fix: bottom navigation navigation state type correction (#4223)

Author: lukewalczak

docs/src/css/custom.css

@@ -222,6 +222,7 @@ a .badge .badge-text {
   border-color: rgba(98, 0, 238, 1);
 }
 
+.badge-deprecatedProperty,
 .badge-deprecated {
   color: rgba(176, 0, 32, 1);
   background-color: rgba(176, 0, 32, 0.2);

src/components/BottomNavigation/BottomNavigation.tsx

@@ -26,6 +26,9 @@ export type BaseRoute = {
   focusedIcon?: IconSource;
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
+  /**
+   * @deprecated In v5.x works only with theme version 2.
+   */
   color?: string;
   accessibilityLabel?: string;
   testID?: string;

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -40,6 +40,9 @@ type BaseRoute = {
   focusedIcon?: IconSource;
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
+  /**
+   * @deprecated In v5.x works only with theme version 2.
+   */
   color?: string;
   accessibilityLabel?: string;
   testID?: string;
@@ -94,7 +97,7 @@ export type Props<Route extends BaseRoute> = {
    * - `title`: title of the route to use as the tab label
    * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
    * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
-   * - `color`: color to use as background color for shifting bottom navigation @deprecated Deprecated in v5.x
+   * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2.
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
    * - `accessibilityLabel`: accessibility label for the tab button
    * - `testID`: test id for the tab button

src/components/FAB/FAB.tsx

@@ -64,7 +64,7 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    */
   animated?: boolean;
   /**
-   *  @deprecated Deprecated in v.3x - use prop size="small".
+   *  @deprecated Deprecated in v.5x - use prop size="small".
    *
    *  Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
    */