@xsolla/xui-button 0.190.0 → 0.191.0

package/web/index.d.ts

@@ -170,8 +170,8 @@ interface IconButtonProps extends ThemeOverrideProps {
 declare const IconButton: React.FC<IconButtonProps>;
 
 interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
-    /** Button content */
-    children: ReactNode;
+    /** Button label. Omit for icon-only buttons (provide `aria-label`). */
+    children?: ReactNode;
     /** Visual variant of the button */
     variant?: "brand" | "primary" | "secondary" | "tertiary" | "brandExtra" | "inverse";
     /** Size of the button */

package/web/index.js

@@ -874,6 +874,14 @@ IconButton.displayName = "IconButton";
 var import_react5 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
 var import_jsx_runtime7 = require("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,
@@ -1073,6 +1081,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;
@@ -1139,8 +1149,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",
@@ -1149,18 +1160,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",
@@ -1199,7 +1222,7 @@ var FlexButton = ({
       "data-testid": testID || "flex-button",
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: contentStyle, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: spinnerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: spinnerSize, color: spinnerColor }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
         iconLeft && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: iconSize, color: colors.text, children: iconLeft }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children }),
+        hasVisibleLabel(children) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children }),
         iconRight && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: iconSize, color: colors.text, children: iconRight })
       ] }) })
     }