diff --git a/jest.config.js b/jest.config.js index 1bb7df5d..1d94854b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,8 +2,7 @@ module.exports = { roots: ['/src'], transform: { '^.+\\.tsx?$': 'ts-jest', - '^.+\\.svg$': '/svgTransform.js', - '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform' + '^.+\\.svg$': '/svgTransform.js' }, testRegex: '(test|spec)\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'svg'], diff --git a/package-lock.json b/package-lock.json index 558376ff..04f3c81d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -77,7 +77,6 @@ "husky": "^4.2.3", "jest": "^26.6.3", "jest-axe": "^3.4.0", - "jest-css-modules-transform": "^4.4.2", "jest-date-mock": "^1.0.8", "jest-styled-components": "^7.0.2", "jscodeshift": "^0.15.0", @@ -23228,21 +23227,6 @@ "node": ">=8" } }, - "node_modules/jest-css-modules-transform": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/jest-css-modules-transform/-/jest-css-modules-transform-4.4.2.tgz", - "integrity": "sha512-qsUVOcY26chaFMJNMVrFYJBtYvPt1TImi9FWGaVycfsP6xnFW2HlnKRdZdKdg2LVVBv2Q9M4aLv7IbxPSXqPmg==", - "dev": true, - "license": "MIT", - "dependencies": { - "camelcase": "6.3.0", - "postcss": "^7.0.30 || ^8.0.0", - "postcss-nested": "^4.2.1 || ^5.0.0" - }, - "engines": { - "node": ">=10.0.0" - } - }, "node_modules/jest-date-mock": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/jest-date-mock/-/jest-date-mock-1.0.10.tgz", @@ -31957,40 +31941,6 @@ "postcss": "^8.1.0" } }, - "node_modules/postcss-nested": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz", - "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==", - "dev": true, - "license": "MIT", - "dependencies": { - "postcss-selector-parser": "^6.0.6" - }, - "engines": { - "node": ">=12.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": "^8.2.14" - } - }, - "node_modules/postcss-nested/node_modules/postcss-selector-parser": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", - "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", - "dev": true, - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/postcss-resolve-nested-selector": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz", diff --git a/package.json b/package.json index 1c671153..fe378449 100644 --- a/package.json +++ b/package.json @@ -132,7 +132,6 @@ "husky": "^4.2.3", "jest": "^26.6.3", "jest-axe": "^3.4.0", - "jest-css-modules-transform": "^4.4.2", "jest-date-mock": "^1.0.8", "jest-styled-components": "^7.0.2", "jscodeshift": "^0.15.0", diff --git a/src/components/experimental/Tooltip/Tooltip.tsx b/src/components/experimental/Tooltip/Tooltip.tsx index 5ea3d395..21afd2d4 100644 --- a/src/components/experimental/Tooltip/Tooltip.tsx +++ b/src/components/experimental/Tooltip/Tooltip.tsx @@ -1,10 +1,10 @@ import React from 'react'; +import { createGlobalStyle } from 'styled-components'; + import { OverlayArrow, Tooltip as AriaTooltip, TooltipTrigger, Focusable } from 'react-aria-components'; import type { TooltipProps as AriaTooltipProps, TooltipTriggerComponentProps } from 'react-aria-components'; -import './tooltip.css'; - interface TooltipProps { children: any; content: string; @@ -14,6 +14,67 @@ interface TooltipProps { triggerProps?: Omit; } +const TooltipStyles = createGlobalStyle` + .react-aria-Tooltip { + box-shadow: 0 8px 20px rgba(0 0 0 / 0.1); + border-radius: 4px; + background: var(--wave-exp-color-inverse-surface); + color: var(--wave-exp-color-inverse-on-surface); + forced-color-adjust: none; + outline: none; + padding: 2px 8px; + max-width: 150px; + + /* fixes FF gap */ + transform: translate3d(0, 0, 0); + transition: transform 200ms, opacity 200ms; + + & .react-aria-OverlayArrow svg { + display: block; + fill: var(--wave-exp-color-inverse-surface); + } + + &[data-entering], + &[data-exiting] { + transform: var(--origin); + opacity: 0; + } + + &[data-placement='top'] { + margin-bottom: 8px; + + --origin: translateY(4px); + } + + &[data-placement='bottom'] { + margin-top: 8px; + + --origin: translateY(-4px); + & .react-aria-OverlayArrow svg { + transform: rotate(180deg); + } + } + + &[data-placement='right'] { + margin-left: 8px; + + --origin: translateX(-4px); + & .react-aria-OverlayArrow svg { + transform: rotate(90deg); + } + } + + &[data-placement='left'] { + margin-right: 8px; + + --origin: translateX(4px); + & .react-aria-OverlayArrow svg { + transform: rotate(-90deg); + } + } + } +`; + const Tooltip = ({ children, content, @@ -22,19 +83,22 @@ const Tooltip = ({ hideArrow = false, customTrigger = false }: TooltipProps) => ( - - {customTrigger ? {children} : children} - - {!hideArrow && ( - - - - - - )} - {content} - - + <> + + + {customTrigger ? {children} : children} + + {!hideArrow && ( + + + + + + )} + {content} + + + ); export { Tooltip, TooltipProps }; diff --git a/src/components/experimental/Tooltip/tooltip.css b/src/components/experimental/Tooltip/tooltip.css deleted file mode 100644 index 09607018..00000000 --- a/src/components/experimental/Tooltip/tooltip.css +++ /dev/null @@ -1,53 +0,0 @@ -.react-aria-Tooltip { - box-shadow: 0 8px 20px rgba(0 0 0 / 0.1); - border-radius: 4px; - background: var(--wave-exp-color-inverse-surface); - color: var(--wave-exp-color-inverse-on-surface); - forced-color-adjust: none; - outline: none; - padding: 2px 8px; - max-width: 150px; - /* fixes FF gap */ - transform: translate3d(0, 0, 0); - transition: transform 200ms, opacity 200ms; - - &[data-entering], - &[data-exiting] { - transform: var(--origin); - opacity: 0; - } - - &[data-placement='top'] { - margin-bottom: 8px; - --origin: translateY(4px); - } - - &[data-placement='bottom'] { - margin-top: 8px; - --origin: translateY(-4px); - & .react-aria-OverlayArrow svg { - transform: rotate(180deg); - } - } - - &[data-placement='right'] { - margin-left: 8px; - --origin: translateX(-4px); - & .react-aria-OverlayArrow svg { - transform: rotate(90deg); - } - } - - &[data-placement='left'] { - margin-right: 8px; - --origin: translateX(4px); - & .react-aria-OverlayArrow svg { - transform: rotate(-90deg); - } - } - - & .react-aria-OverlayArrow svg { - display: block; - fill: var(--wave-exp-color-inverse-surface); - } -}