facebook / facebook/astryx

XDSList/XDSListItem: no way to align list-item content to the container edge (optical alignment)

Open
#2,626 1 comment 0 reactions 1 assignee Claimed by @rubyycheung View on GitHub
component enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.