@artsy/palette-mobile 13.0.8 → 13.0.10

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v13.0.10 (Mon Sep 18 2023)
+
+#### 🐛 Bug Fix
+
+- fix: Add flowDirection prop to tooltip component [#151](https://github.com/artsy/palette-mobile/pull/151) ([@olerichter00](https://github.com/olerichter00))
+
+#### Authors: 1
+
+- Ole ([@olerichter00](https://github.com/olerichter00))
+
+---
+
+# v13.0.9 (Fri Sep 15 2023)
+
+#### 🐛 Bug Fix
+
+- docs: update readme with Developing Features using Local Versions [#150](https://github.com/artsy/palette-mobile/pull/150) ([@gkartalis](https://github.com/gkartalis))
+
+#### Authors: 1
+
+- George ([@gkartalis](https://github.com/gkartalis))
+
+---
+
 # v13.0.8 (Thu Sep 14 2023)
 
 :tada: This release contains work from a new contributor! :tada:

package/README.md

@@ -54,6 +54,43 @@ yarn start
 
 And then either open Xcode and run, or Android Studio, or run `yarn ios` or `yarn android` from the command line, or just open up the simulator if you have done this before.
 
+## Developing Features using Local Versions of Palette
+
+When developing new components in Palette, it's often useful to test those components in consuming apps (such as Eigen). However, due to the poor support for symlinks in React Native, this can be difficult. Enter [yalc](https://github.com/wclr/yalc). Yalc is a mini package manager that one can publish to and install from, which makes it easy to test code in realtime from outside of your app.
+
+> Note: [@artsy/palette-mobile](https://github.com/artsy/palette-mobile) uses Storybooks for developing features; work there first! Then, when ready (and if necessary), test your code locally using the flow described below. You can also publish npm canary releases from the palette-mobile repo by attaching a `canary` label to your PR.
+
+### Setup
+
+- Install `yalc` globally:
+
+```sh
+yarn global add yalc
+```
+
+- Navigate to `palette-mobile` in the terminal and start the watcher:
+
+```sh
+cd palette-mobile
+yarn local-palette-dev
+```
+
+- Navigate back to Eigen and link:
+
+```sh
+cd eigen
+yarn local-palette-dev
+yarn start
+```
+
+This will update `package.json` to point at the yalc-published version of palette.
+
+- When done developing your local palette feature, be sure to unlink:
+
+```sh
+yarn local-palette-dev:stop
+```
+
 ## Repos consuming Palette Mobile
 
 - [Eigen](https://github.com/artsy/eigen)

package/dist/elements/ToolTip/ToolTip.d.ts

@@ -6,6 +6,8 @@ interface ToolTipContextValues {
 interface ToolTipProps {
     children?: React.ReactNode;
     enabled?: Boolean;
+    /** The direction the tooltip should flow. If not provided, the tooltip will flow to the left if it is near the right edge of the screen, and vice-versa */
+    flowDirection?: "LEFT" | "RIGHT";
     initialToolTipText?: string;
     maxWidth?: number;
     onPress?: () => void;

package/dist/elements/ToolTip/ToolTip.js

@@ -33,7 +33,7 @@ exports.ToolTipContext = (0, react_1.createContext)({
  * </ToolTip>
  *
  */
-const ToolTip = ({ children, enabled = true, initialToolTipText, maxWidth, onPress, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
+const ToolTip = ({ children, enabled = true, flowDirection, initialToolTipText, maxWidth, onPress, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
     const { space } = (0, useTheme_1.useTheme)();
     const mWidth = (0, useScreenDimensions_1.useScreenDimensions)().width - space(2) * 2; // 40 accounting for padding 20 on each side of the screen
     const MAX_TOOLTIP_WIDTH = maxWidth ?? mWidth;
@@ -51,8 +51,8 @@ const ToolTip = ({ children, enabled = true, initialToolTipText, maxWidth, onPre
     // Calculate the direction of flow of the tooltip. So a tooltip near the right edge of the screen
     // should flow to the left so it remains in the viewport, and vice-versa. Without this, tooltip
     // around the edges can flow off screen
-    const nearLeftEdge = pageX < mWidth / 4;
-    const nearRightEdge = pageX > mWidth - mWidth / 4;
+    const nearLeftEdge = pageX < mWidth / 4 || flowDirection === "RIGHT";
+    const nearRightEdge = pageX > mWidth - mWidth / 4 || flowDirection === "LEFT";
     const extraStyle = nearLeftEdge ? { left: 0 } : nearRightEdge ? { right: 0 } : undefined;
     return ((0, jsx_runtime_1.jsxs)(exports.ToolTipContext.Provider, { value: {
             dismissToolTip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.0.8",
+  "version": "13.0.10",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",