@nulogy/components 8.10.0 → 8.10.1

package/dist/main.js

@@ -16135,11 +16135,31 @@
     });
   }
 
-  var HoverText = styled__default['default'].div.withConfig({
-    displayName: "IconicButton__HoverText",
+  var IconWrapper = styled__default['default'].span.withConfig({
+    displayName: "IconicButton__IconWrapper",
     componentId: "cimfyu-0"
   })(function (_ref) {
-    var theme = _ref.theme;
+    var theme = _ref.theme,
+        size = _ref.size;
+
+    var _a, _b;
+
+    return {
+      display: "inline-flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: theme.radii.circle,
+      height: "calc(" + ((_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : size) + " + " + theme.sizes.x1 + ")",
+      width: "calc(" + ((_b = theme.sizes[size]) !== null && _b !== void 0 ? _b : size) + " + " + theme.sizes.x1 + ")",
+      transition: ".2s"
+    };
+  });
+  var HoverText = styled__default['default'].div.withConfig({
+    displayName: "IconicButton__HoverText",
+    componentId: "cimfyu-1"
+  })(function (_ref2) {
+    var theme = _ref2.theme;
     return {
       whiteSpace: "nowrap",
       ontSize: theme.fontSizes.small,
@@ -16154,17 +16174,17 @@
   });
   var WrapperButton$1 = styled__default['default'].button.withConfig({
     displayName: "IconicButton__WrapperButton",
-    componentId: "cimfyu-1"
-  })(function (_ref2) {
-    var _hover, _active, _hoverActive, _focus, _ref3;
+    componentId: "cimfyu-2"
+  })(function (_ref3) {
+    var _hover, _active, _hoverActive, _focus, _ref4;
 
-    var disabled = _ref2.disabled,
-        hoverBackgroundColor = _ref2.hoverBackgroundColor,
-        theme = _ref2.theme;
+    var disabled = _ref3.disabled,
+        hoverBackgroundColor = _ref3.hoverBackgroundColor,
+        theme = _ref3.theme;
 
     var _a;
 
-    return _ref3 = {
+    return _ref4 = {
       background: "transparent",
       border: "none",
       position: "relative",
@@ -16172,35 +16192,32 @@
       alignItems: "center",
       padding: theme.space.half + " " + theme.space.none,
       cursor: disabled ? "default" : "pointer"
-    }, _ref3["" + Icon] = {
-      borderRadius: theme.radii.circle,
-      transition: ".2s"
-    }, _ref3["" + Text] = {
+    }, _ref4["" + Text] = {
       display: "block",
       fontWeight: theme.fontWeights.medium,
       textAlign: "left"
-    }, _ref3["" + HoverText] = {
+    }, _ref4["" + HoverText] = {
       opacity: "0"
-    }, _ref3["&:hover"] = (_hover = {}, _hover["" + Icon] = {
+    }, _ref4["&:hover"] = (_hover = {}, _hover["" + IconWrapper] = {
       backgroundColor: (_a = theme.colors[hoverBackgroundColor]) !== null && _a !== void 0 ? _a : hoverBackgroundColor
     }, _hover["" + HoverText] = {
       opacity: "1"
-    }, _hover), _ref3["&:active"] = (_active = {}, _active["" + Icon] = {
+    }, _hover), _ref4["&:active"] = (_active = {}, _active["" + IconWrapper] = {
       transform: "scale(0.875)",
       transition: ".2s ease-in"
-    }, _active), _ref3["&:disabled"] = {
+    }, _active), _ref4["&:disabled"] = {
       opacity: ".5",
-      "&:hover, &:active": (_hoverActive = {}, _hoverActive["" + Icon] = {
+      "&:hover, &:active": (_hoverActive = {}, _hoverActive["" + IconWrapper] = {
         background: "none",
         transform: "none"
       }, _hoverActive)
-    }, _ref3["&:focus"] = (_focus = {
+    }, _ref4["&:focus"] = (_focus = {
       outline: "none"
-    }, _focus["" + Icon] = {
+    }, _focus["" + IconWrapper] = {
       boxShadow: theme.shadows.focus
     }, _focus["" + HoverText] = {
       opacity: "1"
-    }, _focus), _ref3;
+    }, _focus), _ref4;
   }, space);
   var IconicButton = /*#__PURE__*/React__default['default'].forwardRef(function (_a, forwardedRef) {
     var children = _a.children,
@@ -16216,20 +16233,22 @@
         tooltip = _a.tooltip,
         props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
 
+    var size = iconSize || "x3";
     return /*#__PURE__*/React__default['default'].createElement(WrapperButton$1, Object.assign({
       ref: forwardedRef,
       "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined,
       className: className,
       hoverBackgroundColor: hoverBackgroundColor
-    }, props), /*#__PURE__*/React__default['default'].createElement(Manager$2, null, /*#__PURE__*/React__default['default'].createElement(Reference$2, null, function (_ref4) {
-      var ref = _ref4.ref;
-      return /*#__PURE__*/React__default['default'].createElement(Icon, {
+    }, props), /*#__PURE__*/React__default['default'].createElement(Manager$2, null, /*#__PURE__*/React__default['default'].createElement(Reference$2, null, function (_ref5) {
+      var ref = _ref5.ref;
+      return /*#__PURE__*/React__default['default'].createElement(IconWrapper, {
         ref: ref,
-        size: iconSize || "x4",
+        size: iconSize || "x3"
+      }, /*#__PURE__*/React__default['default'].createElement(Icon, {
+        size: size,
         icon: icon,
-        p: "half",
         color: color
-      });
+      }));
     }), /*#__PURE__*/React__default['default'].createElement(Popper$4, {
       placement: "bottom",
       modifiers: [{
@@ -16240,10 +16259,10 @@
           rootBoundary: "viewport"
         }
       }]
-    }, function (_ref5) {
-      var ref = _ref5.ref,
-          style = _ref5.style,
-          placement = _ref5.placement;
+    }, function (_ref6) {
+      var ref = _ref6.ref,
+          style = _ref6.style,
+          placement = _ref6.placement;
       return labelHidden || tooltip ? /*#__PURE__*/React__default['default'].createElement(HoverText, {
         ref: ref,
         style: style,

package/dist/main.module.js

@@ -16109,11 +16109,31 @@ function Reference$2(_ref) {
   });
 }
 
-var HoverText = styled.div.withConfig({
-  displayName: "IconicButton__HoverText",
+var IconWrapper = styled.span.withConfig({
+  displayName: "IconicButton__IconWrapper",
   componentId: "cimfyu-0"
 })(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+      size = _ref.size;
+
+  var _a, _b;
+
+  return {
+    display: "inline-flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.circle,
+    height: "calc(" + ((_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : size) + " + " + theme.sizes.x1 + ")",
+    width: "calc(" + ((_b = theme.sizes[size]) !== null && _b !== void 0 ? _b : size) + " + " + theme.sizes.x1 + ")",
+    transition: ".2s"
+  };
+});
+var HoverText = styled.div.withConfig({
+  displayName: "IconicButton__HoverText",
+  componentId: "cimfyu-1"
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     whiteSpace: "nowrap",
     ontSize: theme.fontSizes.small,
@@ -16128,17 +16148,17 @@ var HoverText = styled.div.withConfig({
 });
 var WrapperButton$1 = styled.button.withConfig({
   displayName: "IconicButton__WrapperButton",
-  componentId: "cimfyu-1"
-})(function (_ref2) {
-  var _hover, _active, _hoverActive, _focus, _ref3;
+  componentId: "cimfyu-2"
+})(function (_ref3) {
+  var _hover, _active, _hoverActive, _focus, _ref4;
 
-  var disabled = _ref2.disabled,
-      hoverBackgroundColor = _ref2.hoverBackgroundColor,
-      theme = _ref2.theme;
+  var disabled = _ref3.disabled,
+      hoverBackgroundColor = _ref3.hoverBackgroundColor,
+      theme = _ref3.theme;
 
   var _a;
 
-  return _ref3 = {
+  return _ref4 = {
     background: "transparent",
     border: "none",
     position: "relative",
@@ -16146,35 +16166,32 @@ var WrapperButton$1 = styled.button.withConfig({
     alignItems: "center",
     padding: theme.space.half + " " + theme.space.none,
     cursor: disabled ? "default" : "pointer"
-  }, _ref3["" + Icon] = {
-    borderRadius: theme.radii.circle,
-    transition: ".2s"
-  }, _ref3["" + Text] = {
+  }, _ref4["" + Text] = {
     display: "block",
     fontWeight: theme.fontWeights.medium,
     textAlign: "left"
-  }, _ref3["" + HoverText] = {
+  }, _ref4["" + HoverText] = {
     opacity: "0"
-  }, _ref3["&:hover"] = (_hover = {}, _hover["" + Icon] = {
+  }, _ref4["&:hover"] = (_hover = {}, _hover["" + IconWrapper] = {
     backgroundColor: (_a = theme.colors[hoverBackgroundColor]) !== null && _a !== void 0 ? _a : hoverBackgroundColor
   }, _hover["" + HoverText] = {
     opacity: "1"
-  }, _hover), _ref3["&:active"] = (_active = {}, _active["" + Icon] = {
+  }, _hover), _ref4["&:active"] = (_active = {}, _active["" + IconWrapper] = {
     transform: "scale(0.875)",
     transition: ".2s ease-in"
-  }, _active), _ref3["&:disabled"] = {
+  }, _active), _ref4["&:disabled"] = {
     opacity: ".5",
-    "&:hover, &:active": (_hoverActive = {}, _hoverActive["" + Icon] = {
+    "&:hover, &:active": (_hoverActive = {}, _hoverActive["" + IconWrapper] = {
       background: "none",
       transform: "none"
     }, _hoverActive)
-  }, _ref3["&:focus"] = (_focus = {
+  }, _ref4["&:focus"] = (_focus = {
     outline: "none"
-  }, _focus["" + Icon] = {
+  }, _focus["" + IconWrapper] = {
     boxShadow: theme.shadows.focus
   }, _focus["" + HoverText] = {
     opacity: "1"
-  }, _focus), _ref3;
+  }, _focus), _ref4;
 }, space);
 var IconicButton = /*#__PURE__*/React__default.forwardRef(function (_a, forwardedRef) {
   var children = _a.children,
@@ -16190,20 +16207,22 @@ var IconicButton = /*#__PURE__*/React__default.forwardRef(function (_a, forwarde
       tooltip = _a.tooltip,
       props = __rest(_a, ["children", "color", "hoverBackgroundColor", "icon", "labelHidden", "className", "iconSize", "fontSize", "tooltip"]);
 
+  var size = iconSize || "x3";
   return /*#__PURE__*/React__default.createElement(WrapperButton$1, Object.assign({
     ref: forwardedRef,
     "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : undefined,
     className: className,
     hoverBackgroundColor: hoverBackgroundColor
-  }, props), /*#__PURE__*/React__default.createElement(Manager$2, null, /*#__PURE__*/React__default.createElement(Reference$2, null, function (_ref4) {
-    var ref = _ref4.ref;
-    return /*#__PURE__*/React__default.createElement(Icon, {
+  }, props), /*#__PURE__*/React__default.createElement(Manager$2, null, /*#__PURE__*/React__default.createElement(Reference$2, null, function (_ref5) {
+    var ref = _ref5.ref;
+    return /*#__PURE__*/React__default.createElement(IconWrapper, {
       ref: ref,
-      size: iconSize || "x4",
+      size: iconSize || "x3"
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      size: size,
       icon: icon,
-      p: "half",
       color: color
-    });
+    }));
   }), /*#__PURE__*/React__default.createElement(Popper$4, {
     placement: "bottom",
     modifiers: [{
@@ -16214,10 +16233,10 @@ var IconicButton = /*#__PURE__*/React__default.forwardRef(function (_a, forwarde
         rootBoundary: "viewport"
       }
     }]
-  }, function (_ref5) {
-    var ref = _ref5.ref,
-        style = _ref5.style,
-        placement = _ref5.placement;
+  }, function (_ref6) {
+    var ref = _ref6.ref,
+        style = _ref6.style,
+        placement = _ref6.placement;
     return labelHidden || tooltip ? /*#__PURE__*/React__default.createElement(HoverText, {
       ref: ref,
       style: style,

package/dist/src/Button/IconicButton.story.d.ts

@@ -73,3 +73,4 @@ export declare const WithNonTextChildren: {
 };
 export declare const WithCustomHoverBackgroundThemeColor: () => JSX.Element;
 export declare const WithCustomHoverBackgroundNonThemeColor: () => JSX.Element;
+export declare const WithLargerIcons: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.10.0",
+  "version": "8.10.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {