Update Grid to v1 API #351

layershifter · 2016-07-27T15:48:00Z

Update <Grid> to v1 API.
http://semantic-ui.com/collections/grid.html

Types

Grid

A basic grid

<div class="ui grid">
  <div class="column"></div>
</div>

<Grid>
  <Grid.Column></Grid.Column>
</Grid>

Divided

A grid can have dividers between its columns

<div class="ui three column divided grid">
  <div class="column"></div>
</div>

<Grid column={3} divided>
  <Grid.Column></Grid.Column>
</Grid>
<Grid column='three' divided>
  <Grid.Column></Grid.Column>
</Grid>

Vertically Divided

A grid can have dividers between rows

<div class="ui vertically divided grid"></div>

<Grid column={3} divided='vertically' />

Celled

A grid can have rows divided into cells

<div class="ui celled grid"></div>

<Grid celled />

Internally Celled

A grid can have rows divisions only between internal rows

<div class="ui internally celled grid"></div>

<Grid celled='internally' />

Content

Skip

Variations

Floated

A column can sit flush against the left or right edge of a row

<div class="ui grid">
  <div class="left floated column"></div>
  <div class="right floated column"</div>
</div>

<Grid>
  <Grid.Column floated='left' />
  <Grid.Column floated='right' />
</Grid>

Column Width

A column can vary in width taking up more than a single grid column

Skip

Column Count

A grid can have a different number of columns per row

Skip

Equal Width

A row can automatically resize all elements to split the available width evenly

<div class="ui equal width grid"></div>

<Grid width='equal' />

Stretched

An can stretch its contents to take up the entire column height

<div class="stretched row"></div>

<Grid.Row stretched />

Padded

A grid can preserve its vertical and horizontal gutters on first and last columns

<div class="ui padded grid"></div>
<div class="ui vertically padded grid"></div>
<div class="ui horizontally padded grid"></div>

<Grid padded />
<Grid padded='vertically' />
<Grid padded='horizontally' />

Relaxed

A grid can increase its gutters to allow for more negative space

<div class="ui relaxed grid"></div>
<div class="ui very relaxed grid"></div>

<Grid relaxed />
<Grid relaxed='very' />

Colored

A grid row or column can be colored

<div class="ui red column"></div>
<div class="ui red row"></div>

<Grid.Column color='red' />
<Grid.Row  color='red' />

Centered

A grid can increase its gutters to allow for more negative space

<div class="ui centered grid"></div>

<Grid centered />

Text Alignment

A grid, row, or column can specify its text alignment

<div class="ui left aligned grid"></div>
<div class="center aligned row"></div>
<div class="right aligned column"></div>
<div class="justified row"></div>

<Grid aligned='left' />
<Grid.Row aligned='center' />
<Grid.Column aligned='right' />
<Grid.Row aligned='justified' />

Vertical Alignment

A grid, row, or column can specify its vertical alignment to have all its columns vertically centered

(!) Problem. Vertical aligment uses same class name as text alignment, but we can't pass two aligned props 😄 So, I propose use vertical prop.

<div class="ui bottom aligned grid"></div>
<div class="middle aligned row"></div>
<div class="top aligned column"></div>

<Grid aligned='bottom' />
<Grid.Row aligned='middle' />
<Grid.Column aligned='top' />

Responsive Variations

Doubling

A grid can double its column width on tablet and mobile sizes

<div class="ui doubling grid"></div>

<Grid doubling />

Stackable

A grid can have its columns stack on-top of each other after reaching mobile breakpoints

<div class="ui stackable grid"></div>

<Grid stackable />

Reversed

A grid or row can specify that its columns should reverse order at different device sizes

See docs

Device Visibility

A columns or row can appear only for a specific device, or screen sizes

See docs

Responsive Width

A column can specify a width for a specific device

See docs

…into feature/rail

codecov-io · 2016-07-27T15:52:44Z

Current coverage is 92.87% (diff: 100%)

No coverage report found for master at 0c2edfb.

Powered by Codecov. Last update 0c2edfb...04285f3

…nto fix/grid

layershifter · 2016-07-28T18:59:49Z

Reference #269

layershifter · 2016-08-01T18:55:36Z

Docs finished 😄 Open for discussion.

Take a look, pay attention on Responsive Variations, there are mistakes in SUI docs.

levithomason · 2016-08-02T05:08:01Z

Awesome! Will review tomorrow :D

layershifter · 2016-08-02T14:42:53Z

I've added test, you can see problems with prop naming, so I'm open to ideas 😄

levithomason · 2016-08-02T21:54:48Z

docs/app/Examples/collections/Grid/Types/GridExample.js

+import React from 'react'
+import { Image, Grid } from 'stardust'
+
+const columns = _.range(0, 16).map((i) => (


_.times can be used here:

_.range(0, 16).map((i) => {}) // becomes _.times(16, (i) => {})

layershifter · 2016-08-03T12:10:03Z

Vertical Alignment

I've updated usage of aligned prop, renamed commonTests and propUtils, added new functions.

layershifter · 2016-08-03T12:44:19Z

Column Count & Equal Width

Updated as you asked 😄

layershifter · 2016-08-03T12:49:03Z

Reversed, Device Visibility & Responsive Width

I think I'm missing the error

Reverved might be Resersed and some other errors in SUI docs.

Take a look on Responsive Width implementation, prop naming really correct (mobile, largeScreen, widescreen, etc)? If it's okay, I've update implementsNumberToWordProp test to support different class name (see commented test on GridColumn-test.js).

levithomason · 2016-08-03T17:26:42Z

.../app/Examples/collections/Grid/ResponsiveVariations/GridReversedComputerVerticallyExample.js

+
+const { Column, Row } = Grid
+
+const GridReversedMobileVerticallyExamples = () => (


Mobile should be computer here.

levithomason · 2016-08-03T19:12:51Z

src/utils/propUtils.js

+ */
+export const useColumnsProp = (val, canEqual = false) => val === 'equal' && canEqual
+  ? 'equal width'
+  : useValueAndKey(numberToWord(val), 'column')


Thanks for adding these!

levithomason · 2016-08-03T19:18:45Z

test/specs/commonTests.js

-        it('adds "justified" without "aligned" to className', () => {
-          shallow(<Component { ...requiredProps } aligned='justified' />)
-            .should.have.className('justified')
+    it('adds prop value to className', () => {


It looks like this test now uses numberToWord to convert the value. Let's update the assertion to

- it('adds prop value to className', + it('adds numberToWord value to className'

levithomason · 2016-08-03T19:28:40Z

test/specs/collections/Grid/GridColumn-test.js

+  // common.implementsNumberToWordProp(GridColumn, 'tablet')
+  common.implementsTextAlignProp(GridColumn)
+  common.implementsVerticalAlignProp(GridColumn)
+  // common.implementsNumberToWordProp(GridColumn, 'widescreen')


What do we need to do in order to get these tests working?

Seems, it was my mistake, I'll make commit soon

levithomason · 2016-08-03T20:22:29Z

I think we're good to go on this PR. Is there anything else you wanted to hit before merging? If not, merge master and I'll give it a final once over and merge.

…into fix/grid

layershifter · 2016-08-04T07:12:24Z

Updated to origin, seems we're ready 😸

…into fix/grid

layershifter · 2016-08-04T19:59:26Z

Updated again ✌️

levithomason · 2016-08-04T21:46:51Z

I believe this is good to go, I've looked at it too many times! Merging, we can iterate on any oversights. Thanks for the massive amount of work here 🍻

levithomason · 2016-08-04T21:47:53Z

Released in v0.28.0

Alexander Fedyashov and others added 13 commits July 12, 2016 18:23

(feat) Rail Semantic-Org#181

95cfe48

(feat) Rail Semantic-Org#181

d2cfef8

(feat) Rail docs Semantic-Org#181

97aac53

(fix) Sort Rail props Semantic-Org#181

d9c324b

Merge branch 'master' of https://github.com/TechnologyAdvice/stardust …

8f7c2e5

…into feature/rail

(fix) Rail review fixes Semantic-Org#181

7db8305

(fix) Rail review fixes Semantic-Org#181

bd296b5

(fix) Rail review fixes Semantic-Org#181

c3682a0

(fix) Rail sizes Semantic-Org#181

d74e4f6

(fix) Rail sizes in docs Semantic-Org#181

3127c4a

Merge branch 'master' of https://github.com/TechnologyAdvice/stardust

6e0f10d

fix(Grid) Initial of update to v1 API

1ecea26

fix(Grid) Classname fix

649c589

layershifter and others added 5 commits July 27, 2016 22:36

Merge branch 'master' of https://github.com/TechnologyAdvice/stardust

7c405c2

Merge branch 'fix/grid' of https://github.com/layershifter/stardust i…

bf14a62

…nto fix/grid

fix(Grid) First test

12f38a4

fix(Grid) More docs

1a15d25

feat(Grid) More docs

4ef4316

Alexander Fedyashov and others added 5 commits July 29, 2016 10:53

fix(Grid) More docs and prop fixes

1011325

fix(Grid) More docs

94c0e2a

fix(Grid) More docs

f0b469d

fix(Grid) More docs

626c4e9

fix(Grid) More docs

4519061

fix(Grid) Tests

7b4530f

levithomason reviewed Aug 2, 2016
View reviewed changes

fix(Grid) Update aligned prop, introduce textAlign and verticalAlign

1fa1ebc

fix(Grid) Update columns prop

283b959

levithomason mentioned this pull request Aug 3, 2016

Update legacy component APIs to the v1 API #269

Closed

14 tasks

fix(Grid) Remove divider from docs

f162c54

levithomason reviewed Aug 3, 2016
View reviewed changes

fix(Grid) Fixes in docs

76d141a

levithomason reviewed Aug 3, 2016
View reviewed changes

fix(Grid) Fixes in JSDoc

03e28da

levithomason reviewed Aug 3, 2016
View reviewed changes

fix(Grid) Fixes in JSDoc

bca95f9

levithomason reviewed Aug 3, 2016
View reviewed changes

layershifter added 2 commits August 3, 2016 22:39

fix(Grid) Fixes in tests

b0f0bfb

fix(Grid) Fixes in docs

0b5345a

Merge branch 'master' of https://github.com/TechnologyAdvice/stardust …

a077c1e

…into fix/grid

Merge branch 'master' of https://github.com/TechnologyAdvice/stardust …

04285f3

…into fix/grid

levithomason merged commit d17b252 into Semantic-Org:master Aug 4, 2016

levithomason mentioned this pull request Aug 16, 2016

Docs: update Grid usages #399

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Grid to v1 API #351

Update Grid to v1 API #351

layershifter commented Jul 27, 2016 •

edited

Loading

codecov-io commented Jul 27, 2016 •

edited

Loading

layershifter commented Jul 28, 2016

layershifter commented Aug 1, 2016

levithomason commented Aug 2, 2016

layershifter commented Aug 2, 2016

levithomason Aug 2, 2016

layershifter commented Aug 3, 2016

layershifter commented Aug 3, 2016

layershifter commented Aug 3, 2016

levithomason Aug 3, 2016

levithomason Aug 3, 2016

levithomason Aug 3, 2016

levithomason Aug 3, 2016

layershifter Aug 3, 2016 •

edited

Loading

levithomason commented Aug 3, 2016

layershifter commented Aug 4, 2016

layershifter commented Aug 4, 2016

levithomason commented Aug 4, 2016

levithomason commented Aug 4, 2016


		const { Column, Row } = Grid

		const GridReversedMobileVerticallyExamples = () => (

Update Grid to v1 API #351

Update Grid to v1 API #351

Conversation

layershifter commented Jul 27, 2016 • edited Loading

Types

Grid

Divided

Vertically Divided

Celled

Internally Celled

Content

Variations

Floated

Column Width

Column Count

Equal Width

Stretched

Padded

Relaxed

Colored

Centered

Text Alignment

Vertical Alignment

Responsive Variations

Doubling

Stackable

Reversed

Device Visibility

Responsive Width

codecov-io commented Jul 27, 2016 • edited Loading

Current coverage is 92.87% (diff: 100%)

layershifter commented Jul 28, 2016

layershifter commented Aug 1, 2016

levithomason commented Aug 2, 2016

layershifter commented Aug 2, 2016

levithomason Aug 2, 2016

Choose a reason for hiding this comment

layershifter commented Aug 3, 2016

Vertical Alignment

layershifter commented Aug 3, 2016

Column Count & Equal Width

layershifter commented Aug 3, 2016

Reversed, Device Visibility & Responsive Width

levithomason Aug 3, 2016

Choose a reason for hiding this comment

levithomason Aug 3, 2016

Choose a reason for hiding this comment

levithomason Aug 3, 2016

Choose a reason for hiding this comment

levithomason Aug 3, 2016

Choose a reason for hiding this comment

layershifter Aug 3, 2016 • edited Loading

Choose a reason for hiding this comment

levithomason commented Aug 3, 2016

layershifter commented Aug 4, 2016

layershifter commented Aug 4, 2016

levithomason commented Aug 4, 2016

levithomason commented Aug 4, 2016

layershifter commented Jul 27, 2016 •

edited

Loading

codecov-io commented Jul 27, 2016 •

edited

Loading

layershifter Aug 3, 2016 •

edited

Loading