@zendeskgarden/react-theming 9.0.0-next.20 → 9.0.0-next.21

package/dist/esm/utils/arrowStyles.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import { css, keyframes } from 'styled-components';
-import { stripUnit, math } from 'polished';
+import { stripUnit } from 'polished';
 
 const animationStyles = (position, modifier) => {
   const property = position.split('-')[0];
@@ -13,33 +13,40 @@ const animationStyles = (position, modifier) => {
   return css(["&", "::before,&", "::after{animation:0.3s ease-in-out ", ";}"], modifier, modifier, animationName);
 };
 const positionStyles = (position, size, inset) => {
-  const margin = math(`${size} / -2`);
-  const placement = math(`${margin} + ${inset}`);
-  let transform;
+  const defaultInset = 0.3;
+  const margin = size / -2;
+  const placement = Math.round((margin + inset + defaultInset) * 100) / 100;
+  const marginPx = `${margin}px`;
+  const placementPx = `${placement}px`;
+  const sizePx = `${size}px`;
   let positionCss;
+  let transform;
   if (position.startsWith('top')) {
     transform = 'rotate(-135deg)';
-    positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placement, position === 'top-right' && size, position === 'top' ? '50%' : position === 'top-left' && size, position === 'top' && margin);
+    positionCss = css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && sizePx, position === 'top' ? '50%' : position === 'top-left' && sizePx, position === 'top' && marginPx);
   } else if (position.startsWith('right')) {
     transform = 'rotate(-45deg)';
-    positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && size, placement, position === 'right-bottom' && size, position === 'right' && margin);
+    positionCss = css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && sizePx, placementPx, position === 'right-bottom' && sizePx, position === 'right' && marginPx);
   } else if (position.startsWith('bottom')) {
     transform = 'rotate(45deg)';
-    positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && size, placement, position === 'bottom' ? '50%' : position === 'bottom-left' && size, position === 'bottom' && margin);
+    positionCss = css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && sizePx, placementPx, position === 'bottom' ? '50%' : position === 'bottom-left' && sizePx, position === 'bottom' && marginPx);
   } else if (position.startsWith('left')) {
     transform = 'rotate(135deg)';
-    positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
+    positionCss = css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && sizePx, size, placementPx, position === 'left' && marginPx);
   }
   return css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
 };
 function arrowStyles(position) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const inset = options.inset || '0';
-  const size = options.size === undefined ? 6 : stripUnit(options.size);
-  const squareSize = `${Math.round(size * 2 / Math.sqrt(2))}px`;
+  const inset = stripUnit(options.inset || '0');
+  const size = stripUnit(options.size || '6');
+  const sizeOffset = 2;
+  const squareSize = size * 2 / Math.sqrt(2) + sizeOffset;
+  const squareSizeRounded = Math.round(squareSize * 100) / 100;
+  const squareSizePx = `${squareSizeRounded}px`;
   const afterOffset = 0;
   const beforeOffset = afterOffset + 2;
-  return css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;background-color:transparent;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;background-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSize, squareSize, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles(position, options.animationModifier));
+  return css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;background-color:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSizePx, squareSizePx, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSizeRounded, inset), options.animationModifier && animationStyles(position, options.animationModifier));
 }
 
 export { arrowStyles as default };

package/dist/index.cjs.js

@@ -1175,33 +1175,40 @@ const animationStyles$1 = (position, modifier) => {
   return styled.css(["&", "::before,&", "::after{animation:0.3s ease-in-out ", ";}"], modifier, modifier, animationName);
 };
 const positionStyles = (position, size, inset) => {
-  const margin = polished.math(`${size} / -2`);
-  const placement = polished.math(`${margin} + ${inset}`);
-  let transform;
+  const defaultInset = 0.3;
+  const margin = size / -2;
+  const placement = Math.round((margin + inset + defaultInset) * 100) / 100;
+  const marginPx = `${margin}px`;
+  const placementPx = `${placement}px`;
+  const sizePx = `${size}px`;
   let positionCss;
+  let transform;
   if (position.startsWith('top')) {
     transform = 'rotate(-135deg)';
-    positionCss = styled.css(["top:", ";right:", ";left:", ";margin-left:", ";"], placement, position === 'top-right' && size, position === 'top' ? '50%' : position === 'top-left' && size, position === 'top' && margin);
+    positionCss = styled.css(["top:", ";right:", ";left:", ";margin-left:", ";"], placementPx, position === 'top-right' && sizePx, position === 'top' ? '50%' : position === 'top-left' && sizePx, position === 'top' && marginPx);
   } else if (position.startsWith('right')) {
     transform = 'rotate(-45deg)';
-    positionCss = styled.css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && size, placement, position === 'right-bottom' && size, position === 'right' && margin);
+    positionCss = styled.css(["top:", ";right:", ";bottom:", ";margin-top:", ";"], position === 'right' ? '50%' : position === 'right-top' && sizePx, placementPx, position === 'right-bottom' && sizePx, position === 'right' && marginPx);
   } else if (position.startsWith('bottom')) {
     transform = 'rotate(45deg)';
-    positionCss = styled.css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && size, placement, position === 'bottom' ? '50%' : position === 'bottom-left' && size, position === 'bottom' && margin);
+    positionCss = styled.css(["right:", ";bottom:", ";left:", ";margin-left:", ";"], position === 'bottom-right' && sizePx, placementPx, position === 'bottom' ? '50%' : position === 'bottom-left' && sizePx, position === 'bottom' && marginPx);
   } else if (position.startsWith('left')) {
     transform = 'rotate(135deg)';
-    positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && size, size, placement, position === 'left' && margin);
+    positionCss = styled.css(["top:", ";bottom:", ";left:", ";margin-top:", ";"], position === 'left' ? '50%' : position === 'left-top' && sizePx, size, placementPx, position === 'left' && marginPx);
   }
   return styled.css(["&::before,&::after{transform:", ";", ";}"], transform, positionCss);
 };
 function arrowStyles(position) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const inset = options.inset || '0';
-  const size = options.size === undefined ? 6 : polished.stripUnit(options.size);
-  const squareSize = `${Math.round(size * 2 / Math.sqrt(2))}px`;
+  const inset = polished.stripUnit(options.inset || '0');
+  const size = polished.stripUnit(options.size || '6');
+  const sizeOffset = 2;
+  const squareSize = size * 2 / Math.sqrt(2) + sizeOffset;
+  const squareSizeRounded = Math.round(squareSize * 100) / 100;
+  const squareSizePx = `${squareSizeRounded}px`;
   const afterOffset = 0;
   const beforeOffset = afterOffset + 2;
-  return styled.css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;background-color:transparent;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;background-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSize, squareSize, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSize, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
+  return styled.css(["position:relative;&::before,&::after{position:absolute;border-width:inherit;border-style:inherit;background-color:inherit;width:", ";height:", ";content:'';box-sizing:inherit;}&::before{border-color:inherit;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}&::after{border-color:transparent;background-clip:content-box;clip-path:polygon(100% ", "px,", "px 100%,100% 100%);}", ";", ";"], squareSizePx, squareSizePx, beforeOffset, beforeOffset, afterOffset, afterOffset, positionStyles(position, squareSizeRounded, inset), options.animationModifier && animationStyles$1(position, options.animationModifier));
 }
 
 const useDocument = theme => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-theming",
-  "version": "9.0.0-next.20",
+  "version": "9.0.0-next.21",
   "description": "Theming utilities and components within the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
+  "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
 }