Fix(datepicker): Prevent input error styling from applying to datepic…

…ker select (#3119)
salesforce-ux · Mar 7, 2018 · 0fa0165 · 0fa0165
1 parent 741c2a4
commit 0fa0165
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/ui/components/datepickers/base/_index.scss b/ui/components/datepickers/base/_index.scss
@@ -119,6 +119,11 @@
   }
 }
 
+.slds-has-error .slds-datepicker__filter .slds-select {
+  border: $border-width-thin solid $color-border-input;
+  box-shadow: none;
+}
+
 /**
  * @summary Indicates days that are in previous/next months
  *

diff --git a/ui/components/datepickers/base/example.jsx b/ui/components/datepickers/base/example.jsx
@@ -428,5 +428,26 @@ export let states = [
         />
       </FormElement>
     )
+  },
+  {
+    id: 'datepicker-with-error',
+    label: 'Date Picker has Error',
+    element: (
+      <FormElement
+        className="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open slds-has-error"
+        label="Date"
+        inputId={dateInputId}
+        inputIcon="right"
+        dropdown={<DatePicker todayActive />}
+      >
+        <Input id={dateInputId} placeholder=" " />
+        <ButtonIcon
+          className="slds-input__icon slds-input__icon_right"
+          symbol="event"
+          assistiveText="Select a date"
+          title="Select a date"
+        />
+      </FormElement>
+    )
   }
 ];