diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index dcf89b0e..964db684 100644 --- a/scss/components/form/_checks.scss +++ b/scss/components/form/_checks.scss @@ -215,6 +215,11 @@ } } } + + &-desc { + color: $text--muted-color; + margin-left: $Checkbox-gap; + } } .#{$ns}CheckboxControl, diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index e0384fc4..206d7463 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -7,6 +7,7 @@ import React from 'react'; import cx from 'classnames'; import {ClassNamesFn, themeable} from '../theme'; import {autobind} from '../utils/helper'; +import { filter } from '../utils/tpl'; const sizeMap = { sm: 'i-checks-sm', @@ -33,9 +34,11 @@ interface CheckboxProps { readOnly?: boolean; checked?: boolean; name?: string; + description?: string; classPrefix: string; classnames: ClassNamesFn; partial?: boolean; + data?: any; } export class Checkbox extends React.Component { @@ -60,17 +63,19 @@ export class Checkbox extends React.Component { let { size, className, - classPrefix: ns, + classnames: cx, value, label, partial, trueValue, children, disabled, + description, readOnly, checked, type, - name + name, + data } = this.props; className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : ''); @@ -78,9 +83,9 @@ export class Checkbox extends React.Component { return ( ); } diff --git a/src/components/Checkboxes.tsx b/src/components/Checkboxes.tsx index fb12454d..0fe66e11 100644 --- a/src/components/Checkboxes.tsx +++ b/src/components/Checkboxes.tsx @@ -9,7 +9,7 @@ import uncontrollable = require('uncontrollable'); import Checkbox from './Checkbox'; import find = require('lodash/find'); import chunk = require('lodash/chunk'); -import {flattenTree} from '../utils/helper'; +import {flattenTree, isObject} from '../utils/helper'; import {Option} from './Checkboxes'; import {ClassNamesFn, themeable} from '../theme'; // import isPlainObject = require('lodash/isPlainObject'); @@ -19,6 +19,7 @@ export interface Option { value?: any; disabled?: boolean; children?: Options; + description?: string; [propName: string]: any; } export interface Options extends Array