Skip to content

Commit

Permalink
feat(Col): update classes based on alpha.6 changes (#267)
Browse files Browse the repository at this point in the history 
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)).
  • Loading branch information
@eddywashere
eddywashere authored Jan 5, 2017
1 parent c1b633a commit 89ff16c
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 44 deletions.
6 changes: 5 additions & 1 deletion docs/lib/Components/LayoutPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@ const columnProps = PropTypes.oneOfType([
PropTypes.number,
PropTypes.bool,
PropTypes.shape({
size: stringOrNumberProp,
size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
// example size values:
// 12 || "12" => col-12 or col-\`width\`-12
// auto => col-auto or col-\`width\`-auto
// true => col or col-\`width\`
push: stringOrNumberProp,
pull: stringOrNumberProp,
offset: stringOrNumberProp
Expand Down
31 changes: 19 additions & 12 deletions docs/lib/examples/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,37 @@ export default class Example extends React.Component {
return (
<Container>
<Row>
<Col>col-xs-12</Col>
<Col>.col</Col>
</Row>
<Row>
<Col xs="6">col-xs-6</Col>
<Col xs="6">col-xs-6</Col>
<Col>.col</Col>
<Col>.col</Col>
<Col>.col</Col>
<Col>.col</Col>
</Row>
<Row>
<Col xs>.col-xs (flexbox)</Col>
<Col xs>.col-xs (flexbox)</Col>
<Col xs="3">.col-3</Col>
<Col xs="auto">.col-auto - variabe width content</Col>
<Col xs="3">.col-3</Col>
</Row>
<Row>
<Col xs="6" sm="4">col-xs-6 col-sm-4</Col>
<Col xs="6" sm="4">col-xs-6 col-sm-4</Col>
<Col sm="4">col-xs-12 col-sm-4</Col>
<Col xs="6">.col-6</Col>
<Col xs="6">.col-6</Col>
</Row>
<Row>
<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>
<Col xs="6" sm="4">.col-6 .col-sm-4</Col>
<Col xs="6" sm="4">.col-6 .col-sm-4</Col>
<Col sm="4">.col .col-sm-4</Col>
</Row>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>.col-xs-12 .col-sm-12 .col-md-6 .col-md-offset-3</Col>
<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>
</Row>
<Row>
<Col sm={{ size: 'auto', offset: 1 }}>.col-sm .col-sm-offset-1</Col>
<Col sm={{ size: 'auto', offset: 1 }}>.col-sm .col-sm-offset-1</Col>
<Col sm="12" md={{ size: 8, offset: 2 }}>.col .col-sm-12 .col-md-6 .col-md-offset-3</Col>
</Row>
<Row>
<Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
<Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
</Row>
</Container>
);
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"dependencies": {
"classnames": "^2.2.3",
"lodash.isfunction": "^3.0.8",
"lodash.isobject": "^3.0.2",
"lodash.omit": "^4.4.1",
"lodash.tonumber": "^4.0.3",
"tether": "^1.3.4"
Expand Down
54 changes: 31 additions & 23 deletions src/Col.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import isobject from 'lodash.isobject';
import React, { PropTypes } from 'react';
import classNames from 'classnames';
import { mapToCssModules } from './utils';

const colSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
const colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);

const columnProps = PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.string,
PropTypes.shape({
size: stringOrNumberProp,
size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
push: stringOrNumberProp,
pull: stringOrNumberProp,
offset: stringOrNumberProp
Expand All @@ -28,7 +29,17 @@ const propTypes = {
};

const defaultProps = {
xs: 12
xs: true
};

const getColumnSizeClass = (isXs, colWidth, colSize) => {
if (colSize === true || colSize === '') {
return isXs ? 'col' : `col-${colWidth}`;
} else if (colSize === 'auto') {
return isXs ? 'col-auto' : `col-${colWidth}-auto`;
}

return isXs ? `col-${colSize}` : `col-${colWidth}-${colSize}`;
};

const Col = (props) => {
Expand All @@ -39,33 +50,30 @@ const Col = (props) => {
} = props;
const colClasses = [];

colSizes.forEach(colSize => {
const columnProp = props[colSize];
delete attributes[colSize];
let colClass;
colWidths.forEach(colWidth => {
const columnProp = props[colWidth];

if (!columnProp) {
return;
} else if (columnProp.size) {
if (columnProp.size === 'auto') {
colClass = `col-${colSize}`;
} else {
colClass = `col-${colSize}-${columnProp.size}`;
}
}

const isXs = colWidth === 'xs';
let colClass;

delete attributes[colWidth];

if (isobject(columnProp)) {
const colSizeInterfix = isXs ? '-' : `-${colWidth}-`;
colClass = getColumnSizeClass(isXs, colWidth, columnProp.size);

colClasses.push(mapToCssModules(classNames({
[colClass]: columnProp.size,
[`push-${colSize}-${columnProp.push}`]: columnProp.push,
[`pull-${colSize}-${columnProp.pull}`]: columnProp.pull,
[`offset-${colSize}-${columnProp.offset}`]: columnProp.offset
[colClass]: columnProp.size || columnProp.size === '',
[`push${colSizeInterfix}${columnProp.push}`]: columnProp.push,
[`pull${colSizeInterfix}${columnProp.pull}`]: columnProp.pull,
[`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset
})), cssModule);
} else {
if (columnProp === 'auto' || columnProp === true) {
colClass = `col-${colSize}`;
} else {
colClass = `col-${colSize}-${columnProp}`;
}

colClass = getColumnSizeClass(isXs, colWidth, columnProp);
colClasses.push(colClass);
}
});
Expand Down
16 changes: 8 additions & 8 deletions src/__tests__/Col.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ describe('Col', () => {
it('should render default .col-* markup', () => {
const wrapper = shallow(<Col />);

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

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

expect(wrapper.hasClass('extra')).toBe(true);
expect(wrapper.hasClass('col-xs-12')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
});

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

expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('col-xs-12')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
});

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

expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('col-xs-12')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
});

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

expect(wrapper.hasClass('col-xs')).toBe(true);
expect(wrapper.hasClass('col-auto')).toBe(true);
expect(wrapper.hasClass('col-sm')).toBe(true);
});

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

expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('col-xs-12')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
expect(wrapper.hasClass('push-sm-2')).toBe(true);
expect(wrapper.hasClass('pull-sm-2')).toBe(true);
expect(wrapper.hasClass('offset-sm-2')).toBe(true);
});

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

expect(wrapper.hasClass('col-sm')).toBe(true);
expect(wrapper.hasClass('col-sm-auto')).toBe(true);
});
});

0 comments on commit 89ff16c

Please sign in to comment.