@cypress-design/react-tooltip 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/react-tooltip
 
+## 0.3.3
+
+### Patch Changes
+
+- [#91](https://github.com/cypress-io/cypress-design/pull/91) [`d716000`](https://github.com/cypress-io/cypress-design/commit/d7160002406e8801fb1a77e57c39b61a1215c18a) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: avoid blinky tooltips [for website](https://github.com/cypress-io/cypress.io/issues/247)
+
+## 0.3.2
+
+### Patch Changes
+
+- [#89](https://github.com/cypress-io/cypress-design/pull/89) [`eb1c9a6`](https://github.com/cypress-io/cypress-design/commit/eb1c9a6ea0fc2ceb4b506fa73f77d1245d2967bc) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: remove border of tooltips (never been in designs)
+
 ## 0.3.1
 
 ### Patch Changes

package/Tooltip.rootstory.tsx

@@ -16,7 +16,7 @@ export default ({
   <div className="center flex flex-col items-center gap-20">
     <Tooltip
       className="bg-red-200 p-4 w-1/2"
-      popper={<div className="bg-jade-200 text-gray-800 p-4">Popover</div>}
+      popper={<div className="bg-jade-200 text-gray-800 p-4">PopovDyn</div>}
       color={color}
       placement={placement}
       tabIndex={tabIndex}
@@ -27,7 +27,7 @@ export default ({
     <Tooltip
       className="bg-red-200 p-4 w-1/2"
       popper={
-        <div className="h-200px flex items-center justify-center">Popover</div>
+        <div className="h-200px flex items-center justify-center">Popov</div>
       }
       color={color}
       placement="top"
@@ -37,7 +37,7 @@ export default ({
     </Tooltip>
     <Tooltip
       className="bg-red-200 p-4 w-1/2"
-      popper={<div>Popover</div>}
+      popper={<div>PopovInt</div>}
       color={color}
       placement={placement}
       interactive

package/Tooltip.tsx

@@ -103,7 +103,7 @@ export const Tooltip: React.FC<
             fn: (obj) => obj,
           }
         : flip(),
-      offset(0),
+      offset(interactive ? 0 : 16),
       arrow({ element: arrowRef, padding: 24 }),
     ],
     whileElementsMounted: autoUpdate,
@@ -144,14 +144,14 @@ export const Tooltip: React.FC<
     switch (color) {
       case 'light':
         return {
-          svg: 'stroke-gray-100 fill-white',
-          block: 'text-gray-900 border-gray-100 shadow-gray-100',
+          svg: 'stroke-none fill-white',
+          block: 'text-gray-900 shadow-gray-100 border-transparent ',
           background: 'bg-white',
         }
       case 'dark':
         return {
-          svg: 'stroke-gray-800 fill-gray-900',
-          block: 'text-white shadow-gray-800 border-gray-800',
+          svg: 'stroke-none fill-gray-900',
+          block: 'text-white shadow-gray-800 border-transparent',
           background: 'bg-gray-900',
         }
       default:
@@ -180,7 +180,7 @@ export const Tooltip: React.FC<
                 position: strategy,
                 top: y ?? '',
                 left: x ?? '',
-                padding: '16px',
+                ...(interactive ? { padding: '16px' } : {}),
               },
             })}
           >
@@ -193,18 +193,20 @@ export const Tooltip: React.FC<
             >
               <svg
                 ref={arrowRef}
-                viewBox="0 0 48 48"
+                viewBox="0 0 48 24"
                 width="24"
-                height="24"
+                height="12"
                 className={clsx('absolute z-10', colors.svg)}
                 style={{
                   transform: `rotate(${arrowRotate}deg)`,
                   filter:
                     placementSide === 'bottom' || color === 'dark'
-                      ? undefined
+                      ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
                       : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
-                  [arrowXRule]: `${arrowX ?? -6}px`,
-                  [arrowYRule]: `${arrowY ?? -6}px`,
+                  [arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
+                  [arrowYRule]: `${
+                    arrowY ? arrowY + 6 : interactive ? 6 : -10
+                  }px`,
                 }}
                 fill="none"
               >

package/dist/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAaV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CA6K/C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAaV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CA+K/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.es.mjs

@@ -30341,7 +30341,7 @@ var Tooltip = function (_a) {
                     fn: function (obj) { return obj; }
                 }
                 : flip(),
-            offset(0),
+            offset(interactive ? 0 : 16),
             arrow({ element: arrowRef, padding: 24 }),
         ],
         whileElementsMounted: autoUpdate
@@ -30376,14 +30376,14 @@ var Tooltip = function (_a) {
         switch (color) {
             case 'light':
                 return {
-                    svg: 'stroke-gray-100 fill-white',
-                    block: 'text-gray-900 border-gray-100 shadow-gray-100',
+                    svg: 'stroke-none fill-white',
+                    block: 'text-gray-900 shadow-gray-100 border-transparent ',
                     background: 'bg-white'
                 };
             case 'dark':
                 return {
-                    svg: 'stroke-gray-800 fill-gray-900',
-                    block: 'text-white shadow-gray-800 border-gray-800',
+                    svg: 'stroke-none fill-gray-900',
+                    block: 'text-white shadow-gray-800 border-transparent',
                     background: 'bg-gray-900'
                 };
             default:
@@ -30395,26 +30395,21 @@ var Tooltip = function (_a) {
         React.createElement("div", __assign({}, getReferenceProps(), { ref: reference, className: className }, rest), children),
         React.createElement(FloatingPortal, null, open && !disabled && (React.createElement("div", __assign({}, getFloatingProps({
             ref: floating,
-            style: {
-                position: strategy,
-                top: y !== null && y !== void 0 ? y : '',
-                left: x !== null && x !== void 0 ? x : '',
-                padding: '16px'
-            }
+            style: __assign({ position: strategy, top: y !== null && y !== void 0 ? y : '', left: x !== null && x !== void 0 ? x : '' }, (interactive ? { padding: '16px' } : {}))
         })),
             React.createElement("div", { className: clsx('rounded shadow border', [
                     colors.background,
                     colors.block,
                     (!x || !y) && 'invisible',
                 ]) },
-                React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 48", width: "24", height: "24", className: clsx('absolute z-10', colors.svg), style: (_b = {
+                React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 24", width: "24", height: "12", className: clsx('absolute z-10', colors.svg), style: (_b = {
                             transform: "rotate(" + arrowRotate + "deg)",
                             filter: placementSide === 'bottom' || color === 'dark'
-                                ? undefined
+                                ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
                                 : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
                         },
-                        _b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : -6) + "px",
-                        _b[arrowYRule] = (arrowY !== null && arrowY !== void 0 ? arrowY : -6) + "px",
+                        _b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : (interactive ? 0 : -16)) + "px",
+                        _b[arrowYRule] = (arrowY ? arrowY + 6 : interactive ? 6 : -10) + "px",
                         _b), fill: "none" },
                     React.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
                     React.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", strokeWidth: "2" })),
@@ -30423,5 +30418,5 @@ var Tooltip = function (_a) {
 
 export { Tooltip as default };
 
-/* <windicss-keep class="container stroke-gray-100 fill-white text-gray-900 border-gray-100 shadow-gray-100 bg-white stroke-gray-800 fill-gray-900 text-white shadow-gray-800 border-gray-800 bg-gray-900 rounded shadow border invisible absolute z-10 text-16px leading-24px min-w-160px text-center p-8px relative z-20"> */
+/* <windicss-keep class="container stroke-none fill-white text-gray-900 shadow-gray-100 border-transparent bg-white fill-gray-900 text-white shadow-gray-800 bg-gray-900 rounded shadow border invisible absolute z-10 text-16px leading-24px min-w-160px text-center p-8px relative z-20"> */
 //# sourceMappingURL=index.es.mjs.map