fix(Tipseen): resolve invalid HTML structure and ref/id prop issues

[humza1400]

User description

Summary

This PR fixes two issues in the Tipseen component:

1. Replaces the <Text> element’s element="p" with element="div" to resolve invalid HTML structure when rendering nested <div>s inside <p>.
2. Fixes improper usage of id and ref props on React.Fragment by conditionally rendering a <div> wrapper when necessary.

Changes

• element prop in Text changed from "p" to "div" to comply with HTML standards.
• Conditionally render a <div> instead of React.Fragment when id or ref is passed, avoiding React warnings.
• No changes in component behavior or appearance (verified in Storybook).

How I tested it

• Ran yarn storybook and verified no console warnings in the Tipseen stories.
• Confirmed component behavior is consistent.
• Ran yarn test and yarn lint with no issues related to my changes.

---

Error Messages Before Fix

---

PR Type

Bug fix

---

Description

• Fixes invalid HTML structure by changing Text element from <p> to <div>

• Resolves improper ref and id prop usage on React.Fragment

• Conditionally renders wrapper as <div> only when necessary

• Adds ellipsis={false} prop to Text component for consistency

---

Diagram Walkthrough

flowchart LR
  A["Tipseen Component"] -->|"Change Text element"| B["p to div"]
  A -->|"Fix Fragment props"| C["Conditional div wrapper"]
  C -->|"Apply props only when"| D["TipseenWrapper is div"]
  B -->|"Add ellipsis prop"| E["Text component"]

Loading

File Walkthrough

Relevant files

Bug fix

Tipseen.tsx Fix HTML structure and conditional wrapper props                  packages/core/src/components/Tipseen/Tipseen.tsx Changed Text component's element prop from "p" to "div" to fix invalid HTML nesting Added ellipsis={false} prop to Text component Created wrapperProps object to conditionally apply ref, id, and data-testid only when TipseenWrapper is a div Updated TipseenWrapper JSX to use spread wrapperProps instead of direct prop assignment, avoiding React warnings about invalid props on Fragment +7/-2

---

[humza1400]

Bump

@talkor

[qodo-merge-for-open-source]

PR Reviewer Guide 🔍

(Review updated until commit e277623)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing closing tag The Text component opening tag is added at line 221, but the corresponding closing tag is not visible in the diff. Verify that the closing </Text> tag is properly placed after the TipseenContext.Provider closing tag to ensure valid JSX structure. <Text color={textColor} type="text2" element="div" ellipsis={false} className={cx(styles.tipseenContent)}> <TipseenContext.Provider value={color}>{content}</TipseenContext.Provider> </Text> Missing closing wrapper The TipseenWrapper opening tag is added at line 228, but the corresponding closing tag is not visible in the diff. Ensure that </TipseenWrapper> is properly placed at the end of the component's return statement to maintain valid JSX structure. <TipseenWrapper {...wrapperProps}> <Tooltip className={cx(styles.tipseenWrapper, className, { [styles.tipseenWrapperWithoutCustomWidth]: !width, [styles.floating]: floating

[talkor]

Thank you @humza1400 ! And sorry for the long delay
Please just fix the lint issue (Prettier) and I'll merge
Thanks!!

[humza1400]

Thank you @humza1400 ! And sorry for the long delay Please just fix the lint issue (Prettier) and I'll merge Thanks!!

No problem! Happy to help. I ran prettier on Tipseen.tsx and committed the changes as it was the only file changed. I think we should be good to go, but let me know if you need anything else. @talkor

Looks like there's a pipeline failing for a missing Chromatic environment token which I'm assuming is normal for forked PRs.