@xsolla/xui-button 0.216.1 → 0.218.0

package/web/index.d.mts

@@ -183,7 +183,13 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
     variant?: "brand" | "primary" | "secondary" | "tertiary" | "brandExtra" | "inverse";
     /** Size of the button */
     size?: "xl" | "lg" | "md" | "sm" | "xs";
-    /** Whether to show background fill */
+    /**
+     * Whether to show background fill.
+     *
+     * This also drives the button's frame padding: a filled button is padded per
+     * size ({@link BACKGROUND_PADDING}), while an unfilled one renders flush so
+     * it sits inline with surrounding text (XUITSD-86).
+     */
     background?: boolean;
     /**
      * Whether to show the hover/press background color.
@@ -198,6 +204,9 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
      * 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).
      *
+     * Only meaningful together with `background` — an unfilled FlexButton already
+     * renders flush at every size, so `noPadding` is a no-op there (XUITSD-86).
+     *
      * Icon-only buttons keep their square dimensions when `noPadding` is set —
      * only the inner padding is removed.
      * @default false
@@ -239,12 +248,22 @@ declare const getFlexButtonBoxSize: (size?: NonNullable<FlexButtonProps["size"]>
  *
  * Renders as a semantic `<button>` element with full ARIA support.
  *
+ * ## Frame padding
+ *
+ * Padding follows the `background` prop. A filled button (`background`) is
+ * padded per size — 2px at `xs`/`sm`/`md`, 4px at `lg`/`xl` — while an unfilled
+ * one renders flush on all four sides so it flows inline with surrounding text.
+ * `noPadding` strips the padding from a filled button; on an unfilled one there
+ * is nothing left to strip (XUITSD-86).
+ *
  * ## 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"`).
+ * line up with the Modal header icon slots (36x36 at `size="xl"`). The square is
+ * independent of the padding above, so an unfilled icon-only button keeps its
+ * hit area and simply centres the icon inside it.
  *
  * ```tsx
  * <FlexButton variant="secondary" size="xl" aria-label="Go back">
@@ -257,7 +276,10 @@ declare const getFlexButtonBoxSize: (size?: NonNullable<FlexButtonProps["size"]>
  * - **Semantic HTML**: Renders as a native `<button>` element
  * - **Keyboard Navigation**: Focusable via Tab, activated with Enter or Space
  * - **ARIA States**: Properly announces disabled and loading states
- * - **Focus Indicator**: Visible focus ring for keyboard navigation
+ * - **Focus Indicator**: The browser's native `:focus-visible` ring. The design
+ *   system specifies no focus treatment for FlexButton (XUITSD-61), so the
+ *   component paints none of its own and does not suppress the UA outline —
+ *   which keeps a keyboard-only indicator without drawing a ring on click.
  * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
  */
 declare const FlexButton: React.ForwardRefExoticComponent<FlexButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/web/index.d.ts

@@ -183,7 +183,13 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
     variant?: "brand" | "primary" | "secondary" | "tertiary" | "brandExtra" | "inverse";
     /** Size of the button */
     size?: "xl" | "lg" | "md" | "sm" | "xs";
-    /** Whether to show background fill */
+    /**
+     * Whether to show background fill.
+     *
+     * This also drives the button's frame padding: a filled button is padded per
+     * size ({@link BACKGROUND_PADDING}), while an unfilled one renders flush so
+     * it sits inline with surrounding text (XUITSD-86).
+     */
     background?: boolean;
     /**
      * Whether to show the hover/press background color.
@@ -198,6 +204,9 @@ interface FlexButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
      * 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).
      *
+     * Only meaningful together with `background` — an unfilled FlexButton already
+     * renders flush at every size, so `noPadding` is a no-op there (XUITSD-86).
+     *
      * Icon-only buttons keep their square dimensions when `noPadding` is set —
      * only the inner padding is removed.
      * @default false
@@ -239,12 +248,22 @@ declare const getFlexButtonBoxSize: (size?: NonNullable<FlexButtonProps["size"]>
  *
  * Renders as a semantic `<button>` element with full ARIA support.
  *
+ * ## Frame padding
+ *
+ * Padding follows the `background` prop. A filled button (`background`) is
+ * padded per size — 2px at `xs`/`sm`/`md`, 4px at `lg`/`xl` — while an unfilled
+ * one renders flush on all four sides so it flows inline with surrounding text.
+ * `noPadding` strips the padding from a filled button; on an unfilled one there
+ * is nothing left to strip (XUITSD-86).
+ *
  * ## 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"`).
+ * line up with the Modal header icon slots (36x36 at `size="xl"`). The square is
+ * independent of the padding above, so an unfilled icon-only button keeps its
+ * hit area and simply centres the icon inside it.
  *
  * ```tsx
  * <FlexButton variant="secondary" size="xl" aria-label="Go back">
@@ -257,7 +276,10 @@ declare const getFlexButtonBoxSize: (size?: NonNullable<FlexButtonProps["size"]>
  * - **Semantic HTML**: Renders as a native `<button>` element
  * - **Keyboard Navigation**: Focusable via Tab, activated with Enter or Space
  * - **ARIA States**: Properly announces disabled and loading states
- * - **Focus Indicator**: Visible focus ring for keyboard navigation
+ * - **Focus Indicator**: The browser's native `:focus-visible` ring. The design
+ *   system specifies no focus treatment for FlexButton (XUITSD-61), so the
+ *   component paints none of its own and does not suppress the UA outline —
+ *   which keeps a keyboard-only indicator without drawing a ring on click.
  * - **Screen Reader Support**: Announces button label, state, and any associated descriptions
  */
 declare const FlexButton: React.ForwardRefExoticComponent<FlexButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/web/index.js

@@ -932,7 +932,13 @@ var SPINNER_SIZES = {
   lg: 18,
   xl: 20
 };
-var FLEX_BUTTON_PADDING = 4;
+var BACKGROUND_PADDING = {
+  xs: 2,
+  sm: 2,
+  md: 2,
+  lg: 4,
+  xl: 4
+};
 var hasVisibleLabel = (node) => {
   if (node == null || node === false || node === true) return false;
   if (typeof node === "string") return node.trim().length > 0;
@@ -1009,7 +1015,6 @@ var FlexButton = (0, import_react5.forwardRef)(
   }, ref) => {
     const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
     const [state, setState] = (0, import_react5.useState)("default");
-    const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
     const isMouseOverRef = (0, import_react5.useRef)(false);
     const isDisabled = disabled || loading;
     const getVariantColors = (currentState) => {
@@ -1108,18 +1113,6 @@ var FlexButton = (0, import_react5.forwardRef)(
           };
       }
     };
-    const getFocusRingColor = () => {
-      switch (variant) {
-        case "brand":
-          return theme.colors.overlay.brand;
-        case "brandExtra":
-          return theme.colors.overlay.brandExtra;
-        case "inverse":
-          return "rgba(255, 255, 255, 0.3)";
-        default:
-          return theme.colors.overlay.mono;
-      }
-    };
     const getSpinnerColor = () => {
       switch (variant) {
         case "brand":
@@ -1139,13 +1132,13 @@ var FlexButton = (0, import_react5.forwardRef)(
       }
     };
     const colors = getVariantColors(state);
-    const focusRingColor = getFocusRingColor();
     const spinnerColor = getSpinnerColor();
     const iconSize = ICON_SIZES[size];
     const spinnerSize = SPINNER_SIZES[size];
     const fontSize = FONT_SIZES[size];
     const borderRadius = BORDER_RADIUS[size];
     const lineHeight = LINE_HEIGHTS[size];
+    const framePadding = background ? BACKGROUND_PADDING[size] : 0;
     const showTextLabel = hasVisibleLabel(children);
     const hasIconChildren = !showTextLabel && hasRenderableContent(children);
     const isIconOnly = !loading && !showTextLabel && Boolean(iconLeft || iconRight || hasIconChildren);
@@ -1172,14 +1165,6 @@ var FlexButton = (0, import_react5.forwardRef)(
         setState(isMouseOverRef.current ? "hover" : "default");
       }
     };
-    const handleFocus = () => {
-      if (!isDisabled) {
-        setIsFocused(true);
-      }
-    };
-    const handleBlur = () => {
-      setIsFocused(false);
-    };
     const handleClick = (event) => {
       if (isDisabled) return;
       if (onPress) {
@@ -1207,18 +1192,13 @@ var FlexButton = (0, import_react5.forwardRef)(
       }
     };
     const borderShadow = colors.border ? `inset 0 0 0 1px ${colors.border}` : void 0;
-    const focusShadow = isFocused && !isDisabled ? `0 0 0 2px ${focusRingColor}` : void 0;
-    const boxShadows = [];
-    if (borderShadow) boxShadows.push(borderShadow);
-    if (focusShadow) boxShadows.push(focusShadow);
-    const combinedBoxShadow = boxShadows.length > 0 ? boxShadows.join(", ") : "none";
     const buttonStyle = {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
       gap: isIconOnly ? 0 : "2px",
       boxSizing: "border-box",
-      padding: noPadding ? "0px" : `${FLEX_BUTTON_PADDING}px`,
+      padding: noPadding ? "0px" : `${framePadding}px`,
       backgroundColor: loading ? "transparent" : colors.bg,
       color: colors.text,
       border: "none",
@@ -1230,8 +1210,7 @@ var FlexButton = (0, import_react5.forwardRef)(
       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,
+      boxShadow: borderShadow ?? "none",
       ...isIconOnly && {
         width: iconOnlyHitArea,
         height: iconOnlyHitArea,
@@ -1274,8 +1253,6 @@ var FlexButton = (0, import_react5.forwardRef)(
         onMouseUp: handleMouseUp,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
         "aria-label": computedAriaLabel,
         "aria-busy": loading || void 0,
         "aria-disabled": isDisabled || void 0,