@utilitywarehouse/hearth-react-native 0.34.2 → 0.34.4

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 (9) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/build/components/HTMLElements/OrderedList.js +4 -1
  3. package/build/components/HTMLElements/UnorderedList.js +4 -1
  4. package/build/components/Modal/Modal.js +1 -1
  5. package/docs/changelog.mdx +27 -0
  6. package/package.json +4 -4
  7. package/src/components/HTMLElements/OrderedList.tsx +4 -1
  8. package/src/components/HTMLElements/UnorderedList.tsx +4 -1
  9. package/src/components/Modal/Modal.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @utilitywarehouse/hearth-react-native
2
2
 
3
+ ## 0.34.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1375](https://github.com/utilitywarehouse/hearth/pull/1375) [`549739e`](https://github.com/utilitywarehouse/hearth/commit/549739eae90e467dbe2311dbc60cfd35d13f49c4) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🐛 [FIX]: `Modal` image container children pushed to bottom, and missing gap between image and heading
8
+
9
+ `imageContainer` had `flex: 1` applied, which caused `children` to be pushed to the bottom of the container. Additionally, the gap between the `image` and the `heading` was missing.
10
+
11
+ ## 0.34.3
12
+
13
+ ### Patch Changes
14
+
15
+ - [#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
16
+
17
+ Both list components now render correctly when their parent uses
18
+ `alignItems="center"`. Previously, the list would collapse to the width of the
19
+ bullet/number, leaving text invisible or clipped beside each list item.
20
+
21
+ **Before**: wrapping `UL` or `OL` in a `Box` with `alignItems="center"` caused
22
+ bullets and numbers to appear without any adjacent text.
23
+
24
+ **After**: both components always stretch to fill their parent's width via
25
+ `alignSelf: 'stretch'`, regardless of the parent's `alignItems` setting.
26
+
27
+ - Updated dependencies [[`fd31bf8`](https://github.com/utilitywarehouse/hearth/commit/fd31bf8208278a580f8039d09f4e8e78aac2b477)]:
28
+ - @utilitywarehouse/hearth-react-native-icons@0.8.4
29
+
3
30
  ## 0.34.2
4
31
 
5
32
  ### Patch Changes
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/build/components/Modal/Modal.js CHANGED
@@ -171,7 +171,7 @@ const styles = StyleSheet.create((theme, rt) => ({
171
171
  },
172
172
  imageContainer: {
173
173
  alignItems: 'center',
174
- flex: 1,
174
+ gap: theme.components.modal.content.gap,
175
175
  },
176
176
  textContent: {
177
177
  gap: theme.components.modal.content.gap,
package/docs/changelog.mdx CHANGED
@@ -9,6 +9,33 @@ 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.4
13
+
14
+ ### Patch Changes
15
+
16
+ - [#1375](https://github.com/utilitywarehouse/hearth/pull/1375) [`549739e`](https://github.com/utilitywarehouse/hearth/commit/549739eae90e467dbe2311dbc60cfd35d13f49c4) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🐛 [FIX]: `Modal` image container children pushed to bottom, and missing gap between image and heading
17
+
18
+ `imageContainer` had `flex: 1` applied, which caused `children` to be pushed to the bottom of the container. Additionally, the gap between the `image` and the `heading` was missing.
19
+
20
+ ## 0.34.3
21
+
22
+ ### Patch Changes
23
+
24
+ - [#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
25
+
26
+ Both list components now render correctly when their parent uses
27
+ `alignItems="center"`. Previously, the list would collapse to the width of the
28
+ bullet/number, leaving text invisible or clipped beside each list item.
29
+
30
+ **Before**: wrapping `UL` or `OL` in a `Box` with `alignItems="center"` caused
31
+ bullets and numbers to appear without any adjacent text.
32
+
33
+ **After**: both components always stretch to fill their parent's width via
34
+ `alignSelf: 'stretch'`, regardless of the parent's `alignItems` setting.
35
+
36
+ - Updated dependencies [[`fd31bf8`](https://github.com/utilitywarehouse/hearth/commit/fd31bf8208278a580f8039d09f4e8e78aac2b477)]:
37
+ - @utilitywarehouse/hearth-react-native-icons@0.8.4
38
+
12
39
  ## 0.34.2
13
40
 
14
41
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@utilitywarehouse/hearth-react-native",
3
- "version": "0.34.2",
3
+ "version": "0.34.4",
4
4
  "description": "Utility Warehouse React Native UI library",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -60,10 +60,10 @@
60
60
  "vite-plugin-svgr": "^4.5.0",
61
61
  "vitest": "^4.1.7",
62
62
  "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
63
- "@utilitywarehouse/hearth-react-native-icons": "^0.8.3",
64
63
  "@utilitywarehouse/hearth-fonts": "^0.1.1",
65
- "@utilitywarehouse/hearth-svg-assets": "^0.6.3",
66
- "@utilitywarehouse/hearth-react-icons": "^0.8.4",
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/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',
package/src/components/Modal/Modal.tsx CHANGED
@@ -363,7 +363,7 @@ const styles = StyleSheet.create((theme, rt) => ({
363
363
  },
364
364
  imageContainer: {
365
365
  alignItems: 'center',
366
- flex: 1,
366
+ gap: theme.components.modal.content.gap,
367
367
  },
368
368
  textContent: {
369
369
  gap: theme.components.modal.content.gap,