feat(react): add unstable_Grid components #3892

joshblack · 2019-09-02T22:44:14Z

Add layout helpers for managing a Grid alongside the Carbon Design System layout guidance. Namely, this PR adds support for Grid, Row, and Column components. Grid and Row are roughly the same layout containers, supporting various modes for "condensed" or "no gutter' moments. Column provides support for specifying responsive breakpoints using either array or object syntax, as demonstrated by the storybook story and tests.

These helpers are brought in under the unstable_* namespace as we experiment to figure out the best component API for these helpers.

For reviewers, the styles and examples come roughly from the Grid elements preview

Changelog

New

add components/Layout with unstable_Grid, unstable_Row, and unstable_Column helpers

Changed

Removed

joshblack · 2019-09-02T22:49:36Z

cc @jendowns @SimonFinney do you all have any feedback from the Security side of things for these kinds of helpers? Curious what your thoughts are 😄

netlify · 2019-09-02T22:54:34Z

Deploy preview for the-carbon-components ready!

Built with commit d4ef1a7

https://deploy-preview-3892--the-carbon-components.netlify.com

netlify · 2019-09-02T22:56:31Z

Deploy preview for carbon-elements ready!

Built with commit d4ef1a7

https://deploy-preview-3892--carbon-elements.netlify.com

netlify · 2019-09-02T22:57:04Z

Deploy preview for carbon-components-react ready!

Built with commit d4ef1a7

https://deploy-preview-3892--carbon-components-react.netlify.com

netlify · 2019-09-02T23:05:20Z

Deploy preview for the-carbon-components ready!

Built with commit 806c54f

https://deploy-preview-3892--the-carbon-components.netlify.com

netlify · 2019-09-02T23:08:48Z

Deploy preview for carbon-elements ready!

Built with commit 806c54f

https://deploy-preview-3892--carbon-elements.netlify.com

netlify · 2019-09-02T23:15:05Z

Deploy preview for carbon-components-react ready!

Built with commit 806c54f

https://deploy-preview-3892--carbon-components-react.netlify.com

emyarod

do we want to use knobs for the storybook examples? for example we could combine some of the examples, like the array and object syntax examples for specifying offset, or the directional no-gutter examples

emyarod · 2019-09-03T13:12:58Z

packages/react/src/components/Layout/Grid-story.js

+          <DemoContent>Offset 3</DemoContent>
+        </Column>
+        <Column offset={[2]} span={[2]}>
+          <DemoContent>Offset 3</DemoContent>


Suggested change

<DemoContent>Offset 3</DemoContent>

<DemoContent>Offset 2</DemoContent>

and same with the other columns below? (match demo content to offset amount)

@emyarod I'm definitely torn, when folks are viewing the storybooks often they want something they can copy-paste and knobs can impede that use-case through a layer of indirection.

I definitely don't like knobs when I'm looking to our React examples to try and copy some example code.

the demo content is meant to reflect the offset value though right

Oh agreed, I think it's 100% a copy issue

alisonjoseph · 2019-09-03T15:33:04Z

Can we offset columns based on breakpoint? Would it be offset={{ sm: 1, md: 1, lg: 1 }} ?

joshblack · 2019-09-03T16:04:36Z

@alisonjoseph yup!

jendowns

@joshblack this looks awesome! 🎉 So excited for this & I'm sure our application teams would find this useful as well.

I just had 2 general comments.

jendowns · 2019-09-03T19:05:53Z

packages/react/src/components/Layout/story.scss

+// Condensed
+.example .bx--grid--condensed,
+.example .bx--row--condensed {
+  background-color: #171717;


Hey @joshblack just double-checking if you meant to leave these hex values in here rather than use color tokens? (Not if all of these have ideal theme tokens though)

jendowns · 2019-09-03T19:21:21Z

packages/react/src/components/Layout/Grid-story.js

+    <Grid>
+      <Row>
+        <Column span={[1, 4, 8]}>
+          <DemoContent>1/4</DemoContent>


Looking at some of these in the preview, it is a little confusing:

When I first saw how large the first column in the preview was, even though it said 1/4, I wasn't sure what was meant. At first I thought something was wrong until I looked at the values in the span prop.

Is 1/4 meant to illustrate "1 of 4 columns"?
Would possible to put more information about the span inside the DemoContent instead?

mattalco · 2019-09-04T20:29:10Z

@joshblack Do you know if this will eventually support adjustable gutter spacing? Our team has implemented a Grid component based off of Carbon specs but we also added the ability to configured the spacing above/below and between items. This was our reference: https://www.carbondesignsystem.com/guidelines/layout/#gutters

And here's a sample page we have.

joshblack · 2019-09-04T21:09:56Z

Great question @mattalco, I don't think it will in this initial iteration (default will be to pass a custom className) but in the future I'm hoping we can add <Spacer> components that could be used like:

<Grid>
  <Spacer step={2}>
    <Row>{/* ... */}</Row>
  </Spacer>
</Grid>

SimonFinney · 2019-09-06T10:35:36Z

@joshblack LGTM! The only thing I'll say is that I feel while the array syntax is good for simplicity and speed, it was more difficult at a glance to grok what was happening in comparison to the object syntax.

joshblack · 2019-09-09T20:22:17Z

Thanks for the feedback all! Going to take everything in and PR a stable release of these components soon 😄

* feat(grid): add hiding columns with width 0 Adds functionality requested in (#2435) with more convenient syntax * docs(grid): add example of hiding columns * docs(grid): fix incorrect `bleed` info and typos * docs(grid): add link to live demo website Change requested here in (#2803) * feat(grid): implement functional React component * chore(grid): add generated files * fix(docs): storybook support load CSF & add sort * docs(Grid): update valid props additionally: - fix oneOf not using array - label default props as undefined - convert col width from str -> num - add range func * docs(Grid): add initial story & style margins * docs(Grid): clean up doc styles & knob controls * docs(Grid): add color knobs, pass thru params * docs(Grid): fix minor fullwidth disp bug * test(Grid): add smoke tests for root el * test(Grid): add basic row and col tests * test(Grid): fix wrappers & update index snapshot * feat(Grid): use layout's breakpoints * chore(Grid): port all tests, add 'as' prop * docs(Grid): include stories from #3892 * feat(Grid): support obj syntax & rm offset props * fix(Grid): add missing @carbon/layout pkg * feat(Grid): rm `noGutter` prop for later PR * chore(Grid): revert storybook to 5.2.1 * chore(Grid): convert to recommended syntax * chore(Grid): inline array gen helper * fix(Grid): update incorrect prop types * chore(Grid): update import format * Revert sass.md * Revert _mixins.scss * Revert App.js * refactor(grid): split out files and update Column * refactor(grid): update test suite for grid components * docs(grid): update story for grid * fix(react): update entrypoint with grid components * fix(grid): convert story offset to prop obj * fix(react): update with missing prop values * chore(project): sync offline mirror Co-authored-by: Josh Black <josh@josh.black>

feat(react): add unstable_Grid components

d4ef1a7

joshblack requested a review from a team September 2, 2019 22:44

ghost requested review from alisonjoseph and emyarod and removed request for a team September 2, 2019 22:44

chore(react): add unstable_* exports

6d7ce4b

joshblack requested a review from vpicone September 2, 2019 22:45

docs(react): add documentation for unstable_Column

bd492bb

emyarod reviewed Sep 3, 2019

View reviewed changes

Merge branch 'master' into feat/add-unstable-grid

806c54f

jendowns reviewed Sep 3, 2019

View reviewed changes

mattalco mentioned this pull request Sep 4, 2019

Carbon Grid class bx--col doesn't include top or bottom padding #3860

Closed

1 task

joshblack closed this Sep 9, 2019

zachhardesty7 mentioned this pull request Dec 17, 2019

Grid component react #4894

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): add unstable_Grid components #3892

feat(react): add unstable_Grid components #3892

joshblack commented Sep 2, 2019 •

edited

Loading

joshblack commented Sep 2, 2019

netlify bot commented Sep 2, 2019

netlify bot commented Sep 2, 2019

netlify bot commented Sep 2, 2019

netlify bot commented Sep 2, 2019 •

edited

Loading

netlify bot commented Sep 2, 2019 •

edited

Loading

netlify bot commented Sep 2, 2019 •

edited

Loading

emyarod left a comment

emyarod Sep 3, 2019 •

edited

Loading

joshblack Sep 3, 2019

alisonjoseph Sep 3, 2019

emyarod Sep 3, 2019

joshblack Sep 3, 2019

alisonjoseph commented Sep 3, 2019

joshblack commented Sep 3, 2019

jendowns left a comment

jendowns Sep 3, 2019

jendowns Sep 3, 2019

mattalco commented Sep 4, 2019

joshblack commented Sep 4, 2019

SimonFinney commented Sep 6, 2019

joshblack commented Sep 9, 2019

	<DemoContent>Offset 3</DemoContent>
	<DemoContent>Offset 2</DemoContent>

feat(react): add unstable_Grid components #3892

feat(react): add unstable_Grid components #3892

Conversation

joshblack commented Sep 2, 2019 • edited Loading

Changelog

joshblack commented Sep 2, 2019

netlify bot commented Sep 2, 2019

netlify bot commented Sep 2, 2019

netlify bot commented Sep 2, 2019

netlify bot commented Sep 2, 2019 • edited Loading

netlify bot commented Sep 2, 2019 • edited Loading

netlify bot commented Sep 2, 2019 • edited Loading

emyarod left a comment

Choose a reason for hiding this comment

emyarod Sep 3, 2019 • edited Loading

Choose a reason for hiding this comment

joshblack Sep 3, 2019

Choose a reason for hiding this comment

alisonjoseph Sep 3, 2019

Choose a reason for hiding this comment

emyarod Sep 3, 2019

Choose a reason for hiding this comment

joshblack Sep 3, 2019

Choose a reason for hiding this comment

alisonjoseph commented Sep 3, 2019

joshblack commented Sep 3, 2019

jendowns left a comment

Choose a reason for hiding this comment

jendowns Sep 3, 2019

Choose a reason for hiding this comment

jendowns Sep 3, 2019

Choose a reason for hiding this comment

mattalco commented Sep 4, 2019

joshblack commented Sep 4, 2019

SimonFinney commented Sep 6, 2019

joshblack commented Sep 9, 2019

joshblack commented Sep 2, 2019 •

edited

Loading

netlify bot commented Sep 2, 2019 •

edited

Loading

netlify bot commented Sep 2, 2019 •

edited

Loading

netlify bot commented Sep 2, 2019 •

edited

Loading

emyarod Sep 3, 2019 •

edited

Loading