@astryxdesign/core 0.1.6 → 0.1.7-canary.0a6de96

package/src/SideNav/SideNavItem.tsx

@@ -54,6 +54,7 @@ import {getIcon} from '../Icon/globalIconRegistry';
 import {useSideNavRenderMode} from './SideNavRenderContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Styles
@@ -356,6 +357,7 @@ export function SideNavItem({
   'data-testid': testId,
   ref,
 }: SideNavItemProps) {
+  const t = useTranslator();
   const {isCollapsed} = useSideNavCollapse();
   const renderMode = useSideNavRenderMode();
   const {closeMobileNav} = useAppShellMobile();
@@ -626,7 +628,7 @@ export function SideNavItem({
         <button
           type="button"
           onClick={handleToggleClick}
-          aria-label={isItemCollapsed ? `Expand ${label}` : `Collapse ${label}`}
+          aria-label={isItemCollapsed ? t('@astryx.sideNavItem.expand', {label}) : t('@astryx.sideNavItem.collapse', {label})}
           aria-expanded={!isItemCollapsed}
           aria-controls={`${id}-children`}
           {...stylex.props(styles.expandToggle)}>

package/src/Slider/Slider.doc.mjs

@@ -132,7 +132,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Status indicator object (`{ type, message }`) for validation feedback.',
     },
@@ -286,7 +286,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         '验证反馈的状态指示器对象（`{ type, message }`）。',
     },

package/src/Stack/Stack.doc.mjs

@@ -24,25 +24,25 @@ export const docs = {
       props: [
         {
           name: 'gap',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Spacing step (number literal): 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10. Pass as a JSX number expression e.g. gap={4}, NOT a string like gap="4".',
         },
         {
           name: 'padding',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Inner padding on all sides, using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Matches the padding prop on Card, LayoutContent, and LayoutPanel. Pass as a JSX number expression e.g. padding={3}.',
         },
         {
           name: 'paddingInline',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
         },
         {
           name: 'paddingBlock',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
         },
@@ -127,25 +127,25 @@ export const docs = {
       props: [
         {
           name: 'gap',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Spacing step (number literal): 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10. Pass as a JSX number expression e.g. gap={4}, NOT a string like gap="4".',
         },
         {
           name: 'padding',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Inner padding on all sides, using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Matches the padding prop on Card, LayoutContent, and LayoutPanel. Pass as a JSX number expression e.g. padding={3}.',
         },
         {
           name: 'paddingInline',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
         },
         {
           name: 'paddingBlock',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
         },
@@ -289,7 +289,7 @@ export const docsZh = {
       props: [
         {
           name: 'gap',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             '间距步进（数字字面量）：0、0.5、1、1.5、2、3、4、5、6、8、10。在 JSX 中使用数字表达式 e.g. gap={4}，不要使用字符串 gap="4"。',
         },
@@ -358,7 +358,7 @@ export const docsZh = {
       props: [
         {
           name: 'gap',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             '间距步进（数字字面量）：0、0.5、1、1.5、2、3、4、5、6、8、10。在 JSX 中使用数字表达式 e.g. gap={4}，不要使用字符串 gap="4"。',
         },

package/src/Switch/Switch.doc.mjs

@@ -90,7 +90,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Status indicator with type and message. Displays a colored message box below the switch and sets aria-invalid when type is "error".',
     },
@@ -236,7 +236,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         '带类型和消息的状态指示器。在开关下方显示彩色消息框，当类型为 "error" 时设置 aria-invalid。',
     },

package/src/Switch/Switch.test.tsx

@@ -197,6 +197,22 @@ describe('Switch', () => {
     expect(screen.getByLabelText('Toggle row')).toBeInTheDocument();
   });
 
+  it('keeps description linked via aria-describedby when isLabelHidden', () => {
+    render(
+      <Switch
+        label="Toggle row"
+        isLabelHidden
+        description="Enables sync for this row"
+        value={false}
+        onChange={() => {}}
+      />,
+    );
+    const switchEl = screen.getByRole('switch');
+    const description = screen.getByText('Enables sync for this row');
+    expect(description.id).not.toBe('');
+    expect(switchEl.getAttribute('aria-describedby')).toContain(description.id);
+  });
+
   it('shows label visually by default', () => {
     render(
       <Switch label="Enable notifications" value={false} onChange={() => {}} />,

package/src/Switch/Switch.tsx

@@ -393,9 +393,11 @@ export function Switch({
   });
 
   // Build aria-describedby from description and status message
-  // Only include descriptionID when the element actually renders
+  // Only include descriptionID when the element actually renders.
+  // FieldLabel renders the description (with descriptionID) even when the
+  // label is visually hidden — it's sr-only, so keep it linked.
   const describedByParts: string[] = [];
-  if (description && !isLabelHidden) {
+  if (description) {
     describedByParts.push(descriptionID);
   }
   if (status?.message) {

package/src/TabList/TabList.tsx

@@ -29,6 +29,7 @@ import {useListFocus} from '../hooks/useListFocus';
 import {useKeyboardHint} from '../hooks/useKeyboardHint';
 import {EDGE_COMP_ATTR} from '../Layout/edgeCompensation.stylex';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 /**
  * Selector matching the focusable stops in the tab strip: every Tab
@@ -129,11 +130,13 @@ export function TabList({
   onKeyDown: onKeyDownProp,
   onFocus: onFocusProp,
   onBlur: onBlurProp,
-  'aria-label': ariaLabel = 'Tabs',
+  'aria-label': ariaLabelFromProps,
   'aria-orientation': _ariaOrientation,
   [EDGE_COMP_ATTR]: _edgeCompAttr,
   ...restProps
 }: TabListProps) {
+  const t = useTranslator();
+  const ariaLabel = ariaLabelFromProps ?? t('@astryx.tabList.label');
   const size = useSize(sizeProp, 'md');
 
   // Roving-tabindex keyboard navigation across the tab strip via the shared

package/src/Table/BaseTable.tsx

@@ -45,6 +45,7 @@ import {mergeProps} from '../utils';
 import {EmptyState} from '../EmptyState';
 import {Text} from '../Text';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   table: {
@@ -162,7 +163,7 @@ function TableRowInner<T extends Record<string, unknown>>({
 
     const initialBodyCellRenderProps: BodyCellRenderProps = {
       htmlProps: initialCellHtmlProps,
-      styles: [],
+      xstyle: [],
       columnIndex,
       columns: columns as ReadonlyArray<TableColumn<Record<string, unknown>>>,
     };
@@ -206,7 +207,7 @@ function TableRowInner<T extends Record<string, unknown>>({
         key={col.key}
         {...cellRenderProps.htmlProps}
         contextMenuActions={cellRenderProps.contextMenuActions}
-        xstyle={cellRenderProps.styles}>
+        xstyle={cellRenderProps.xstyle}>
         {content}
       </CellComponent>
     );
@@ -218,7 +219,7 @@ function TableRowInner<T extends Record<string, unknown>>({
     p => p.transformBodyRow,
     {
       htmlProps: {},
-      styles: [],
+      xstyle: [],
       children: <>{cells}</>,
     } satisfies BodyRowRenderProps,
     item,
@@ -230,7 +231,7 @@ function TableRowInner<T extends Record<string, unknown>>({
       key={rowKey}
       ref={rowRenderProps.ref}
       {...rowRenderProps.htmlProps}
-      xstyle={rowRenderProps.styles}>
+      xstyle={rowRenderProps.xstyle}>
       {rowRenderProps.children}
     </RowComponent>
   );
@@ -324,8 +325,13 @@ function BaseTableInner<T extends Record<string, unknown>>({
   textOverflow = 'wrap',
   scrollWrapper: ScrollWrapper,
   emptyState,
+  xstyle,
+  className,
+  style,
   ref,
+  ...rest
 }: BaseTableProps<T> & {ref?: Ref<HTMLTableElement>}): ReactElement {
+  const t = useTranslator();
   // Use stable empty array when no plugins provided
   const plugins = pluginsProp ?? (EMPTY_PLUGINS as TablePlugin<T>[]);
 
@@ -365,7 +371,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
   // --- Plugin pipeline: table ---
   const tableRenderProps = applyPlugins(plugins, p => p.transformTable, {
     htmlProps: {...userTableProps},
-    styles: children ? [styles.table, styles.tableAutoLayout] : [styles.table],
+    xstyle: children ? [styles.table, styles.tableAutoLayout] : [styles.table],
   } satisfies TableRenderProps);
 
   // --- Plugin pipeline: header cells ---
@@ -386,7 +392,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
 
     const initialHeaderRenderProps: HeaderCellRenderProps = {
       htmlProps: initialHeaderHtmlProps,
-      styles: [],
+      xstyle: [],
       content: headerContent,
       columnIndex,
       columns: resolvedColumns as ReadonlyArray<
@@ -447,7 +453,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
         {...mergedHtmlProps}
         {...headerTitleProp}
         contextMenuActions={cellRenderProps.contextMenuActions}
-        xstyle={cellRenderProps.styles}>
+        xstyle={cellRenderProps.xstyle}>
         {headerInner}
       </HeaderCellComponent>
     );
@@ -459,7 +465,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
     p => p.transformHeaderRow,
     {
       htmlProps: {},
-      styles: [],
+      xstyle: [],
       children: <>{headerCells}</>,
     } satisfies HeaderRowRenderProps,
   );
@@ -468,12 +474,15 @@ function BaseTableInner<T extends Record<string, unknown>>({
   const hasData = data != null && data.length > 0;
   const hasColumns = resolvedColumns.length > 0;
 
+  // Style precedence: deprecated tableProps.style < consumer style < the
+  // computed column min-width (structural — derived from column defs, so it
+  // must win when present; when absent, a consumer minWidth survives).
   const tableStyle: React.CSSProperties = {
     ...tableRenderProps.htmlProps.style,
-    minWidth:
-      resolvedWidths.tableMinWidth > 0
-        ? `${resolvedWidths.tableMinWidth}px`
-        : undefined,
+    ...style,
+    ...(resolvedWidths.tableMinWidth > 0
+      ? {minWidth: `${resolvedWidths.tableMinWidth}px`}
+      : null),
   };
 
   let tableElement: ReactNode = (
@@ -482,10 +491,13 @@ function BaseTableInner<T extends Record<string, unknown>>({
       {...tableRenderProps.htmlProps}
       {...mergeProps(
         themeProps('base-table'),
-        stylex.props(...tableRenderProps.styles),
-        tableRenderProps.htmlProps.className,
+        stylex.props(...tableRenderProps.xstyle, xstyle),
+        [tableRenderProps.htmlProps.className, className]
+          .filter(Boolean)
+          .join(' ') || undefined,
+        tableStyle,
       )}
-      style={tableStyle}>
+      {...rest}>
       {children ? (
         children
       ) : (
@@ -495,7 +507,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
               <RowComponent
                 {...headerRowRenderProps.htmlProps}
                 isHeaderRow
-                xstyle={headerRowRenderProps.styles}>
+                xstyle={headerRowRenderProps.xstyle}>
                 {headerRowRenderProps.children}
               </RowComponent>
             </TableHeader>
@@ -527,7 +539,12 @@ function BaseTableInner<T extends Record<string, unknown>>({
                 emptyState !== false && (
                   <tr>
                     <td colSpan={resolvedColumns.length}>
-                      {emptyState ?? <EmptyState title="No data" isCompact />}
+                      {emptyState ?? (
+                        <EmptyState
+                          title={t('@astryx.table.noData')}
+                          isCompact
+                        />
+                      )}
                     </td>
                   </tr>
                 )}
@@ -551,14 +568,14 @@ function BaseTableInner<T extends Record<string, unknown>>({
       p => p.transformScrollWrapper,
       {
         htmlProps: {},
-        styles: [],
+        xstyle: [],
       } satisfies ScrollWrapperRenderProps,
     );
 
     tableElement = (
       <ScrollWrapper
         htmlProps={scrollWrapperRenderProps.htmlProps}
-        styles={scrollWrapperRenderProps.styles}
+        xstyle={scrollWrapperRenderProps.xstyle}
         beforeTable={scrollWrapperRenderProps.beforeTable}
         afterTable={scrollWrapperRenderProps.afterTable}>
         {tableElement}

package/src/Table/Table.test.tsx

@@ -11,6 +11,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
+import * as stylex from '@stylexjs/stylex';
 import {BaseTable} from './BaseTable';
 import {Table} from './Table';
 import {TableRow} from './TableRow';
@@ -414,6 +415,136 @@ describe('BaseTable', () => {
     );
   });
 
+  describe('root element styling props (#3679)', () => {
+    it('applies className to the table element', () => {
+      render(<Table data={users} columns={columns} className="custom-table" />);
+      expect(screen.getByRole('table').className).toContain('custom-table');
+    });
+
+    it('applies style to the table element', () => {
+      render(<Table data={users} columns={columns} style={{opacity: 0.9}} />);
+      expect(screen.getByRole('table').style.opacity).toBe('0.9');
+    });
+
+    it('accepts xstyle without error', () => {
+      render(<Table data={users} columns={columns} xstyle={undefined} />);
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    it('spreads id and aria attributes onto the table element', () => {
+      render(
+        <Table
+          data={users}
+          columns={columns}
+          id="users-table"
+          aria-label="Users"
+          data-analytics="tables"
+        />,
+      );
+      const table = screen.getByRole('table', {name: 'Users'});
+      expect(table.id).toBe('users-table');
+      expect(table).toHaveAttribute('data-analytics', 'tables');
+    });
+
+    it('composes with deprecated tableProps, direct props winning conflicts', () => {
+      render(
+        <Table
+          data={users}
+          columns={columns}
+          className="direct"
+          style={{opacity: 1}}
+          tableProps={{
+            className: 'legacy',
+            style: {color: 'red', opacity: 0.5},
+          }}
+        />,
+      );
+      const table = screen.getByRole('table');
+      expect(table.className).toContain('legacy');
+      expect(table.className).toContain('direct');
+      // Direct style wins the conflicting key; non-conflicting legacy survives.
+      expect(table.style.opacity).toBe('1');
+      expect(table.style.color).toBe('red');
+    });
+
+    it('keeps the computed column min-width over a consumer style.minWidth', () => {
+      const {tableMinWidth} = resolveColumnWidths(columns);
+      render(
+        <Table data={users} columns={columns} style={{minWidth: '10px'}} />,
+      );
+      expect(screen.getByRole('table').style.minWidth).toBe(
+        `${tableMinWidth}px`,
+      );
+    });
+
+    it('lets a consumer style.minWidth survive when columns compute none', () => {
+      const plain: TableColumn<User>[] = [{key: 'name'}, {key: 'age'}];
+      render(<Table data={users} columns={plain} style={{minWidth: '10px'}} />);
+      expect(screen.getByRole('table').style.minWidth).toBe('10px');
+    });
+
+    it('direct id and aria attributes beat the same keys in tableProps', () => {
+      render(
+        <Table
+          data={users}
+          columns={columns}
+          id="direct-id"
+          aria-label="Direct"
+          tableProps={{id: 'legacy-id', 'aria-label': 'Legacy'}}
+        />,
+      );
+      const table = screen.getByRole('table', {name: 'Direct'});
+      expect(table.id).toBe('direct-id');
+    });
+
+    it('keeps the astryx theme classes alongside a consumer className', () => {
+      render(<Table data={users} columns={columns} className="custom-table" />);
+      const table = screen.getByRole('table');
+      expect(table.className).toContain('astryx-base-table');
+      expect(table.className).toContain('astryx-table');
+      expect(table.className).toContain('custom-table');
+    });
+
+    it('passes event handlers through to the table element', async () => {
+      const onClick = vi.fn();
+      render(<Table data={users} columns={columns} onClick={onClick} />);
+      screen
+        .getByRole('table')
+        .dispatchEvent(new MouseEvent('click', {bubbles: true}));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('applies dynamic xstyle values to the table element', () => {
+      const dynamic = stylex.create({
+        opacity: (value: number) => ({opacity: value}),
+      });
+      render(
+        <Table data={users} columns={columns} xstyle={dynamic.opacity(0.42)} />,
+      );
+      expect(screen.getByRole('table').getAttribute('style')).toContain('0.42');
+    });
+
+    it('honors className in children mode', () => {
+      render(
+        <Table className="custom-table">
+          <tbody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </tbody>
+        </Table>,
+      );
+      expect(screen.getByRole('table').className).toContain('custom-table');
+    });
+
+    it('honors className on an unwrapped BaseTable (no scrollWrapper)', () => {
+      render(
+        <BaseTable data={users} columns={columns} className="custom-table" />,
+      );
+      expect(screen.getByRole('table').className).toContain('custom-table');
+    });
+  });
+
   describe('plugin pipeline', () => {
     it('applies transformTable plugin', () => {
       const plugin: TablePlugin<User> = {
@@ -826,7 +957,7 @@ describe('Table', () => {
     const userPlugin: TablePlugin<User> = {
       transformTable: props => {
         // XDS plugin should have already added styles
-        expect(props.styles.length).toBeGreaterThan(1);
+        expect(props.xstyle.length).toBeGreaterThan(1);
         return {
           ...props,
           htmlProps: {...props.htmlProps, 'data-testid': 'after-xds'},

package/src/Table/Table.tsx

@@ -31,6 +31,7 @@ import type {
   TableRenderProps,
 } from './types';
 import type {StyleXStyles} from '../theme/types';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Table Types
@@ -135,7 +136,7 @@ const scrollWrapperStyles = stylex.create({
 function TableScrollWrapper({
   children,
   htmlProps,
-  styles: pluginStyles,
+  xstyle: pluginStyles,
   beforeTable,
   afterTable,
 }: {
@@ -143,10 +144,11 @@ function TableScrollWrapper({
   htmlProps?: React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
   };
-  styles?: StyleXStyles[];
+  xstyle?: StyleXStyles[];
   beforeTable?: React.ReactNode;
   afterTable?: React.ReactNode;
 }) {
+  const t = useTranslator();
   const {ref, ...restHtmlProps} = htmlProps ?? {};
   return (
     <div
@@ -158,7 +160,7 @@ function TableScrollWrapper({
       // htmlProps.
       tabIndex={0}
       role="group"
-      aria-label="Table"
+      aria-label={t('@astryx.table.label')}
       {...restHtmlProps}
       {...mergeProps(
         themeProps('table-scroll-wrapper'),
@@ -194,7 +196,7 @@ function buildTableStylePlugin<
             ? `${existingClass} ${tableClass}`
             : tableClass,
         },
-        styles: [...props.styles, tableStyles.base],
+        xstyle: [...props.xstyle, tableStyles.base],
       };
     },
   };

package/src/Table/plugins/columnResize/useTableColumnResize.tsx

@@ -857,7 +857,7 @@ export function useTableColumnResize<T extends Record<string, unknown>>(
               {handle}
             </>
           ),
-          styles: [...props.styles, headerCellRelative.base],
+          xstyle: [...props.xstyle, headerCellRelative.base],
         };
       },
     }),