Skip to content

Commit

Permalink
feat: BREAKING CHANGE: checkbox replace state with validation states (#…
Browse files Browse the repository at this point in the history 
…1176)

Breaking change: Checkbox: replace `state` property with `validationState`
  • Loading branch information
@jbadan
jbadan committed Aug 21, 2020
1 parent 5d3e13e commit 9a71277
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 79 deletions.
32 changes: 24 additions & 8 deletions src/Forms/Checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import classnames from 'classnames';
import { FORM_MESSAGE_TYPES } from '../utils/constants';
import FormItem from './FormItem';
import FormLabel from './FormLabel';
import FormValidationOverlay from './_FormValidationOverlay';
import PropTypes from 'prop-types';
import useUniqueId from '../utils/useUniqueId';
import React, { useEffect, useRef } from 'react';
Expand All @@ -21,13 +22,14 @@ const Checkbox = React.forwardRef(({
id,
indeterminate,
inline,
inputClassName,
inputProps,
labelClassName,
labelProps,
name,
onChange,
value,
state,
validationState,
...props
}, ref) => {

Expand All @@ -38,12 +40,13 @@ const Checkbox = React.forwardRef(({
});


const inputClassName = classnames(
const inputClassNames = classnames(
'fd-checkbox',
{
[`is-${state}`]: state,
[`is-${validationState?.state}`]: validationState?.state,
'fd-checkbox--compact': compact
}
},
inputClassName
);

const labelClasses = classnames(
Expand All @@ -60,7 +63,7 @@ const Checkbox = React.forwardRef(({
</span>
) : children;

return (
const checkbox = (
<FormItem
{...props}
disabled={disabled}
Expand All @@ -70,7 +73,7 @@ const Checkbox = React.forwardRef(({
{...inputProps}
aria-label={ariaLabel}
checked={checked}
className={inputClassName}
className={inputClassNames}
defaultChecked={defaultChecked}
disabled={disabled}
id={checkId}
Expand All @@ -89,6 +92,12 @@ const Checkbox = React.forwardRef(({
</FormLabel>
</FormItem>
);

return validationState ? (
<FormValidationOverlay
control={checkbox}
validationState={validationState} />
) : checkbox;
});

Checkbox.displayName = 'Checkbox';
Expand Down Expand Up @@ -122,6 +131,8 @@ Please ensure you are either using a visible \`FormLabel\` or an \`aria-label\`
indeterminate: PropTypes.bool,
/** Internal use only */
inline: PropTypes.bool,
/** Class name to be added to the component `<input>` element */
inputClassName: PropTypes.string,
/** Additional props to be spread to the `<input>` element */
inputProps: PropTypes.object,
/** Class name to be added to the component `<label>` element */
Expand All @@ -130,8 +141,13 @@ Please ensure you are either using a visible \`FormLabel\` or an \`aria-label\`
labelProps: PropTypes.object,
/** Sets the `name` for the checkbox input */
name: PropTypes.string,
/** State of validation: 'error', 'warning', 'information', 'success' */
state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
/** An object identifying a validation message. The object will include properties for `state` and `text`; _e.g._, \`{ state: \'warning\', text: \'This is your last warning\' }\` */
validationState: PropTypes.shape({
/** State of validation: 'error', 'warning', 'information', 'success' */
state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
/** Text of the validation message */
text: PropTypes.string
}),
/** Sets the `value` for the checkbox input */
value: PropTypes.string,
/** Callback function when the change event fires on the component */
Expand Down
10 changes: 10 additions & 0 deletions src/Forms/Checkbox.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,16 @@ describe('<Checkbox />', () => {
wrapper.find('FormLabel').getDOMNode().classList
).toContain('wonderful-styles');
});

test('should set inputClassName on the input', () => {
const wrapper = setup({
inputClassName: 'wonderful-styles'
});

expect(
wrapper.find('.fd-checkbox').getDOMNode().classList
).toContain('wonderful-styles');
});
});

test('forwards the ref', () => {
Expand Down
20 changes: 10 additions & 10 deletions src/Forms/__stories__/Checkbox.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ export const compact = () => (
<Checkbox compact>Text Option</Checkbox>
);

export const validationState = () => (
export const validationStates = () => (
<div className='fddocs-container'>
<Checkbox state='error'>Text Option</Checkbox>
<Checkbox state='warning'>Text Option</Checkbox>
<Checkbox state='success'>Text Option</Checkbox>
<Checkbox state='information'>Text Option</Checkbox>
<Checkbox validationState={{ state: 'error', text: 'Test validation state' }}>Error State</Checkbox>
<Checkbox validationState={{ state: 'warning', text: 'Test validation state' }}>Warning State</Checkbox>
<Checkbox validationState={{ state: 'information', text: 'Test validation state' }}>Information State</Checkbox>
<Checkbox validationState={{ state: 'success', text: 'Test validation state' }}>Success State</Checkbox>
</div>
);

Expand All @@ -45,12 +45,12 @@ export const dev = () => (
compact={boolean('compact', false)}
disabled={boolean('disabled', false)}
indeterminate={boolean('indeterminate', false)}
state={select('State', {
validationState={select('Validation State', {
'none': '',
'success': 'success',
'error': 'error',
'information': 'information',
'warning': 'warning'
'success': { state: 'success', text: 'placeholder text' },
'error': { state: 'error', text: 'placeholder text' },
'information': { state: 'information', text: 'placeholder text' },
'warning': { state: 'warning', text: 'placeholder text' }
})}>Text Option</Checkbox>
);

Expand Down
186 changes: 125 additions & 61 deletions src/Forms/__stories__/__snapshots__/Checkbox.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,92 +195,156 @@ exports[`Storyshots Component API/Forms/Checkbox Primary 1`] = `
</div>
`;

exports[`Storyshots Component API/Forms/Checkbox Validation State 1`] = `
exports[`Storyshots Component API/Forms/Checkbox Validation States 1`] = `
<div
dir="ltr"
>
<div
className="fddocs-container"
>
<div
className="fd-form-item"
className="fd-popover"
onBlur={[Function]}
onFocus={[Function]}
>
<input
className="fd-checkbox is-error"
id="fd-mocked-short-id"
onChange={[Function]}
type="checkbox"
/>
<label
className="fd-form-label fd-checkbox__label"
htmlFor="fd-mocked-short-id"
<div
onFocus={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<span
className="fd-checkbox__text"
<div
className="fd-popover__control"
>
Text Option
</span>
</label>
<div
className="fd-form-item"
>
<input
className="fd-checkbox is-error"
id="fd-mocked-short-id"
onChange={[Function]}
type="checkbox"
/>
<label
className="fd-form-label fd-checkbox__label"
htmlFor="fd-mocked-short-id"
>
<span
className="fd-checkbox__text"
>
Error State
</span>
</label>
</div>
</div>
</div>
</div>
<div
className="fd-form-item"
className="fd-popover"
onBlur={[Function]}
onFocus={[Function]}
>
<input
className="fd-checkbox is-warning"
id="fd-mocked-short-id"
onChange={[Function]}
type="checkbox"
/>
<label
className="fd-form-label fd-checkbox__label"
htmlFor="fd-mocked-short-id"
<div
onFocus={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<span
className="fd-checkbox__text"
<div
className="fd-popover__control"
>
Text Option
</span>
</label>
<div
className="fd-form-item"
>
<input
className="fd-checkbox is-warning"
id="fd-mocked-short-id"
onChange={[Function]}
type="checkbox"
/>
<label
className="fd-form-label fd-checkbox__label"
htmlFor="fd-mocked-short-id"
>
<span
className="fd-checkbox__text"
>
Warning State
</span>
</label>
</div>
</div>
</div>
</div>
<div
className="fd-form-item"
className="fd-popover"
onBlur={[Function]}
onFocus={[Function]}
>
<input
className="fd-checkbox is-success"
id="fd-mocked-short-id"
onChange={[Function]}
type="checkbox"
/>
<label
className="fd-form-label fd-checkbox__label"
htmlFor="fd-mocked-short-id"
<div
onFocus={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<span
className="fd-checkbox__text"
<div
className="fd-popover__control"
>
Text Option
</span>
</label>
<div
className="fd-form-item"
>
<input
className="fd-checkbox is-information"
id="fd-mocked-short-id"
onChange={[Function]}
type="checkbox"
/>
<label
className="fd-form-label fd-checkbox__label"
htmlFor="fd-mocked-short-id"
>
<span
className="fd-checkbox__text"
>
Information State
</span>
</label>
</div>
</div>
</div>
</div>
<div
className="fd-form-item"
className="fd-popover"
onBlur={[Function]}
onFocus={[Function]}
>
<input
className="fd-checkbox is-information"
id="fd-mocked-short-id"
onChange={[Function]}
type="checkbox"
/>
<label
className="fd-form-label fd-checkbox__label"
htmlFor="fd-mocked-short-id"
<div
onFocus={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
>
<span
className="fd-checkbox__text"
<div
className="fd-popover__control"
>
Text Option
</span>
</label>
<div
className="fd-form-item"
>
<input
className="fd-checkbox is-success"
id="fd-mocked-short-id"
onChange={[Function]}
type="checkbox"
/>
<label
className="fd-form-label fd-checkbox__label"
htmlFor="fd-mocked-short-id"
>
<span
className="fd-checkbox__text"
>
Success State
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 9a71277

Please sign in to comment.