Skip to content

[passion week] Stack component styled with Primer CSS #2175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

[passion week] Stack component styled with Primer CSS #2175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
333a437
adds an experimental Stack component styled with Primer CSS class names
mperrotti Jul 19, 2022
43f5742
minifies CSS from PCSS
mperrotti Jul 19, 2022
7a68dd2
stubs out MDX docs, fixes responsive prop issues
mperrotti Jul 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
335 changes: 335 additions & 0 deletions docs/content/Stack.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,335 @@
---
title: Stack
status: Draft
description: A Stack evenly spaces it's children vertically or horizontally.
---

## Examples

### Simple

```jsx live drafts
<Stack>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
One
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Two
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Three
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Four
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Five
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Six
</Box>
</Stack>
```

### Inline flow

```jsx live drafts
<Stack direction="inline">
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
One
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Two
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Three
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Four
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Five
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Six
</Box>
</Stack>
```

### Center aligned children

<Stack align="center">
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
One
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Two
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Three
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Four
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Five
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Six
</Box>
</Stack>

### With dividers

<Stack showDivider>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
One
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Two
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Three
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Four
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Five
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Six
</Box>
</Stack>

### Inline flow with wrapping

<Stack direction="inline" wrap="wrap">
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
One
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Two
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Three
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Four
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Five
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Six
</Box>
</Stack>

### Center alignment for wrapped items

<Stack align="start" alignWrap="center" direction="inline" wrap="wrap">
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
One
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Two
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Three
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Four
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Five
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Six
</Box>
</Stack>

### Center-justified items

<Stack spread="center" direction="inline" wrap="wrap">
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
One
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Two
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Three
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Four
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Five
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Six
</Box>
</Stack>

### Responsive prop values

Stack at `narrow`, inline at `regular`

<Stack direction={{narrow: 'inline'}}>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
One
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Two
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Three
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Four
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Five
</Box>
<Box backgroundColor="#ddf4ff" borderRadius={2} color="fg.default" py={1} px={3}>
Six
</Box>
</Stack>

## Props

### SegmentedControl

<PropsTable>
<PropsTableRow
name="align"
type="'stretch' | 'start' | 'center' | 'end' | 'baseline' |
{
narrow: 'stretch' | 'start' | 'center' | 'end' | 'baseline',
regular: 'stretch' | 'start' | 'center' | 'end' | 'baseline'
}"
defaultValue="'stretch'"
description={
<>
<span>Sets the alignment between items in the cross-axis of the specified direction. For example:</span>
<ul>
<li>
If `direction` is set to `block` (stacks vertically), it controls the horizontal alignment (left, center,
right).
</li>
<li>
If `direction` is set to `inline` (stacks horizontally), it controls the vertical alignment (top, center,
bottom).
</li>
</ul>
<div>This property behavior is equivalent to the `align-items` Flexbox property.</div>
</>
}
/>
<PropsTableRow
name="alignWrap"
type="'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly' |
{
narrow: 'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly',
regular: 'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly'
}"
defaultValue="'start'"
description="Sets how stack lines are distributed, if they `wrap` into multiple lines. This has equivalent behavior to the `align-content` Flexbox property."
/>
<PropsTableRow
name="direction"
type="'inline' | 'block' |
{
narrow: 'inline' | 'block',
regular: 'inline' | 'block'
}"
defaultValue="'block'"
description="Sets how elements inside `Stack` are placed, either horizontally (`inline`) or vertically (`block`). This property follows the writing mode."
/>
<PropsTableRow
name="gap"
type="'none' | 'condensed' | 'normal' | 'spacious' |
{
narrow: 'none' | 'condensed' | 'normal' | 'spacious',
regular: 'none' | 'condensed' | 'normal' | 'spacious'
}"
defaultValue="'normal'"
description={
<div>
<span>Sets the spacing gap between items. All sizes are rendered in `rem` units.</span>
<ul>
<li>'none': 0</li>
<li>'condensed': 'var(--primer-stack-gap-condensed, 8px)',</li>
<li>'normal': 'var(--primer-stack-gap-normal, 16px)' (default)</li>
<li>
'spacious': 'var(--primer-stack-gap-spacious, 24px)' (on regular viewports, otherwise it appears as 'normal'
on narrow viewports)
</li>
<li>
'custom': set a custom size. When using with a framework such as ViewComponent or React, a custom value can
be passed directly to the property.
</li>
</ul>
</div>
}
/>
<PropsTableRow
name="spread"
type="'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly' |
{
narrow: 'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly',
regular: 'start' | 'center' | 'end' | 'distribute' | 'distributeEvenly'
}"
defaultValue="'start'"
description="Sets how stack lines are distributed, if they `wrap` into multiple lines. This has equivalent behavior to the `align-content` Flexbox property."
/>
<PropsTableRow
name="wrap"
type="'wrap' | 'nowrap' |
{
narrow: 'wrap' | 'nowrap',
regular: 'wrap' | 'nowrap'
}"
defaultValue="'nowrap'"
description="Sets whether items are forced onto one line or can wrap onto multiple lines."
/>
<PropsTableRow
name="showDivider"
type="boolean |
{
narrow: boolean,
regular: boolean
}"
defaultValue="'nowrap'"
description={
<>
<div>Whether a divider between items is shown or not.</div>

<div>_Note: the presence of a divider duplicates the \`gap\` between items._</div>
</>
}

/>

</PropsTable>

## Status

<ComponentChecklist
items={{
propsDocumented: true,
noUnnecessaryDeps: false,
adaptsToThemes: false,
adaptsToScreenSizes: false,
fullTestCoverage: false,
usedInProduction: false,
usageExamplesDocumented: false,
hasStorybookStories: false,
designReviewed: false,
a11yReviewed: false,
stableApi: false,
addressedApiFeedback: false,
hasDesignGuidelines: false,
hasFigmaComponent: false
}}
/>
8 changes: 8 additions & 0 deletions src/BaseStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
details-dialog:focus:not(:focus-visible):not(.focus-visible) {
outline: none;
}

/*
Stack styles copied directly from "@primer/css@0.0.0-20220715012839"
(preview release generated by https://github.com/primer/css/pull/2152)

DO NOT EDIT MANUALLY
*/
.Stack{--Stack-gap:var(--primer-stack-gap-normal, 16px);--Stack-gap-whenNarrow:var(--Stack-gap);--Stack-divider-color:var(--color-border-default);display:flex;flex-flow:column;flex-wrap:nowrap;align-items:stretch;gap:var(--Stack-gap)}@media(min-width:768px){.Stack--dir-inline-whenRegular{flex-flow:row}.Stack--dir-block-whenRegular{flex-flow:column}.Stack--gap-none-whenRegular{--Stack-gap:0}.Stack--gap-condensed-whenRegular{--Stack-gap:var(--primer-stack-gap-condensed, 8px)}.Stack--gap-normal-whenRegular{--Stack-gap:var(--primer-stack-gap-normal, 16px)}.Stack--gap-spacious-whenRegular{--Stack-gap:var(--primer-stack-gap-spacious, 24px)}}@media(max-width:767.98px){.Stack{gap:var(--Stack-gap-whenNarrow)}.Stack--dir-inline-whenNarrow{flex-flow:row}.Stack--dir-block-whenNarrow{flex-flow:column}.Stack--gap-none-whenNarrow{--Stack-gap-whenNarrow:0}.Stack--gap-condensed-whenNarrow{--Stack-gap-whenNarrow:var(--primer-stack-gap-condensed, 8px)}.Stack--gap-normal-whenNarrow{--Stack-gap-whenNarrow:var(--primer-stack-gap-normal, 16px)}}@media(min-width:768px){.Stack--align-start-whenRegular{align-items:flex-start}.Stack--align-center-whenRegular{align-items:center}.Stack--align-end-whenRegular{align-items:flex-end}.Stack--align-baseline-whenRegular{align-items:baseline}.Stack--alignWrap-start-whenRegular{align-content:flex-start}.Stack--alignWrap-center-whenRegular{align-content:center}.Stack--alignWrap-end-whenRegular{align-content:flex-end}.Stack--alignWrap-distribute-whenRegular{align-content:space-between}.Stack--alignWrap-distributeEvenly-whenRegular{align-content:space-evenly}}@media(max-width:767.98px){.Stack--align-start-whenNarrow{align-items:flex-start}.Stack--align-center-whenNarrow{align-items:center}.Stack--align-end-whenNarrow{align-items:flex-end}.Stack--align-baseline-whenNarrow{align-items:baseline}.Stack--alignWrap-start-whenNarrow{align-content:flex-start}.Stack--alignWrap-center-whenNarrow{align-content:center}.Stack--alignWrap-end-whenNarrow{align-content:flex-end}.Stack--alignWrap-distribute-whenNarrow{align-content:space-between}.Stack--alignWrap-distributeEvenly-whenNarrow{align-content:space-evenly}}@media(min-width:768px){.Stack--spread-start-whenRegular{justify-content:flex-start}.Stack--spread-center-whenRegular{justify-content:center}.Stack--spread-end-whenRegular{justify-content:flex-end}.Stack--spread-distribute-whenRegular{justify-content:space-between}.Stack--spread-distributeEvenly-whenRegular{justify-content:space-evenly}}@media(max-width:767.98px){.Stack--spread-start-whenNarrow{justify-content:flex-start}.Stack--spread-center-whenNarrow{justify-content:center}.Stack--spread-end-whenNarrow{justify-content:flex-end}.Stack--spread-distribute-whenNarrow{justify-content:space-between}.Stack--spread-distributeEvenly-whenNarrow{justify-content:space-evenly}}.Stack-divider{margin:0;padding:0;border:none;display:none;align-self:stretch}@media(min-width:768px){.Stack--wrap-whenRegular{flex-wrap:wrap}.Stack--nowrap-whenRegular{flex-wrap:nowrap}.Stack--showDividers-whenRegular .Stack-divider{display:block}.Stack--dir-block-whenRegular .Stack-divider{border-block-end:var(--primer-borderWidth-thin,1px) solid var(--Stack-divider-color);inline-size:auto;block-size:0}.Stack--dir-inline-whenRegular .Stack-divider{border-inline-end:var(--primer-borderWidth-thin,1px) solid var(--Stack-divider-color);inline-size:0;block-size:auto}}@media(max-width:767.98px){.Stack--wrap-whenNarrow{flex-wrap:wrap}.Stack--nowrap-whenNarrow{flex-wrap:nowrap}.Stack--showDividers-whenNarrow .Stack-divider{display:block}.Stack--dir-block-whenNarrow .Stack-divider{border-block-end:var(--primer-borderWidth-thin,1px) solid var(--Stack-divider-color);inline-size:auto;block-size:0}.Stack--dir-inline-whenNarrow .Stack-divider{border-inline-end:var(--primer-borderWidth-thin,1px) solid var(--Stack-divider-color);inline-size:0;block-size:auto}}
`

const Base = styled.div<SystemTypographyProps & SystemCommonProps>`
Expand Down
Loading