Skip to content

Commit 683dbdb

Browse files
TheSharpieOneTheSharpieOne
authored
fix(Label): fix xs col class (#512)
Changes Label's xs col class to remove the -xs part to align with bootstrap Closes #510
1 parent 12270d0 commit 683dbdb

2 files changed

Lines changed: 63 additions & 12 deletions

File tree

‎src/Label.js‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
4+
import isobject from 'lodash.isobject';
45
import { mapToCssModules } from './utils';
56

6-
const colSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
7+
const colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
78

89
const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
910

@@ -34,17 +35,30 @@ const propTypes = {
3435
md: columnProps,
3536
lg: columnProps,
3637
xl: columnProps,
38+
widths: PropTypes.array,
3739
};
3840

3941
const defaultProps = {
4042
tag: 'label',
43+
widths: colWidths,
44+
};
45+
46+
const getColumnSizeClass = (isXs, colWidth, colSize) => {
47+
if (colSize === true || colSize === '') {
48+
return isXs ? 'col' : `col-${colWidth}`;
49+
} else if (colSize === 'auto') {
50+
return isXs ? 'col-auto' : `col-${colWidth}-auto`;
51+
}
52+
53+
return isXs ? `col-${colSize}` : `col-${colWidth}-${colSize}`;
4154
};
4255

4356
const Label = (props) => {
4457
const {
4558
className,
4659
cssModule,
4760
hidden,
61+
widths,
4862
tag: Tag,
4963
check,
5064
inline,
@@ -56,19 +70,31 @@ const Label = (props) => {
5670

5771
const colClasses = [];
5872

59-
colSizes.forEach(colSize => {
60-
const columnProp = props[colSize];
61-
delete attributes[colSize];
73+
widths.forEach((colWidth, i) => {
74+
let columnProp = props[colWidth];
75+
76+
delete attributes[colWidth];
77+
78+
if (!columnProp) {
79+
return;
80+
}
81+
82+
const isXs = !i;
83+
let colClass;
84+
85+
if (isobject(columnProp)) {
86+
const colSizeInterfix = isXs ? '-' : `-${colWidth}-`;
87+
colClass = getColumnSizeClass(isXs, colWidth, columnProp.size);
6288

63-
if (columnProp && columnProp.size) {
6489
colClasses.push(mapToCssModules(classNames({
65-
[`col-${colSize}-${columnProp.size}`]: columnProp.size,
66-
[`push-${colSize}-${columnProp.push}`]: columnProp.push,
67-
[`pull-${colSize}-${columnProp.pull}`]: columnProp.pull,
68-
[`offset-${colSize}-${columnProp.offset}`]: columnProp.offset,
90+
[colClass]: columnProp.size || columnProp.size === '',
91+
[`push${colSizeInterfix}${columnProp.push}`]: columnProp.push || columnProp.push === 0,
92+
[`pull${colSizeInterfix}${columnProp.pull}`]: columnProp.pull || columnProp.pull === 0,
93+
[`offset${colSizeInterfix}${columnProp.offset}`]: columnProp.offset || columnProp.offset === 0
6994
})), cssModule);
70-
} else if (columnProp) {
71-
colClasses.push(`col-${colSize}-${columnProp}`);
95+
} else {
96+
colClass = getColumnSizeClass(isXs, colWidth, columnProp);
97+
colClasses.push(colClass);
7298
}
7399
});
74100

‎src/__tests__/Label.spec.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,12 @@ describe('Label', () => {
6363
expect(wrapper.hasClass('col-sm-6')).toBe(true);
6464
});
6565

66+
it('should pass col size specific classes as Strings (xs)', () => {
67+
const wrapper = shallow(<Label xs="6">Yo!</Label>);
68+
69+
expect(wrapper.hasClass('col-6')).toBe(true);
70+
});
71+
6672
it('should render with "sr-only" class when hidden prop is truthy', () => {
6773
const wrapper = shallow(<Label hidden>Yo!</Label>);
6874

@@ -136,6 +142,12 @@ describe('Label', () => {
136142
expect(wrapper.hasClass('col-sm-6')).toBe(true);
137143
});
138144

145+
it('should pass col size specific classes as Numbers (xs)', () => {
146+
const wrapper = shallow(<Label xs={6}>Yo!</Label>);
147+
148+
expect(wrapper.hasClass('col-6')).toBe(true);
149+
});
150+
139151
it('should pass col size specific classes via Objects', () => {
140152
const wrapper = shallow(<Label sm={{ size: 6, push: 2, pull: 2, offset: 2 }}>Yo!</Label>);
141153

@@ -145,9 +157,22 @@ describe('Label', () => {
145157
expect(wrapper.hasClass('offset-sm-2')).toBe(true);
146158
});
147159

160+
it('should pass col size specific classes via Objects (xs)', () => {
161+
const wrapper = shallow(<Label xs={{ size: 6, push: 2, pull: 2, offset: 2 }}>Yo!</Label>);
162+
163+
expect(wrapper.hasClass('col-6')).toBe(true);
164+
expect(wrapper.hasClass('push-2')).toBe(true);
165+
expect(wrapper.hasClass('pull-2')).toBe(true);
166+
expect(wrapper.hasClass('offset-2')).toBe(true);
167+
});
168+
148169
it('should pass multiple col size specific classes via Objects', () => {
149-
const wrapper = shallow(<Label sm={{ size: 6, push: 2, pull: 2, offset: 2 }} md={{ size: 7, push: 1, pull: 1, offset: 1 }}>Yo!</Label>);
170+
const wrapper = shallow(<Label xs={{ size: 4, push: 3, pull: 3, offset: 3 }} sm={{ size: 6, push: 2, pull: 2, offset: 2 }} md={{ size: 7, push: 1, pull: 1, offset: 1 }}>Yo!</Label>);
150171

172+
expect(wrapper.hasClass('col-4')).toBe(true);
173+
expect(wrapper.hasClass('push-3')).toBe(true);
174+
expect(wrapper.hasClass('pull-3')).toBe(true);
175+
expect(wrapper.hasClass('offset-3')).toBe(true);
151176
expect(wrapper.hasClass('col-sm-6')).toBe(true);
152177
expect(wrapper.hasClass('push-sm-2')).toBe(true);
153178
expect(wrapper.hasClass('pull-sm-2')).toBe(true);

0 commit comments

Comments
 (0)