@astryxdesign/core 0.4.4 → 0.4.5-canary.013e728

package/src/Section/Section.test.tsx

@@ -4,6 +4,22 @@ import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Section} from './Section';
 
+/**
+ * The functional class output, as an order-insensitive set. StyleX's dev
+ * runtime also emits readable debug classes naming the style object a
+ * declaration came from ("padding__paddingBlockStyles.2"); those record
+ * provenance rather than applied CSS and survive even when the declaration
+ * they name loses a merge, so they are dropped here.
+ */
+function classSet(el: HTMLElement): Set<string> {
+  return new Set(
+    el.className
+      .split(' ')
+      .filter(Boolean)
+      .filter(c => !c.includes('__') && !c.includes('.')),
+  );
+}
+
 describe('Section', () => {
   it('renders with default props', () => {
     const {container} = render(<Section>Default section</Section>);
@@ -151,15 +167,27 @@ describe('Section', () => {
     expect(screen.getByTestId('custom-section')).toBeInTheDocument();
   });
 
-  it('propagates explicit padding to nested sections via --astryx-section-padding', () => {
+  it('propagates explicit padding to nested sections via --_section-padding-propagated', () => {
     const {container} = render(
       <Section padding={6}>
         <Section data-testid="inner">Inner</Section>
       </Section>,
     );
-    // Outer section's inner div should set --astryx-section-padding
-    const outerInner = container.firstElementChild!.firstElementChild!;
-    expect(outerInner.className).toBeDefined();
+    // The outer section's inner div announces its padding on the PRIVATE
+    // propagation var, not the public `--astryx-section-padding` theme token —
+    // the split is what lets an overlay drop an inherited value at its
+    // boundary while keeping the theme's (see overlayPaddingReset).
+    const outerInner = container.firstElementChild!
+      .firstElementChild! as HTMLElement;
+    expect(
+      getComputedStyle(outerInner).getPropertyValue(
+        '--_section-padding-propagated',
+      ),
+      // jsdom does not resolve the token reference to its 24px value.
+    ).toBe('var(--spacing-6)');
+    expect(
+      getComputedStyle(outerInner).getPropertyValue('--astryx-section-padding'),
+    ).toBe('');
     // Inner section should render without error
     expect(screen.getByTestId('inner')).toBeInTheDocument();
     expect(screen.getByText('Inner')).toBeInTheDocument();
@@ -176,4 +204,173 @@ describe('Section', () => {
     expect(screen.getByTestId('inner')).toBeInTheDocument();
     expect(screen.getByText('Inner')).toBeInTheDocument();
   });
+
+  it('applies a class when paddingBlockStart is set on its own', () => {
+    const {container, rerender} = render(<Section>Content</Section>);
+    const baseline = (
+      container.firstElementChild!.firstElementChild as HTMLElement
+    ).className;
+    rerender(<Section paddingBlockStart={2}>Content</Section>);
+    const withEdge = (
+      container.firstElementChild!.firstElementChild as HTMLElement
+    ).className;
+    expect(withEdge).not.toBe(baseline);
+  });
+
+  it('treats paddingBlock as the two edge props set to the same step', () => {
+    const {container, rerender} = render(
+      <Section paddingBlock={2}>Content</Section>,
+    );
+    const axis = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section paddingBlockStart={2} paddingBlockEnd={2}>
+        Content
+      </Section>,
+    );
+    expect(axis).toEqual(
+      classSet(container.firstElementChild!.firstElementChild as HTMLElement),
+    );
+  });
+
+  it('gives paddingBlockEnd precedence over paddingBlock', () => {
+    const {container, rerender} = render(
+      <Section paddingBlock={2} paddingBlockEnd={8}>
+        Content
+      </Section>,
+    );
+    const overridden = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section paddingBlockStart={2} paddingBlockEnd={8}>
+        Content
+      </Section>,
+    );
+    expect(overridden).toEqual(
+      classSet(container.firstElementChild!.firstElementChild as HTMLElement),
+    );
+  });
+
+  it('keeps inline padding when only a block edge is overridden', () => {
+    // padding={6} sets all four edges; paddingBlockStart={0} may only move the
+    // top edge, so the inline classes must survive unchanged.
+    const {container, rerender} = render(
+      <Section padding={6}>Content</Section>,
+    );
+    const uniform = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section padding={6} paddingBlockStart={0}>
+        Content
+      </Section>,
+    );
+    const overridden = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    // Everything the uniform render dropped is block-start related.
+    const removed = [...uniform].filter(c => !overridden.has(c));
+    const added = [...overridden].filter(c => !uniform.has(c));
+    expect(removed.length).toBeGreaterThan(0);
+    expect(added.length).toBeGreaterThan(0);
+    // The inline-axis classes are shared by both renders.
+    expect(uniform.size - removed.length).toBeGreaterThan(0);
+  });
+
+  it('applies a class when paddingInlineStart is set on its own', () => {
+    const {container, rerender} = render(<Section>Content</Section>);
+    const baseline = (
+      container.firstElementChild!.firstElementChild as HTMLElement
+    ).className;
+    rerender(<Section paddingInlineStart={2}>Content</Section>);
+    expect(
+      (container.firstElementChild!.firstElementChild as HTMLElement).className,
+    ).not.toBe(baseline);
+  });
+
+  it('treats paddingInline as the two inline edge props set to the same step', () => {
+    const {container, rerender} = render(
+      <Section paddingInline={2}>Content</Section>,
+    );
+    const axis = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section paddingInlineStart={2} paddingInlineEnd={2}>
+        Content
+      </Section>,
+    );
+    expect(axis).toEqual(
+      classSet(container.firstElementChild!.firstElementChild as HTMLElement),
+    );
+  });
+
+  it('gives paddingInlineEnd precedence over paddingInline', () => {
+    const {container, rerender} = render(
+      <Section paddingInline={2} paddingInlineEnd={8}>
+        Content
+      </Section>,
+    );
+    const overridden = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section paddingInlineStart={2} paddingInlineEnd={8}>
+        Content
+      </Section>,
+    );
+    expect(overridden).toEqual(
+      classSet(container.firstElementChild!.firstElementChild as HTMLElement),
+    );
+  });
+
+  it('keeps block padding when only an inline edge is overridden', () => {
+    const {container, rerender} = render(
+      <Section padding={6}>Content</Section>,
+    );
+    const uniform = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section padding={6} paddingInlineStart={0}>
+        Content
+      </Section>,
+    );
+    const overridden = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    const removed = [...uniform].filter(c => !overridden.has(c));
+    const added = [...overridden].filter(c => !uniform.has(c));
+    expect(removed.length).toBeGreaterThan(0);
+    expect(added.length).toBeGreaterThan(0);
+    // The block-axis classes survive the inline-edge override.
+    expect(uniform.size - removed.length).toBeGreaterThan(0);
+  });
+
+  it('moves the inline container vars with a per-edge override', () => {
+    // Section drives --container-padding-inline-start/end for bleed children.
+    // A per-edge override must move only the matching var, so a nested Section
+    // or a bleeding Divider compensates against the real padding.
+    const {container, rerender} = render(
+      <Section padding={6} paddingInlineStart={2}>
+        Content
+      </Section>,
+    );
+    const startOverride = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    rerender(
+      <Section padding={6} paddingInlineEnd={2}>
+        Content
+      </Section>,
+    );
+    const endOverride = classSet(
+      container.firstElementChild!.firstElementChild as HTMLElement,
+    );
+    // Overriding opposite edges by the same step must not produce identical
+    // output — each edge carries its own padding class and its own var class.
+    expect(startOverride).not.toEqual(endOverride);
+  });
 });

package/src/Section/Section.tsx

@@ -21,8 +21,15 @@ import {container} from '../Layout/container.stylex';
 import type {SpacingToken} from '../Layout/container.stylex';
 import {
   paddingStyles,
+  paddingInlineStyles,
+  paddingInlineStartStyles,
+  paddingInlineEndStyles,
   paddingBlockStyles,
+  paddingBlockStartStyles,
+  paddingBlockEndStyles,
   containerPaddingInlineVarStyles,
+  containerPaddingInlineStartVarStyles,
+  containerPaddingInlineEndVarStyles,
   containerPaddingBlockStartVarStyles,
   containerPaddingBlockEndVarStyles,
   sectionPaddingPropagationStyles,
@@ -175,6 +182,27 @@ export interface SectionProps extends BaseProps<HTMLElement> {
    * @default 4 (16px)
    */
   padding?: SpacingStep;
+  /**
+   * Inline (horizontal) padding override. When set, overrides only the inline
+   * axis padding while preserving block padding from `padding` or the
+   * container theme default.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingInline?: SpacingStep;
+  /**
+   * Inline-start padding override. Logical: the left edge in LTR, the right
+   * edge in RTL. Takes precedence over `paddingInline` and `padding` on that
+   * edge only; every other edge is left alone.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingInlineStart?: SpacingStep;
+  /**
+   * Inline-end padding override. Logical: the right edge in LTR, the left
+   * edge in RTL. Takes precedence over `paddingInline` and `padding` on that
+   * edge only; every other edge is left alone.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingInlineEnd?: SpacingStep;
   /**
    * Block (vertical) padding override. When set, overrides only the block
    * axis padding while preserving inline padding from `padding` or the
@@ -182,6 +210,20 @@ export interface SectionProps extends BaseProps<HTMLElement> {
    * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
    */
   paddingBlock?: SpacingStep;
+  /**
+   * Block-start (top) padding override. Takes precedence over `paddingBlock`
+   * and `padding` on that edge only; the block-end edge and both inline edges
+   * are left alone.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingBlockStart?: SpacingStep;
+  /**
+   * Block-end (bottom) padding override. Takes precedence over `paddingBlock`
+   * and `padding` on that edge only; the block-start edge and both inline
+   * edges are left alone.
+   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
+   */
+  paddingBlockEnd?: SpacingStep;
 }
 
 /**
@@ -211,7 +253,12 @@ export function Section({
   children,
   dividers,
   padding,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
   paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
   xstyle,
   className,
   style,
@@ -275,11 +322,33 @@ export function Section({
               containerPaddingBlockEndVarStyles[effectivePadding],
             !useThemeDefault &&
               sectionPaddingPropagationStyles[effectivePadding],
+            paddingInline != null && paddingInlineStyles[paddingInline],
+            paddingInline != null &&
+              containerPaddingInlineVarStyles[paddingInline],
             paddingBlock != null && paddingBlockStyles[paddingBlock],
             paddingBlock != null &&
               containerPaddingBlockStartVarStyles[paddingBlock],
             paddingBlock != null &&
               containerPaddingBlockEndVarStyles[paddingBlock],
+            // Per-edge overrides come last so they win over `paddingBlock`
+            // and `padding` on their own edge. The matching container var is
+            // updated alongside so bleed children (Table, Divider, nested
+            // Section) compensate against the padding actually applied.
+            paddingBlockStart != null &&
+              paddingBlockStartStyles[paddingBlockStart],
+            paddingBlockStart != null &&
+              containerPaddingBlockStartVarStyles[paddingBlockStart],
+            paddingBlockEnd != null && paddingBlockEndStyles[paddingBlockEnd],
+            paddingBlockEnd != null &&
+              containerPaddingBlockEndVarStyles[paddingBlockEnd],
+            paddingInlineStart != null &&
+              paddingInlineStartStyles[paddingInlineStart],
+            paddingInlineStart != null &&
+              containerPaddingInlineStartVarStyles[paddingInlineStart],
+            paddingInlineEnd != null &&
+              paddingInlineEndStyles[paddingInlineEnd],
+            paddingInlineEnd != null &&
+              containerPaddingInlineEndVarStyles[paddingInlineEnd],
             variantStyles[variant],
             dividers?.includes('top') && dividerStyles.top,
             dividers?.includes('bottom') && dividerStyles.bottom,

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -199,6 +199,37 @@ describe('SegmentedControl', () => {
     expect(screen.queryByText('Grid view')).not.toBeInTheDocument();
   });
 
+  it('fill items can shrink and truncate long labels', () => {
+    render(
+      <SegmentedControl
+        value="grid"
+        onChange={() => {}}
+        label="View mode"
+        layout="fill">
+        <SegmentedControlItem
+          value="grid"
+          label="A very long segment label that should truncate"
+        />
+        <SegmentedControlItem value="list" label="List" />
+        <SegmentedControlItem value="table" label="Table" />
+      </SegmentedControl>,
+    );
+
+    const button = screen.getByRole('radio', {name: /very long/});
+    const label = screen.getByText(
+      'A very long segment label that should truncate',
+    );
+
+    // The button (flex child) must allow shrinking below content size
+    const buttonStyle = getComputedStyle(button);
+    expect(buttonStyle.minWidth).toBe('0');
+
+    // The label span must set up text truncation
+    const labelStyle = getComputedStyle(label);
+    expect(labelStyle.overflow).toBe('hidden');
+    expect(labelStyle.textOverflow).toBe('ellipsis');
+  });
+
   it('uses roving tabindex — selected item has tabIndex 0, others -1', () => {
     render(
       <SegmentedControl value="list" onChange={() => {}} label="View mode">

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -83,6 +83,7 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-medium'],
     color: colorVars['--color-text-secondary'],
     cursor: 'pointer',
+    whiteSpace: 'nowrap',
     transitionProperty: 'color, background-color, box-shadow',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
@@ -90,7 +91,7 @@ const styles = stylex.create({
   hover: {
     backgroundColor: {
       default: null,
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -125,6 +126,7 @@ const styles = stylex.create({
   },
   fill: {
     flex: 1,
+    minWidth: 0,
     justifyContent: 'center',
   },
   icon: {
@@ -133,6 +135,11 @@ const styles = stylex.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
+  labelText: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    minWidth: 0,
+  },
 });
 
 const CONCENTRIC_RADIUS =
@@ -244,7 +251,9 @@ export function SegmentedControlItem({
         ),
       )}>
       {iconElement}
-      {!isLabelHidden && <span>{label}</span>}
+      {!isLabelHidden && (
+        <span {...stylex.props(styles.labelText)}>{label}</span>
+      )}
     </button>
   );
 }

package/src/SelectableCard/SelectableCard.tsx

@@ -80,7 +80,7 @@ const styles = stylex.create({
   },
   hoverOnPointer: {
     '@media (hover: hover)': {
-      ':hover::after': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))::after': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },

package/src/Selector/Selector.doc.mjs

@@ -27,10 +27,18 @@ export const docs = {
         states: ['disabled'],
       },
       {className: 'astryx-selector-option'},
+      {
+        className: 'astryx-selector-option-row',
+        visualProps: ['size'],
+        states: ['selected', 'disabled'],
+      },
       {className: 'astryx-selector-search'},
       {className: 'astryx-selector-section-heading'},
       {className: 'astryx-selector-empty-state'},
-      {className: 'astryx-selector-clear-icon', deprecatedFor: 'input-clear-icon'},
+      {
+        className: 'astryx-selector-clear-icon',
+        deprecatedFor: 'input-clear-icon',
+      },
       {className: 'astryx-selector-indicator-icon', states: ['state']},
       {className: 'astryx-selector-check'},
       {className: 'astryx-selector-popup'},
@@ -48,7 +56,7 @@ export const docs = {
       name: 'options',
       type: 'SelectorOption[]',
       description:
-        'Array of items: strings, objects with value/label/icon/disabled, dividers ({type: "divider"}), or sections ({type: "section", title, items}).',
+        'Array of items: strings, objects with value/label/description/icon/disabled, dividers ({type: "divider"}), or sections ({type: "section", title, items}).',
       required: true,
     },
     {
@@ -159,6 +167,12 @@ export const docs = {
       description:
         'Custom render function for each selectable option in the dropdown. Use this instead of JSX children; dividers and sections are rendered by the selector.',
     },
+    {
+      name: 'renderValue',
+      type: '(option: SelectorOptionData) => ReactNode',
+      description:
+        'Custom render function for the selected option inside the closed trigger. The trigger is sized by padding, so it is the size token for a one-line value (28/32/36) and exactly one text line taller for a two-line one (48/52/56) — always on the 4px rhythm, always aligned with the buttons and inputs beside it. Inside an InputGroup the group owns the row height: a SelectorOption folds onto one line and ellipsizes, and any taller node is cut off at the row.',
+    },
     {
       name: 'indicatorPosition',
       type: "'start' | 'end'",