@artsy/palette-mobile 12.0.1 → 12.0.2

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,19 @@
1
+ # v12.0.2 (Fri Aug 11 2023)
2
+
3
+ :tada: This release contains work from a new contributor! :tada:
4
+
5
+ Thank you, Ole ([@olerichter00](https://github.com/olerichter00)), for all your work!
6
+
7
+ #### 🐛 Bug Fix
8
+
9
+ - feat: Add xOffset prop to ToolTip [#139](https://github.com/artsy/palette-mobile/pull/139) ([@olerichter00](https://github.com/olerichter00))
10
+
11
+ #### Authors: 1
12
+
13
+ - Ole ([@olerichter00](https://github.com/olerichter00))
14
+
15
+ ---
16
+
1
17
  # v12.0.1 (Mon Aug 07 2023)
2
18
 
3
19
  #### 🐛 Bug Fix
@@ -11,6 +11,8 @@ interface ToolTipProps {
11
11
  position?: "TOP" | "BOTTOM";
12
12
  tapToDismiss?: boolean;
13
13
  testID?: string;
14
+ /** horizontal margin of tooltip */
15
+ xOffset?: number;
14
16
  /** vertical margin of tooltip */
15
17
  yOffset?: number;
16
18
  }
@@ -33,7 +33,7 @@ exports.ToolTipContext = (0, react_1.createContext)({
33
33
  * </ToolTip>
34
34
  *
35
35
  */
36
- const ToolTip = ({ children, enabled = true, initialToolTipText, maxWidth, position = "TOP", tapToDismiss = false, testID, yOffset = 5, }) => {
36
+ const ToolTip = ({ children, enabled = true, initialToolTipText, maxWidth, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
37
37
  const { space } = (0, useTheme_1.useTheme)();
38
38
  const mWidth = (0, useScreenDimensions_1.useScreenDimensions)().width - space(2) * 2; // 40 accounting for padding 20 on each side of the screen
39
39
  const MAX_TOOLTIP_WIDTH = maxWidth ?? mWidth;
@@ -57,11 +57,12 @@ const ToolTip = ({ children, enabled = true, initialToolTipText, maxWidth, posit
57
57
  return ((0, jsx_runtime_1.jsxs)(exports.ToolTipContext.Provider, { value: {
58
58
  dismissToolTip,
59
59
  setToolTip,
60
- }, children: [enabled && position === "TOP" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipFlyout, { containerStyle: {
60
+ }, children: [!!enabled && position === "TOP" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipFlyout, { containerStyle: {
61
61
  bottom: childrenDimensions.height + yOffset,
62
+ left: xOffset,
62
63
  ...extraStyle,
63
- }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, position: position, testID: testID, text: toolTipText }), enabled && position === "TOP" && toolTipText && ((0, jsx_runtime_1.jsx)(TriangleDown_1.TriangleDown, { style: {
64
- left: triangleXDisplacement,
64
+ }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, position: position, testID: testID, text: toolTipText }), !!enabled && position === "TOP" && !!toolTipText && ((0, jsx_runtime_1.jsx)(TriangleDown_1.TriangleDown, { style: {
65
+ left: triangleXDisplacement + xOffset,
65
66
  position: "absolute",
66
67
  bottom: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size
67
68
  } }))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: childrenRef, onLayout: (event) => {
@@ -73,15 +74,15 @@ const ToolTip = ({ children, enabled = true, initialToolTipText, maxWidth, posit
73
74
  childrenRef.current?.measure((_fx, _fy, _width, _height, px, _py) => {
74
75
  setPageX(px);
75
76
  });
76
- }, children: children }), enabled && position === "BOTTOM" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipFlyout, { containerStyle: {
77
+ }, children: children }), !!enabled && position === "BOTTOM" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipFlyout, { containerStyle: {
77
78
  top: childrenDimensions.height + yOffset,
78
79
  ...extraStyle,
79
- }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, position: position, testID: testID, text: toolTipText }), enabled && position === "BOTTOM" && toolTipText && ((0, jsx_runtime_1.jsx)(TriangleDown_1.TriangleDown, { style: {
80
+ }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, position: position, testID: testID, text: toolTipText }), !!enabled && position === "BOTTOM" && !!toolTipText && ((0, jsx_runtime_1.jsx)(TriangleDown_1.TriangleDown, { style: {
80
81
  transform: [{ rotate: "180deg" }],
81
- left: triangleXDisplacement,
82
+ left: triangleXDisplacement + xOffset,
82
83
  position: "absolute",
83
84
  top: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size,
84
- } }))] })), enabled && toolTipText && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { position: "absolute", opacity: 0 }, onLayout: ({ nativeEvent }) => {
85
+ } }))] })), !!enabled && !!toolTipText && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { position: "absolute", opacity: 0 }, onLayout: ({ nativeEvent }) => {
85
86
  setSingleTextDimension({
86
87
  height: nativeEvent.layout.height,
87
88
  width: nativeEvent.layout.width,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "12.0.1",
3
+ "version": "12.0.2",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "scripts": {
6
6
  "android": "react-native run-android",