@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

package/src/AppShell/AppShell.doc.mjs

@@ -45,9 +45,15 @@ export const docs = {
     },
     {
       name: 'mobileNav',
+      // Kept as the bare `ReactNode`, not widened to the true
+      // `false | MobileNavConfig | ReactNode`: the docsite playground hides a
+      // prop by exact-matching the type string against UNSUPPORTED_PROP_TYPES,
+      // and widening drops that match. This prop's slotElements happen to hide
+      // it a second way today, but the hide should not rest on that
+      // coincidence. The legal values live in the description instead (#1645).
       type: 'ReactNode',
       description:
-        'Mobile navigation configuration. Accepts false (disable), config object (tune auto behavior), or ReactNode (full custom drawer).',
+        "Mobile navigation configuration. Accepts false (disable), a config object (tune auto behavior), or ReactNode (full custom drawer). The config object is {hasToggle?: boolean, isOpen?: boolean, onOpenChange?: (isOpen: boolean) => void, content?: ReactNode, breakpoint?: 'sm' | 'md' | 'lg' | 'none', defaultIsMobile?: boolean}; breakpoint defaults to 'md'.",
       slotElements: [{__element: 'MobileNav', props: {}}],
     },
     {
@@ -139,7 +145,7 @@ export const docsZh = {
     },
     {name: 'topNav', type: 'ReactNode', description: '顶部导航插槽，通常为 TopNav。'},
     {name: 'sideNav', type: 'ReactNode', description: '侧边导航插槽，通常为 SideNav。'},
-    {name: 'mobileNav', type: 'ReactNode', description: '移动端导航配置。接受 false（禁用）、配置对象（调整自动行为）或 ReactNode（完全自定义抽屉）。'},
+    {name: 'mobileNav', type: 'ReactNode', description: "移动端导航配置。接受 false（禁用）、配置对象（调整自动行为）或 ReactNode（完全自定义抽屉）。配置对象为 {hasToggle?, isOpen?, onOpenChange?, content?, breakpoint?: 'sm' | 'md' | 'lg' | 'none', defaultIsMobile?}；breakpoint 默认为 'md'。"},
     {name: 'banner', type: 'ReactNode', description: '横幅插槽，用于全局公告，放置在 topNav 上方。'},
     {
       name: 'height',

package/src/AppShell/AppShell.tsx

@@ -53,6 +53,7 @@ import {mergeProps, mergeRefs, isRenderable} from '../utils';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {observeResize, unobserveResize} from '../utils/sharedResizeObserver';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const HasActivity = typeof React.Activity !== 'undefined';
 const ActivityWrapper = HasActivity
@@ -472,6 +473,7 @@ export function AppShell({
   ref,
   ...rest
 }: AppShellProps) {
+  const t = useTranslator();
   // =========================================================================
   // Parse mobileNav prop — normalize to config, custom element, or disabled
   // =========================================================================
@@ -756,7 +758,7 @@ export function AppShell({
           <div
             {...stylex.props(styles.autoMobileTopBar)}
             role="navigation"
-            aria-label="Mobile navigation">
+            aria-label={t('@astryx.appShell.mobileNavigation')}>
             <SideNavRenderContext value="topbar">
               {sideNav}
             </SideNavRenderContext>

package/src/AvatarGroup/AvatarGroup.tsx

@@ -25,6 +25,7 @@ import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
 import {AvatarGroupContext} from './AvatarGroupContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const OVERLAP_RATIO = 0.25;
 
@@ -76,13 +77,15 @@ export function AvatarGroup({
   children,
   size = 'small',
   'data-testid': testId,
-  'aria-label': ariaLabel = 'Avatars',
+  'aria-label': ariaLabelFromProps,
   xstyle,
   className,
   style,
   ref,
   ...props
 }: AvatarGroupProps): ReactNode {
+  const t = useTranslator();
+  const ariaLabel = ariaLabelFromProps ?? t('@astryx.avatarGroup.label');
   const numericSize = resolveSize(size);
   const overlap = Math.round(numericSize * OVERLAP_RATIO);
 

package/src/Banner/Banner.tsx

@@ -50,6 +50,7 @@ import {
 import {mergeProps} from '../utils';
 import {edgeCompSlot} from '../Layout/edgeCompensation.stylex';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -296,7 +297,10 @@ const styles = stylex.create({
   chevron: {
     display: 'inline-flex',
     transitionProperty: 'transform',
-    transitionDuration: durationVars['--duration-fast'],
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   chevronExpanded: {
@@ -385,6 +389,7 @@ export function Banner({
   ref,
   ...rest
 }: BannerProps) {
+  const t = useTranslator();
   const [isDismissed, setIsDismissed] = useState(false);
   const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
   // Links the expand/collapse toggle to the content region it shows/hides so
@@ -469,8 +474,8 @@ export function Banner({
               <Button
                 variant="ghost"
                 size="sm"
-                label={isExpanded ? 'Collapse' : 'Expand'}
-                tooltip={isExpanded ? 'Collapse' : 'Expand'}
+                label={isExpanded ? t('@astryx.banner.collapse') : t('@astryx.banner.expand')}
+                tooltip={isExpanded ? t('@astryx.banner.collapse') : t('@astryx.banner.expand')}
                 icon={
                   <span
                     {...stylex.props(
@@ -490,8 +495,8 @@ export function Banner({
               <Button
                 variant="ghost"
                 size="sm"
-                label="Dismiss"
-                tooltip="Dismiss"
+                label={t('@astryx.banner.dismiss')}
+                tooltip={t('@astryx.banner.dismiss')}
                 icon={<Icon icon="close" size="sm" color="inherit" />}
                 onClick={handleDismiss}
                 isIconOnly

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -22,6 +22,7 @@ import {spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Variant type
@@ -150,10 +151,12 @@ export function Breadcrumbs({
   xstyle,
   className,
   style,
-  label = 'Breadcrumb',
+  label: labelFromProps,
   ref,
   ...rest
 }: BreadcrumbsProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.breadcrumbs.label');
   const ctxValue = useMemo<BreadcrumbContextValue>(
     () => ({variant, separator}),
     [variant, separator],

package/src/Button/Button.doc.mjs

@@ -104,6 +104,12 @@ export const docs = {
         'When true, renders as a square icon-only button with label as aria-label. Requires icon. Tip: for a dedicated icon-only button component, use IconButton from \'@astryxdesign/core/IconButton\' instead.',
       default: 'false',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        "Width of the button. Numbers are treated as pixels, strings are used as-is (e.g., '100%' for a full-width button). By default the button sizes to its content.",
+    },
     {
       name: 'children',
       type: 'ReactNode',
@@ -205,6 +211,7 @@ export const docsZh = {
       default: 'false',
     },
     {name: 'icon', type: 'ReactNode', description: '图标元素。仅提供 icon 而不提供 children 时，按钮渲染为正方形的纯图标按钮。'},
+    {name: 'width', type: 'SizeValue', description: "按钮宽度。数字按像素处理，字符串按原样使用（如 '100%' 表示全宽按钮）。默认按内容自适应宽度。"},
     {name: 'children', type: 'ReactNode', description: '可选的可见内容覆盖；label 仍然是必需的（用于无障碍名称）。大多数情况使用 <Button label="Save" />。'},
     {
       name: 'endContent',
@@ -272,6 +279,7 @@ export const docsDense = {
     isLoading: 'shows spinner+disables interaction; announces via live region',
     icon: 'icon element rendered before label text',
     isIconOnly: 'when true, renders square icon-only button; label becomes aria-label',
+    width: "Width of button. Numbers=pixels, strings=as-is (e.g. '100%' for full-width).",
     children: 'optional visible override; label is still required for a11y. Prefer <Button label="Save" /> over using children',
     endContent: 'trailing icon/badge after label; ignored when isIconOnly; color inherited',
     tooltip: 'tooltip on hover',

package/src/Button/Button.test.tsx

@@ -243,6 +243,33 @@ describe('Button', () => {
     expect(button).toHaveAttribute('data-size', 'sm');
   });
 
+  it('applies string width as-is', () => {
+    render(<Button label="Sign in" width="100%" />);
+    const button = screen.getByRole('button');
+    // StyleX compiles the dynamic width to an inline CSS custom property.
+    expect(button.getAttribute('style')).toContain('100%');
+    expect(button.className).toContain('dynamicStyles.width');
+  });
+
+  it('applies numeric width as pixels', () => {
+    render(<Button label="Sign in" width={240} />);
+    expect(screen.getByRole('button').getAttribute('style')).toContain('240');
+  });
+
+  it('omits width styling when the prop is not provided', () => {
+    render(<Button label="Sign in" />);
+    expect(screen.getByRole('button').className).not.toContain(
+      'dynamicStyles.width',
+    );
+  });
+
+  it('applies width when rendered as a link via href', () => {
+    render(<Button label="Sign in" href="https://example.com" width="100%" />);
+    expect(
+      screen.getByRole('link', {name: 'Sign in'}).getAttribute('style'),
+    ).toContain('100%');
+  });
+
   // P0: onClick fires before clickAction, clickAction respects preventDefault
   it('fires onClick before clickAction', async () => {
     const user = userEvent.setup();

package/src/Button/Button.tsx

@@ -15,11 +15,12 @@
  * - /apps/storybook/stories/Button.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Button/ (showcase blocks)
  *
- * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
+ * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, tooltip, endContent, href, as, target, rel
  */
 
 import {useRef, useTransition, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
+import type {SizeValue} from '../utils/types';
 import * as stylex from '@stylexjs/stylex';
 import {useTooltip} from '../Tooltip/useTooltip';
 import {
@@ -130,6 +131,12 @@ const styles = stylex.create({
   },
 });
 
+// Dynamic style for the consumer-controlled button width. Numbers are treated
+// as pixels by StyleX; strings (e.g. '100%') are used as-is.
+const dynamicStyles = stylex.create({
+  width: (width: SizeValue | null) => ({width}),
+});
+
 const sizeStyles = stylex.create({
   sm: {
     height: sizeVars['--size-element-sm'],
@@ -341,6 +348,12 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
    * @default false
    */
   isIconOnly?: boolean;
+  /**
+   * Width of the button. Numbers are treated as pixels, strings are used as-is
+   * (e.g. `'100%'` for a full-width button). By default the button sizes to
+   * its content.
+   */
+  width?: SizeValue;
   /**
    * Optional visible content. When provided, rendered instead of `label` as the
    * visible text (label still serves as the accessible name via aria-label).
@@ -434,6 +447,36 @@ const loadingStyles = stylex.create({
   },
 });
 
+/**
+ * "I am the last member of the group" — the trailing end cap.
+ *
+ * NOT `:last-child`: several members render an invisible layer element AFTER
+ * their button (a tooltip'd Button returns button + layer; DropdownMenu returns
+ * trigger + popover). `useLayer` renders those inline rather than portaling
+ * them, so the layer — not the button — took the `:last-child` slot and the real
+ * trailing button silently kept square corners (#2508).
+ *
+ * Layers always carry the native `popover` attribute (useLayer.tsx), and a
+ * popover is never an in-flow member — it is `display: none` until shown, then
+ * promoted to the top layer. So "last member" is: no following element sibling
+ * that isn't a popover.
+ *
+ * Reading it the other way round — marking the *buttons* and testing for a
+ * marked sibling — is the trap: it silently reclassifies anything it doesn't
+ * recognise as "not a member", so a member wrapped in a `display: contents`
+ * wrapper (Tooltip, HoverCard) or a raw child would make the button BEFORE it
+ * round mid-group. Ignoring known layers keeps the predicate conservative: an
+ * unrecognised sibling still counts, exactly as `:last-child` did, so the worst
+ * case degrades to the old behaviour instead of a wrong corner.
+ *
+ * Kept as a same-file const: StyleX only statically evaluates a selector key
+ * from a const in the same file.
+ *
+ * The leading edge still uses `:first-child` — a member's button always precedes
+ * its own layer, so the first button is genuinely `:first-child`.
+ */
+const IS_LAST_ITEM = ':not(:has(~ *:not([popover])))';
+
 const groupStyles = stylex.create({
   horizontal: {
     borderStartStartRadius: {
@@ -446,11 +489,11 @@ const groupStyles = stylex.create({
     },
     borderStartEndRadius: {
       default: 0,
-      ':last-child': radiusVars['--radius-element'],
+      [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
     borderEndEndRadius: {
       default: 0,
-      ':last-child': radiusVars['--radius-element'],
+      [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
     borderInlineStartWidth: {
       default: borderVars['--border-width'],
@@ -473,11 +516,11 @@ const groupStyles = stylex.create({
     },
     borderEndStartRadius: {
       default: 0,
-      ':last-child': radiusVars['--radius-element'],
+      [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
     borderEndEndRadius: {
       default: 0,
-      ':last-child': radiusVars['--radius-element'],
+      [IS_LAST_ITEM]: radiusVars['--radius-element'],
     },
     borderBlockStartWidth: {
       default: borderVars['--border-width'],
@@ -518,6 +561,7 @@ const groupStyles = stylex.create({
  * <Button label="Edit" icon={<PencilIcon />} />
  * <Button label="Messages" endContent={<Badge label={3} />} />
  * <Button label="Edit" icon={<PencilIcon />} endContent={<Badge label="New" />} />
+ * <Button label="Sign in" variant="primary" width="100%" />
  * <Button label="Visit site" href="https://example.com" variant="primary" />
  * <Button label="Open in new tab" href="https://example.com" target="_blank" rel="noopener noreferrer" />
  * ```
@@ -533,6 +577,7 @@ export function Button({
   clickAction,
   icon,
   isIconOnly = false,
+  width,
   children,
   endContent,
   tooltip,
@@ -646,6 +691,7 @@ export function Button({
       (buttonGroup.orientation === 'horizontal'
         ? groupStyles.onSolidHorizontal
         : groupStyles.onSolidVertical),
+    width != null && dynamicStyles.width(width),
     xstyle,
   );