@artsy/palette-mobile 13.0.3 → 13.0.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v13.0.4 (Mon Sep 11 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - chore: support icon positioning in Message component [#145](https://github.com/artsy/palette-mobile/pull/145) ([@MounirDhahri](https://github.com/MounirDhahri))
6
+
7
+ #### Authors: 1
8
+
9
+ - Mounir Dhahri ([@MounirDhahri](https://github.com/MounirDhahri))
10
+
11
+ ---
12
+
1
13
  # v13.0.3 (Wed Aug 30 2023)
2
14
 
3
15
  #### 🐛 Bug Fix
@@ -6,6 +6,7 @@ export interface MessageProps {
6
6
  bodyTextStyle?: TextProps;
7
7
  containerStyle?: FlexProps;
8
8
  IconComponent?: React.FC<any>;
9
+ iconPosition?: "left" | "right";
9
10
  onClose?: () => void;
10
11
  showCloseButton?: boolean;
11
12
  testID?: string;
@@ -8,7 +8,7 @@ const svgs_1 = require("../../svgs");
8
8
  const useColor_1 = require("../../utils/hooks/useColor");
9
9
  const Flex_1 = require("../Flex");
10
10
  const Text_1 = require("../Text");
11
- const Message = ({ bodyTextStyle, containerStyle, IconComponent, onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
11
+ const Message = ({ bodyTextStyle, containerStyle, IconComponent, iconPosition = "left", onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
12
12
  const color = (0, useColor_1.useColor)();
13
13
  const [tempHeight, setTempHeight] = (0, react_1.useState)(undefined);
14
14
  const scaleYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
@@ -33,7 +33,7 @@ const Message = ({ bodyTextStyle, containerStyle, IconComponent, onClose, showCl
33
33
  }),
34
34
  },
35
35
  ],
36
- }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, py: 1, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [!!IconComponent && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title })] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text }))] }), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
36
+ }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, py: 1, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title })] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text }))] }), !!IconComponent && iconPosition === "right" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
37
37
  };
38
38
  exports.Message = Message;
39
39
  const colors = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "13.0.3",
3
+ "version": "13.0.4",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "scripts": {
6
6
  "android": "react-native run-android",