@xsolla/xui-button 0.190.0 → 0.191.0

package/web/index.mjs

@@ -837,6 +837,14 @@ import {
 } from "react";
 import { useDesignSystem } from "@xsolla/xui-core";
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var FLEX_BUTTON_PADDING = 4;
+var hasVisibleLabel = (node) => {
+  if (node == null || node === false) return false;
+  if (typeof node === "string") return node.trim().length > 0;
+  if (typeof node === "number") return true;
+  if (Array.isArray(node)) return node.some(hasVisibleLabel);
+  return true;
+};
 var ICON_SIZES = {
   xs: 12,
   sm: 14,
@@ -1036,6 +1044,8 @@ var FlexButton = ({
   const fontSize = FONT_SIZES[size];
   const borderRadius = BORDER_RADIUS[size];
   const lineHeight = LINE_HEIGHTS[size];
+  const isIconOnly = !loading && !hasVisibleLabel(children) && Boolean(iconLeft || iconRight);
+  const iconOnlyHitArea = iconSize + FLEX_BUTTON_PADDING * 2;
   const handleMouseEnter = () => {
     if (!isDisabled) {
       isMouseOverRef.current = true;
@@ -1102,8 +1112,9 @@ var FlexButton = ({
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: "2px",
-    padding: noPadding ? "0px" : "4px",
+    gap: isIconOnly ? 0 : "2px",
+    boxSizing: "border-box",
+    padding: noPadding ? "0px" : `${FLEX_BUTTON_PADDING}px`,
     backgroundColor: loading ? "transparent" : colors.bg,
     color: colors.text,
     border: "none",
@@ -1112,18 +1123,30 @@ var FlexButton = ({
     cursor: isDisabled ? "not-allowed" : "pointer",
     fontSize: `${fontSize}px`,
     fontWeight: 500,
-    lineHeight,
+    lineHeight: isIconOnly ? 0 : lineHeight,
     fontFamily: "inherit",
     transition: "background-color 100ms ease-in-out, color 100ms ease-in-out, box-shadow 100ms ease-in-out",
     outline: "none",
     boxShadow: combinedBoxShadow,
-    opacity: isDisabled && !loading ? 0.6 : 1
+    opacity: isDisabled && !loading ? 0.6 : 1,
+    ...isIconOnly && {
+      width: iconOnlyHitArea,
+      height: iconOnlyHitArea,
+      minWidth: iconOnlyHitArea,
+      minHeight: iconOnlyHitArea,
+      flexShrink: 0
+    }
   };
   const contentStyle = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: "2px"
+    gap: isIconOnly ? 0 : "2px",
+    ...isIconOnly && {
+      width: "100%",
+      height: "100%",
+      lineHeight: 0
+    }
   };
   const spinnerStyle = {
     display: "flex",
@@ -1162,7 +1185,7 @@ var FlexButton = ({
       "data-testid": testID || "flex-button",
       children: /* @__PURE__ */ jsx7("span", { style: contentStyle, children: loading ? /* @__PURE__ */ jsx7("span", { style: spinnerStyle, children: /* @__PURE__ */ jsx7(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
         iconLeft && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
-        /* @__PURE__ */ jsx7("span", { children }),
+        hasVisibleLabel(children) && /* @__PURE__ */ jsx7("span", { children }),
         iconRight && /* @__PURE__ */ jsx7(Icon, { size: iconSize, color: colors.text, children: iconRight })
       ] }) })
     }