@cypress-design/react-tooltip 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-tooltip
 
+## 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

@@ -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:
@@ -201,7 +201,7 @@ export const Tooltip: React.FC<
                   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`,

package/dist/index.es.mjs

@@ -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:
@@ -30410,7 +30410,7 @@ var Tooltip = function (_a) {
                 React.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 48", width: "24", height: "24", 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",
@@ -30423,5 +30423,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