@utilitywarehouse/hearth-react-native 0.34.1 → 0.34.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/build/components/BodyText/BodyText.js +4 -0
  3. package/build/components/BodyText/BodyText.props.d.ts +1 -1
  4. package/build/components/HTMLElements/OrderedList.js +4 -1
  5. package/build/components/HTMLElements/UnorderedList.js +4 -1
  6. package/docs/changelog.mdx +28 -0
  7. package/package.json +4 -4
  8. package/src/components/BodyText/BodyText.docs.mdx +1 -1
  9. package/src/components/BodyText/BodyText.props.ts +1 -1
  10. package/src/components/BodyText/BodyText.stories.tsx +6 -1
  11. package/src/components/BodyText/BodyText.tsx +4 -0
  12. package/src/components/HTMLElements/OrderedList.tsx +4 -1
  13. package/src/components/HTMLElements/UnorderedList.tsx +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @utilitywarehouse/hearth-react-native
2
2
 
3
+ ## 0.34.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1359](https://github.com/utilitywarehouse/hearth/pull/1359) [`60c5940`](https://github.com/utilitywarehouse/hearth/commit/60c59401f6a46821884002187601191f78bdf423) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - 🐛 [FIX]: `UnorderedList` and `OrderedList` layout when inside a centred flex container
8
+
9
+ Both list components now render correctly when their parent uses
10
+ `alignItems="center"`. Previously, the list would collapse to the width of the
11
+ bullet/number, leaving text invisible or clipped beside each list item.
12
+
13
+ **Before**: wrapping `UL` or `OL` in a `Box` with `alignItems="center"` caused
14
+ bullets and numbers to appear without any adjacent text.
15
+
16
+ **After**: both components always stretch to fill their parent's width via
17
+ `alignSelf: 'stretch'`, regardless of the parent's `alignItems` setting.
18
+
19
+ - Updated dependencies [[`fd31bf8`](https://github.com/utilitywarehouse/hearth/commit/fd31bf8208278a580f8039d09f4e8e78aac2b477)]:
20
+ - @utilitywarehouse/hearth-react-native-icons@0.8.4
21
+
22
+ ## 0.34.2
23
+
24
+ ### Patch Changes
25
+
26
+ - [#1349](https://github.com/utilitywarehouse/hearth/pull/1349) [`bed03da`](https://github.com/utilitywarehouse/hearth/commit/bed03da1252280145ca55bb50f4a9d3eb53440b2) Thanks [@robphoenix](https://github.com/robphoenix)! - 🌟 [FEATURE]: `BodyText` `xl` size (20px / 28px line-height)
27
+
28
+ A new `xl` size is now available for the `BodyText` component, matching the
29
+ existing `xl` body text token (20px font size, 28px line height).
30
+
3
31
  ## 0.34.1
4
32
 
5
33
  ### Patch Changes
package/build/components/BodyText/BodyText.js CHANGED
@@ -42,6 +42,10 @@ const styles = StyleSheet.create(theme => ({
42
42
  fontStyle: 'normal',
43
43
  variants: {
44
44
  size: {
45
+ xl: {
46
+ fontSize: theme.typography.mobile.bodyText.xl.fontSize,
47
+ lineHeight: theme.typography.mobile.bodyText.xl.lineHeight,
48
+ },
45
49
  lg: {
46
50
  fontSize: theme.typography.mobile.bodyText.lg.fontSize,
47
51
  lineHeight: theme.typography.mobile.bodyText.lg.lineHeight,
package/build/components/BodyText/BodyText.props.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CommonTextProps } from '../../types';
2
2
  interface BodyTextProps extends CommonTextProps {
3
3
  /** Text size variant. */
4
- size?: 'sm' | 'md' | 'lg';
4
+ size?: 'sm' | 'md' | 'lg' | 'xl';
5
5
  /** Font weight variant. */
6
6
  weight?: 'regular' | 'semibold' | 'bold';
7
7
  }
package/build/components/HTMLElements/OrderedList.js CHANGED
@@ -8,7 +8,7 @@ const OrderedList = ({ children, gap = '100', style, listStyleImage, listStyleIc
8
8
  const { computedStyles } = useStyleProps({ gap });
9
9
  const theme = useTheme();
10
10
  let itemNumber = 0;
11
- return (_jsx(View, { style: [computedStyles, style], ...rest, children: React.Children.map(children, child => {
11
+ return (_jsx(View, { style: [styles.container, computedStyles, style], ...rest, children: React.Children.map(children, child => {
12
12
  if (React.isValidElement(child)) {
13
13
  itemNumber++;
14
14
  const childProps = child.props;
@@ -41,6 +41,9 @@ const OrderedList = ({ children, gap = '100', style, listStyleImage, listStyleIc
41
41
  };
42
42
  OrderedList.displayName = 'OrderedList';
43
43
  const styles = StyleSheet.create({
44
+ container: {
45
+ alignSelf: 'stretch',
46
+ },
44
47
  listItemContainer: {
45
48
  flexDirection: 'row',
46
49
  alignItems: 'flex-start',
package/build/components/HTMLElements/UnorderedList.js CHANGED
@@ -7,7 +7,7 @@ import { BodyText } from '../BodyText';
7
7
  const UnorderedList = ({ children, gap = '100', style, listStyleImage, listStyleIcon, listStyleWidth, listStyleHeight, listStyleColour, ...rest }) => {
8
8
  const { computedStyles } = useStyleProps({ gap });
9
9
  const theme = useTheme();
10
- return (_jsx(View, { style: [computedStyles, style], ...rest, children: React.Children.map(children, child => {
10
+ return (_jsx(View, { style: [styles.container, computedStyles, style], ...rest, children: React.Children.map(children, child => {
11
11
  if (React.isValidElement(child)) {
12
12
  const childProps = child.props;
13
13
  const image = childProps.listStyleImage ?? listStyleImage;
@@ -39,6 +39,9 @@ const UnorderedList = ({ children, gap = '100', style, listStyleImage, listStyle
39
39
  };
40
40
  UnorderedList.displayName = 'UnorderedList';
41
41
  const styles = StyleSheet.create({
42
+ container: {
43
+ alignSelf: 'stretch',
44
+ },
42
45
  listItemContainer: {
43
46
  flexDirection: 'row',
44
47
  alignItems: 'flex-start',
package/docs/changelog.mdx CHANGED
@@ -9,6 +9,34 @@ import { BackToTopButton, NextPrevPage } from './components';
9
9
  The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
10
10
 
11
11
 
12
+ ## 0.34.3
13
+
14
+ ### Patch Changes
15
+
16
+ - [#1359](https://github.com/utilitywarehouse/hearth/pull/1359) [`60c5940`](https://github.com/utilitywarehouse/hearth/commit/60c59401f6a46821884002187601191f78bdf423) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - 🐛 [FIX]: `UnorderedList` and `OrderedList` layout when inside a centred flex container
17
+
18
+ Both list components now render correctly when their parent uses
19
+ `alignItems="center"`. Previously, the list would collapse to the width of the
20
+ bullet/number, leaving text invisible or clipped beside each list item.
21
+
22
+ **Before**: wrapping `UL` or `OL` in a `Box` with `alignItems="center"` caused
23
+ bullets and numbers to appear without any adjacent text.
24
+
25
+ **After**: both components always stretch to fill their parent's width via
26
+ `alignSelf: 'stretch'`, regardless of the parent's `alignItems` setting.
27
+
28
+ - Updated dependencies [[`fd31bf8`](https://github.com/utilitywarehouse/hearth/commit/fd31bf8208278a580f8039d09f4e8e78aac2b477)]:
29
+ - @utilitywarehouse/hearth-react-native-icons@0.8.4
30
+
31
+ ## 0.34.2
32
+
33
+ ### Patch Changes
34
+
35
+ - [#1349](https://github.com/utilitywarehouse/hearth/pull/1349) [`bed03da`](https://github.com/utilitywarehouse/hearth/commit/bed03da1252280145ca55bb50f4a9d3eb53440b2) Thanks [@robphoenix](https://github.com/robphoenix)! - 🌟 [FEATURE]: `BodyText` `xl` size (20px / 28px line-height)
36
+
37
+ A new `xl` size is now available for the `BodyText` component, matching the
38
+ existing `xl` body text token (20px font size, 28px line height).
39
+
12
40
  ## 0.34.1
13
41
 
14
42
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@utilitywarehouse/hearth-react-native",
3
- "version": "0.34.1",
3
+ "version": "0.34.3",
4
4
  "description": "Utility Warehouse React Native UI library",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -61,9 +61,9 @@
61
61
  "vitest": "^4.1.7",
62
62
  "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
63
63
  "@utilitywarehouse/hearth-fonts": "^0.1.1",
64
- "@utilitywarehouse/hearth-react-icons": "^0.8.4",
65
- "@utilitywarehouse/hearth-react-native-icons": "^0.8.3",
66
- "@utilitywarehouse/hearth-svg-assets": "^0.6.3",
64
+ "@utilitywarehouse/hearth-react-icons": "^0.8.5",
65
+ "@utilitywarehouse/hearth-react-native-icons": "^0.8.4",
66
+ "@utilitywarehouse/hearth-svg-assets": "^0.6.4",
67
67
  "@utilitywarehouse/hearth-tokens": "^0.4.1"
68
68
  },
69
69
  "peerDependencies": {
package/src/components/BodyText/BodyText.docs.mdx CHANGED
@@ -52,7 +52,7 @@ const MyComponent = () => (
52
52
 
53
53
  | Property | Type | Description | Default |
54
54
  | --------------------- | --------------------------------------------------------------------- | ----------------------------------- | ------------ |
55
- | `size` | `'sm' \| 'md' \| 'lg'` | The size of the text. | `'md'` |
55
+ | `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | The size of the text. | `'md'` |
56
56
  | `strikeThrough` | `boolean` | Strike through the text. | `false` |
57
57
  | `truncated` | `boolean` | Truncate the text with an ellipsis. | `false` |
58
58
  | `underline` | `boolean` | Underline the text. | `false` |
package/src/components/BodyText/BodyText.props.ts CHANGED
@@ -2,7 +2,7 @@ import type { CommonTextProps } from '../../types';
2
2
 
3
3
  interface BodyTextProps extends CommonTextProps {
4
4
  /** Text size variant. */
5
- size?: 'sm' | 'md' | 'lg';
5
+ size?: 'sm' | 'md' | 'lg' | 'xl';
6
6
  /** Font weight variant. */
7
7
  weight?: 'regular' | 'semibold' | 'bold';
8
8
  }
package/src/components/BodyText/BodyText.stories.tsx CHANGED
@@ -16,7 +16,7 @@ const meta = {
16
16
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
17
17
  argTypes: {
18
18
  size: {
19
- options: ['sm', 'md', 'lg'],
19
+ options: ['sm', 'md', 'lg', 'xl'],
20
20
  control: 'select',
21
21
  description: 'The size of the text.',
22
22
  },
@@ -123,6 +123,11 @@ export const KitchenSink: Story = {
123
123
  Hello there, I'm some body text!
124
124
  </BodyText>
125
125
  </VariantTitle>
126
+ <VariantTitle title="XL">
127
+ <BodyText {...args} size="xl">
128
+ Hello there, I'm some body text!
129
+ </BodyText>
130
+ </VariantTitle>
126
131
  </Box>
127
132
  ),
128
133
  };
package/src/components/BodyText/BodyText.tsx CHANGED
@@ -75,6 +75,10 @@ const styles = StyleSheet.create(theme => ({
75
75
  fontStyle: 'normal',
76
76
  variants: {
77
77
  size: {
78
+ xl: {
79
+ fontSize: theme.typography.mobile.bodyText.xl.fontSize,
80
+ lineHeight: theme.typography.mobile.bodyText.xl.lineHeight,
81
+ },
78
82
  lg: {
79
83
  fontSize: theme.typography.mobile.bodyText.lg.fontSize,
80
84
  lineHeight: theme.typography.mobile.bodyText.lg.lineHeight,
package/src/components/HTMLElements/OrderedList.tsx CHANGED
@@ -28,7 +28,7 @@ const OrderedList = ({
28
28
  let itemNumber = 0;
29
29
 
30
30
  return (
31
- <View style={[computedStyles, style]} {...rest}>
31
+ <View style={[styles.container, computedStyles, style]} {...rest}>
32
32
  {React.Children.map(children, child => {
33
33
  if (React.isValidElement(child)) {
34
34
  itemNumber++;
@@ -82,6 +82,9 @@ const OrderedList = ({
82
82
  OrderedList.displayName = 'OrderedList';
83
83
 
84
84
  const styles = StyleSheet.create({
85
+ container: {
86
+ alignSelf: 'stretch',
87
+ },
85
88
  listItemContainer: {
86
89
  flexDirection: 'row',
87
90
  alignItems: 'flex-start',
package/src/components/HTMLElements/UnorderedList.tsx CHANGED
@@ -27,7 +27,7 @@ const UnorderedList = ({
27
27
  const theme = useTheme();
28
28
 
29
29
  return (
30
- <View style={[computedStyles, style]} {...rest}>
30
+ <View style={[styles.container, computedStyles, style]} {...rest}>
31
31
  {React.Children.map(children, child => {
32
32
  if (React.isValidElement(child)) {
33
33
  const childProps = child.props as ListItemProps;
@@ -76,6 +76,9 @@ const UnorderedList = ({
76
76
  UnorderedList.displayName = 'UnorderedList';
77
77
 
78
78
  const styles = StyleSheet.create({
79
+ container: {
80
+ alignSelf: 'stretch',
81
+ },
79
82
  listItemContainer: {
80
83
  flexDirection: 'row',
81
84
  alignItems: 'flex-start',