@utilitywarehouse/hearth-react-native 0.34.2 → 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 (7) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/build/components/HTMLElements/OrderedList.js +4 -1
  3. package/build/components/HTMLElements/UnorderedList.js +4 -1
  4. package/docs/changelog.mdx +19 -0
  5. package/package.json +4 -4
  6. package/src/components/HTMLElements/OrderedList.tsx +4 -1
  7. package/src/components/HTMLElements/UnorderedList.tsx +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
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
+
3
22
  ## 0.34.2
4
23
 
5
24
  ### 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/docs/changelog.mdx CHANGED
@@ -9,6 +9,25 @@ 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
+
12
31
  ## 0.34.2
13
32
 
14
33
  ### 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.3",
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',