@xsolla/xui-button 0.190.0 → 0.192.0

package/native/index.d.mts

@@ -170,8 +170,15 @@ 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`).
+     *
+     * An icon may also be passed directly as `children` instead of via
+     * `iconLeft`/`iconRight`. When `children` carries no text, the button is
+     * treated as icon-only and renders as a square sized from the design-system
+     * height token for `size`.
+     */
+    children?: ReactNode;
     /** Visual variant of the button */
     variant?: "brand" | "primary" | "secondary" | "tertiary" | "brandExtra" | "inverse";
     /** Size of the button */
@@ -190,6 +197,9 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
      * The component applies padding via an inline style, which overrides any CSS
      * class or `style` prop a consumer passes, so this prop is the supported way
      * to render a zero-padding FlexButton (e.g. an inline text action).
+     *
+     * Icon-only buttons keep their square dimensions when `noPadding` is set —
+     * only the inner padding is removed.
      * @default false
      */
     noPadding?: boolean;
@@ -224,6 +234,19 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
  *
  * Renders as a semantic `<button>` element with full ARIA support.
  *
+ * ## Icon-only buttons
+ *
+ * A FlexButton is icon-only when it has no text label and an icon is supplied
+ * either as `children` or via `iconLeft`/`iconRight`. Icon-only buttons render
+ * as a square whose side equals `theme.sizing.flexButton(size).height`, so they
+ * line up with the Modal header icon slots (36x36 at `size="xl"`).
+ *
+ * ```tsx
+ * <FlexButton variant="secondary" size="xl" aria-label="Go back">
+ *   <BackwardAlt variant="line" />
+ * </FlexButton>
+ * ```
+ *
  * ## Accessibility Features
  *
  * - **Semantic HTML**: Renders as a native `<button>` element

package/native/index.d.ts

@@ -170,8 +170,15 @@ 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`).
+     *
+     * An icon may also be passed directly as `children` instead of via
+     * `iconLeft`/`iconRight`. When `children` carries no text, the button is
+     * treated as icon-only and renders as a square sized from the design-system
+     * height token for `size`.
+     */
+    children?: ReactNode;
     /** Visual variant of the button */
     variant?: "brand" | "primary" | "secondary" | "tertiary" | "brandExtra" | "inverse";
     /** Size of the button */
@@ -190,6 +197,9 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
      * The component applies padding via an inline style, which overrides any CSS
      * class or `style` prop a consumer passes, so this prop is the supported way
      * to render a zero-padding FlexButton (e.g. an inline text action).
+     *
+     * Icon-only buttons keep their square dimensions when `noPadding` is set —
+     * only the inner padding is removed.
      * @default false
      */
     noPadding?: boolean;
@@ -224,6 +234,19 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
  *
  * Renders as a semantic `<button>` element with full ARIA support.
  *
+ * ## Icon-only buttons
+ *
+ * A FlexButton is icon-only when it has no text label and an icon is supplied
+ * either as `children` or via `iconLeft`/`iconRight`. Icon-only buttons render
+ * as a square whose side equals `theme.sizing.flexButton(size).height`, so they
+ * line up with the Modal header icon slots (36x36 at `size="xl"`).
+ *
+ * ```tsx
+ * <FlexButton variant="secondary" size="xl" aria-label="Go back">
+ *   <BackwardAlt variant="line" />
+ * </FlexButton>
+ * ```
+ *
  * ## Accessibility Features
  *
  * - **Semantic HTML**: Renders as a native `<button>` element

package/native/index.js

@@ -808,9 +808,27 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/FlexButton.tsx
-var import_react4 = require("react");
+var import_react4 = __toESM(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 || node === true) 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);
+  if (import_react4.default.isValidElement(node)) {
+    const { children: elementChildren } = node.props ?? {};
+    return hasVisibleLabel(elementChildren);
+  }
+  return true;
+};
+var hasRenderableContent = (node) => {
+  if (node == null || node === false || node === true) return false;
+  if (typeof node === "string") return node.trim().length > 0;
+  if (Array.isArray(node)) return node.some(hasRenderableContent);
+  return true;
+};
 var ICON_SIZES = {
   xs: 12,
   sm: 14,
@@ -1010,6 +1028,10 @@ var FlexButton = ({
   const fontSize = FONT_SIZES[size];
   const borderRadius = BORDER_RADIUS[size];
   const lineHeight = LINE_HEIGHTS[size];
+  const showTextLabel = hasVisibleLabel(children);
+  const hasIconChildren = !showTextLabel && hasRenderableContent(children);
+  const isIconOnly = !loading && !showTextLabel && Boolean(iconLeft || iconRight || hasIconChildren);
+  const iconOnlyHitArea = theme.sizing.flexButton(size).height;
   const handleMouseEnter = () => {
     if (!isDisabled) {
       isMouseOverRef.current = true;
@@ -1076,8 +1098,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",
@@ -1086,18 +1109,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",
@@ -1136,7 +1171,8 @@ 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 }),
+        showTextLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children }),
+        hasIconChildren && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: iconSize, color: colors.text, children }),
         iconRight && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: iconSize, color: colors.text, children: iconRight })
       ] }) })
     }