@xsolla/xui-button 0.191.0 → 0.192.0

package/native/index.d.mts

@@ -170,7 +170,14 @@ interface IconButtonProps extends ThemeOverrideProps {
 declare const IconButton: React.FC<IconButtonProps>;
 
 interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
-    /** Button label. Omit for icon-only buttons (provide `aria-label`). */
+    /**
+     * 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";
@@ -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,7 +170,14 @@ interface IconButtonProps extends ThemeOverrideProps {
 declare const IconButton: React.FC<IconButtonProps>;
 
 interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
-    /** Button label. Omit for icon-only buttons (provide `aria-label`). */
+    /**
+     * 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";
@@ -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,15 +808,25 @@ 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) return false;
+  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 = {
@@ -1018,8 +1028,10 @@ 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 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;
@@ -1159,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 }),
-        hasVisibleLabel(children) && /* @__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 })
       ] }) })
     }