From 930a84444cf676602586f149d3e5ca67767d28fb Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Mon, 23 Dec 2024 15:45:12 +0200
Subject: [PATCH 1/5] refactor: rename hint rendering methods for clarity

---
 src/components/hint/index.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index b9ba98765d..5a9e5f1f04 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -302,7 +302,6 @@ class Hint extends Component<HintProps, HintState> {
         return TARGET_POSITIONS.LEFT;
       }
     }
-
     return TARGET_POSITIONS.CENTER;
   }
 
@@ -451,7 +450,7 @@ class Hint extends Component<HintProps, HintState> {
     return <Image tintColor={color} source={source} style={[styles.hintTip, this.getTipPosition(), flipStyle]}/>;
   }
 
-  renderContent() {
+  renderHint() {
     const {
       message,
       messageStyle,
@@ -491,7 +490,7 @@ class Hint extends Component<HintProps, HintState> {
     );
   }
 
-  renderHint() {
+  renderHintContainer() {
     const {onPress, testID} = this.props;
     const opacity = onPress ? 0.9 : 1.0;
 
@@ -510,7 +509,7 @@ class Hint extends Component<HintProps, HintState> {
           testID={testID}
         >
           <TouchableOpacity activeOpacity={opacity} onPress={onPress}>
-            {this.renderContent()}
+            {this.renderHint()}
           </TouchableOpacity>
           {this.renderHintTip()}
         </View>
@@ -518,7 +517,7 @@ class Hint extends Component<HintProps, HintState> {
     }
   }
 
-  renderHintContainer() {
+  renderHintAnchor() {
     const {style, ...others} = this.props;
     return (
       <View
@@ -528,7 +527,7 @@ class Hint extends Component<HintProps, HintState> {
         testID={undefined}
         style={[styles.container, style, this.getContainerPosition(), !this.isUsingModal() && styles.overlayContainer]}
       >
-        {this.renderHint()}
+        {this.renderHintContainer()}
       </View>
     );
   }
@@ -592,13 +591,13 @@ class Hint extends Component<HintProps, HintState> {
             testID={`${testID}.modal`}
           >
             {this.renderMockChildren()}
-            {this.renderHintContainer()}
+            {this.renderHintAnchor()}
           </Modal>
         ) : (
           <>
             {this.renderOverlay()}
             {this.renderMockChildren()}
-            {this.renderHintContainer()}
+            {this.renderHintAnchor()}
           </>
         )}
       </>

From 084f15049e40e8769ddc47fb2ed75931e6e43fc5 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Wed, 25 Dec 2024 17:13:30 +0200
Subject: [PATCH 2/5] fix: add second hint toggle and adjust hint message
 positioning

---
 .../screens/componentScreens/HintsScreen.tsx  | 20 +++++++++
 src/components/hint/index.tsx                 | 44 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/demo/src/screens/componentScreens/HintsScreen.tsx b/demo/src/screens/componentScreens/HintsScreen.tsx
index 2b2885d13d..9795f4b264 100644
--- a/demo/src/screens/componentScreens/HintsScreen.tsx
+++ b/demo/src/screens/componentScreens/HintsScreen.tsx
@@ -12,6 +12,7 @@ type HintScreenProps = {};
 export default class HintsScreen extends Component<HintScreenProps> {
   state = {
     showHint: true,
+    showSecondHint: false,
     useShortMessage: false,
     showBottomHint: false,
     showIcon: false,
@@ -28,6 +29,10 @@ export default class HintsScreen extends Component<HintScreenProps> {
     this.setState({showHint: !this.state.showHint});
   };
 
+  toggleSecondHint = () => {
+    this.setState({showSecondHint: !this.state.showSecondHint});
+  };
+
   toggleHintPosition = () => {
     this.setState({
       showBottomHint: !this.state.showBottomHint
@@ -118,6 +123,7 @@ export default class HintsScreen extends Component<HintScreenProps> {
   render() {
     const {
       showHint,
+      showSecondHint,
       showBottomHint,
       showIcon,
       targetPosition,
@@ -215,6 +221,20 @@ export default class HintsScreen extends Component<HintScreenProps> {
               </View>
             </>
           )}
+
+          <View marginT-100 row center>
+            {targetPosition !== 'flex-start' && <Text marginH-s3>Text pushing button</Text>}
+            <Hint
+              message={'Hint'}
+              visible={showSecondHint}
+              onBackgroundPress={this.toggleSecondHint}
+              useSideTip={false}
+              
+            >
+              <Button label="Button" onPress={this.toggleSecondHint}/>
+            </Hint>
+            {targetPosition === 'flex-start' && <Text marginH-s3>Text pushing button</Text>}
+          </View>
         </View>
 
         {this.renderOptionsFAB()}
diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index 5a9e5f1f04..9389300d89 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -153,6 +153,7 @@ interface HintState {
   targetLayout?: HintTargetFrame;
   targetLayoutInWindow?: HintTargetFrame;
   hintUnmounted: boolean;
+  hintMessageWidth?: number;
 }
 
 /**
@@ -178,7 +179,8 @@ class Hint extends Component<HintProps, HintState> {
   state = {
     targetLayoutInWindow: undefined as {x: number; y: number; width: number; height: number} | undefined,
     targetLayout: this.props.targetFrame,
-    hintUnmounted: !this.props.visible
+    hintUnmounted: !this.props.visible,
+    hintMessageWidth: undefined
   };
 
   visibleAnimated = new Animated.Value(Number(!!this.props.visible));
@@ -222,6 +224,12 @@ class Hint extends Component<HintProps, HintState> {
     this.focusAccessibilityOnHint();
   };
 
+  setHintLayout = ({nativeEvent: {layout}}: LayoutChangeEvent) => {
+    if (!this.state.hintMessageWidth) {
+      this.setState({hintMessageWidth: layout.width});
+    }
+  };
+
   onTargetLayout = ({nativeEvent: {layout}}: LayoutChangeEvent) => {
     if (!_.isEqual(this.state.targetLayout, layout)) {
       this.setState({targetLayout: layout});
@@ -292,6 +300,11 @@ class Hint extends Component<HintProps, HintState> {
     return this.getTargetPositionOnScreen() !== TARGET_POSITIONS.CENTER;
   }
 
+  get isShortMessage() {
+    const {hintMessageWidth} = this.state;
+    return hintMessageWidth && hintMessageWidth < Constants.screenWidth / 2;
+  }
+
   getTargetPositionOnScreen() {
     if (this.targetLayout?.x !== undefined && this.targetLayout?.width) {
       const targetMidPosition = this.targetLayout.x + this.targetLayout.width / 2;
@@ -404,6 +417,29 @@ class Hint extends Component<HintProps, HintState> {
     return tipPositionStyle;
   }
 
+  getHintOffsetForShortMessage = () => {
+    const {hintMessageWidth = 0} = this.state;
+
+    let hintMessageOffset = 0;
+    if (this.isShortMessage) {
+      const targetPosition = this.getTipPosition();
+      if (targetPosition?.right) {
+        hintMessageOffset = -targetPosition?.right + hintMessageWidth / 2;
+      }
+
+      if (targetPosition?.left) {
+        hintMessageOffset = targetPosition?.left as number;
+        if (this.getTargetPositionOnScreen() === 'center') {
+          hintMessageOffset -= Constants.screenWidth / 2;
+        } else {
+          hintMessageOffset -= hintMessageWidth / 2;
+        }
+      }
+    }
+
+    return hintMessageOffset;
+  };
+
   isUsingModal = () => {
     const {onBackgroundPress, useModal} = this.props;
     return onBackgroundPress && useModal;
@@ -465,6 +501,8 @@ class Hint extends Component<HintProps, HintState> {
       testID
     } = this.props;
 
+    const hintMessageOffset = this.getHintOffsetForShortMessage();
+
     return (
       <View
         testID={`${testID}.message`}
@@ -475,8 +513,10 @@ class Hint extends Component<HintProps, HintState> {
           !removePaddings && styles.hintPaddings,
           visible && enableShadow && styles.containerShadow,
           {backgroundColor: color},
-          !_.isUndefined(borderRadius) && {borderRadius}
+          !_.isUndefined(borderRadius) && {borderRadius},
+          hintMessageOffset ? {left: hintMessageOffset} : undefined
         ]}
+        onLayout={this.setHintLayout}
         ref={this.hintRef}
       >
         {customContent}

From 26ef7382eab3c03d707d1a61ee2362755edf7795 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Sun, 29 Dec 2024 14:12:00 +0200
Subject: [PATCH 3/5] Update src/components/hint/index.tsx

Co-authored-by: Nitzan Yizhar <nitzany@wix.com>
---
 src/components/hint/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index 9389300d89..1c0c8731e2 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -429,7 +429,7 @@ class Hint extends Component<HintProps, HintState> {
 
       if (targetPosition?.left) {
         hintMessageOffset = targetPosition?.left as number;
-        if (this.getTargetPositionOnScreen() === 'center') {
+        if (this.getTargetPositionOnScreen() === TARGET_POSITIONS.CENTER) {
           hintMessageOffset -= Constants.screenWidth / 2;
         } else {
           hintMessageOffset -= hintMessageWidth / 2;

From 3414fffcdb4d2399eebf71bef8b3defd3ebc4bdb Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Tue, 31 Dec 2024 07:21:30 +0200
Subject: [PATCH 4/5] fix: adjust edge margins and target position thresholds
 in Hint component

---
 src/components/hint/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index 1c0c8731e2..97f3ee92c6 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -286,7 +286,7 @@ class Hint extends Component<HintProps, HintState> {
   }
 
   get edgeMargins() {
-    const {edgeMargins = DEFAULT_EDGE_MARGINS} = this.props;
+    const {edgeMargins = this.isUsingModal() ? DEFAULT_EDGE_MARGINS : 0} = this.props;
     return edgeMargins;
   }
 
@@ -309,9 +309,9 @@ class Hint extends Component<HintProps, HintState> {
     if (this.targetLayout?.x !== undefined && this.targetLayout?.width) {
       const targetMidPosition = this.targetLayout.x + this.targetLayout.width / 2;
 
-      if (targetMidPosition > this.containerWidth * (2 / 3)) {
+      if (targetMidPosition > this.containerWidth * (4 / 5)) {
         return TARGET_POSITIONS.RIGHT;
-      } else if (targetMidPosition < this.containerWidth * (1 / 3)) {
+      } else if (targetMidPosition < this.containerWidth * (1 / 5)) {
         return TARGET_POSITIONS.LEFT;
       }
     }

From a08f6f5b134f1a0995f4acca1a9904901a826125 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Thu, 2 Jan 2025 10:10:55 +0200
Subject: [PATCH 5/5] Add minimum width to Hint component for better layout
 consistency

---
 src/components/hint/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index 97f3ee92c6..5b520f1838 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -29,6 +29,7 @@ const middleTip = require('./assets/hintTipMiddle.png');
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
+const HINT_MIN_WIDTH = 68;
 
 enum TARGET_POSITIONS {
   LEFT = 'left',
@@ -508,6 +509,7 @@ class Hint extends Component<HintProps, HintState> {
         testID={`${testID}.message`}
         row
         centerV
+        centerH={!!hintMessageOffset}
         style={[
           styles.hint,
           !removePaddings && styles.hintPaddings,
@@ -683,6 +685,7 @@ const styles = StyleSheet.create({
     position: 'absolute'
   },
   hint: {
+    minWidth: HINT_MIN_WIDTH,
     maxWidth: Math.min(Constants.windowWidth - 2 * Spacings.s4, 400),
     borderRadius: BorderRadiuses.br60,
     backgroundColor: DEFAULT_COLOR