XDSList/XDSListItem: no way to align list-item content to the container edge (optical alignment)
- Dominant language
- TypeScript
- Stars
- 13k
- Forks
- 1.1k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 690
Description
## Summary
`XDSListItem` insets its content by an internal horizontal padding (~8px). When a list sits directly under a section heading (or other full-bleed content), the list rows look **misaligned** — their text starts ~8px in from the heading. There's no prop to bleed the list to its container's edge, so it takes custom negative-margin CSS:
```ts
const styles = stylex.create({
itemsList: { marginInline: -8 }, // pull rows back to align with the heading
});
```
```tsx
Items
…
```
## Impact on the grading rubric
In the `detail-page` (Order Detail) template, the Items list needs this `-8px` pull to optically align with the "Items" section heading. Under the [Contributing-Templates rubric](https://github.com/facebookexperimental/xds/wiki/Contributing-Templates#template-grading-rubric) it's a small justified custom-CSS rule, but there's no component prop for it.
## Proposal
An `edge`/`inset` prop (or an `align="edge"` option) on `XDSList`/`XDSListItem` that removes the leading/trailing inner padding so row content aligns flush with the container — analogous to "inset vs full-bleed" list styles in other systems.
## Context
Surfaced while grading templates against the Contributing-Templates rubric — companion to #2582, #2419, #2613, #2616, #2622, #2600, #2625, #2575, #2594. These are the structural component gaps that keep otherwise-clean templates below a perfect score.
Contributor guide
Assessment
This issue has not been assessed yet.