Skip to content

feat(AppShell): add contentPadding prop - #612

Merged
cixzhang merged 1 commit into
mainfrom
navi/feat/content-padding
Mar 13, 2026
Merged

feat(AppShell): add contentPadding prop#612
cixzhang merged 1 commit into
mainfrom
navi/feat/content-padding

Conversation

@cixzhang

Copy link
Copy Markdown
Contributor

Summary

Adds a contentPadding prop to XDSAppShell that controls the main content area padding.

Motivation

Ran an ad-hoc vibe test comparing three padding mental models (10 prompts × 3 approaches = 30 tests). contentPadding won on mixed layouts — the hard case — with the fewest total decisions (15 vs 16 for no-default-padding vs 19 for default-padding).

Key insight: the LLM correctly picks contentPadding={4} for mostly-padded pages and contentPadding={0} for mostly-bleed pages, then overrides only the exceptions with XDSSection.

API

// Padded settings page
<XDSAppShell contentPadding={4} topNav={...}>
  <XDSHeading level={1}>Settings</XDSHeading>
  <XDSTextInput label="Name" />
</XDSAppShell>

// Mostly padded with a full-bleed chart
<XDSAppShell contentPadding={4} topNav={...}>
  <XDSHeading level={1}>Dashboard</XDSHeading>
  <XDSSection padding={0}>
    <FullWidthChart />
  </XDSSection>
  <XDSCard>Details</XDSCard>
</XDSAppShell>

// Mostly full-bleed with padded details
<XDSAppShell contentPadding={0} topNav={...}>
  <FullWidthVideoPlayer />
  <XDSSection padding={4}>
    <XDSHeading level={1}>Video Title</XDSHeading>
  </XDSSection>
</XDSAppShell>

Changes

  • Add contentPadding?: SpacingStep to XDSAppShellProps
  • Pass through to XDSLayoutContent padding (defaults to 0 for backward compat)
  • Add 3 doc examples showing both directions (padded default + full-bleed override, and vice versa)
  • Add 3 tests for contentPadding behavior
  • Update English + Chinese docs

Test plan

  • yarn build
  • yarn test — 90 files, 1436 tests passing ✅

Ref #565

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Mar 13, 2026
@github-actions

github-actions Bot commented Mar 13, 2026

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

AppShell · View in Storybook
Metric Before After Delta
Bundle Size (ESM) N/A 625B N/A
Lines of Code N/A 386 -
Complexity N/A Very High (48) -

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@xds/core 9.3KB 15.0KB 2.4KB

Accessibility Audit

Status: No accessibility violations detected.


Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

@cixzhang
cixzhang force-pushed the navi/feat/content-padding branch 2 times, most recently from 761a99f to dd5ce23 Compare March 13, 2026 22:19
Add a contentPadding prop to XDSAppShell that controls the main content
area padding. Set based on the dominant content pattern for the page:
- contentPadding={4} for forms, settings, text-heavy pages
- contentPadding={0} for dashboards, maps, tables (edge-to-edge)
Override individual sections with <XDSSection padding={...}>.

Defaults to 0 (current behavior) for backward compatibility.

Migrated all existing usages:
- Storybook stories: replaced manual padding div with contentPadding={6}
- Shell Lab: replaced hardcoded padding: 24 with contentPadding={6}

Validated via ad-hoc vibe test (10 prompts × 3 approaches):
- contentPadding won on mixed layouts (7 decisions vs 8 for default-padding)
- Balanced doc examples are critical — both contentPadding={4} and
  contentPadding={0} mixed-layout examples must be shown

Ref #565
@cixzhang
cixzhang force-pushed the navi/feat/content-padding branch from dd5ce23 to e03a366 Compare March 13, 2026 22:21
@cixzhang
cixzhang merged commit 2b24be3 into main Mar 13, 2026
13 checks passed
This was referenced Mar 14, 2026
@cixzhang
cixzhang deleted the navi/feat/content-padding branch March 20, 2026 16:59
cixzhang added a commit that referenced this pull request Apr 26, 2026
Add a contentPadding prop to XDSAppShell that controls the main content
area padding. Set based on the dominant content pattern for the page:
- contentPadding={4} for forms, settings, text-heavy pages
- contentPadding={0} for dashboards, maps, tables (edge-to-edge)
Override individual sections with <XDSSection padding={...}>.

Defaults to 0 (current behavior) for backward compatibility.

Migrated all existing usages:
- Storybook stories: replaced manual padding div with contentPadding={6}
- Shell Lab: replaced hardcoded padding: 24 with contentPadding={6}

Validated via ad-hoc vibe test (10 prompts × 3 approaches):
- contentPadding won on mixed layouts (7 decisions vs 8 for default-padding)
- Balanced doc examples are critical — both contentPadding={4} and
  contentPadding={0} mixed-layout examples must be shown

Ref #565

Co-authored-by: Navi <navi@users.noreply.github.com>
cixzhang added a commit that referenced this pull request Jun 21, 2026
Add a contentPadding prop to XDSAppShell that controls the main content
area padding. Set based on the dominant content pattern for the page:
- contentPadding={4} for forms, settings, text-heavy pages
- contentPadding={0} for dashboards, maps, tables (edge-to-edge)
Override individual sections with <XDSSection padding={...}>.

Defaults to 0 (current behavior) for backward compatibility.

Migrated all existing usages:
- Storybook stories: replaced manual padding div with contentPadding={6}
- Shell Lab: replaced hardcoded padding: 24 with contentPadding={6}

Validated via ad-hoc vibe test (10 prompts × 3 approaches):
- contentPadding won on mixed layouts (7 decisions vs 8 for default-padding)
- Balanced doc examples are critical — both contentPadding={4} and
  contentPadding={0} mixed-layout examples must be shown

Ref #565

Co-authored-by: Navi <navi@users.noreply.github.com>
cixzhang added a commit that referenced this pull request Jun 21, 2026
Add a contentPadding prop to XDSAppShell that controls the main content
area padding. Set based on the dominant content pattern for the page:
- contentPadding={4} for forms, settings, text-heavy pages
- contentPadding={0} for dashboards, maps, tables (edge-to-edge)
Override individual sections with <XDSSection padding={...}>.

Defaults to 0 (current behavior) for backward compatibility.

Migrated all existing usages:
- Storybook stories: replaced manual padding div with contentPadding={6}
- Shell Lab: replaced hardcoded padding: 24 with contentPadding={6}

Validated via ad-hoc vibe test (10 prompts × 3 approaches):
- contentPadding won on mixed layouts (7 decisions vs 8 for default-padding)
- Balanced doc examples are critical — both contentPadding={4} and
  contentPadding={0} mixed-layout examples must be shown

Ref #565
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant