Skip to content

Commit

Permalink
feat(Col): Set col class only if no other cols are specified (#842)
Browse files Browse the repository at this point in the history 
Breaking: Col no longer adds `.col` class by default when you have other columns specified. To get this class back, simply add the prop `xs`

Fixes #750
  • Loading branch information
@pravdomil @TheSharpieOne
pravdomil authored and TheSharpieOne committed Feb 20, 2018
1 parent 9b49091 commit 5a9aa63
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 19 deletions.
10 changes: 5 additions & 5 deletions docs/lib/examples/Layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@ export default class Example extends React.Component {
<Row>
<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>
<Col sm="4">.col-sm-4</Col>
</Row>
<Row>
<Col sm={{ size: 6, order: 2, offset: 1 }}>.col .col-sm-6 .col-sm-order-2 .col-sm-offset-2</Col>
<Col sm={{ size: 6, order: 2, offset: 1 }}>.col-sm-6 .col-sm-order-2 .col-sm-offset-2</Col>
</Row>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>.col .col-sm-12 .col-md-6 .col-md-offset-3</Col>
<Col sm="12" md={{ size: 8, offset: 2 }}>.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>
<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>
</Row>
</Container>
);
Expand Down
13 changes: 6 additions & 7 deletions src/Col.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,34 +60,33 @@ const Col = (props) => {
widths.forEach((colWidth, i) => {
let columnProp = props[colWidth];

if (!i && columnProp === undefined) {
columnProp = true;
}

delete attributes[colWidth];

if (!columnProp && columnProp !== '') {
return;
}

const isXs = !i;
let colClass;

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

colClasses.push(mapToCssModules(classNames({
[colClass]: columnProp.size || columnProp.size === '',
[`order${colSizeInterfix}${columnProp.order}`]: columnProp.order || columnProp.order === 0,
[`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0
})), cssModule);
} else {
colClass = getColumnSizeClass(isXs, colWidth, columnProp);
const colClass = getColumnSizeClass(isXs, colWidth, columnProp);
colClasses.push(colClass);
}
});

if (!colClasses.length) {
colClasses.push('col');
}

const classes = mapToCssModules(classNames(
className,
colClasses
Expand Down
17 changes: 10 additions & 7 deletions src/__tests__/Col.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import { Col } from '../';

describe('Col', () => {
it('should render default .col-* markup', () => {
it('should render default .col markup', () => {
const wrapper = shallow(<Col />);

expect(wrapper.html()).toBe('<div class="col"></div>');
Expand All @@ -27,6 +27,7 @@ describe('Col', () => {

expect(wrapper.hasClass('col-4')).toBe(true);
expect(wrapper.hasClass('col-jumbo-6')).toBe(true);
expect(wrapper.hasClass('col')).toBe(false);
});

it('should allow custom columns to be defined with objects', () => {
Expand All @@ -35,26 +36,27 @@ describe('Col', () => {
expect(wrapper.hasClass('col-wtf-1')).toBe(true);
expect(wrapper.hasClass('order-wtf-2')).toBe(true);
expect(wrapper.hasClass('offset-wtf-4')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
expect(wrapper.hasClass('col')).toBe(false);
});

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')).toBe(true);
expect(wrapper.hasClass('col')).toBe(false);
});

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')).toBe(true);
expect(wrapper.hasClass('col')).toBe(false);
});

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

expect(wrapper.hasClass('col')).toBe(false);
expect(wrapper.hasClass('col-auto')).toBe(true);
expect(wrapper.hasClass('col-sm')).toBe(true);
});
Expand All @@ -63,7 +65,7 @@ describe('Col', () => {
const wrapper = shallow(<Col sm={{ size: 6, order: 2, offset: 2 }} />);

expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
expect(wrapper.hasClass('col')).toBe(false);
expect(wrapper.hasClass('order-sm-2')).toBe(true);
expect(wrapper.hasClass('offset-sm-2')).toBe(true);
});
Expand All @@ -72,7 +74,7 @@ describe('Col', () => {
const wrapper = shallow(<Col sm={{ size: 6, order: 0, offset: 0 }} />);

expect(wrapper.hasClass('col-sm-6')).toBe(true);
expect(wrapper.hasClass('col')).toBe(true);
expect(wrapper.hasClass('col')).toBe(false);
expect(wrapper.hasClass('order-sm-0')).toBe(true);
expect(wrapper.hasClass('offset-sm-0')).toBe(true);
});
Expand All @@ -82,14 +84,15 @@ describe('Col', () => {
sm={{ size: 'auto', offset: 2 }}
/>);

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

it('should render custom tag', () => {
const wrapper = shallow(<Col tag="main">Yo!</Col>);

expect(wrapper.text()).toBe('Yo!');
expect(wrapper.hasClass('col')).toBe(true);
expect(wrapper.type()).toBe('main');
expect(wrapper.hasClass('col')).toBe(true);
});
});

0 comments on commit 5a9aa63

Please sign in to comment.