Skip to content

feat: add arrow size property #1251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: add arrow size property #1251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ const Tooltip = ({
border,
opacity,
arrowColor,
arrowSize = 8,
role = 'tooltip',
}: ITooltip) => {
const tooltipRef = useRef<HTMLElement>(null)
Expand Down Expand Up @@ -345,6 +346,7 @@ const Tooltip = ({
strategy: positionStrategy,
middlewares,
border,
arrowSize,
}).then((computedStylesData) => {
handleComputedPosition(computedStylesData)
})
Expand Down Expand Up @@ -437,6 +439,7 @@ const Tooltip = ({
strategy: positionStrategy,
middlewares,
border,
arrowSize,
}).then((computedStylesData) => {
if (!mounted.current) {
// invalidate computed positions after remount
Expand All @@ -456,6 +459,7 @@ const Tooltip = ({
position,
imperativeOptions?.position,
float,
arrowSize,
])

useEffect(() => {
Expand Down Expand Up @@ -899,6 +903,7 @@ const Tooltip = ({
background: arrowColor
? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
: undefined,
'--rt-arrow-size': `${arrowSize}px`,
}}
ref={tooltipArrowRef}
/>
Expand Down
1 change: 1 addition & 0 deletions src/components/Tooltip/TooltipTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,5 +158,6 @@ export interface ITooltip {
border?: CSSProperties['border']
opacity?: CSSProperties['opacity']
arrowColor?: CSSProperties['backgroundColor']
arrowSize?: number
role?: React.AriaRole
}
1 change: 1 addition & 0 deletions src/components/Tooltip/core-styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.arrow {
position: absolute;
background: inherit;
z-index: -1;
}

.noArrow {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Tooltip/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
}

.arrow {
width: 8px;
height: 8px;
width: var(--rt-arrow-size);
height: var(--rt-arrow-size);
Comment on lines +9 to +10
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add fallback value for CSS variable.

Consider adding a fallback value to ensure the arrow has a size even if the CSS variable is not set:

-.arrow {
-  width: var(--rt-arrow-size);
-  height: var(--rt-arrow-size);
-}
+.arrow {
+  width: var(--rt-arrow-size, 8px);
+  height: var(--rt-arrow-size, 8px);
+}

This provides backwards compatibility and prevents potential layout issues if the variable is undefined.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
width: var(--rt-arrow-size);
height: var(--rt-arrow-size);
/* src/components/Tooltip/styles.module.css */
.arrow {
width: var(--rt-arrow-size, 8px);
height: var(--rt-arrow-size, 8px);
}
🤖 Prompt for AI Agents 
In src/components/Tooltip/styles.module.css at lines 9 to 10, the CSS properties
width and height use the variable --rt-arrow-size without fallback values. To
fix this, add fallback values to both properties using the CSS var() function
syntax, for example var(--rt-arrow-size, 10px), so the arrow size defaults to a
specific value if the variable is not defined, preventing layout issues.

}

[class*='react-tooltip__place-top'] > .arrow {
Expand Down
2 changes: 2 additions & 0 deletions src/components/TooltipController/TooltipController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
border,
opacity,
arrowColor,
arrowSize,
setIsOpen,
afterShow,
afterHide,
Expand Down Expand Up @@ -368,6 +369,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
border,
opacity,
arrowColor,
arrowSize,
setIsOpen,
afterShow,
afterHide,
Expand Down
1 change: 1 addition & 0 deletions src/components/TooltipController/TooltipControllerTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export interface ITooltipController {
border?: CSSProperties['border']
opacity?: CSSProperties['opacity']
arrowColor?: CSSProperties['backgroundColor']
arrowSize?: number
setIsOpen?: (value: boolean) => void
afterShow?: () => void
afterHide?: () => void
Expand Down
6 changes: 3 additions & 3 deletions src/test/__snapshots__/tooltip-attributes.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`tooltip attributes basic tooltip 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -41,7 +41,7 @@ exports[`tooltip attributes tooltip with class name 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -65,7 +65,7 @@ exports[`tooltip attributes tooltip with place 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -4px; top: -1px;"
style="--rt-arrow-size: 8px; left: -4px; top: -1px;"
/>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/test/__snapshots__/tooltip-props.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`tooltip props basic tooltip 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -40,7 +40,7 @@ exports[`tooltip props clickable tooltip 1`] = `
</button>
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -62,7 +62,7 @@ exports[`tooltip props tooltip with custom position 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand Down Expand Up @@ -94,7 +94,7 @@ exports[`tooltip props tooltip with delay show 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -116,7 +116,7 @@ exports[`tooltip props tooltip with disableTooltip return false 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -138,7 +138,7 @@ exports[`tooltip props tooltip with float 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -165,7 +165,7 @@ exports[`tooltip props tooltip with html 1`] = `
</span>
<div
class="react-tooltip-arrow"
style="left: -1px; bottom: -4px;"
style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
/>
</div>
</div>
Expand All @@ -187,7 +187,7 @@ exports[`tooltip props tooltip with place 1`] = `
Hello World!
<div
class="react-tooltip-arrow"
style="left: -4px; top: -1px;"
style="--rt-arrow-size: 8px; left: -4px; top: -1px;"
/>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/utils/compute-tooltip-position-types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface IComputePositionArgs {
strategy?: 'absolute' | 'fixed'
middlewares?: Middleware[]
border?: CSSProperties['border']
arrowSize?: number
}

export interface IComputedPosition {
Expand Down
3 changes: 2 additions & 1 deletion src/utils/compute-tooltip-position.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const computeTooltipPosition = async ({
shift({ padding: 5 }),
],
border,
arrowSize = 8,
}: IComputePositionArgs) => {
if (!elementReference) {
// elementReference can be null or undefined and we will not compute the position
Expand Down Expand Up @@ -78,7 +79,7 @@ const computeTooltipPosition = async ({
right: '',
bottom: '',
...borderSide,
[staticSide]: `-${4 + borderWidth}px`,
[staticSide]: `-${arrowSize / 2 + borderWidth}px`,
}
/* c8 ignore end */

Expand Down