fix(color-picker-error-messages): add input error state ui and examples

salesforce-ux · Aug 2, 2017 · b982bf7 · b982bf7
1 parent dd85217
commit b982bf7
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 44 deletions.
diff --git a/ui/components/color-picker/base/_index.scss b/ui/components/color-picker/base/_index.scss
@@ -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;
+  }
 }
 
 /**
@@ -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;
+  }
 }
 
 /**
@@ -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;
   }
 }
 

diff --git a/ui/components/color-picker/base/example.jsx b/ui/components/color-picker/base/example.jsx
@@ -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',
@@ -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} />
   }
 ];
diff --git a/ui/components/color-picker/custom-only/example.jsx b/ui/components/color-picker/custom-only/example.jsx
@@ -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} />
   }
 ];
diff --git a/ui/components/color-picker/index.jsx b/ui/components/color-picker/index.jsx
@@ -44,6 +44,8 @@ const swatchColors = [
   '#b85d0d'
 ];
 
+const errorMessage = 'Please ensure value is correct';
+
 /**
  * Swatch Subcomponent
  */
@@ -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
@@ -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">
@@ -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}>
@@ -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>
   );
 }
@@ -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>
 );
 
@@ -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>
 );
@@ -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() {
@@ -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 />