Skip to content

Commit 89ff16c

Browse files
eddywashereeddywashere
authored
feat(Col): update classes based on alpha.6 changes (#267)
BREAKING CHANGE: The default xs prop now returns `.col` instead of `.col-xs-12`. The `auto` size value now returns `.col-auto` or `.col-sm-auto` for variable width content columns. Use `true` or `''` as the size value to return `.col` or `.col-sm` for auto layout of columns (not to be confused with `auto` -> (variable width of content)).
1 parent c1b633a commit 89ff16c

5 files changed

Lines changed: 64 additions & 44 deletions

File tree

‎docs/lib/Components/LayoutPage.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,11 @@ const columnProps = PropTypes.oneOfType([
4545
PropTypes.number,
4646
PropTypes.bool,
4747
PropTypes.shape({
48-
size: stringOrNumberProp,
48+
size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
49+
// example size values:
50+
// 12 || "12" => col-12 or col-\`width\`-12
51+
// auto => col-auto or col-\`width\`-auto
52+
// true => col or col-\`width\`
4953
push: stringOrNumberProp,
5054
pull: stringOrNumberProp,
5155
offset: stringOrNumberProp

‎docs/lib/examples/Layout.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,37 @@ export default class Example extends React.Component {
66
return (
77
<Container>
88
<Row>
9-
<Col>col-xs-12</Col>
9+
<Col>.col</Col>
1010
</Row>
1111
<Row>
12-
<Col xs="6">col-xs-6</Col>
13-
<Col xs="6">col-xs-6</Col>
12+
<Col>.col</Col>
13+
<Col>.col</Col>
14+
<Col>.col</Col>
15+
<Col>.col</Col>
1416
</Row>
1517
<Row>
16-
<Col xs>.col-xs (flexbox)</Col>
17-
<Col xs>.col-xs (flexbox)</Col>
18+
<Col xs="3">.col-3</Col>
19+
<Col xs="auto">.col-auto - variabe width content</Col>
20+
<Col xs="3">.col-3</Col>
1821
</Row>
1922
<Row>
20-
<Col xs="6" sm="4">col-xs-6 col-sm-4</Col>
21-
<Col xs="6" sm="4">col-xs-6 col-sm-4</Col>
22-
<Col sm="4">col-xs-12 col-sm-4</Col>
23+
<Col xs="6">.col-6</Col>
24+
<Col xs="6">.col-6</Col>
2325
</Row>
2426
<Row>
25-
<Col sm={{ size: 6, push: 2, pull: 2, offset: 1 }}>.col-xs-12 .col-sm-6 .col-sm-push-2 .col-sm-pull-2 .col-sm-offset-2</Col>
27+
<Col xs="6" sm="4">.col-6 .col-sm-4</Col>
28+
<Col xs="6" sm="4">.col-6 .col-sm-4</Col>
29+
<Col sm="4">.col .col-sm-4</Col>
2630
</Row>
2731
<Row>
28-
<Col sm="12" md={{ size: 8, offset: 2 }}>.col-xs-12 .col-sm-12 .col-md-6 .col-md-offset-3</Col>
32+
<Col sm={{ size: 6, push: 2, pull: 2, offset: 1 }}>.col .col-sm-6 .col-sm-push-2 .col-sm-pull-2 .col-sm-offset-2</Col>
2933
</Row>
3034
<Row>
31-
<Col sm={{ size: 'auto', offset: 1 }}>.col-sm .col-sm-offset-1</Col>
32-
<Col sm={{ size: 'auto', offset: 1 }}>.col-sm .col-sm-offset-1</Col>
35+
<Col sm="12" md={{ size: 8, offset: 2 }}>.col .col-sm-12 .col-md-6 .col-md-offset-3</Col>
36+
</Row>
37+
<Row>
38+
<Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
39+
<Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
3340
</Row>
3441
</Container>
3542
);

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"dependencies": {
4848
"classnames": "^2.2.3",
4949
"lodash.isfunction": "^3.0.8",
50+
"lodash.isobject": "^3.0.2",
5051
"lodash.omit": "^4.4.1",
5152
"lodash.tonumber": "^4.0.3",
5253
"tether": "^1.3.4"

‎src/Col.js‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1+
import isobject from 'lodash.isobject';
12
import React, { PropTypes } from 'react';
23
import classNames from 'classnames';
34
import { mapToCssModules } from './utils';
45

5-
const colSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
6+
const colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
67
const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
78

89
const columnProps = PropTypes.oneOfType([
910
PropTypes.bool,
1011
PropTypes.number,
1112
PropTypes.string,
1213
PropTypes.shape({
13-
size: stringOrNumberProp,
14+
size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
1415
push: stringOrNumberProp,
1516
pull: stringOrNumberProp,
1617
offset: stringOrNumberProp
@@ -28,7 +29,17 @@ const propTypes = {
2829
};
2930

3031
const defaultProps = {
31-
xs: 12
32+
xs: true
33+
};
34+
35+
const getColumnSizeClass = (isXs, colWidth, colSize) => {
36+
if (colSize === true || colSize === '') {
37+
return isXs ? 'col' : `col-${colWidth}`;
38+
} else if (colSize === 'auto') {
39+
return isXs ? 'col-auto' : `col-${colWidth}-auto`;
40+
}
41+
42+
return isXs ? `col-${colSize}` : `col-${colWidth}-${colSize}`;
3243
};
3344

3445
const Col = (props) => {
@@ -39,33 +50,30 @@ const Col = (props) => {
3950
} = props;
4051
const colClasses = [];
4152

42-
colSizes.forEach(colSize => {
43-
const columnProp = props[colSize];
44-
delete attributes[colSize];
45-
let colClass;
53+
colWidths.forEach(colWidth => {
54+
const columnProp = props[colWidth];
4655

4756
if (!columnProp) {
4857
return;
49-
} else if (columnProp.size) {
50-
if (columnProp.size === 'auto') {
51-
colClass = `col-${colSize}`;
52-
} else {
53-
colClass = `col-${colSize}-${columnProp.size}`;
54-
}
58+
}
59+
60+
const isXs = colWidth === 'xs';
61+
let colClass;
62+
63+
delete attributes[colWidth];
64+
65+
if (isobject(columnProp)) {
66+
const colSizeInterfix = isXs ? '-' : `-${colWidth}-`;
67+
colClass = getColumnSizeClass(isXs, colWidth, columnProp.size);
5568

5669
colClasses.push(mapToCssModules(classNames({
57-
[colClass]: columnProp.size,
58-
[`push-${colSize}-${columnProp.push}`]: columnProp.push,
59-
[`pull-${colSize}-${columnProp.pull}`]: columnProp.pull,
60-
[`offset-${colSize}-${columnProp.offset}`]: columnProp.offset
70+
[colClass]: columnProp.size || columnProp.size === '',
71+
[`push${colSizeInterfix}${columnProp.push}`]: columnProp.push,
72+
[`pull${colSizeInterfix}${columnProp.pull}`]: columnProp.pull,
73+
[`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset
6174
})), cssModule);
6275
} else {
63-
if (columnProp === 'auto' || columnProp === true) {
64-
colClass = `col-${colSize}`;
65-
} else {
66-
colClass = `col-${colSize}-${columnProp}`;
67-
}
68-
76+
colClass = getColumnSizeClass(isXs, colWidth, columnProp);
6977
colClasses.push(colClass);
7078
}
7179
});

‎src/__tests__/Col.spec.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ describe('Col', () => {
66
it('should render default .col-* markup', () => {
77
const wrapper = shallow(<Col />);
88

9-
expect(wrapper.html()).toBe('<div class="col-xs-12"></div>');
9+
expect(wrapper.html()).toBe('<div class="col"></div>');
1010
});
1111

1212
it('should render children', () => {
@@ -19,45 +19,45 @@ describe('Col', () => {
1919
const wrapper = shallow(<Col className="extra" />);
2020

2121
expect(wrapper.hasClass('extra')).toBe(true);
22-
expect(wrapper.hasClass('col-xs-12')).toBe(true);
22+
expect(wrapper.hasClass('col')).toBe(true);
2323
});
2424

2525
it('should pass col size specific classes as Strings', () => {
2626
const wrapper = shallow(<Col sm="6" />);
2727

2828
expect(wrapper.hasClass('col-sm-6')).toBe(true);
29-
expect(wrapper.hasClass('col-xs-12')).toBe(true);
29+
expect(wrapper.hasClass('col')).toBe(true);
3030
});
3131

3232
it('should pass col size specific classes as Numbers', () => {
3333
const wrapper = shallow(<Col sm={6} />);
3434

3535
expect(wrapper.hasClass('col-sm-6')).toBe(true);
36-
expect(wrapper.hasClass('col-xs-12')).toBe(true);
36+
expect(wrapper.hasClass('col')).toBe(true);
3737
});
3838

3939
it('should pass col size as flex with values "auto" or without value', () => {
4040
const wrapper = shallow(<Col xs="auto" sm />);
4141

42-
expect(wrapper.hasClass('col-xs')).toBe(true);
42+
expect(wrapper.hasClass('col-auto')).toBe(true);
4343
expect(wrapper.hasClass('col-sm')).toBe(true);
4444
});
4545

4646
it('should pass col size specific classes via Objects', () => {
4747
const wrapper = shallow(<Col sm={{ size: 6, push: 2, pull: 2, offset: 2 }} />);
4848

4949
expect(wrapper.hasClass('col-sm-6')).toBe(true);
50-
expect(wrapper.hasClass('col-xs-12')).toBe(true);
50+
expect(wrapper.hasClass('col')).toBe(true);
5151
expect(wrapper.hasClass('push-sm-2')).toBe(true);
5252
expect(wrapper.hasClass('pull-sm-2')).toBe(true);
5353
expect(wrapper.hasClass('offset-sm-2')).toBe(true);
5454
});
5555

56-
it('should pass col size as flex when passing via object with size "auto"', () => {
56+
it('should pass col size when passing via object with size "auto"', () => {
5757
const wrapper = shallow(<Col
5858
sm={{ size: 'auto', push: 2, pull: 2, offset: 2 }}
5959
/>);
6060

61-
expect(wrapper.hasClass('col-sm')).toBe(true);
61+
expect(wrapper.hasClass('col-sm-auto')).toBe(true);
6262
});
6363
});

0 commit comments

Comments
 (0)