Skip to content

Commit 6583ee5

Browse files
aswinshenoyaswinshenoy
committed
Convert children to variants of Radio & Checkbox Components
1 parent 8b5cdcb commit 6583ee5

File tree

7 files changed

+392
-321
lines changed

7 files changed

+392
-321
lines changed

‎components/checkbox/index.jsx‎

Lines changed: 100 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import checkProps from './check-props';
2424
import componentDoc from './docs.json';
2525

2626
import { CHECKBOX } from '../../utilities/constants';
27+
import Icon from '../icon';
2728

2829
const propTypes = {
2930
/**
@@ -143,7 +144,27 @@ const propTypes = {
143144
/**
144145
* Which UX pattern of checkbox? The default is `base` while other option is `toggle`. (**Note:** `toggle` variant does not support the `indeterminate` feature, because [SLDS does not support it](https://lightningdesignsystem.com/components/forms/#flavor-checkbox-toggle-checkbox-toggle).)
145146
*/
146-
variant: PropTypes.oneOf(['base', 'toggle', 'button-group']),
147+
variant: PropTypes.oneOf(['base', 'toggle', 'button-group', 'visual-picker']),
148+
/**
149+
* Determines whether visual picker is coverable when selected (only for visual picker variant)
150+
*/
151+
coverable: PropTypes.bool,
152+
/**
153+
* Allows icon to shown with checkbox (only for non-coverable visual picker variant)
154+
*/
155+
onRenderVisualPicker: PropTypes.node,
156+
/**
157+
* Allows icon to shown if checkbox is not selected (only for visual picker variant)
158+
*/
159+
onRenderVisualPickerSelected: PropTypes.node,
160+
/**
161+
* Allows icon to shown if checkbox is not selected (only for visual picker variant)
162+
*/
163+
onRenderVisualPickerNotSelected: PropTypes.node,
164+
/**
165+
* Size of checkbox in case of visual composer variant
166+
*/
167+
size: PropTypes.oneOf(['medium', 'large']),
147168
};
148169

149170
const defaultProps = {
@@ -361,6 +382,83 @@ class Checkbox extends React.Component {
361382
</div>
362383
);
363384

385+
renderVisualPickerVariant = (props, assistiveText, labels) => (
386+
<span
387+
className={classNames(
388+
'slds-visual-picker',
389+
`slds-visual-picker_${this.props.size}`
390+
)}
391+
>
392+
<input
393+
aria-controls={this.props['aria-controls']}
394+
aria-describedby={this.props['aria-describedby']}
395+
aria-owns={this.props['aria-owns']}
396+
aria-required={this.props['aria-required']}
397+
disabled={props.disabled}
398+
/* A form element should not have both checked and defaultChecked props. */
399+
{...(props.checked !== undefined
400+
? { checked: props.checked }
401+
: { defaultChecked: props.defaultChecked })}
402+
id={this.getId()}
403+
name={props.name}
404+
onBlur={props.onBlur}
405+
onChange={this.handleChange}
406+
onFocus={props.onFocus}
407+
onKeyDown={props.onKeyDown}
408+
onKeyPress={props.onKeyPress}
409+
onKeyUp={props.onKeyUp}
410+
ref={(component) => {
411+
this.input = component;
412+
}}
413+
role={props.role}
414+
required={props.required}
415+
type="checkbox"
416+
/>
417+
<label className="slds-checkbox_button__label" htmlFor={this.getId()}>
418+
{this.props.coverable ? (
419+
<div className="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
420+
<span className="slds-is-selected">
421+
{this.props.onRenderVisualPickerSelected}
422+
</span>
423+
<span className="slds-is-not-selected">
424+
{this.props.onRenderVisualPickerNotSelected}
425+
</span>
426+
</div>
427+
) : (
428+
<span className="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center">
429+
{this.props.onRenderVisualPicker}
430+
</span>
431+
)}
432+
<span className="slds-visual-picker__body">
433+
{!this.props.coverable ? (
434+
<React.Fragment>
435+
<span className="slds-text-heading_small">
436+
{this.props.label}
437+
</span>
438+
<span className="slds-text-title">{this.props.description}</span>
439+
</React.Fragment>
440+
) : (
441+
<span className="slds-text-title">{this.props.label}</span>
442+
)}
443+
{assistiveText.label ? (
444+
<span className="slds-assistive-text">{assistiveText.label}</span>
445+
) : null}
446+
</span>
447+
{!this.props.coverable ? (
448+
<span className="slds-icon_container slds-visual-picker__text-check">
449+
<Icon
450+
assistiveText={this.props.assistiveText}
451+
category="utility"
452+
name="check"
453+
colorVariant="base"
454+
size="x-small"
455+
/>
456+
</span>
457+
) : null}
458+
</label>
459+
</span>
460+
);
461+
364462
render() {
365463
const assistiveText = {
366464
...defaultProps.assistiveText,
@@ -383,6 +481,7 @@ class Checkbox extends React.Component {
383481
base: this.renderBaseVariant,
384482
'button-group': this.renderButtonGroupVariant,
385483
toggle: this.renderToggleVariant,
484+
'visual-picker': this.renderVisualPickerVariant,
386485
};
387486
const variantExists = subRenders[this.props.variant];
388487

‎components/radio/index.jsx‎

Lines changed: 77 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import KEYS from '../../utilities/key-code';
1010
import { RADIO } from '../../utilities/constants';
1111
import getDataProps from '../../utilities/get-data-props';
1212
import Swatch from '../../components/color-picker/private/swatch';
13+
import Icon from '../icon';
1314

1415
const propTypes = {
1516
/**
@@ -61,7 +62,31 @@ const propTypes = {
6162
/**
6263
* Variant of the Radio button. Base is the default and button-group makes the radio button look like a normal button (should be a child of <RadioButtonGroup>).
6364
*/
64-
variant: PropTypes.oneOf(['base', 'button-group', 'swatch']),
65+
variant: PropTypes.oneOf(['base', 'button-group', 'swatch', 'visual-picker']),
66+
/**
67+
* Determines whether visual picker is coverable when selected (only for visual picker variant)
68+
*/
69+
coverable: PropTypes.bool,
70+
/**
71+
* Allows icon to shown if radio is not selected (only for non-coverable visual picker variant)
72+
*/
73+
onRenderVisualPicker: PropTypes.node,
74+
/**
75+
* Allows icon to shown if radio is not selected (only for visual picker variant)
76+
*/
77+
onRenderVisualPickerSelected: PropTypes.node,
78+
/**
79+
* Allows icon to shown if radio is not selected (only for visual picker variant)
80+
*/
81+
onRenderVisualPickerNotSelected: PropTypes.node,
82+
/**
83+
* Shows description for radio option (only for visual picker variant)
84+
*/
85+
description: PropTypes.string,
86+
/**
87+
* Allows icon to shown if radio is not selected (only for visual picker variant)
88+
*/
89+
size: PropTypes.oneOf(['medium', 'large']),
6590
/**
6691
* Ref callback that will pass in the radio's `input` tag
6792
*/
@@ -72,6 +97,7 @@ const propTypes = {
7297

7398
const defaultProps = {
7499
variant: 'base',
100+
coverable: false,
75101
};
76102

77103
/**
@@ -123,13 +149,57 @@ class Radio extends React.Component {
123149
</span>
124150
</label>
125151
);
126-
} else if (this.props.variant === 'button-group')
152+
} else if (this.props.variant === 'button-group') {
127153
radio = (
128154
<label className="slds-radio_button__label" htmlFor={this.getId()}>
129155
<span className="slds-radio_faux">{this.props.label}</span>
130156
</label>
131157
);
132-
else {
158+
} else if (this.props.variant === 'visual-picker') {
159+
radio = (
160+
<label htmlFor={this.getId()}>
161+
{this.props.coverable ? (
162+
<div className="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
163+
<span className="slds-is-selected">
164+
{this.props.onRenderVisualPickerSelected}
165+
</span>
166+
<span className="slds-is-not-selected">
167+
{this.props.onRenderVisualPickerNotSelected}
168+
</span>
169+
</div>
170+
) : (
171+
<span className="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center">
172+
{this.props.onRenderVisualPicker}
173+
</span>
174+
)}
175+
<span className="slds-visual-picker__body">
176+
{!this.props.coverable ? (
177+
<React.Fragment>
178+
<span className="slds-text-heading_small">
179+
{this.props.label}
180+
</span>
181+
<span className="slds-text-title">
182+
{this.props.description}
183+
</span>
184+
</React.Fragment>
185+
) : (
186+
<span className="slds-text-title">{this.props.label}</span>
187+
)}
188+
</span>
189+
{!this.props.coverable ? (
190+
<span className="slds-icon_container slds-visual-picker__text-check">
191+
<Icon
192+
assistiveText={this.props.assistiveText}
193+
category="utility"
194+
name="check"
195+
colorVariant="base"
196+
size="x-small"
197+
/>
198+
</span>
199+
) : null}
200+
</label>
201+
);
202+
} else {
133203
radio = (
134204
<label className="slds-radio__label" htmlFor={this.getId()}>
135205
<span className="slds-radio_faux" />
@@ -141,11 +211,15 @@ class Radio extends React.Component {
141211
return (
142212
<span
143213
className={classNames(
214+
this.props.variant === 'visual-picker'
215+
? `slds-visual-picker_${this.props.size}`
216+
: null,
144217
{
145218
'slds-radio':
146219
this.props.variant === 'base' || this.props.variant === 'swatch',
147220
'slds-button slds-radio_button':
148221
this.props.variant === 'button-group',
222+
'slds-visual-picker': this.props.variant === 'visual-picker',
149223
},
150224
this.props.className
151225
)}

0 commit comments

Comments
 (0)