From 9ff9994b2af6bd80241010c0b75aa8078ed2b936 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 3 Jul 2023 11:32:57 -0300 Subject: [PATCH 1/3] feat: `opacity` prop --- src/components/Tooltip/Tooltip.tsx | 7 ++++++- src/components/Tooltip/TooltipTypes.d.ts | 1 + src/components/TooltipController/TooltipController.tsx | 10 ++++++++++ .../TooltipController/TooltipControllerTypes.d.ts | 1 + 4 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 9d5da714..7bdd76bd 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -45,6 +45,7 @@ const Tooltip = ({ activeAnchor, setActiveAnchor, border, + opacity, }: ITooltip) => { const tooltipRef = useRef(null) const tooltipArrowRef = useRef(null) @@ -598,7 +599,11 @@ const Tooltip = ({ [coreStyles['clickable']]: clickable, }, )} - style={{ ...externalStyles, ...inlineStyles }} + style={{ + ...externalStyles, + ...inlineStyles, + opacity: opacity !== undefined && canShow ? opacity : undefined, + }} ref={tooltipRef} > {content} diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index f75520d7..65a53c29 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/src/components/Tooltip/TooltipTypes.d.ts @@ -90,4 +90,5 @@ export interface ITooltip { activeAnchor: HTMLElement | null setActiveAnchor: (anchor: HTMLElement | null) => void border?: CSSProperties['border'] + opacity?: CSSProperties['opacity'] } diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 01e2785f..b5e7c4fd 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -45,6 +45,7 @@ const TooltipController = ({ position, isOpen, border, + opacity, setIsOpen, afterShow, afterHide, @@ -248,6 +249,14 @@ const TooltipController = ({ // eslint-disable-next-line no-console console.warn(`[react-tooltip] "${border}" is not a valid \`border\`.`) } + if (style?.opacity) { + // eslint-disable-next-line no-console + console.warn('[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.') + } + if (opacity && !CSS.supports('opacity', `${opacity}`)) { + // eslint-disable-next-line no-console + console.warn(`[react-tooltip] "${opacity}" is not a valid \`opacity\`.`) + } }, []) /** @@ -299,6 +308,7 @@ const TooltipController = ({ position, isOpen, border, + opacity, setIsOpen, afterShow, afterHide, diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index 3e9a161d..09adc2b1 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -67,6 +67,7 @@ export interface ITooltipController { * might break the tooltip arrow positioning. */ border?: CSSProperties['border'] + opacity?: CSSProperties['opacity'] setIsOpen?: (value: boolean) => void afterShow?: () => void afterHide?: () => void From 8ae1e6646bd5dbb6ae1c961c84f43dae6ce5359c Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 3 Jul 2023 11:37:15 -0300 Subject: [PATCH 2/3] docs: `opacity` prop --- docs/docs/options.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index c45b0f09..ca676fe3 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -122,6 +122,7 @@ import { Tooltip } from 'react-tooltip'; | `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden | | `middlewares` | `Middleware[]` | no | | array of valid `floating-ui` middlewares | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information | | `border` | `CSSProperties['border']` | no | | a CSS border style | Change the style of the tooltip border (including the arrow) | +| `opacity` | `CSSProperties['opacity']` | no | `0.9` | a CSS opacity value | Change the opacity of the tooltip | ### Envs From d75cb4bfb09a825695b16b99f78f4b37834694dc Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 3 Jul 2023 11:37:38 -0300 Subject: [PATCH 3/3] docs: missed changes for `border` prop --- docs/docs/upgrade-guide/changelog-v4-v5.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/upgrade-guide/changelog-v4-v5.md b/docs/docs/upgrade-guide/changelog-v4-v5.md index 1f884742..a50f7574 100644 --- a/docs/docs/upgrade-guide/changelog-v4-v5.md +++ b/docs/docs/upgrade-guide/changelog-v4-v5.md @@ -63,11 +63,11 @@ If you run into any problems with the tooltip not updating after changes are mad - [x] `offset` - also available on anchor element as `data-tooltip-offset` - [ ] `padding` - use `className` and custom CSS - [ ] `multiline` - supported by default in `content` and `html` props -- [ ] `border` - use `className` and custom CSS -- [ ] `borderClass` - use `className` and custom CSS +- [x] `border` +- [ ] `borderClass` - use `border` prop - [ ] `textColor` - use `className` and custom CSS - [ ] `backgroundColor` - use `className` and custom CSS -- [ ] `borderColor` - use `className` and custom CSS +- [ ] `borderColor` - use `border` prop - [ ] `arrowColor` - use `className` and custom CSS - [ ] `arrowRadius` - use `className` and custom CSS - [ ] `tooltipRadius` - use `className` and custom CSS