XDS layout primitives: no `position: sticky` prop — sticky columns/panels require custom CSS
- Dominant language
- TypeScript
- Stars
- 13k
- Forks
- 1.1k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 690
Description
## Summary
There's no way to make an XDS layout primitive (`XDSVStack`, `XDSLayoutPanel`, `XDSSection`, etc.) **sticky** through props. Any template that wants a column or panel to stay in view while a sibling scrolls — a very common product/detail/docs pattern — has to drop to custom CSS:
```ts
const styles = stylex.create({
stickyInfo: {
position: 'sticky',
top: 'var(--spacing-8)',
alignSelf: 'start',
},
});
```
```tsx
…
```
Under the [template grading rubric](https://github.com/facebookexperimental/xds/wiki/Contributing-Templates#template-grading-rubric) this counts as custom CSS (3 declarations), so a template can't reach a perfect **Custom CSS 15/15** purely because of a missing sticky affordance.
## Evidence
`product-detail` (`packages/cli/templates/pages/product-detail/page.tsx`) keeps the product info column in view while the image gallery scrolls. The only way to express that today is the `stickyInfo` custom style above — there is no `sticky`/`isSticky` prop on `XDSVStack`, and no sticky slot on `XDSLayout`/`XDSLayoutPanel`.
## Proposal
A prop-driven sticky affordance on the relevant layout primitives, e.g.:
- `` (token-based offset), or
- a `isSticky` + `stickyOffset` pair on `XDSLayoutPanel` / `XDSStack`.
This would let detail pages, docs sidebars, and filter rails express sticky behavior without custom CSS.
## Context
Surfaced while grading templates against the Contributing-Templates rubric (companion to #2582 *no XDSImage* and #2419 *no responsive XDSGridSpan* — the other structural gaps that cap image/layout templates below an A).
Contributor guide
Assessment
This issue has not been assessed yet.