fix: allow booleans in place of strings

Author: minheq

src/components/Alert/Alert.tsx

@@ -4,17 +4,18 @@ import { View, ViewProps } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { getOverrides, WithOverrides } from '../../utils/overrides';
+import { OptionalString } from '../../utils/types';
 import { Icon, IconProps } from '../Icon';
 import { Text, TextProps } from '../Typography';
 
 export type Intent = 'danger' | 'info' | 'success' | 'warning';
 
 interface AlertBaseProps {
   /** Title of the alert. */
-  title?: string;
+  title?: OptionalString;
 
   /** Description of the alert. */
-  description?: string;
+  description?: OptionalString;
 
   /**
    * Intent of the alert.
@@ -206,12 +207,14 @@ const StyledBody = (props: BodyProps) => {
 };
 
 interface TitleProps extends TextProps, PropsWithIntent {
-  title?: string;
+  title?: OptionalString;
 }
 
 const StyledTitle = (props: TitleProps) => {
   const { title, intent = defaultProps.intent, ...textProps } = props;
 
+  if (!title) return null;
+
   return (
     <Text weight="bold" {...textProps}>
       {title}
@@ -220,12 +223,14 @@ const StyledTitle = (props: TitleProps) => {
 };
 
 interface DescriptionProps extends TextProps, PropsWithIntent {
-  description?: string;
+  description?: OptionalString;
 }
 
 const StyledDescription = (props: DescriptionProps) => {
   const { description, intent = defaultProps.intent, ...textProps } = props;
 
+  if (!description) return null;
+
   return <Text {...textProps}>{description}</Text>;
 };
 

src/components/Badge/Badge.tsx

@@ -6,11 +6,12 @@ import { useTheme } from '../../theme';
 import { ContainerShape, ControlSize, FillColor } from '../../theme/Theme';
 import { isControlSize } from '../../utils/isControlSize';
 import { getOverrides, WithOverrides } from '../../utils/overrides';
+import { OptionalString } from '../../utils/types';
 import { Text, TextProps } from '../Typography';
 
 interface BadgeBaseProps {
   /** Title of the badge */
-  title?: string;
+  title?: OptionalString;
 
   /**
    * Color of the badge
@@ -178,7 +179,7 @@ const StyledRoot = (props: RootProps) => {
 
 interface TitleProps extends TextProps {
   color?: FillColor;
-  title?: string;
+  title?: OptionalString;
   isSolid?: boolean;
 }
 

src/components/Button/Button.tsx

@@ -10,12 +10,13 @@ import {
 import { ButtonColor, ControlSize, Theme, useTheme } from '../../theme';
 import { isControlSize } from '../../utils/isControlSize';
 import { getOverrides, WithOverrides } from '../../utils/overrides';
+import { OptionalString } from '../../utils/types';
 import { Dots } from '../LoadingIndicators';
 import { Text, TextProps } from '../Typography';
 
 interface ButtonBaseProps {
   /** Title of the button */
-  title?: string;
+  title?: OptionalString;
 
   /**
    * The color of the button.
@@ -340,7 +341,7 @@ const getButtonTextColor = (theme: Theme): ButtonTextColors => {
 interface TitleProps extends TextProps {
   size?: ControlSize | number;
   color?: ButtonColor;
-  title?: string;
+  title?: OptionalString;
   appearance?: ButtonAppearance;
   isDisabled?: boolean;
 }
@@ -361,6 +362,8 @@ const StyledTitle = (props: TitleProps) => {
     ? theme.textSizes[size]
     : theme.textSizes.medium;
 
+  if (!title) return null;
+
   return (
     <Text
       weight="bold"
@@ -404,7 +407,7 @@ const StyledLoading = (props: LoadingProps) => {
 interface IconProps extends PropsWithChildren {
   size?: ControlSize | number;
   color?: ButtonColor;
-  title?: string;
+  title?: OptionalString;
   appearance?: ButtonAppearance;
   isDisabled?: boolean;
   isLoading?: boolean;

src/components/Collapsible/Collapsible.tsx

@@ -9,12 +9,13 @@ import {
 
 import { useTheme } from '../../theme';
 import { getOverrides, WithOverrides } from '../../utils/overrides';
+import { OptionalString } from '../../utils/types';
 import { Icon } from '../Icon';
 import { Text, TextProps } from '../Typography';
 
 interface CollapsibleBaseProps {
   /** Title of the collapsible */
-  title?: string;
+  title?: OptionalString;
 
   /** Content revealed when collapsible is opened */
   children?: React.ReactNode;
@@ -167,12 +168,14 @@ const StyledTouchable = (props: TouchableProps) => {
 };
 
 interface TitleProps extends TextProps {
-  title?: string;
+  title?: OptionalString;
 }
 
 const StyledTitle = (props: TitleProps) => {
   const { title, style, ...textProps } = props;
 
+  if (!title) return null;
+
   return (
     <Text size="large" style={[{}, style]} {...textProps}>
       {title}

src/components/Form/FormField.tsx

@@ -4,6 +4,7 @@ import { View, ViewProps } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { getOverrides, WithOverrides } from '../../utils/overrides';
+import { OptionalString } from '../../utils/types';
 import { Label, LabelProps, Text, TextProps } from '../Typography';
 
 type FormFieldLabelPosition = 'top' | 'left' | 'right';
@@ -12,12 +13,12 @@ interface FormFieldBaseProps {
   /**
    * Error message of the field
    */
-  error?: string | false;
+  error?: OptionalString;
 
   /**
    * Label of the field.
    */
-  label?: string | false;
+  label?: OptionalString;
 
   /**
    * Position of the field.
@@ -28,7 +29,7 @@ interface FormFieldBaseProps {
   /**
    * Description of the field.
    */
-  description?: string;
+  description?: OptionalString;
 
   /** Content to wrap FormField with. */
   children?: React.ReactNode;
@@ -112,7 +113,7 @@ const StyledRoot = (props: RootProps) => {
 };
 
 interface DescriptionProps extends TextProps, PropsWithChildren {
-  description?: string | false;
+  description?: OptionalString;
 }
 
 const StyledDescription = (props: DescriptionProps) => {
@@ -137,7 +138,7 @@ const StyledDescription = (props: DescriptionProps) => {
 };
 
 interface ErrorProps extends TextProps, PropsWithChildren {
-  error?: string | false;
+  error?: OptionalString;
 }
 
 const StyledError = (props: ErrorProps) => {

src/components/ListItem/ListItem.tsx

@@ -11,19 +11,20 @@ import {
 
 import { useTheme } from '../../theme';
 import { getOverrides, WithOverrides } from '../../utils/overrides';
+import { OptionalString } from '../../utils/types';
 import { Avatar, AvatarProps } from '../Avatar';
 import { Text, TextProps } from '../Typography';
 
 interface ListItemBaseProps {
   /**
    * Title of the list item
    */
-  title?: string | false;
+  title?: OptionalString;
 
   /**
    * Description of the list item
    */
-  description?: string | false;
+  description?: OptionalString;
 
   /**
    * Source of the avatar
@@ -194,7 +195,7 @@ const StyledTouchable = (props: TouchableProps) => {
 };
 
 interface TitleProps extends TextProps {
-  title?: string | false;
+  title?: OptionalString;
 }
 
 const StyledTitle = (props: TitleProps) => {
@@ -231,7 +232,7 @@ const StyledTextWrapper = (props: TextWrapperProps) => {
 };
 
 interface DescriptionProps extends TextProps {
-  description?: string | false;
+  description?: OptionalString;
 }
 
 const StyledDescription = (props: DescriptionProps) => {

src/components/ListPicker/ListPicker.tsx

@@ -4,6 +4,7 @@ import { FlatList, FlatListProps } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { getOverrides, Override, WithOverrides } from '../../utils/overrides';
+import { OptionalString } from '../../utils/types';
 import { Box } from '../Box';
 import { Checkbox } from '../Checkbox';
 import { ListItem, ListItemProps } from '../ListItem';
@@ -15,7 +16,7 @@ type Value<TIsMulti extends boolean, TValue extends any> = TIsMulti extends true
 export interface ListPickerOption<TValue extends any> {
   value: TValue;
   label: string;
-  description?: string;
+  description?: OptionalString;
 }
 
 interface ListPickerBaseProps<TIsMulti extends boolean, TValue extends any> {
@@ -155,7 +156,7 @@ interface ListPickerItemProps<TValue extends any> {
   onPress?: (value: TValue, index: number, isSelected: boolean) => void;
   value: TValue;
   label: string;
-  description?: string;
+  description?: OptionalString;
   override?: Override<ListPickerItemProps<TValue>, ListItemProps>;
 }
 

src/components/Typography/Label.tsx

@@ -4,6 +4,7 @@ import { Platform, View, ViewProps, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { getOverrides, WithOverrides } from '../../utils/overrides';
+import { OptionalString } from '../../utils/types';
 import { Text, TextProps } from './Text';
 
 type LabelPosition = 'top' | 'left' | 'right';
@@ -12,7 +13,7 @@ interface LabelBaseProps {
   /**
    * Label of the field.
    */
-  label?: string | false;
+  label?: OptionalString;
 
   /**
    * Position of the field.
@@ -139,7 +140,7 @@ const StyledWrapper = (props: WrapperProps) => {
 };
 
 interface LabelTextProps extends TextProps, PropsWithChildren {
-  label?: string | false;
+  label?: OptionalString;
   position?: LabelPosition;
 }
 

src/utils/types.ts

@@ -0,0 +1 @@
+export type OptionalString = string | false | null | undefined;