feat(text-input): add experimental text-input (#1074)

* feat(text-input): add experimental text-input * chore: merge * chore: test * chore: test * chore: add lockfile back * fix: update border color * feat: add error icon to text input * chore: convert svg * chore: remove commented out code * chore: turn off feature flag * feat: fix text-input styles, add disabled styles * chore: fix duplicate IDs * chore: add comments to code * chore: add code comments * chore: update scripts in package json * chore: color updates
carbon-design-system · Sep 21, 2018 · b8bf8b8 · b8bf8b8
1 parent 29f0a51
commit b8bf8b8
Show file tree

Hide file tree

Showing 6 changed files with 2,361 additions and 1,461 deletions.
diff --git a/package.json b/package.json
@@ -167,6 +167,8 @@
   "scripts": {
     "build": "gulp build",
     "build-dev": "gulp build:dev",
+    "build-dev-rollup": "gulp build:dev --rollup",
+    "build-dev-rollup-experimental": "gulp build:dev --rollup -e",
     "ci-check": "sh ./tools/ci-check.sh",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "dev": "gulp serve",

diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -6,7 +6,7 @@
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/import-once';
 
-@include exports('form') {
+@mixin form {
   .#{$prefix}--fieldset {
     @include reset;
     margin-bottom: $spacing-xl;
@@ -96,3 +96,93 @@
     margin-bottom: $spacing-xs;
   }
 }
+
+@mixin form--experimental {
+  .#{$prefix}--fieldset {
+    @include reset;
+    margin-bottom: $spacing-xl;
+  }
+
+  .#{$prefix}--form-item {
+    @include font-family;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: flex-start;
+  }
+
+  .#{$prefix}--label {
+    @include reset;
+    @include font-family;
+    @include typescale('omega');
+    color: $text-01;
+    font-weight: $input-label-weight;
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: $spacing-xs;
+  }
+
+  .#{$prefix}--label .#{$prefix}--tooltip__trigger {
+    @include typescale('zeta');
+  }
+
+  .#{$prefix}--label--disabled {
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+
+  // Skeleton State
+  .#{$prefix}--label.#{$prefix}--skeleton {
+    @include skeleton;
+    width: rem(75px);
+    height: rem(14px);
+  }
+
+  input[data-invalid],
+  textarea[data-invalid],
+  select[data-invalid],
+  .#{$prefix}--list-box[data-invalid] {
+    box-shadow: 0 2px 0px 0px $support-01;
+
+    ~ .#{$prefix}--form-requirement {
+      max-height: rem(200px);
+      display: block;
+      color: $support-01;
+    }
+  }
+
+  // Fix for red ring when input is marked required in Firefox, refs #744
+  input:not(output):not([data-invalid]):-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  .#{$prefix}--form-requirement {
+    @include reset;
+    @include typescale('omega');
+    margin: $spacing-2xs 0 0;
+    max-height: 0;
+    overflow: hidden;
+    line-height: 1.5;
+    display: none;
+  }
+
+  .#{$prefix}--form__helper-text {
+    @include typescale('omega');
+    color: $text-02;
+    order: 1;
+    line-height: 1.5;
+    z-index: 0;
+    max-height: 3rem;
+    opacity: 1;
+    margin-top: $spacing-2xs;
+    margin-bottom: $spacing-xs;
+  }
+}
+
+@include exports('form') {
+  @if feature-flag-enabled('components-x') {
+    @include form--experimental;
+  } @else {
+    @include form;
+  }
+}
diff --git a/src/components/text-input/_text-input.scss b/src/components/text-input/_text-input.scss
@@ -11,7 +11,7 @@
 @import '../../globals/scss/import-once';
 @import '../form/form';
 
-@include exports('text-input') {
+@mixin text-input {
   .#{$prefix}--text-input {
     @include reset;
     @include font-family;
@@ -118,3 +118,81 @@
     }
   }
 }
+
+@mixin text-input--experimental {
+  .#{$prefix}--text-input {
+    @include reset;
+    @include typescale('zeta');
+    background-color: $field-01;
+    width: 100%;
+    height: rem(32px);
+    padding: 0 $spacing-xl 0 $spacing-md;
+    color: $text-01;
+    border: none;
+    outline: 1px solid $ui-04;
+    outline-offset: -1px;
+    padding-bottom: 1px;
+  }
+
+  .#{$prefix}--text-input:hover {
+    color: $text-01;
+    outline: 1px solid $brand-01;
+    outline-offset: -1px;
+  }
+
+  .#{$prefix}--text-input:focus,
+  .#{$prefix}--text-input:active {
+    outline: 2px solid $brand-01;
+    outline-offset: -2px;
+  }
+
+  .#{$prefix}--text-input::-webkit-input-placeholder {
+    color: $text-03;
+  }
+
+  //-----------------------------
+  // Disabled & Error icon spacing
+  //-----------------------------
+  .#{$prefix}--text-input:disabled,
+  .#{$prefix}--text-input[data-invalid],
+  .#{$prefix}--text-input:invalid,
+  .#{$prefix}--text-input[data-loading] {
+    padding-right: rem(40px);
+    background-repeat: no-repeat;
+    background-position: right 8px bottom 50%;
+  }
+
+  //-----------------------------
+  // Disabled
+  //-----------------------------
+  .#{$prefix}--text-input:disabled {
+    cursor: not-allowed;
+    // THIS SHOULD BE MOVED TO AN INLINE SVG IN NEXT MAJOR RELEASE
+    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--error--filled' fill='%23bebebe'%3e%3cpath d='M6.95 26.66A14 14 0 0 0 26.67 6.93zM16 2A14 14 0 0 0 5.35 25.07L25.08 5.34A13.93 13.93 0 0 0 16 2z'/%3e%3c/svg%3e");
+    outline: none;
+  }
+
+  .#{$prefix}--text-input:disabled::-webkit-input-placeholder {
+    color: $text-disabled;
+  }
+
+  //-----------------------------
+  // Error
+  //-----------------------------
+  .#{$prefix}--text-input[data-invalid],
+  .#{$prefix}--text-input:invalid {
+    outline: 2px solid $support-01;
+    outline-offset: -2px;
+    box-shadow: none;
+    // THIS SHOULD BE MOVED TO AN INLINE SVG IN THE HTML IN NEXT MAJOR RELEASE
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' class='ibm-icons ibm-icons--warning--filled' fill='%23da1e28'%3e%3cpath d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm-1 6h2v11h-2zm1 17a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 25z'/%3e%3c/svg%3e ");
+  }
+}
+
+@include exports('text-input') {
+  @if feature-flag-enabled('components-x') {
+    @include text-input--experimental;
+  } @else {
+    @include text-input;
+  }
+}
diff --git a/src/components/text-input/text-input.hbs b/src/components/text-input/text-input.hbs
@@ -1,10 +1,10 @@
 <div {{#if password}} data-text-input {{/if}} class="bx--form-item bx--text-input-wrapper">
   <label for="text-input-3" class="bx--label">Text Input label</label>
   {{#unless password}}
-  <input id="text-input-3" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
+  <input id="text-input-3" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Placeholder text">
   {{else}}
   <input id="text-input-3" type="password" class="bx--text-input {{#if light}} bx--text-input--light{{/if}}"
-    placeholder="Optional placeholder text" data-toggle-password-visibility>
+    placeholder="Placeholder text" data-toggle-password-visibility>
   <button class="bx--text-input--password__visibility">
     <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
       <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
@@ -21,10 +21,10 @@
   <label for="text-input-4" class="bx--label">Text Input label</label>
   {{#unless password}}
   <input data-invalid id="text-input-4" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}"
-    placeholder="Optional placeholder text">
+    placeholder="Placeholder text">
   {{else}}
   <input data-invalid id="text-input-4" type="password" class="bx--text-input {{#if light}} bx--text-input--light{{/if}}"
-    placeholder="Optional placeholder text" data-toggle-password-visibility>
+    placeholder="Placeholder text" data-toggle-password-visibility>
   <button class="bx--text-input--password__visibility">
     <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
       <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
@@ -43,10 +43,10 @@
 <div {{#if password}} data-text-input {{/if}} class="bx--form-item bx--text-input-wrapper">
   <label for="text-input-5" class="bx--label">Text Input label</label>
   {{#unless password}}
-  <input id="text-input-5" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
+  <input id="text-input-5" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Placeholder text">
   {{else}}
   <input id="text-input-5" type="password" class="bx--text-input {{#if light}} bx--text-input--light{{/if}}"
-    placeholder="Optional placeholder text" data-toggle-password-visibility>
+    placeholder="Placeholder text" data-toggle-password-visibility>
   <button class="bx--text-input--password__visibility">
     <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
       <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
@@ -65,10 +65,10 @@
 <div {{#if password}} data-text-input {{/if}} class="bx--form-item bx--text-input-wrapper" style="width: 320px">
   <label for="text-input-6" class="bx--label">Text Input label</label>
   {{#unless password}}
-  <input id="text-input-6" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text">
+  <input id="text-input-6" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Placeholder text">
   {{else}}
   <input id="text-input-6" type="password" class="bx--text-input {{#if light}} bx--text-input--light{{/if}}"
-    placeholder="Optional placeholder text" data-toggle-password-visibility>
+    placeholder="Placeholder text" data-toggle-password-visibility>
   <button class="bx--text-input--password__visibility">
     <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
       <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
@@ -87,11 +87,11 @@
 <div {{#if password}} data-text-input {{/if}} class="bx--form-item bx--text-input-wrapper">
   <label for="text-input-7" class="bx--label bx--label--disabled">Text Input label</label>
   {{#unless password}}
-  <input id="text-input-7" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Optional placeholder text"
+  <input id="text-input-7" type="text" class="bx--text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="Placeholder text"
     disabled>
   {{else}}
   <input id="text-input-7" type="password" class="bx--text-input {{#if light}} bx--text-input--light{{/if}}"
-    placeholder="Optional placeholder text" data-toggle-password-visibility disabled>
+    placeholder="Placeholder text" data-toggle-password-visibility disabled>
   <button class="bx--text-input--password__visibility">
     <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
       <path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>

diff --git a/src/globals/scss/_theme.scss b/src/globals/scss/_theme.scss
@@ -115,7 +115,7 @@
   $ui-05: $ibm-colors__gray--100 !default !global;
   $text-01: $ibm-colors__gray--100 !default !global;
   $text-02: $ibm-colors__gray--70 !default !global;
-  $text-03: $ibm-colors__gray--40 !default !global;
+  $text-03: $ibm-colors__gray--50 !default !global;
   $field-01: $ibm-colors__gray--10 !default !global;
   $field-02: $ibm-colors__gray--10 !default !global; // TODO: Define for experimental
   $support-01: $ibm-colors__red--60 !default !global;
@@ -143,6 +143,7 @@
   // Global
   $input-border: 1px solid transparent !default !global;
   $input-label-weight: 400 !default !global;
+  $text-disabled: $ibm-colors__gray--30 !default !global;
 
   // Button Theme Variables
   $button-font-weight: 400 !default !global;