@zendeskgarden/react-tooltips - npm Package Compare versions

Comparing version 9.0.0-next.20 to 9.0.0-next.21

dist/esm/elements/Paragraph.js

@@ -16,4 +16,4 @@ /**
 }, props)));
-Paragraph.displayName = 'Paragraph';
+Paragraph.displayName = 'Tooltip.Paragraph';
 
 export { Paragraph };

dist/esm/elements/Title.js

@@ -16,4 +16,4 @@ /**
 }, props)));
-Title.displayName = 'Title';
+Title.displayName = 'Tooltip.Title';
 
 export { Title };

dist/esm/styled/StyledParagraph.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledParagraph",

dist/esm/styled/StyledTitle.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledTitle",

dist/esm/styled/StyledTooltip.js

@@ -17,3 +17,2 @@ /**
     size,
-    type,
     placement,
@@ -59,21 +58,15 @@ hasArrow
   let arrowSize;
-  let arrowInset;
   if (hasArrow) {
     if (size === 'small' || size === 'medium') {
       arrowSize = margin;
-      arrowInset = type === 'dark' ? '0px' : '1px';
-    } else {
-      arrowInset = type === 'dark' ? '0px' : '1px';
-      if (size === 'large') {
-        margin = `${theme.space.base * 2}px`;
-        arrowSize = margin;
-      } else if (size === 'extra-large') {
-        margin = `${theme.space.base * 3}px`;
-        arrowSize = `${theme.space.base * 2.5}px`;
-      }
+    } else if (size === 'large') {
+      margin = `${theme.space.base * 2}px`;
+      arrowSize = margin;
+    } else if (size === 'extra-large') {
+      margin = `${theme.space.base * 3}px`;
+      arrowSize = `${theme.space.base * 2.5}px`;
     }
   }
   return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(theme, placement), {
-    size: arrowSize,
-    inset: arrowInset
+    size: arrowSize
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
@@ -92,2 +85,6 @@ };
   if (type === 'light') {
+    backgroundColor = getColor({
+      theme,
+      variable: 'background.raised'
+    });
     borderColor = getColor({
@@ -101,6 +98,2 @@ theme,
     }));
-    backgroundColor = getColor({
-      theme,
-      variable: 'background.raised'
-    });
     color = getColor({
@@ -115,7 +108,2 @@ theme,
   } else {
-    borderColor = 'transparent';
-    boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
-      variable: 'shadow.small',
-      theme
-    }));
     backgroundColor = getColor({
@@ -131,2 +119,7 @@ theme,
     });
+    borderColor = backgroundColor;
+    boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
+      variable: 'shadow.small',
+      theme
+    }));
     color = getColor({
@@ -141,7 +134,7 @@ theme,
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
-})(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledTooltip.defaultProps = {
@@ -148,0 +141,0 @@ theme: DEFAULT_THEME

dist/index.cjs.js

@@ -28,3 +28,3 @@ /**
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
@@ -41,3 +41,3 @@ displayName: "StyledParagraph",
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
@@ -56,3 +56,2 @@ displayName: "StyledTitle",
     size,
-    type,
     placement,
@@ -98,21 +97,15 @@ hasArrow
   let arrowSize;
-  let arrowInset;
   if (hasArrow) {
     if (size === 'small' || size === 'medium') {
       arrowSize = margin;
-      arrowInset = type === 'dark' ? '0px' : '1px';
-    } else {
-      arrowInset = type === 'dark' ? '0px' : '1px';
-      if (size === 'large') {
-        margin = `${theme.space.base * 2}px`;
-        arrowSize = margin;
-      } else if (size === 'extra-large') {
-        margin = `${theme.space.base * 3}px`;
-        arrowSize = `${theme.space.base * 2.5}px`;
-      }
+    } else if (size === 'large') {
+      margin = `${theme.space.base * 2}px`;
+      arrowSize = margin;
+    } else if (size === 'extra-large') {
+      margin = `${theme.space.base * 3}px`;
+      arrowSize = `${theme.space.base * 2.5}px`;
     }
   }
   return styled.css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && reactTheming.arrowStyles(reactTheming.getArrowPosition(theme, placement), {
-    size: arrowSize,
-    inset: arrowInset
+    size: arrowSize
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
@@ -131,2 +124,6 @@ };
   if (type === 'light') {
+    backgroundColor = reactTheming.getColor({
+      theme,
+      variable: 'background.raised'
+    });
     borderColor = reactTheming.getColor({
@@ -140,6 +137,2 @@ theme,
     }));
-    backgroundColor = reactTheming.getColor({
-      theme,
-      variable: 'background.raised'
-    });
     color = reactTheming.getColor({
@@ -154,7 +147,2 @@ theme,
   } else {
-    borderColor = 'transparent';
-    boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor({
-      variable: 'shadow.small',
-      theme
-    }));
     backgroundColor = reactTheming.getColor({
@@ -170,2 +158,7 @@ theme,
     });
+    borderColor = backgroundColor;
+    boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor({
+      variable: 'shadow.small',
+      theme
+    }));
     color = reactTheming.getColor({
@@ -180,7 +173,7 @@ theme,
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.20'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
-})(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledTooltip.defaultProps = {
@@ -201,3 +194,3 @@ theme: reactTheming.DEFAULT_THEME
 }, props)));
-Paragraph.displayName = 'Paragraph';
+Paragraph.displayName = 'Tooltip.Paragraph';
 
@@ -207,3 +200,3 @@ const Title = React.forwardRef((props, ref) => React__default.default.createElement(StyledTitle, Object.assign({
 }, props)));
-Title.displayName = 'Title';
+Title.displayName = 'Tooltip.Title';
 
@@ -210,0 +203,0 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];

package.json

 {
   "name": "@zendeskgarden/react-tooltips",
-  "version": "9.0.0-next.20",
+  "version": "9.0.0-next.21",
   "description": "Collection of components and render prop containers relating to Tooltips in the Garden Design System",
@@ -38,3 +38,3 @@ "license": "Apache-2.0",
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.20"
+    "@zendeskgarden/react-theming": "^9.0.0-next.21"
   },
@@ -51,3 +51,3 @@ "keywords": [
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
+  "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

45615

decreased by-0.78%

Lines of code

919

decreased by-1.5%

No dependency changes