facebook / facebook/astryx

XDS layout primitives: no `position: sticky` prop — sticky columns/panels require custom CSS

Open
#2,613 1 comment 0 reactions 0 assignees View on GitHub
component enhancement needs-scoping
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

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.