Skip to content

Commit

Permalink
fix(color-picker-error-messages): add input error state ui and examples
Browse files Browse the repository at this point in the history
  • Loading branch information
Jade Pennig committed Aug 2, 2017
1 parent dd85217 commit b982bf7
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 44 deletions.
20 changes: 15 additions & 5 deletions ui/components/color-picker/base/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@
*/
.slds-color-picker {
position: relative;

.slds-form-error {
padding-top: $spacing-x-small;
color: $color-text-error;
font-size: 0.75rem;
}
}

/**
Expand Down Expand Up @@ -56,8 +62,12 @@
* @selector .slds-color-picker__summary-input
* @restrict .slds-color-picker__summary > input
*/
.slds-input.slds-color-picker__summary-input {
width: $size-xx-small;
.slds-color-picker__summary-input {
display: inline-block;

.slds-input {
width: $size-xx-small;
}
}

/**
Expand All @@ -77,13 +87,13 @@
background: $color-background;
}

.slds-tabs--default__item {
.slds-tabs_default__item {
text-transform: uppercase;
letter-spacing: 0.05rem;
}

.slds-tabs--default__content {
padding: $spacing-x-small 0;
.slds-tabs_default__content {
padding: $spacing-x-small 0 $spacing-xx-small;
}
}

Expand Down
12 changes: 11 additions & 1 deletion ui/components/color-picker/base/example.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ export default (
);

export const states = [
{
id: 'summary-error',
label: 'Summary Error',
element: <ColorPicker hasSummaryError />
},
{
id: 'color-picker-open',
label: 'Open, default tab selected',
Expand All @@ -17,6 +22,11 @@ export const states = [
{
id: 'custom-tab-selected',
label: 'Open, custom tab selected',
element: <ColorPicker selectedTabIndex={1} isOpen />
element: <ColorPicker isOpen selectedTabIndex={1} />
},
{
id: 'custom-tab-selected-error',
label: 'Open, custom tab selected, error state',
element: <ColorPicker isOpen hasCustomError selectedTabIndex={1} />
}
];
5 changes: 5 additions & 0 deletions ui/components/color-picker/custom-only/example.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,10 @@ export const states = [
id: 'custom-color-picker-open',
label: 'Open',
element: <ColorPicker isOpen hasPredefined={false} />
},
{
id: 'custom-color-picker-open-error',
label: 'Open with Error',
element: <ColorPicker isOpen hasCustomError hasPredefined={false} />
}
];
119 changes: 81 additions & 38 deletions ui/components/color-picker/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ const swatchColors = [
'#b85d0d'
];

const errorMessage = 'Please ensure value is correct';

/**
* Swatch Subcomponent
*/
Expand All @@ -60,33 +62,49 @@ const Swatch = (props) => {
/**
* Summary Subcomponent
*/
export const ColorPickerSummary = () => (
<div className="slds-color-picker__summary">
<label
className="slds-color-picker__summary-label"
htmlFor="color-picker-summary-input"
>
Choose Color
</label>

<Button className="slds-color-picker__summary-button slds-button_icon slds-button_icon-more" aria-haspopup title="Choose Color">
<Swatch color="hsl(220, 46%, 55%)" suppressAssistiveText />
<SvgIcon
className="slds-button__icon slds-button__icon_small"
sprite="utility"
symbol="down"
/>
<span className="slds-assistive-text">Choose a color</span>
</Button>

<input
type="text"
className="slds-color-picker__summary-input slds-input"
id="color-picker-summary-input"
defaultValue="#5679C0"
/>
</div>
);
export const ColorPickerSummary = (props) => {
const { hasSummaryError } = props;
const errorId = 'color-picker-summary-error';

return (
<div className="slds-color-picker__summary">
<label
className="slds-color-picker__summary-label"
htmlFor="color-picker-summary-input"
>
Choose Color
</label>

<Button className="slds-color-picker__summary-button slds-button_icon slds-button_icon-more" aria-haspopup title="Choose Color">
<Swatch color="hsl(220, 46%, 55%)" suppressAssistiveText />
<SvgIcon
className="slds-button__icon slds-button__icon_small"
sprite="utility"
symbol="down"
/>
<span className="slds-assistive-text">Choose a color</span>
</Button>

<FormElement
className={classNames('slds-color-picker__summary-input', {
'slds-has-error': hasSummaryError
})}
>
<Input
id="color-picker-summary-input"
defaultValue="#5679C0"
aria-describedby={ hasSummaryError ? errorId : null }
/>
</FormElement>

{hasSummaryError ? (
<p className="slds-form-error" id={errorId}>
{errorMessage}
</p>
) : null}
</div>
)
};

/**
* Swatches (list of Swatch elements) Subcomponent
Expand All @@ -112,12 +130,14 @@ export const ColorPickerSwatches = (props) => {
/**
* Custom Picker Subcomponent
*/
const ColorPickerCustom = () => {
const ColorPickerCustom = (props) => {
const rangeInputId = _.uniqueId('color-picker-input-range-');
const hexInputId = _.uniqueId('color-picker-input-hex-');
const rInputId = _.uniqueId('color-picker-input-r-');
const gInputId = _.uniqueId('color-picker-input-g-');
const bInputId = _.uniqueId('color-picker-input-b-');
const { hasCustomError } = props;
const customErrorId = 'color-picker-custom-error';

return (
<div className="slds-color-picker__custom">
Expand All @@ -144,10 +164,16 @@ const ColorPickerCustom = () => {
<div className="slds-color-picker__custom-inputs">
<FormElement
label="Hex"
className="slds-color-picker__input-custom-hex"
className={classNames('slds-color-picker__input-custom-hex', {
'slds-has-error': hasCustomError
})}
inputId={hexInputId}
>
<Input id={hexInputId} defaultValue="#5679C0" />
<Input
id={hexInputId}
defaultValue="#5679C0"
aria-describedby={ hasCustomError ? customErrorId : null }
/>
</FormElement>

<FormElement label={<abbr title="Red">R</abbr>} inputId={rInputId}>
Expand All @@ -162,6 +188,12 @@ const ColorPickerCustom = () => {
<Input defaultValue="192" id={bInputId} />
</FormElement>
</div>

{ hasCustomError ? (
<p className="slds-form-error" id={customErrorId}>
{errorMessage}
</p>
) : null }
</div>
);
}
Expand All @@ -171,8 +203,8 @@ const ColorPickerCustom = () => {
*/
const ColorPickerFooter = () => (
<div className="slds-color-picker__selector-footer">
<Button className="slds-button--neutral">Cancel</Button>
<Button className="slds-button--brand">Done</Button>
<Button className="slds-button_neutral">Cancel</Button>
<Button className="slds-button_brand">Done</Button>
</div>
);

Expand All @@ -186,7 +218,7 @@ const ColorPickerTabs = (props) => (
</Tabs.Item>

<Tabs.Item title="Custom" id="color-picker-custom">
<ColorPickerCustom />
<ColorPickerCustom hasCustomError={props.hasCustomError} />
</Tabs.Item>
</Tabs>
);
Expand All @@ -198,6 +230,11 @@ class ColorPicker extends React.Component {
this.state = {
selectedTabIndex: props.selectedTabIndex || 0
};

this.isFullFeatureMode = this.isFullFeatureMode.bind(this)
this.isPredefinedMode = this.isPredefinedMode.bind(this)
this.isCustomOnlyMode = this.isCustomOnlyMode.bind(this)
this.isSwatchesOnlyMode = this.isSwatchesOnlyMode.bind(this)
}

isFullFeatureMode() {
Expand All @@ -222,21 +259,27 @@ class ColorPicker extends React.Component {

render () {
const { selectedTabIndex } = this.state;
const { isOpen } = this.props;
const { isOpen, hasSummaryError, hasCustomError } = this.props;
const popoverState = isOpen ? 'slds-show' : 'slds-hide';
const colorPickerSummary = this.isSwatchesOnlyMode() ? null : <ColorPickerSummary />;
const colorPickerSummary = this.isSwatchesOnlyMode() ? null : (
<ColorPickerSummary hasSummaryError={hasSummaryError} />
);
const footerContent = this.isSwatchesOnlyMode() ? null : <ColorPickerFooter />;

let colorPickerContent = null;

if (this.isFullFeatureMode()) {
colorPickerContent = <ColorPickerTabs selectedTabIndex={selectedTabIndex} />
colorPickerContent = (
<ColorPickerTabs
hasCustomError={hasCustomError}
selectedTabIndex={selectedTabIndex}
/>
)
}
else if (this.isPredefinedMode()) {
colorPickerContent = <ColorPickerSwatches />
}
else if (this.isCustomOnlyMode()) {
colorPickerContent = <ColorPickerCustom />
colorPickerContent = <ColorPickerCustom hasCustomError={hasCustomError} />
}
else if (this.isSwatchesOnlyMode()) {
colorPickerContent = <ColorPickerSwatches />
Expand Down

0 comments on commit b982bf7

Please sign in to comment.