[Component Audit] Divider: keep numeric labels visible and named

Author: cixzhang

.changeset/divider-renderable-labels.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] `Divider` now keeps numeric zero labels inside the labelled separator and omits boolean or empty-string labels without leaving empty label spacing.
+
+@cixzhang

apps/storybook/stories/Divider.stories.tsx

@@ -109,19 +109,15 @@ export const FullBleed: Story = {
         <Card>
           <VStack gap={3}>
             <Text type="label">Normal divider</Text>
-            <Text type="body">
-              The divider respects container padding.
-            </Text>
+            <Text type="body">The divider respects container padding.</Text>
             <Divider />
             <Text type="body">Content below the divider.</Text>
           </VStack>
         </Card>
         <Card>
           <VStack gap={3}>
             <Text type="label">Full bleed divider</Text>
-            <Text type="body">
-              The divider extends to container edges.
-            </Text>
+            <Text type="body">The divider extends to container edges.</Text>
             <Divider isFullBleed />
             <Text type="body">Content below the divider.</Text>
           </VStack>
@@ -187,6 +183,28 @@ export const InCard: Story = {
   ),
 };
 
+export const NumericLabel: Story = {
+  render: () => (
+    <Section variant="muted">
+      <div {...stylex.props(styles.storyWrapper)}>
+        <Card>
+          <VStack gap={3}>
+            <Text type="supporting">Horizontal numeric label</Text>
+            <Divider label={0} />
+          </VStack>
+        </Card>
+        <Card height={200}>
+          <HStack gap={4} xstyle={styles.fullHeight}>
+            <Text type="body">Start</Text>
+            <Divider orientation="vertical" label={0} />
+            <Text type="body">End</Text>
+          </HStack>
+        </Card>
+      </div>
+    </Section>
+  ),
+};
+
 export const FullBleedVertical: Story = {
   render: () => (
     <Section variant="muted">

packages/core/src/Chat/ChatSystemMessage.test.tsx

@@ -152,16 +152,16 @@ describe('ChatSystemMessage', () => {
     expect(root).toContainElement(screen.getByRole('separator'));
   });
 
-  it('records Divider numeric-zero output for the shared FR15 advisory', () => {
+  it('keeps the numeric-zero label visible and names the shared divider', () => {
     render(
       <ChatSystemMessage variant="divider" data-testid="divider-zero">
         {0}
       </ChatSystemMessage>,
     );
     const root = screen.getByTestId('divider-zero');
     const separator = screen.getByRole('separator');
-    expect(root).toHaveTextContent('00');
-    expect(separator).not.toHaveAccessibleName();
-    expect(separator).not.toHaveAttribute('aria-labelledby');
+    expect(root).toHaveTextContent('0');
+    expect(separator).toHaveAccessibleName('0');
+    expect(separator).toHaveAttribute('aria-labelledby');
   });
 });

packages/core/src/Divider/Divider.doc.mjs

@@ -40,7 +40,8 @@ export const docs = {
     {
       name: 'label',
       type: 'ReactNode',
-      description: 'Optional label centered on the divider.',
+      description:
+        'Optional label centered on the divider. Numeric zero is preserved; null, booleans, and empty strings render no label.',
     },
     {
       name: 'variant',
@@ -92,7 +93,8 @@ export const docsZh = {
     {
       name: 'label',
       type: 'ReactNode',
-      description: '居中显示在分隔线上的可选标签。',
+      description:
+        '居中显示在分隔线上的可选标签。数字 0 会保留；null、布尔值和空字符串不渲染标签。',
     },
     {
       name: 'variant',
@@ -143,7 +145,7 @@ export const docsDense = {
   },
   propDescriptions: {
     orientation: 'divider orientation',
-    label: 'optional centered label on divider',
+    label: 'optional centered label; preserves 0; null/boolean/"" omit it',
     variant: 'visual weight of divider line',
     isFullBleed: 'extend to container edges w/ negative margins',
     xstyle: 'StyleX styles for layout; must be stylex.create() value',