From 228a2333615be2631efe604b577dc773525056be Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Wed, 14 Jun 2023 19:57:11 -0300 Subject: [PATCH 01/11] feat: add manual inject styles function into the project --- .npmignore | 7 +++ rollup-plugins/replace-before-save-file.js | 68 ++++++++++++++++++++++ rollup.config.prod.js | 28 ++++----- src/index.tsx | 9 +++ src/utils/style-inject.ts | 34 +++++++++++ 5 files changed, 130 insertions(+), 16 deletions(-) create mode 100644 rollup-plugins/replace-before-save-file.js create mode 100644 src/utils/style-inject.ts diff --git a/.npmignore b/.npmignore index 6c86b701..e95b8803 100644 --- a/.npmignore +++ b/.npmignore @@ -25,11 +25,18 @@ coverage/ .vscode/ .husky/ .github/ +rollup-plugins/ // misc files bundlesize.config.json +prebuild.js +jest.config.ts // bundler - rollup rollup.config.dev.js rollup.config.prod.js rollup.config.types.js + +// bundler - esbuild +esbuild.config.dev.mjs +esbuild.config.prod.mjs diff --git a/rollup-plugins/replace-before-save-file.js b/rollup-plugins/replace-before-save-file.js new file mode 100644 index 00000000..a79be573 --- /dev/null +++ b/rollup-plugins/replace-before-save-file.js @@ -0,0 +1,68 @@ +/* eslint-disable no-await-in-loop */ +import { readFile, writeFile } from 'node:fs/promises' + +const cssMinifier = (css) => + css + .replace(/([^0-9a-zA-Z.#])\s+/g, '$1') + .replace(/\s([^0-9a-zA-Z.#]+)/g, '$1') + .replace(/;}/g, '}') + .replace(/\/\*.*?\*\//g, '') + +/* eslint-disable no-param-reassign */ +/** + * This plugin is very similar to the `replace`, but instead of only + * check for strings, this plugin check for everything that matches the query. + * expected input: { 'lorem:': 'ipsum' } + * or + * expected input: { 'lorem:': 'file:myfile.css' } + */ +export default function replaceBeforeSaveFile(replaceObject = {}) { + return { + // this name will show up in warnings and errors of rollup execution + name: 'modify-generated-files', + /** + * This write bundle is executed after the files being written. + * Docs: https://rollupjs.org/plugin-development/#writebundle + */ + async writeBundle(options, bundle) { + const replaceKeys = Object.keys(replaceObject) + if (replaceKeys.length > 0) { + const files = Object.keys(bundle) + + let file = null + let key = null + let regex = null + for (let index = 0; index < files.length; index += 1) { + file = files[index] + + if (file && bundle[file].code) { + for (let indexKeys = 0; indexKeys < replaceKeys.length; indexKeys += 1) { + key = replaceKeys[indexKeys] + regex = new RegExp(key, 'g') + + if (bundle[file].code.includes(key)) { + if (replaceObject[key].includes('file:')) { + const [, fileName] = replaceObject[key].split(':') + const fileContent = await readFile(`./dist/${fileName}`, 'utf8') + + if (options.file.includes('.min')) { + bundle[file].code = bundle[file].code.replace( + regex, + `\`${cssMinifier(fileContent)}\``, + ) + } else { + bundle[file].code = bundle[file].code.replace(regex, `\`${fileContent}\``) + } + } else { + bundle[file].code = bundle[file].code.replace(regex, replaceObject[key]) + } + + await writeFile(options.file, bundle[file].code) + } + } + } + } + } + }, + } +} diff --git a/rollup.config.prod.js b/rollup.config.prod.js index 2157a06f..331e1cea 100644 --- a/rollup.config.prod.js +++ b/rollup.config.prod.js @@ -7,6 +7,8 @@ import { nodeResolve } from '@rollup/plugin-node-resolve' import ts from '@rollup/plugin-typescript' import { terser } from 'rollup-plugin-terser' import typescript from 'typescript' +import { fileURLToPath } from 'node:url' +import replaceBeforeSaveFile from './rollup-plugins/replace-before-save-file.js' import * as pkg from './package.json' const input = ['src/index.tsx'] @@ -24,21 +26,13 @@ const banner = ` const external = [ ...Object.keys(pkg.peerDependencies ?? {}), ...Object.keys(pkg.dependencies ?? {}), + fileURLToPath(new URL('temp-path-for-styles', import.meta.url)), ] const buildFormats = [ - /** - * Temporary build to keep the extracted CSS file. - * I don't want to do a major release now with only the CSS change, - * so, we will keep the css being exported by the lib and now - * we will inject the css into the head by default. - * The CSS file import is deprecated and the file is only - * for style reference now. - */ { file: 'dist/react-tooltip.mjs', format: 'es', - extractCSS: true, }, { file: 'dist/react-tooltip.umd.js', @@ -74,37 +68,39 @@ const sharedPlugins = [ typescript, tsconfig: './tsconfig.json', noEmitOnError: false, - // declaration: true, - // declarationDir: './build', }), commonjs({ include: 'node_modules/**', }), ] // this step is just to build the minified javascript files -const minifiedBuildFormats = buildFormats.map(({ file, extractCSS, ...rest }) => ({ +const minifiedBuildFormats = buildFormats.map(({ file, ...rest }) => ({ file: file.replace(/(\.[cm]?js)$/, '.min$1'), ...rest, minify: true, - extractCSS, plugins: [terser({ compress: { directives: false } }), filesize()], })) const allBuildFormats = [...buildFormats, ...minifiedBuildFormats] const config = allBuildFormats.map( - ({ file, format, globals, plugins: specificPlugins, minify, extractCSS }) => { + ({ file, format, globals, plugins: specificPlugins, minify }) => { const plugins = [ ...sharedPlugins, postcss({ - // eslint-disable-next-line no-nested-ternary - extract: extractCSS ? (minify ? 'react-tooltip.min.css' : 'react-tooltip.css') : false, // this will generate a specific file and override on multiples build, but the css will be the same + extract: minify ? 'react-tooltip.min.css' : 'react-tooltip.css', // this will generate a specific file and override on multiples build, but the css will be the same autoModules: true, include: '**/*.css', extensions: ['.css'], plugins: [], minimize: Boolean(minify), }), + replaceBeforeSaveFile({ + // this only works for the react-tooltip.css because it's the first file + // writen in our build process before the javascript files. + "'temp-content-for-styles'": 'file:react-tooltip.css', + '"temp-content-for-styles"': 'file:react-tooltip.css', + }), ] if (specificPlugins && specificPlugins.length) { diff --git a/src/index.tsx b/src/index.tsx index 326c4083..4e69e9fd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,7 @@ import './tokens.css' + +import styleInject from 'utils/style-inject' + import type { ChildrenType, DataAttribute, @@ -13,6 +16,12 @@ import type { import type { ITooltipController } from './components/TooltipController/TooltipControllerTypes' import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProviderTypes' +// this content will be replaced in build time with the `react-tooltip.css` builded content +const TooltipStyles = 'temp-content-for-styles' + +// @ts-ignore +styleInject(TooltipStyles) + export { TooltipController as Tooltip } from './components/TooltipController' export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider' export type { diff --git a/src/utils/style-inject.ts b/src/utils/style-inject.ts new file mode 100644 index 00000000..db647806 --- /dev/null +++ b/src/utils/style-inject.ts @@ -0,0 +1,34 @@ +function styleInject(css: string, ref?: any) { + if (!ref) { + // eslint-disable-next-line no-param-reassign + ref = {} + } + const { insertAt } = ref + + if (!css || typeof document === 'undefined' || document.getElementById('react-tooltip-styles')) { + return + } + + const head = document.head || document.getElementsByTagName('head')[0] + const style: any = document.createElement('style') + style.id = 'react-tooltip-styles' + style.type = 'text/css' + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild) + } else { + head.appendChild(style) + } + } else { + head.appendChild(style) + } + + if (style.styleSheet) { + style.styleSheet.cssText = css + } else { + style.appendChild(document.createTextNode(css)) + } +} + +export default styleInject From 32dcff7697f3b24c5ab372cc5fd18a285d25777a Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Thu, 15 Jun 2023 10:46:29 -0300 Subject: [PATCH 02/11] feat: `removeStyle()` function --- rollup.config.prod.js | 4 ++-- src/index.tsx | 9 +++++---- .../{style-inject.ts => handle-style.ts} | 20 +++++++++++++++---- 3 files changed, 23 insertions(+), 10 deletions(-) rename src/utils/{style-inject.ts => handle-style.ts} (58%) diff --git a/rollup.config.prod.js b/rollup.config.prod.js index 331e1cea..372c197c 100644 --- a/rollup.config.prod.js +++ b/rollup.config.prod.js @@ -98,8 +98,8 @@ const config = allBuildFormats.map( replaceBeforeSaveFile({ // this only works for the react-tooltip.css because it's the first file // writen in our build process before the javascript files. - "'temp-content-for-styles'": 'file:react-tooltip.css', - '"temp-content-for-styles"': 'file:react-tooltip.css', + "'react-tooltip-css-placeholder'": 'file:react-tooltip.css', + '"react-tooltip-css-placeholder"': 'file:react-tooltip.css', }), ] diff --git a/src/index.tsx b/src/index.tsx index 4e69e9fd..fafca24b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import './tokens.css' -import styleInject from 'utils/style-inject' +import { injectStyle } from 'utils/handle-style' import type { ChildrenType, @@ -17,10 +17,9 @@ import type { ITooltipController } from './components/TooltipController/TooltipC import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProviderTypes' // this content will be replaced in build time with the `react-tooltip.css` builded content -const TooltipStyles = 'temp-content-for-styles' +const TooltipStyles = 'react-tooltip-css-placeholder' -// @ts-ignore -styleInject(TooltipStyles) +injectStyle(TooltipStyles) export { TooltipController as Tooltip } from './components/TooltipController' export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider' @@ -37,3 +36,5 @@ export type { IPosition, Middleware, } + +export { removeStyle } from './utils/handle-style' diff --git a/src/utils/style-inject.ts b/src/utils/handle-style.ts similarity index 58% rename from src/utils/style-inject.ts rename to src/utils/handle-style.ts index db647806..fa562891 100644 --- a/src/utils/style-inject.ts +++ b/src/utils/handle-style.ts @@ -1,17 +1,21 @@ -function styleInject(css: string, ref?: any) { +const REACT_TOOLTIP_STYLES_ID = 'react-tooltip-styles' + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function injectStyle(css: string, ref?: any) { if (!ref) { // eslint-disable-next-line no-param-reassign ref = {} } const { insertAt } = ref - if (!css || typeof document === 'undefined' || document.getElementById('react-tooltip-styles')) { + if (!css || typeof document === 'undefined' || document.getElementById(REACT_TOOLTIP_STYLES_ID)) { return } const head = document.head || document.getElementsByTagName('head')[0] + // eslint-disable-next-line @typescript-eslint/no-explicit-any const style: any = document.createElement('style') - style.id = 'react-tooltip-styles' + style.id = REACT_TOOLTIP_STYLES_ID style.type = 'text/css' if (insertAt === 'top') { @@ -31,4 +35,12 @@ function styleInject(css: string, ref?: any) { } } -export default styleInject +function removeStyle() { + const style = document.getElementById(REACT_TOOLTIP_STYLES_ID) + if (!style) { + return + } + style.remove() +} + +export { injectStyle, removeStyle } From 892e84e54ae64cb6aff3bb10f49e9c3b44d0be32 Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Fri, 16 Jun 2023 12:56:16 -0300 Subject: [PATCH 03/11] Update src/utils/handle-style.ts Co-authored-by: Gabriel Jablonski --- src/utils/handle-style.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts index fa562891..474d45c2 100644 --- a/src/utils/handle-style.ts +++ b/src/utils/handle-style.ts @@ -37,10 +37,7 @@ function injectStyle(css: string, ref?: any) { function removeStyle() { const style = document.getElementById(REACT_TOOLTIP_STYLES_ID) - if (!style) { - return - } - style.remove() + style?.remove() } export { injectStyle, removeStyle } From 4f9e82b85179e8b002e485586320fc6363ef8b44 Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Fri, 16 Jun 2023 15:48:12 -0300 Subject: [PATCH 04/11] chore: split css between styles and core styles --- rollup-plugins/replace-before-save-file.js | 35 +++++++++++++---- rollup.config.prod.js | 2 + src/components/Tooltip/Tooltip.tsx | 29 ++++++++------ src/components/Tooltip/core-styles.module.css | 38 +++++++++++++++++++ src/components/Tooltip/styles.module.css | 34 ----------------- src/index.tsx | 4 +- src/utils/handle-style.ts | 10 ++--- 7 files changed, 93 insertions(+), 59 deletions(-) create mode 100644 src/components/Tooltip/core-styles.module.css diff --git a/rollup-plugins/replace-before-save-file.js b/rollup-plugins/replace-before-save-file.js index a79be573..0fdf4383 100644 --- a/rollup-plugins/replace-before-save-file.js +++ b/rollup-plugins/replace-before-save-file.js @@ -41,17 +41,36 @@ export default function replaceBeforeSaveFile(replaceObject = {}) { regex = new RegExp(key, 'g') if (bundle[file].code.includes(key)) { - if (replaceObject[key].includes('file:')) { + if (key.includes('css') && replaceObject[key].includes('file:')) { const [, fileName] = replaceObject[key].split(':') const fileContent = await readFile(`./dist/${fileName}`, 'utf8') - if (options.file.includes('.min')) { - bundle[file].code = bundle[file].code.replace( - regex, - `\`${cssMinifier(fileContent)}\``, - ) - } else { - bundle[file].code = bundle[file].code.replace(regex, `\`${fileContent}\``) + const splittedCSSContent = fileContent.split('/** end - core styles **/') + + if (key.includes('core-css')) { + if (options.file.includes('.min')) { + bundle[file].code = bundle[file].code.replace( + regex, + `\`${cssMinifier(splittedCSSContent[0])}\``, + ) + } else { + bundle[file].code = bundle[file].code.replace( + regex, + `\`${splittedCSSContent[0]}\``, + ) + } + } else if (!key.includes('core-css')) { + if (options.file.includes('.min')) { + bundle[file].code = bundle[file].code.replace( + regex, + `\`${cssMinifier(splittedCSSContent[1])}\``, + ) + } else { + bundle[file].code = bundle[file].code.replace( + regex, + `\`${splittedCSSContent[1]}\``, + ) + } } } else { bundle[file].code = bundle[file].code.replace(regex, replaceObject[key]) diff --git a/rollup.config.prod.js b/rollup.config.prod.js index 372c197c..f8d1df46 100644 --- a/rollup.config.prod.js +++ b/rollup.config.prod.js @@ -100,6 +100,8 @@ const config = allBuildFormats.map( // writen in our build process before the javascript files. "'react-tooltip-css-placeholder'": 'file:react-tooltip.css', '"react-tooltip-css-placeholder"': 'file:react-tooltip.css', + "'react-tooltip-core-css-placeholder'": 'file:react-tooltip.css', + '"react-tooltip-core-css-placeholder"': 'file:react-tooltip.css', }), ] diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 4b79105f..e6ab38e1 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -5,6 +5,7 @@ import { useTooltip } from 'components/TooltipProvider' import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect' import { getScrollParent } from 'utils/get-scroll-parent' import { computeTooltipPosition } from 'utils/compute-positions' +import coreStyles from './core-styles.module.css' import styles from './styles.module.css' import type { IPosition, ITooltip, PlacesType } from './TooltipTypes' @@ -583,14 +584,14 @@ const Tooltip = ({ role="tooltip" className={classNames( 'react-tooltip', - styles['tooltip'], + coreStyles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, { - [styles['show']]: canShow, - [styles['fixed']]: positionStrategy === 'fixed', - [styles['clickable']]: clickable, + [coreStyles['show']]: canShow, + [coreStyles['fixed']]: positionStrategy === 'fixed', + [coreStyles['clickable']]: clickable, }, )} style={{ ...externalStyles, ...inlineStyles }} @@ -598,13 +599,19 @@ const Tooltip = ({ > {content} diff --git a/src/components/Tooltip/core-styles.module.css b/src/components/Tooltip/core-styles.module.css new file mode 100644 index 00000000..c97ec7ae --- /dev/null +++ b/src/components/Tooltip/core-styles.module.css @@ -0,0 +1,38 @@ +.tooltip { + visibility: hidden; + width: max-content; + position: absolute; + top: 0; + left: 0; + padding: 8px 16px; + border-radius: 3px; + font-size: 90%; + pointer-events: none; + opacity: 0; + transition: opacity 0.3s ease-out; + will-change: opacity, visibility; +} + +.fixed { + position: fixed; +} + +.arrow { + position: absolute; + background: inherit; +} + +.noArrow { + display: none; +} + +.clickable { + pointer-events: auto; +} + +.show { + visibility: visible; + opacity: var(--rt-opacity); +} + +/** end - core styles **/ diff --git a/src/components/Tooltip/styles.module.css b/src/components/Tooltip/styles.module.css index 63cd8be0..ddfd97a9 100644 --- a/src/components/Tooltip/styles.module.css +++ b/src/components/Tooltip/styles.module.css @@ -1,43 +1,9 @@ -.tooltip { - visibility: hidden; - width: max-content; - position: absolute; - top: 0; - left: 0; - padding: 8px 16px; - border-radius: 3px; - font-size: 90%; - pointer-events: none; - opacity: 0; - transition: opacity 0.3s ease-out; - will-change: opacity, visibility; -} - -.fixed { - position: fixed; -} - .arrow { - position: absolute; - background: inherit; width: 8px; height: 8px; transform: rotate(45deg); } -.noArrow { - display: none; -} - -.clickable { - pointer-events: auto; -} - -.show { - visibility: visible; - opacity: var(--rt-opacity); -} - /** Types variant **/ .dark { background: var(--rt-color-dark); diff --git a/src/index.tsx b/src/index.tsx index fafca24b..056a9237 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -16,9 +16,11 @@ import type { import type { ITooltipController } from './components/TooltipController/TooltipControllerTypes' import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProviderTypes' -// this content will be replaced in build time with the `react-tooltip.css` builded content +// those content will be replaced in build time with the `react-tooltip.css` builded content +const TooltipCoreStyles = 'react-tooltip-core-css-placeholder' const TooltipStyles = 'react-tooltip-css-placeholder' +injectStyle(TooltipCoreStyles, 'react-tooltip-core-styles') injectStyle(TooltipStyles) export { TooltipController as Tooltip } from './components/TooltipController' diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts index 474d45c2..1182efee 100644 --- a/src/utils/handle-style.ts +++ b/src/utils/handle-style.ts @@ -1,7 +1,7 @@ const REACT_TOOLTIP_STYLES_ID = 'react-tooltip-styles' -// eslint-disable-next-line @typescript-eslint/no-explicit-any -function injectStyle(css: string, ref?: any) { +// eslint-disable-next-line @typescript-eslint/no-explicit-any, default-param-last +function injectStyle(css: string, id = REACT_TOOLTIP_STYLES_ID, ref?: any) { if (!ref) { // eslint-disable-next-line no-param-reassign ref = {} @@ -15,7 +15,7 @@ function injectStyle(css: string, ref?: any) { const head = document.head || document.getElementsByTagName('head')[0] // eslint-disable-next-line @typescript-eslint/no-explicit-any const style: any = document.createElement('style') - style.id = REACT_TOOLTIP_STYLES_ID + style.id = id style.type = 'text/css' if (insertAt === 'top') { @@ -35,8 +35,8 @@ function injectStyle(css: string, ref?: any) { } } -function removeStyle() { - const style = document.getElementById(REACT_TOOLTIP_STYLES_ID) +function removeStyle(id = REACT_TOOLTIP_STYLES_ID) { + const style = document.getElementById(id) style?.remove() } From 34c68fdea016a4bc953f51f2538d9618406f8245 Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Fri, 23 Jun 2023 19:02:27 -0300 Subject: [PATCH 05/11] chore: remove unecessary config from rollup build --- rollup.config.prod.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/rollup.config.prod.js b/rollup.config.prod.js index f8d1df46..7c29d6e8 100644 --- a/rollup.config.prod.js +++ b/rollup.config.prod.js @@ -7,7 +7,6 @@ import { nodeResolve } from '@rollup/plugin-node-resolve' import ts from '@rollup/plugin-typescript' import { terser } from 'rollup-plugin-terser' import typescript from 'typescript' -import { fileURLToPath } from 'node:url' import replaceBeforeSaveFile from './rollup-plugins/replace-before-save-file.js' import * as pkg from './package.json' @@ -26,7 +25,6 @@ const banner = ` const external = [ ...Object.keys(pkg.peerDependencies ?? {}), ...Object.keys(pkg.dependencies ?? {}), - fileURLToPath(new URL('temp-path-for-styles', import.meta.url)), ] const buildFormats = [ From ae26bf8dccbc9a5597cd8f3df41867c8d719e42e Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Fri, 23 Jun 2023 19:03:22 -0300 Subject: [PATCH 06/11] feat: update handle-style utils --- src/index.tsx | 4 ++-- src/utils/handle-style.ts | 45 +++++++++++++++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 056a9237..d8c11be7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -20,8 +20,8 @@ import type { ITooltipWrapper } from './components/TooltipProvider/TooltipProvid const TooltipCoreStyles = 'react-tooltip-core-css-placeholder' const TooltipStyles = 'react-tooltip-css-placeholder' -injectStyle(TooltipCoreStyles, 'react-tooltip-core-styles') -injectStyle(TooltipStyles) +injectStyle({ css: TooltipCoreStyles, type: 'core' }) +injectStyle({ css: TooltipStyles }) export { TooltipController as Tooltip } from './components/TooltipController' export { TooltipProvider, TooltipWrapper } from './components/TooltipProvider' diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts index 1182efee..4bb86f66 100644 --- a/src/utils/handle-style.ts +++ b/src/utils/handle-style.ts @@ -1,14 +1,40 @@ -const REACT_TOOLTIP_STYLES_ID = 'react-tooltip-styles' +// This is the ID for the core styles of ReactTooltip +const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles' +// This is the ID for the visual styles of ReactTooltip +const REACT_TOOLTIP_BASE_STYLES_ID = 'react-tooltip-base-styles' // eslint-disable-next-line @typescript-eslint/no-explicit-any, default-param-last -function injectStyle(css: string, id = REACT_TOOLTIP_STYLES_ID, ref?: any) { +function injectStyle({ + css, + id = REACT_TOOLTIP_BASE_STYLES_ID, + type = 'base', + ref, +}: { + css: string + id?: string + type?: string + ref?: any +}) { + if (type === 'core' && process.env.REACT_TOOLTIP_DISABLE_CORE_STYLES) { + return + } + + if (type !== 'core' && process.env.REACT_TOOLTIP_DISABLE_BASE_STYLES) { + return + } + + if (type === 'core') { + // eslint-disable-next-line no-param-reassign + id = REACT_TOOLTIP_CORE_STYLES_ID + } + if (!ref) { // eslint-disable-next-line no-param-reassign ref = {} } const { insertAt } = ref - if (!css || typeof document === 'undefined' || document.getElementById(REACT_TOOLTIP_STYLES_ID)) { + if (!css || typeof document === 'undefined' || document.getElementById(id)) { return } @@ -35,7 +61,18 @@ function injectStyle(css: string, id = REACT_TOOLTIP_STYLES_ID, ref?: any) { } } -function removeStyle(id = REACT_TOOLTIP_STYLES_ID) { +function removeStyle({ + type = 'base', + id = REACT_TOOLTIP_BASE_STYLES_ID, +}: { + type?: string + id?: string +}) { + if (type === 'core') { + // eslint-disable-next-line no-param-reassign + id = REACT_TOOLTIP_CORE_STYLES_ID + } + const style = document.getElementById(id) style?.remove() } From 0c5046a644fb3fbb6ef391371a5fafe3b447bfcc Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Fri, 23 Jun 2023 19:03:49 -0300 Subject: [PATCH 07/11] docs: update docs with handling react tooltip styles sections --- docs/docs/examples/styling.mdx | 66 ++++++++++++++++++-- docs/docs/options.mdx | 109 ++++++++++++++++++--------------- 2 files changed, 120 insertions(+), 55 deletions(-) diff --git a/docs/docs/examples/styling.mdx b/docs/docs/examples/styling.mdx index 836448a0..ebce197f 100644 --- a/docs/docs/examples/styling.mdx +++ b/docs/docs/examples/styling.mdx @@ -6,11 +6,12 @@ sidebar_position: 1 How to customize tooltip styles in ReactTooltip styles. -Tooltip arrow inherits its background color from tooltip (its parent). +The tooltip arrow inherits its background color from the tooltip (its parent). import { Tooltip } from 'react-tooltip' import CodeBlock from '@theme/CodeBlock' import TooltipStyles from '!!raw-loader!../../../src/components/Tooltip/styles.module.css' +import TooltipCoreStyles from '!!raw-loader!../../../src/components/Tooltip/core-styles.module.css' export const TooltipAnchor = ({ children, id, ...rest }) => { return ( @@ -38,7 +39,7 @@ export const TooltipAnchor = ({ children, id, ...rest }) => { ### Inline Styling -You can add styles into the tooltip with inline styling. +You can add styles to the tooltip with inline styling. ```jsx import { Tooltip } from 'react-tooltip' @@ -101,11 +102,19 @@ import { Tooltip } from 'react-tooltip' #### Explanation -In this example, we are adding an extra level to the CSS classes. The following are the default styles for the tooltip: +:::info +Please note that **Core** styles are different from **Base** styles, for more information, please check the [Disabling ReactTooltip CSS](#disabling-reacttooltip-css) section. +::: + +In this example, we are adding an extra level to the CSS classes. The following are the default **base** styles for the tooltip: {TooltipStyles} -If we only add new classes like below, it will not work because it has the same level of specificity than the default dark variant. +And the following are the **core** styles for the tooltip: + +{TooltipCoreStyles} + +If we only add new classes like below, it will not work because it has the same level of specificity as the default dark variant. ```css .example { @@ -113,7 +122,7 @@ If we only add new classes like below, it will not work because it has the same background-color: rgb(0, 247, 255); } -/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/ +/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/ .example .example-arrow { background-color: rgb(255, 0, 0); } @@ -127,7 +136,7 @@ To make this work as expected, we need to add another level of specificity: background-color: rgb(0, 247, 255); } -/** add next line only if you want to have tooltip arrow with a different background color from tooltip **/ +/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/ .some-class-or-rule .example .example-arrow { background-color: rgb(255, 0, 0); } @@ -358,3 +367,48 @@ import { Tooltip } from 'react-tooltip' In summary, if you do it correctly you can use CSS specificity instead of `!important`. ::: + +### Disabling ReactTooltip CSS + +There are two ways to remove the ReactTooltip CSS: + +#### Environment Variables + +You can prevent ReactTooltip from injecting styles into the page by using environment variables, we currently support two types of styles: `core styles` and `base styles`. + +- Core Styles: basic styles that are necessary to make the tooltip work. +- Base Styles: visual styles to make the tooltip pretty. + +:::info + +We strongly recommend using this way because it's cleaner and better for performance to choose not to inject the styles instead of injecting and removing them when the page loads. + +::: + +| name | type | required | default | values | description | +| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `REACT_TOOLTIP_DISABLE_CORE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **core** styles from being injected into the page by ReactTooltip.

We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. | +| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.

Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. | + +#### Using removeStyle function + +:::caution + +Only use this method if you really can't use the environment variables to disable the style injection of ReactTooltip because this can impact the page performance. + +::: + +The function `removeStyle` accepts the following params: + +| name | type | required | default | values | description | +| ---- | ------ | -------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| type | string | no | `base` | `base` `core` | If `core` is defined, the core styles will be removed from the page, if nothing is defined, `base` styles will be removed as default value | + +```jsx +import { removeStyle } from 'react-tooltip' + +... + +removeStyle() // removes the injected base style of ReactTooltip +removeStyle({ type: 'core' }) // removes the injected core style of ReactTooltip - this can affect the basic functionality of ReactTooltip +``` diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index ed8d2b12..d3cf91e7 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -54,21 +54,21 @@ import { Tooltip } from 'react-tooltip'; #### Available attributes -| name | type | required | default | values | description | -| ------------------------------ | ---------- | --------- | ----------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) | -| data-tooltip-content | string | false | | | Content to de displayed in tooltip (`html` is priorized over `content`) | -| data-tooltip-html | string | false | | | HTML content to de displayed in tooltip | -| data-tooltip-place | string | false | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | -| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) | -| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | -| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag | -| ~~data-tooltip-events~~ | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click` `hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | -| data-tooltip-position-strategy | string | false | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | -| data-tooltip-delay-show | number | false | | any `number` | The delay (in ms) before showing the tooltip | -| data-tooltip-delay-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip | -| data-tooltip-float | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) | -| data-tooltip-hidden | boolean | false | `false` | `true` `false` | Tooltip will not be shown | +| name | type | required | default | values | description | +| ------------------------------ | ---------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| data-tooltip-id | string | false | | | The id set on the tooltip element (same as V4's `data-for`) | +| data-tooltip-content | string | false | | | Content to be displayed in the tooltip (`html` is priorized over `content`) | +| data-tooltip-html | string | false | | | HTML content to be displayed in tooltip | +| data-tooltip-place | string | false | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | +| data-tooltip-offset | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in the calculation) | +| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | +| data-tooltip-wrapper | string | false | `div` | `div` `span` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag | +| ~~data-tooltip-events~~ | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click` `hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | +| data-tooltip-position-strategy | string | false | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | +| data-tooltip-delay-show | number | false | | any `number` | The delay (in ms) before showing the tooltip | +| data-tooltip-delay-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip | +| data-tooltip-float | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) | +| data-tooltip-hidden | boolean | false | `false` | `true` `false` | Tooltip will not be shown | ### Props @@ -87,37 +87,48 @@ import { Tooltip } from 'react-tooltip'; #### Available props -| name | type | required | default | values | description | -| ------------------ | -------------------------- | -------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally | -| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally | -| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) | -| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead | -| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) | -| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | -| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) | -| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element | -| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead | -| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details | -| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | -| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag | -| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content | -| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | -| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element | -| `positionStrategy` | `string` | no | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | -| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip | -| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip | -| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) | -| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown | -| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown | -| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs | -| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip | -| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) | -| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip | -| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip | -| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM | -| `isOpen` | `boolean` | no | handled by internal state | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) | -| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | -| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown | -| `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 | +| name | type | required | default | values | description | +| ------------------ | -------------------------- | -------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally | +| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally | +| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) | +| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~
**DEPRECATED**
Use `children` or `render` instead | +| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) | +| `place` | `string` | no | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) | +| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in calculation) | +| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element | +| ~~`anchorId`~~ | ~~`string`~~ | ~~no~~ | | ~~any `string`~~ | ~~The id for the anchor element for the tooltip~~
**DEPRECATED**
Use `data-tooltip-id` or `anchorSelect` instead | +| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details | +| `variant` | `string` | no | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets | +| `wrapper` | HTML tag | no | `div` | `div` `span` `p` ... | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag | +| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content | +| ~~`events`~~ | ~~`string[]`~~ | ~~no~~ | ~~`hover`~~ | ~~`hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
**DEPRECATED**
Use `openOnClick` tooltip prop instead | +| `openOnClick` | `boolean` | no | `false` | `true` `false` | Controls whether the tooltip should open when clicking (`true`) or hovering (`false`) the anchor element | +| `positionStrategy` | `string` | no | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container | +| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip | +| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip | +| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) | +| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown | +| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown | +| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs | +| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip | +| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent) | +| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window will close the tooltip | +| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip | +| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM | +| `isOpen` | `boolean` | no | handled by internal state | `true` `false` | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) | +| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip | +| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown | +| `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 | + +### Envs + +We have some environment variables that can be used to enable or disable some behavior of the ReactTooltip, normally used on the server side. + +#### Available environment variables: + +| name | type | required | default | values | description | +| ----------------------------------- | --------- | -------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `REACT_TOOLTIP_DISABLE_CORE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **core** styles from being injected into the page by ReactTooltip.

We strongly recommend to keep the core styles being injected into the project unless you know what you are doing. | +| `REACT_TOOLTIP_DISABLE_BASE_STYLES` | `boolean` | no | `false` | `true` `false` | Environment variable to disable **base** styles from being injected into the page by ReactTooltip.

Those styles are just visual styles like colors, padding, etc... And can be disabled if you want to write your tooltip styles. | From b9fa34aa5302b102990a12f2f86131ba27a8f46b Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Sat, 24 Jun 2023 13:01:14 -0300 Subject: [PATCH 08/11] refactor: ignore `any` warning --- src/utils/handle-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts index 4bb86f66..a659127a 100644 --- a/src/utils/handle-style.ts +++ b/src/utils/handle-style.ts @@ -3,7 +3,6 @@ const REACT_TOOLTIP_CORE_STYLES_ID = 'react-tooltip-core-styles' // This is the ID for the visual styles of ReactTooltip const REACT_TOOLTIP_BASE_STYLES_ID = 'react-tooltip-base-styles' -// eslint-disable-next-line @typescript-eslint/no-explicit-any, default-param-last function injectStyle({ css, id = REACT_TOOLTIP_BASE_STYLES_ID, @@ -13,6 +12,7 @@ function injectStyle({ css: string id?: string type?: string + // eslint-disable-next-line @typescript-eslint/no-explicit-any ref?: any }) { if (type === 'core' && process.env.REACT_TOOLTIP_DISABLE_CORE_STYLES) { From 6d81ed905aff4d7bfa1f53606de92c0afcedbe4b Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Sat, 24 Jun 2023 13:01:57 -0300 Subject: [PATCH 09/11] docs: random fixes --- docs/docs/examples/anchor-select.mdx | 4 ++-- docs/docs/examples/render.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/examples/anchor-select.mdx b/docs/docs/examples/anchor-select.mdx index 2332d51c..1539d9fb 100644 --- a/docs/docs/examples/anchor-select.mdx +++ b/docs/docs/examples/anchor-select.mdx @@ -63,7 +63,7 @@ import { Tooltip } from 'react-tooltip'; :::info -A CSS selector for a specific id begins with a `.`. Don't forget to put it before the class on your selector! +A CSS selector for a specific class begins with a `.`. Don't forget to put it before the class on your selector! ::: @@ -99,7 +99,7 @@ Once you've understood how it works, you can write CSS selectors as complex as y `[attr^='prefix']` can be read as "any element that has an attribute `attr` in which its value starts with `prefix`". Remove the `^` for an exact match. -This example uses the name attribute, but it works for any HTML attribute (id, class, ...). +This example uses the `name` attribute, but it works for any HTML attribute (id, class, ...). ::: diff --git a/docs/docs/examples/render.mdx b/docs/docs/examples/render.mdx index f5517adc..65b4a4ac 100644 --- a/docs/docs/examples/render.mdx +++ b/docs/docs/examples/render.mdx @@ -39,7 +39,7 @@ The `render` prop can be used to render the tooltip content dynamically based on The function signature is as follows: ```ts -;(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType +(render: { content: string | null; activeAnchor: HTMLElement | null }) => ChildrenType ``` - `content` is available for quick access to the `data-tooltip-content` attribute on the anchor element From c4124c27e9ddeec6722fbeb8b40103274ad3bcdb Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Mon, 26 Jun 2023 15:29:25 -0300 Subject: [PATCH 10/11] fix: add default param to removeStyles function --- src/utils/handle-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/handle-style.ts b/src/utils/handle-style.ts index a659127a..083c274c 100644 --- a/src/utils/handle-style.ts +++ b/src/utils/handle-style.ts @@ -67,7 +67,7 @@ function removeStyle({ }: { type?: string id?: string -}) { +} = {}) { if (type === 'core') { // eslint-disable-next-line no-param-reassign id = REACT_TOOLTIP_CORE_STYLES_ID From 424ef700d15b86cae259bb24a279c3e04441356b Mon Sep 17 00:00:00 2001 From: Daniel Barion Date: Mon, 26 Jun 2023 15:31:20 -0300 Subject: [PATCH 11/11] chore: move some styling styles to base styles instead of core styles --- src/components/Tooltip/Tooltip.tsx | 1 + src/components/Tooltip/core-styles.module.css | 4 ---- src/components/Tooltip/styles.module.css | 7 +++++++ 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index e6ab38e1..f5ded4f3 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -585,6 +585,7 @@ const Tooltip = ({ className={classNames( 'react-tooltip', coreStyles['tooltip'], + styles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, diff --git a/src/components/Tooltip/core-styles.module.css b/src/components/Tooltip/core-styles.module.css index c97ec7ae..bc317a17 100644 --- a/src/components/Tooltip/core-styles.module.css +++ b/src/components/Tooltip/core-styles.module.css @@ -1,12 +1,8 @@ .tooltip { visibility: hidden; - width: max-content; position: absolute; top: 0; left: 0; - padding: 8px 16px; - border-radius: 3px; - font-size: 90%; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-out; diff --git a/src/components/Tooltip/styles.module.css b/src/components/Tooltip/styles.module.css index ddfd97a9..6ab5e964 100644 --- a/src/components/Tooltip/styles.module.css +++ b/src/components/Tooltip/styles.module.css @@ -1,3 +1,10 @@ +.tooltip { + padding: 8px 16px; + border-radius: 3px; + font-size: 90%; + width: max-content; +} + .arrow { width: 8px; height: 8px;