[WIP] feat(inputs): new inputs (#710)

* feat(text-input): started working on new styles * feat(text-inputs): added new variations of text inputs * feat(text-inputs): added new styles to text area * feat(text-inputs): added new styles to date picker * feat(inputs): finished up first iteration of inptus
carbon-design-system · Apr 18, 2018 · b740252 · b740252
1 parent 1c3081b
commit b740252
Show file tree

Hide file tree

Showing 34 changed files with 1,119 additions and 37 deletions.
diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss
@@ -333,4 +333,66 @@
     width: rem(225px);
     margin-bottom: $spacing-2xs;
   }
+
+  .#{$prefix}--date-picker__calendar--v2.open {
+    margin-top: 1px !important;
+  }
+
+  .#{$prefix}--date-picker--v2 {
+    .#{$prefix}--date-picker-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    & ~ .#{$prefix}--label {
+      order: 1;
+    }
+  }
+
+  .#{$prefix}--date-picker--v2 .#{$prefix}--date-picker__input {
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 2;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 2px 0 0 $brand-01;
+    }
+
+    &:focus ~ .#{$prefix}--label {
+      color: $brand-01;
+    }
+
+    &[data-invalid],
+    &[data-invalid]:focus {
+      box-shadow: 0 2px 0 0 $support-01;
+    }
+
+    &[data-invalid]:focus + .#{$prefix}--label {
+      color: $support-01;
+    }
+
+    & ~ .#{$prefix}--form-requirement {
+      order: 3;
+      color: $support-01;
+      font-weight: 400;
+      margin-top: $spacing-2xs;
+      overflow: visible;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &:focus ~ .#{$prefix}--form__helper-text {
+      z-index: 0;
+      max-height: 3rem;
+      opacity: 1;
+      margin-bottom: $spacing-xs;
+    }
+  }
+
+  .#{$prefix}--date-picker--light input {
+    background: $field-02;
+  }
 }
diff --git a/src/components/date-picker/date-picker--range-v2-light.html b/src/components/date-picker/date-picker--range-v2-light.html
@@ -0,0 +1,41 @@
+<!-- Ranged -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="range" data-date-picker-version="v2" class="bx--date-picker bx--date-picker--range bx--date-picker--v2 bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-from />
+      <label for="date-picker-1" class="bx--label">Start date label</label>
+    </div>
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-to />
+      <label for="date-picker-2" class="bx--label">End date label</label>
+    </div>
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    </svg>
+  </div>
+</div>
+
+<!-- Ranged -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="range" data-date-picker-version="v2" class="bx--date-picker bx--date-picker--range bx--date-picker--v2 bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-from />
+      <label for="date-picker-1" class="bx--label">Start date label</label>
+    </div>
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-to />
+      <label for="date-picker-2" class="bx--label">End date label</label>
+    </div>
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    </svg>
+  </div>
+</div>
diff --git a/src/components/date-picker/date-picker--range-v2.html b/src/components/date-picker/date-picker--range-v2.html
@@ -0,0 +1,42 @@
+<!-- Ranged -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="range" data-date-picker-version="v2" class="bx--date-picker bx--date-picker--range bx--date-picker--v2">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-from />
+      <label for="date-picker-1" class="bx--label">Start date label</label>
+    </div>
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-to />
+      <label for="date-picker-2" class="bx--label">End date label</label>
+    </div>
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    </svg>
+  </div>
+</div>
+
+<!-- Ranged -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="range" data-date-picker-version="v2" class="bx--date-picker bx--date-picker--range bx--date-picker--v2 bx--input--light">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-1" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-from />
+      <label for="date-picker-1" class="bx--label">Start date label</label>
+    </div>
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-2" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input-to />
+      <label for="date-picker-2" class="bx--label">End date label</label>
+    </div>
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    </svg>
+  </div>
+</div>
+
diff --git a/src/components/date-picker/date-picker--single-v2-light.html b/src/components/date-picker/date-picker--single-v2-light.html
@@ -0,0 +1,30 @@
+<!-- Basic with calendar -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="single" data-date-picker-version="v2" class="bx--date-picker bx--date-picker--single bx--date-picker--v2 bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+      </svg>
+      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input />
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
+    </div>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="single" data-date-picker-version="v2" class="bx--date-picker bx--date-picker--single bx--date-picker--v2 bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+      </svg>
+      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input />
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
+    </div>
+  </div>
+</div>
diff --git a/src/components/date-picker/date-picker--single-v2.html b/src/components/date-picker/date-picker--single-v2.html
@@ -0,0 +1,30 @@
+<!-- Basic with calendar -->
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="single" data-date-picker-version="v2" class="bx--date-picker bx--date-picker--single bx--date-picker--v2">
+    <div class="bx--date-picker-container">
+      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+      </svg>
+      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input />
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
+    </div>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div data-date-picker data-date-picker-type="single" data-date-picker-version="v2" class="bx--date-picker bx--date-picker--single bx--date-picker--v2 bx--input--light">
+    <div class="bx--date-picker-container">
+      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
+        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
+        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
+        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+      </svg>
+      <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input />
+      <label for="date-picker-3" class="bx--label">Date Picker label</label>
+    </div>
+  </div>
+</div>
diff --git a/src/components/date-picker/date-picker--v2-light.html b/src/components/date-picker/date-picker--v2-light.html
@@ -0,0 +1,35 @@
+<div class="bx--form-item">
+  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short bx--date-picker--v2 bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
+      />
+      <label for="date-picker-4" class="bx--label">Date Picker label</label>
+    </div>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short bx--date-picker--v2 bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-5" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
+      />
+      <label for="date-picker-5" class="bx--label">Date Picker label</label>
+      <div class="bx--form__helper-text">
+        Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--v2 bx--date-picker--light">
+    <div class="bx--date-picker-container">
+      <input data-invalid type="text" id="date-picker-6" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input />
+      <label for="date-picker-6" class="bx--label">Date Picker label</label>
+      <div class="bx--form-requirement">
+        Invalid date format.
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/date-picker/date-picker--v2.html b/src/components/date-picker/date-picker--v2.html
@@ -0,0 +1,35 @@
+<div class="bx--form-item">
+  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short bx--date-picker--v2">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-4" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
+      />
+      <label for="date-picker-4" class="bx--label">Date Picker label</label>
+    </div>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--short bx--date-picker--v2">
+    <div class="bx--date-picker-container">
+      <input type="text" id="date-picker-5" class="bx--date-picker__input" pattern="\d{1,2}/\d{4}" placeholder="mm/yyyy" data-date-picker-input
+      />
+      <label for="date-picker-5" class="bx--label">Date Picker label</label>
+      <div class="bx--form__helper-text">
+        Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="bx--form-item">
+  <div class="bx--date-picker bx--date-picker--simple bx--date-picker--v2">
+    <div class="bx--date-picker-container">
+      <input data-invalid type="text" id="date-picker-6" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
+        data-date-picker-input />
+      <label for="date-picker-6" class="bx--label">Date Picker label</label>
+      <div class="bx--form-requirement">
+        Invalid date format.
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/date-picker/date-picker.js b/src/components/date-picker/date-picker.js
@@ -259,7 +259,12 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
 
   _updateClassNames = calendar => {
     const calendarContainer = calendar.calendarContainer;
-    calendarContainer.classList.add(this.options.classCalendarContainer);
+    if (this.element.dataset.datePickerVersion === 'v2') {
+      calendarContainer.classList.add(this.options.classCalendarContainer);
+      calendarContainer.classList.add(this.options.classCalendarContainerV2);
+    } else {
+      calendarContainer.classList.add(this.options.classCalendarContainer);
+    }
     calendarContainer.querySelector('.flatpickr-month').classList.add(this.options.classMonth);
     calendarContainer.querySelector('.flatpickr-weekdays').classList.add(this.options.classWeekdays);
     calendarContainer.querySelector('.flatpickr-days').classList.add(this.options.classDays);
@@ -320,6 +325,7 @@ class DatePicker extends mixin(createComponent, initComponentBySearch, handles)
       selectorDatePickerInputTo: '[data-date-picker-input-to]',
       selectorDatePickerIcon: '[data-date-picker-icon]',
       classCalendarContainer: `${prefix}--date-picker__calendar`,
+      classCalendarContainerV2: `${prefix}--date-picker__calendar--v2`,
       classMonth: `${prefix}--date-picker__month`,
       classWeekdays: `${prefix}--date-picker__weekdays`,
       classDays: `${prefix}--date-picker__days`,

diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
@@ -37,6 +37,10 @@
     }
   }
 
+  .#{$prefix}--dropdown--light {
+    background-color: $field-02;
+  }
+
   .#{$prefix}--dropdown--up {
     &.#{$prefix}--dropdown--open:focus {
       box-shadow: 0 1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01;
@@ -154,4 +158,23 @@
       outline: none;
     }
   }
+
+  .#{$prefix}--dropdown--v2 {
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 1;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 2px 0 0 $brand-01;
+    }
+  }
+
+  .#{$prefix}--dropdown--v2.#{$prefix}--dropdown--open:focus {
+    box-shadow: none;
+
+    .#{$prefix}--dropdown-list {
+      box-shadow: 0 2px 0 0 $brand-01;
+    }
+  }
 }
diff --git a/src/components/dropdown/dropdown--v2-light.html b/src/components/dropdown/dropdown--v2-light.html
@@ -0,0 +1,25 @@
+<ul data-dropdown data-value class="bx--dropdown bx--dropdown--v2 bx--dropdown--light" tabindex="0">
+  <li class="bx--dropdown-text">Dropdown label</li>
+  <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+    <path d="M10 0L5 5 0 0z"></path>
+  </svg>
+  <li>
+    <ul class="bx--dropdown-list">
+      <li data-option data-value="all" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a>
+      </li>
+      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a>
+      </li>
+      <li data-option data-value="staging" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
+      </li>
+      <li data-option data-value="dea" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a>
+      </li>
+      <li data-option data-value="router" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a>
+      </li>
+    </ul>
+  </li>
+</ul>
diff --git a/src/components/dropdown/dropdown--v2.html b/src/components/dropdown/dropdown--v2.html
@@ -0,0 +1,25 @@
+<ul data-dropdown data-value class="bx--dropdown bx--dropdown--v2" tabindex="0">
+  <li class="bx--dropdown-text">Dropdown label</li>
+  <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+    <path d="M10 0L5 5 0 0z"></path>
+  </svg>
+  <li>
+    <ul class="bx--dropdown-list">
+      <li data-option data-value="all" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a>
+      </li>
+      <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a>
+      </li>
+      <li data-option data-value="staging" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
+      </li>
+      <li data-option data-value="dea" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a>
+      </li>
+      <li data-option data-value="router" class="bx--dropdown-item">
+        <a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a>
+      </li>
+    </ul>
+  </li>
+</ul>