fix(DatePicker): match experimental spec (#1966)

* fix(DatePicker): use new SVG icon markup * fix(DatePicker): use correct flatpickr config option * fix(DatePickerInput): match experimental markup * chore: update carbon-components
carbon-design-system · Mar 12, 2019 · 967e8a1 · 967e8a1
1 parent 0bd38c6
commit 967e8a1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/.yarn-offline-mirror/carbon-components-9.82.15.tgz b/.yarn-offline-mirror/carbon-components-9.82.15.tgz
diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js
@@ -272,7 +272,7 @@ export default class DatePicker extends Component {
               : '',
           clickOpens: true,
           nextArrow: this.rightArrowHTML(),
-          leftArrow: this.leftArrowHTML(),
+          prevArrow: this.leftArrowHTML(),
           onChange: (...args) => {
             if (onChange) {
               onChange(...args);
@@ -329,14 +329,26 @@ export default class DatePicker extends Component {
   };
 
   rightArrowHTML() {
-    return `
+    return componentsX
+      ? `
+      <svg width="16px" height="16px" viewBox="0 0 16 16">
+        <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+        <rect width="16" height="16" style="fill:none" />
+      </svg>`
+      : `
       <svg height="12" width="7" viewBox="0 0 7 12">
         <path d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"></path>
       </svg>`;
   }
 
   leftArrowHTML() {
-    return `
+    return componentsX
+      ? `
+      <svg width="16px" height="16px" viewBox="0 0 16 16">
+        <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+        <rect width="16" height="16" style="fill:none" />
+      </svg>`
+      : `
       <svg width="7" height="12" viewBox="0 0 7 12" fill-rule="evenodd">
         <path d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"></path>
       </svg>`;

diff --git a/src/components/DatePickerInput/DatePickerInput.js b/src/components/DatePickerInput/DatePickerInput.js
@@ -142,9 +142,21 @@ export default class DatePickerInput extends Component {
 
     return (
       <div className={containerClasses}>
-        {datePickerIcon}
-        {label}
-        {input}
+        {componentsX ? (
+          <>
+            {label}
+            <div className={`${prefix}--date-picker-input__wrapper`}>
+              {input}
+              {datePickerIcon}
+            </div>
+          </>
+        ) : (
+          <>
+            {datePickerIcon}
+            {label}
+            {input}
+          </>
+        )}
         {error}
       </div>
     );