Skip to content

refactor: replace internal isFullBleed usage with padding={0} - #598

Merged
cixzhang merged 2 commits into
mainfrom
navi/refactor/remove-isFullBleed
Mar 13, 2026
Merged

refactor: replace internal isFullBleed usage with padding={0}#598
cixzhang merged 2 commits into
mainfrom
navi/refactor/remove-isFullBleed

Conversation

@cixzhang

@cixzhang cixzhang commented Mar 13, 2026

Copy link
Copy Markdown
Contributor

Summary

Two-part refactor that migrates away from isFullBleed on Layout components and then removes it from their interfaces entirely.

Part 1: Replace internal usages with padding={0}

Replace all internal usages of isFullBleed prop on Layout components with the equivalent padding={0}. The padding prop is more expressive (supports any spacing step, not just 0/default) and aligns with the rest of the design system API.

Files changed:

  • packages/core/src/AppShell/XDSAppShell.tsx — 4 usages replaced
  • apps/storybook/stories/Layout.stories.tsx — Playground story args/controls migrated
  • apps/storybook/stories/Card.stories.tsx — FullBleed story migrated, deprecation note added
  • apps/storybook/stories/Section.stories.tsx — FullBleed story migrated, deprecation note added

Part 2: Remove isFullBleed from Layout component interfaces

Remove the deprecated isFullBleed prop from all Layout component interfaces. Consumers must use padding={0} instead.

Files changed:

  • packages/core/src/Layout/XDSLayout.tsx — removed from props interface
  • packages/core/src/Layout/XDSLayoutContent.tsx — removed from props interface and implementation
  • packages/core/src/Layout/XDSLayoutFooter.tsx — removed from props interface and implementation
  • packages/core/src/Layout/XDSLayoutHeader.tsx — removed from props interface and implementation
  • packages/core/src/Layout/XDSLayoutPanel.tsx — removed from props interface and implementation
  • apps/storybook/stories/Layout.stories.tsx — removed isFullBleed argType

Also fixed

  • apps/sandbox/src/app/pages/mega-menu/page.tsx — fixed pre-existing TypeScript error (inline styles position type)

What is NOT changed

  • XDSCard and XDSSectionisFullBleed prop remains (maps to padding={0} internally). Follow-up removal.
  • XDSDivider — its isFullBleed is a different concept (negative-margin escape hatch)
  • Codemods (packages/cli/) — migrate-isFullBleed-to-padding codemod preserved for consumer migration

@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 383 -
Complexity N/A Very High (47) -
Layout · View in Storybook
Metric Before After Delta
Bundle Size (ESM) N/A 1.0KB N/A
Lines of Code N/A 899 -
Complexity N/A Very High (66) -

Bundle Size Summary

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

Accessibility Audit

Status: 1 accessibility violation(s) found — 1 serious.

XDSLayout - 1 issue(s)
  • 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
    • Rule: color-contrast · Affects 3/10 stories · Learn more
    • WCAG: 1.4.3 (Level AA)

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

@cixzhang
cixzhang force-pushed the navi/refactor/remove-isFullBleed branch 2 times, most recently from 6a00add to 5ce2142 Compare March 13, 2026 09:48
@cixzhang
cixzhang force-pushed the navi/refactor/remove-isFullBleed branch from 5ce2142 to 56fe512 Compare March 13, 2026 10:19
Comment thread apps/storybook/stories/Card.stories.tsx Outdated
@@ -74,7 +74,7 @@ const meta: Meta<typeof XDSCard> = {
},
isFullBleed: {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can clean this up

@cixzhang
cixzhang force-pushed the navi/refactor/remove-isFullBleed branch from 56fe512 to 45f9dfb Compare March 13, 2026 10:34
@cixzhang
cixzhang merged commit ebf19a0 into main Mar 13, 2026
13 checks passed
@cixzhang
cixzhang deleted the navi/refactor/remove-isFullBleed branch March 13, 2026 11:00
@cixzhang cixzhang mentioned this pull request Mar 14, 2026
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