@utilitywarehouse/hearth-react-native 0.17.0 → 0.19.0

package/src/components/BodyText/BodyText.tsx

@@ -43,7 +43,7 @@ const BodyText = ({
         : {})}
       style={[
         styles.text,
-        styles.getColours(color, textDecorationColor),
+        props.style,
         {
           ...(textTransform && { textTransform }),
           ...(textAlign && { textAlign }),
@@ -53,7 +53,7 @@ const BodyText = ({
           ...(userSelect && { userSelect }),
           ...(textAlignVertical && { textAlignVertical }),
         },
-        props.style,
+        styles.getColours(color, textDecorationColor),
       ]}
     >
       {children}

package/src/components/Box/Box.props.ts

@@ -6,6 +6,7 @@ import type {
   ColorValue,
   OpacityValue,
   SpaceValue,
+  SpacingValues,
 } from '../../types';
 
 export type OmittedStyles = Omit<
@@ -223,12 +224,18 @@ export interface ThemedBoxViewStyleProps {
   borderWidth?: BordeWidthValue;
 }
 
+interface CustomBoxProps {
+  // Custom props
+  as?: React.ElementType;
+  spacing?: SpacingValues;
+}
+
 export interface BoxProps
-  extends BoxStyleMappingValues,
+  extends
+    BoxStyleMappingValues,
     ThemedBoxViewStyleProps,
     OtherBoxViewStyles,
-    ViewProps {
-  as?: React.ElementType;
-}
+    ViewProps,
+    CustomBoxProps {}
 
 export default BoxProps;

package/src/components/Button/Button.docs.mdx

@@ -164,12 +164,12 @@ const MyComponent = () => {
 
 | Property        | Type                                                     | Description                                                    | Default |
 | --------------- | -------------------------------------------------------- | -------------------------------------------------------------- | ------- |
-| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Set the direction of Button group to vertical or horizontal    | 'row'   |
+| `flexDirection` | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'` | Set the direction of Button group to vertical or horizontal    | `'row'` |
 | `disabled`      | `boolean`                                                | When true, this will disable all the buttons in a ButtonGroup. | `false` |
 | `loading`       | `boolean`                                                | When true, this will show a loading spinner in all buttons.    | `false` |
 | `attached`      | `boolean`                                                | When attached, all buttons will be attached to each other.     | `false` |
 | `reversed`      | `boolean`                                                | To reverse the order of components.                            | `false` |
-| `space`         | `string`                                                 | It sets the space between different buttons.                   | 'md'    |
+| `spacing`       | `string`                                                 | It sets the space between different buttons.                   | `'md'`  |
 
 ### `ButtonIcon`
 

package/src/components/Button/Button.stories.tsx

@@ -108,7 +108,7 @@ export const Variants: Story = {
     // @ts-expect-error - This is a playground
     const icon = _icon === 'none' ? undefined : Icons[_icon];
     return (
-      <ButtonGroup flexDirection="column" space="md">
+      <ButtonGroup flexDirection="column" spacing="md">
         <>
           {args.colorScheme === 'highlight' && (
             <VariantTitle title="Emphasis" invert={args.inverted}>
@@ -149,9 +149,9 @@ export const KitchenSink: Story = {
     const schemes: Array<ColorScheme> = ['highlight', 'destructive', 'affirmative', 'functional'];
     const variants: Array<Variant> = ['emphasis', 'solid', 'outline', 'ghost'];
     return (
-      <Flex direction="row" space="lg" wrap="wrap">
+      <Flex direction="row" spacing="lg" wrap="wrap">
         {schemes.map(scheme => (
-          <Flex direction="column" space="lg" key={scheme}>
+          <Flex direction="column" spacing="lg" key={scheme}>
             {variants
               .filter(variant => {
                 if (inverted) {
@@ -178,7 +178,7 @@ export const KitchenSink: Story = {
                       {scheme} - {variant}
                     </DetailText>
                   </Box>
-                  <Flex direction="column" space="lg">
+                  <Flex direction="column" spacing="lg">
                     <VariantTitle title="Default" invert={inverted}>
                       {/* @ts-expect-error - story loop types don't match */}
                       <Button

package/src/components/Button/ButtonGroupRoot.tsx

@@ -7,13 +7,18 @@ const ButtonGroupRoot = ({
   attached = false,
   flexDirection = 'row',
   reversed = false,
-  space = 'md',
+  spacing = 'md',
+  space,
   ...props
 }: ViewProps & {
   flexDirection?: ViewStyle['flexDirection'];
   reversed?: boolean;
   attached?: boolean;
+  /**
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release
+   */
   space?: SpacingValues;
+  spacing?: SpacingValues;
 }) => {
   let direction = flexDirection;
   if (reversed) {
@@ -24,7 +29,7 @@ const ButtonGroupRoot = ({
   }
   styles.useVariants({
     attached,
-    space,
+    spacing: space ?? spacing,
   });
   return (
     <View
@@ -41,7 +46,7 @@ ButtonGroupRoot.displayName = 'ButtonGroupRoot';
 const styles = StyleSheet.create(theme => ({
   text: {
     variants: {
-      space: {
+      spacing: {
         none: {
           gap: theme.layout.mobile.spacing.none,
         },

package/src/components/Card/Card.context.ts

@@ -7,7 +7,7 @@ interface CardContextProps {
   hasActions?: boolean;
   hasContent?: boolean;
   hasOnlyActions?: boolean;
-  space?: CardProps['space'];
+  spacing?: CardProps['spacing'];
   variant?: CardProps['variant'];
 }
 

package/src/components/Card/Card.docs.mdx

@@ -137,7 +137,7 @@ import {
 
 const MyComponent = () => (
   <Card variant="emphasis" colorScheme="neutralSubtle">
-    <Flex space="md" direction="column" align="stretch">
+    <Flex spacing="md" direction="column" align="stretch">
       <Heading size="md">Heading</Heading>
       <BodyText>Content</BodyText>
       <CardPressHandler>

package/src/components/Card/Card.props.ts

@@ -24,6 +24,8 @@ interface CardProps extends PressableProps {
     | 'pig';
   noPadding?: boolean;
   disabled?: boolean;
+  spacing?: SpacingValues;
+  /** @deprecated Use `spacing` instead. The `gap` prop will be removed in a future release. */
   space?: SpacingValues;
   alignItems?: ViewStyle['alignItems'];
   justifyContent?: ViewStyle['justifyContent'];

package/src/components/Card/Card.stories.tsx

@@ -77,7 +77,7 @@ export const Playground: Story = {
 export const WithActions: Story = {
   render: ({ children, ...props }) => {
     return (
-      <Card {...props} flexDirection="column" alignItems="stretch" space="md" variant="emphasis">
+      <Card {...props} flexDirection="column" alignItems="stretch" spacing="md" variant="emphasis">
         <BodyText>{children as string}</BodyText>
         <CardActions>
           <CardAction
@@ -110,7 +110,7 @@ export const WithOnlyAction: Story = {
   },
   render: ({ ...props }) => {
     return (
-      <Card {...props} flexDirection="column" alignItems="stretch" space="md">
+      <Card {...props} flexDirection="column" alignItems="stretch" spacing="md">
         <CardActions>
           <CardAction
             onPress={() => console.log('Card action pressed')}
@@ -130,7 +130,7 @@ export const Variants: Story = {
   },
   render: ({ children, ...props }) => {
     return (
-      <Flex space="lg">
+      <Flex spacing="lg">
         <VariantTitle title="Subtle - White">
           <Card {...props} variant="subtle" colorScheme="neutralStrong">
             <BodyText>{children as string}</BodyText>
@@ -235,7 +235,7 @@ export const WithShadow: Story = {
   },
   render: ({ children, ...props }) => {
     return (
-      <Flex space="lg">
+      <Flex spacing="lg">
         <VariantTitle title="Subtle - White - Shadow">
           <Card {...props} variant="subtle">
             <BodyText>{children as string}</BodyText>
@@ -257,14 +257,14 @@ export const Interactive: Story = {
   },
   render: ({ children, ...props }) => {
     return (
-      <Flex space="lg">
+      <Flex spacing="lg">
         <VariantTitle title="Pressable - Subtle - White">
           <Card
             {...props}
             onPress={() => console.log('pressed')}
             variant="subtle"
             colorScheme="neutralStrong"
-            space="md"
+            spacing="md"
             flexDirection="column"
             alignItems="stretch"
           >
@@ -279,7 +279,7 @@ export const Interactive: Story = {
             onPress={() => console.log('pressed')}
             variant="emphasis"
             colorScheme="neutralStrong"
-            space="md"
+            spacing="md"
             flexDirection="column"
             alignItems="stretch"
           >
@@ -294,7 +294,7 @@ export const Interactive: Story = {
             onPress={() => console.log('pressed')}
             variant="subtle"
             colorScheme="neutralSubtle"
-            space="md"
+            spacing="md"
             flexDirection="column"
             alignItems="stretch"
           >
@@ -308,7 +308,7 @@ export const Interactive: Story = {
             {...props}
             variant="emphasis"
             colorScheme="neutralSubtle"
-            space="md"
+            spacing="md"
             flexDirection="column"
             alignItems="stretch"
           >

package/src/components/Card/CardAction/CardAction.stories.tsx

@@ -175,7 +175,7 @@ export const WithBadge: Story = {
     controls: { include: [] },
   },
   render: () => (
-    <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
+    <Flex direction="column" spacing="md" style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
         <CardActions>
           <CardAction
@@ -221,7 +221,7 @@ export const Sizes: Story = {
     controls: { include: [] },
   },
   render: () => (
-    <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
+    <Flex direction="column" spacing="md" style={{ width: '100%', maxWidth: 400 }}>
       <Card variant="emphasis">
         <CardActions>
           <CardAction

package/src/components/Card/CardContent.tsx

@@ -3,10 +3,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useCardContext } from './Card.context';
 
 const CardContent = ({ children, style, ...props }: ViewProps) => {
-  const { noPadding, space } = useCardContext();
+  const { noPadding, spacing } = useCardContext();
   styles.useVariants({
     noPadding,
-    space,
+    spacing,
   });
   return (
     <View style={[styles.container, style]} {...props}>
@@ -20,7 +20,7 @@ CardContent.displayName = 'CardContent';
 const styles = StyleSheet.create(theme => ({
   container: {
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
       noPadding: {
         true: {
           padding: theme.components.card.mobile.paddingNone,

package/src/components/Card/CardRoot.tsx

@@ -22,10 +22,10 @@ const Card = ({
   noPadding = false,
   style,
   states,
+  spacing,
   space,
   disabled = false,
   onPress,
-
   ...rest
 }: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || { active: false };
@@ -57,10 +57,20 @@ const Card = ({
       hasActions,
       hasContent,
       hasOnlyActions,
-      space,
+      spacing: space ?? spacing,
       variant,
     }),
-    [showPressed, active, hasActions, hasContent, hasOnlyActions, noPadding, space, variant]
+    [
+      showPressed,
+      active,
+      hasActions,
+      hasContent,
+      hasOnlyActions,
+      noPadding,
+      space,
+      spacing,
+      variant,
+    ]
   );
 
   styles.useVariants({
@@ -70,7 +80,7 @@ const Card = ({
     active,
     showPressed,
     disabled,
-    space: hasActions || hasContent || hasOnlyActions ? 'none' : space,
+    spacing: hasActions || hasContent || hasOnlyActions ? 'none' : spacing,
     shadowColor,
   });
 
@@ -116,7 +126,7 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'flex-start',
     borderRadius: theme.components.card.borderRadius,
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
       variant: {
         subtle: {
           borderWidth: theme.components.card.neutral.subtle.borderWidth,

package/src/components/Checkbox/CheckboxGroupTextContent.tsx

@@ -1,9 +1,9 @@
-import FlexProps from '../Flex/Flex.props';
 import { Flex } from '../Flex';
+import FlexProps from '../Flex/Flex.props';
 
 const CheckboxGroupTextContent = ({ children, ...props }: FlexProps) => {
   return (
-    <Flex direction="column" space="none" {...props}>
+    <Flex direction="column" spacing="none" {...props}>
       {children}
     </Flex>
   );

package/src/components/Checkbox/CheckboxTextContent.tsx

@@ -4,7 +4,7 @@ import FlexProps from '../Flex/Flex.props';
 
 const CheckboxTextContent = ({ children, style, ...props }: FlexProps) => {
   return (
-    <Flex style={[styles.content, style]} direction="column" space="none" {...props}>
+    <Flex style={[styles.content, style]} direction="column" spacing="none" {...props}>
       {children}
     </Flex>
   );

package/src/components/Container/Container.docs.mdx

@@ -90,7 +90,7 @@ const MyComponent = () => (
 
 ### With Custom Spacing
 
-The Container component supports a `space` prop for controlling gap between child elements, as well as directional padding and margin props:
+The Container component supports a `spacing` prop for controlling gap between child elements, as well as directional padding and margin props:
 
 <Canvas of={Stories.WithCustomSpacing} />
 
@@ -98,7 +98,7 @@ The Container component supports a `space` prop for controlling gap between chil
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Container space="xl" paddingHorizontal="200" paddingVertical="300">
+  <Container spacing="xl" paddingHorizontal="200" paddingVertical="300">
     <Box bg="cyan400" p="200" borderRadius="md">
       <BodyText>Item 1</BodyText>
     </Box>

package/src/components/Container/Container.props.ts

@@ -74,8 +74,13 @@ interface ContainerProps extends ViewProps {
   mb?: SpaceValue;
   ml?: SpaceValue;
   mr?: SpaceValue;
+  /**
+   * The spacing between child elements (gap).
+   */
+  spacing?: SpacingValues;
   /**
    * The space between child elements (gap).
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
    */
   space?: SpacingValues;
   /**

package/src/components/Container/Container.stories.tsx

@@ -154,10 +154,10 @@ const meta = {
       control: 'select',
       description: 'The right margin of the container.',
     },
-    space: {
+    spacing: {
       options: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
       control: 'radio',
-      description: 'The space between child elements (gap).',
+      description: 'The spacing between child elements (gap).',
     },
     gap: {
       options: Object.keys(lightTheme.space),

package/src/components/Container/Container.tsx

@@ -3,10 +3,10 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import type ContainerProps from './Container.props';
 
-const Container = ({ style, children, space = 'md', ...props }: ContainerProps) => {
+const Container = ({ style, children, spacing = 'md', space, ...props }: ContainerProps) => {
   const { computedStyles, remainingProps } = useStyleProps(props);
 
-  styles.useVariants({ space });
+  styles.useVariants({ spacing: space ?? spacing });
   return (
     <View style={[styles.container(computedStyles), style]} {...remainingProps}>
       {children}
@@ -44,7 +44,7 @@ const styles = StyleSheet.create(theme => ({
         : undefined,
     ...extra,
     variants: {
-      space: theme.globalStyle.variants.space,
+      spacing: theme.globalStyle.variants.spacing,
     },
   }),
 }));

package/src/components/CurrencyInput/CurrencyInput.docs.mdx

@@ -64,7 +64,7 @@ When using `CurrencyInput`, the component inherits React Native TextInput props
 | focused               | `boolean`                                        | `false`     | Forces the focused visual state                                                                                                                |
 | inBottomSheet         | `boolean`                                        | `false`     | Use BottomSheetTextInput when true                                                                                                             |
 | placeholder           | `string`                                         | `'0.00'`    | Placeholder text                                                                                                                               |
-| disableGroupSeparator | `boolean`                                        | `false`     | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onTextChange)_ |
+| disableGroupSeparator | `boolean`                                        | `false`     | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onChangeText)_ |
 
 Note: When used inside `FormField`, `validationStatus` and `disabled` are read from the context unless explicitly overridden.
 

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -69,7 +69,7 @@ const meta = {
     disableGroupSeparator: {
       control: 'boolean',
       description:
-        'Disable automatic adding of thousand separators while typing _(Formatting only works with controlled components via onTextChange)_',
+        'Disable automatic adding of thousand separators while typing _(Formatting only works with controlled components via onChangeText)_',
       defaultValue: false,
     },
   },
@@ -110,7 +110,7 @@ export const States: Story = {
   },
   render: () => {
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <CurrencyInput />
         </VariantTitle>

package/src/components/DateInput/DateInput.stories.tsx

@@ -212,7 +212,7 @@ export const FlexibleSegments: Story = {
 
 export const GroupingInputs: Story = {
   render: () => (
-    <Flex space="sm">
+    <Flex spacing="sm">
       <Heading size="lg">Event Registration</Heading>
       <Card variant="subtle" gap="250">
         <DateInput label="Date of birth" helperText="Enter your date of birth" required />
@@ -246,7 +246,7 @@ export const WithState: Story = {
     };
 
     return (
-      <Flex space="md">
+      <Flex spacing="md">
         <DateInput
           label="Date"
           helperText="Select or enter a date"
@@ -257,7 +257,7 @@ export const WithState: Story = {
           onMonthChange={setMonth}
           onYearChange={setYear}
         />
-        <Flex space="xs">
+        <Flex spacing="xs">
           <Button onPress={handleSetToday}>Set to Today</Button>
           <Button onPress={handleReset} variant="solid">
             Reset

package/src/components/DatePickerInput/DatePickerInput.stories.tsx

@@ -130,7 +130,7 @@ export const States: Story = {
     const [formFieldDate, setFormFieldDate] = useState<DateType>();
 
     return (
-      <Flex direction="column" space="lg">
+      <Flex direction="column" spacing="lg">
         <VariantTitle title="Default">
           <DatePickerInput placeholder="DD/MM/YYYY" />
         </VariantTitle>

package/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -94,7 +94,7 @@ export const Column: Story = {
 export const KitchenSink: Story = {
   parameters: { controls: { include: [] } },
   render: () => (
-    <Flex direction="column" space="lg" style={{ width: '100%' }}>
+    <Flex direction="column" spacing="lg" style={{ width: '100%' }}>
       <VariantTitle title="Row direction">
         <DescriptionList direction="row">
           {sampleData.map(item => (

package/src/components/Divider/Divider.docs.mdx

@@ -1,7 +1,7 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { BodyText, Center, Divider } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Divider.stories';
-import { Divider, BodyText, Center } from '../../';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
 
 <Meta title="Components / Divider" />
 
@@ -35,7 +35,7 @@ Dividers can help establish a visual hierarchy on your designs. They can indicat
 <UsageWrap>
   <Center>
     <BodyText>This text is divided</BodyText>
-    <Divider space="sm" />
+    <Divider spacing="sm" />
     <BodyText>From this text</BodyText>
   </Center>
 </UsageWrap>
@@ -46,7 +46,7 @@ import { Spinner, Center } from '@utilitywarehouse/hearth-react-native';
 const MyComponent = () => (
   <Center>
     <BodyText>This text is divided</BodyText>
-    <Divider space="sm" />
+    <Divider spacing="sm" />
     <BodyText>From this text</BodyText>
   </Center>
 );
@@ -58,7 +58,7 @@ const MyComponent = () => (
 | ------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 | `orientation` | `'horizontal' \| 'vertical'`                     | The orientation of the Divider.                                                                                                                                                                     | `'horizontal'` |
 | `color`       | `string`                                         | The color of the spinner.                                                                                                                                                                           | `-`            |
-| `space`       | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | The space between the Divider items.                                                                                                                                                                | `none`         |
+| `spacing`     | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | The space between the Divider items.                                                                                                                                                                | `none`         |
 | `width`       | `number`                                         | The width of the Divider.                                                                                                                                                                           | `100%`         |
 | `height`      | `number`                                         | The height of the Divider.                                                                                                                                                                          | `100%`         |
 | `flexItem`    | `boolean`                                        | If true, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of 0px if it is the child of a flex container.) | false          |

package/src/components/Divider/Divider.props.ts

@@ -3,6 +3,12 @@ import type { ColorValue, SpacingValues } from '../../types';
 
 interface DividerProps extends Omit<ViewProps, 'children'> {
   color?: ColorValue;
+  backgroundColor?: ColorValue;
+  spacing?: SpacingValues;
+  /**
+   * The space between child elements (gap).
+   * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
+   */
   space?: SpacingValues;
   orientation?: 'horizontal' | 'vertical';
   height?: DimensionValue;