feat(text-input): add read-only variant

packages/components/src/components/text-area/_text-area.scss

@@ -14,12 +14,17 @@
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/tooltip';
 @import '../form/form';
 
 /// Text area styles
 /// @access private
 /// @group text-area
 @mixin text-area {
+  .#{$prefix}--text-area__container {
+    position: relative;
+  }
+
   .#{$prefix}--text-area {
     @include reset;
     @include type-style('body-long-01');
@@ -38,32 +43,36 @@
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
 
-    & ~ .#{$prefix}--form__helper-text {
-      margin-top: 0;
-      order: 2;
+    &:focus,
+    &:active {
+      @include focus-outline('outline');
     }
 
-    & ~ .#{$prefix}--form-requirement {
-      order: 4;
-      color: $support-01;
-      font-weight: 400;
-      margin-top: $carbon--spacing-02;
+    &[readonly]:focus,
+    &[readonly]:active {
+      @include focus-outline('reset');
+    }
 
-      &::before {
-        display: none;
-      }
+    &::placeholder {
+      @include placeholder-colors;
+      @include type-style('body-long-01');
     }
   }
 
-  .#{$prefix}--text-area:focus,
-  .#{$prefix}--text-area:active {
-    @include focus-outline('outline');
+  .#{$prefix}--text-area ~ .#{$prefix}--form__helper-text {
+    margin-top: 0;
+    order: 2;
   }
 
-  .#{$prefix}--text-area::placeholder {
-    @include placeholder-colors;
-    @include type-style('body-long-01');
-    opacity: 1;
+  .#{$prefix}--text-area ~ .#{$prefix}--form-requirement {
+    order: 4;
+    color: $support-01;
+    font-weight: 400;
+    margin-top: $carbon--spacing-02;
+
+    &::before {
+      display: none;
+    }
   }
 
   .#{$prefix}--text-area--light {
@@ -77,6 +86,7 @@
   .#{$prefix}--text-area__wrapper {
     position: relative;
     display: flex;
+    width: 100%;
   }
 
   .#{$prefix}--text-area__invalid-icon {
@@ -86,6 +96,34 @@
     fill: $support-01;
   }
 
+  // -----------------
+  // Character counter
+  // -----------------
+  .#{$prefix}--text-area__character-counter-title {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .#{$prefix}--text-area__character-counter-title .#{$prefix}--label {
+    margin-right: rem(16px);
+  }
+
+  .#{$prefix}--text-area__character-counter-title
+    + .#{$prefix}--form__helper-text {
+    margin-top: rem(-6px);
+  }
+
+  .#{$prefix}--text-area--character-counter {
+    margin-bottom: $carbon--spacing-03;
+    @include type-style('label-01');
+    color: $text-02;
+  }
+
+  .#{$prefix}--text-area--character-counter--disabled {
+    color: $disabled-02;
+  }
+
   //-----------------------------
   // Disabled
   //-----------------------------
@@ -100,6 +138,40 @@
     color: $disabled-02;
   }
 
+  //-----------------------------
+  // Read only
+  //-----------------------------
+  .#{$prefix}--text-area[readonly] {
+    padding-right: $carbon--spacing-08;
+    text-overflow: ellipsis;
+    background-color: $field-02;
+  }
+
+  .#{$prefix}--text-area--light[readonly] {
+    background-color: $field-01;
+  }
+
+  .#{$prefix}--text-area__wrapper
+    > .#{$prefix}--text-area__readonly-icon.#{$prefix}--tooltip__trigger {
+    @include tooltip--trigger('icon', 'bottom');
+    @include tooltip--placement('icon', 'bottom', 'end');
+    z-index: z('floating') + 1;
+    position: absolute;
+    top: $carbon--spacing-04;
+    right: $carbon--spacing-05;
+    cursor: default;
+
+    &::after {
+      padding: 1rem;
+    }
+  }
+
+  .#{$prefix}--text-area__readonly-icon
+    + .#{$prefix}--tooltip--definition
+    > .#{$prefix}--tooltip__trigger {
+    border-bottom: none;
+  }
+
   // Skeleton State
   #{$prefix}--text-area.#{$prefix}--skeleton {
     @include skeleton;

packages/components/src/components/text-area/text-area.config.js

@@ -29,5 +29,22 @@ module.exports = {
         light: true,
       },
     },
+    {
+      name: 'character-counter',
+      label: 'Text area with character counter',
+      context: {
+        charCounter: true,
+        maxLength: 3500,
+      },
+    },
+    {
+      name: 'character-counter--light',
+      label: 'Text area with character counter (light)',
+      context: {
+        charCounter: true,
+        maxLength: 3500,
+        light: true,
+      },
+    },
   ],
 };

packages/components/src/components/text-area/text-area.hbs

@@ -5,47 +5,122 @@
   LICENSE file in the root directory of this source tree.
 -->
 
-<div class="{{@root.prefix}}--form-item">
-  <label for="text-area-2" class="{{@root.prefix}}--label">Text Area label</label>
-  <div class="{{@root.prefix}}--text-area__wrapper">
-    <textarea id="text-area-2"
-      class="{{@root.prefix}}--text-area {{@root.prefix}}--text-area--v2{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
-      rows="4" cols="50" placeholder="Placeholder text."></textarea>
+<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
+  {{#if charCounter}}
+  <div class="{{prefix}}--text-area__character-counter-title">
+    <label for="text-area-2" class="{{prefix}}--label">Text Area label</label>
+    <span class="{{prefix}}--text-area--character-counter">
+      <span class="{{prefix}}--text-area--character-counter--length">0</span>/<span
+        class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
+    </span>
+  </div>
+  {{else}}
+  <label for="text-area-2" class="{{prefix}}--label">Text Area label</label>
+  {{/if}}
+  <div class="{{prefix}}--text-area__wrapper">
+    <textarea id="text-area-2" class="{{prefix}}--text-area {{#if light}} {{prefix}}--text-area--light{{/if}}" rows="4"
+      cols="50" placeholder="Placeholder text." {{#if charCounter}} maxlength="{{maxLength}}" {{/if}}></textarea>
   </div>
 </div>
 
-<div class="{{@root.prefix}}--form-item">
-  <label for="text-area-3" class="{{@root.prefix}}--label">Text Area label</label>
-  <div class="{{@root.prefix}}--text-area__wrapper" data-invalid>
-    {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--text-area__invalid-icon')}}
+<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
+  {{#if charCounter}}
+  <div class="{{prefix}}--text-area__character-counter-title">
+    <label for="text-area-3" class="{{prefix}}--label">Text Area label</label>
+    <span class="{{prefix}}--text-area--character-counter">
+      <span class="{{prefix}}--text-area--character-counter--length">0</span>/<span
+        class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
+    </span>
+  </div>
+  {{else}}
+  <label for="text-area-3" class="{{prefix}}--label">Text Area label</label>
+  {{/if}}
+  <div class="{{prefix}}--text-area__wrapper" data-invalid>
+    {{ carbon-icon 'WarningFilled16' class=(add prefix '--text-area__invalid-icon')}}
     <textarea id="text-area-3"
-      class="{{@root.prefix}}--text-area {{@root.prefix}}--text-area--invalid {{@root.prefix}}--text-area--v2{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
-      rows="4" cols="50" placeholder="Placeholder text."></textarea>
+      class="{{prefix}}--text-area {{prefix}}--text-area--invalid {{#if light}} {{prefix}}--text-area--light{{/if}}"
+      rows="4" cols="50" placeholder="Placeholder text." {{#if charCounter}} maxlength="{{maxLength}}"
+      {{/if}}></textarea>
   </div>
-  <div class="{{@root.prefix}}--form-requirement">
+  <div class="{{prefix}}--form-requirement">
     Validation message here
   </div>
 </div>
 
-<div class="{{@root.prefix}}--form-item">
-  <label for="text-area-4" class="{{@root.prefix}}--label">Text Area label</label>
-  <div class="{{@root.prefix}}--form__helper-text">
+<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
+  {{#if charCounter}}
+  <div class="{{prefix}}--text-area__character-counter-title">
+    <label for="text-area-4" class="{{prefix}}--label">Text Area label</label>
+    <span class="{{prefix}}--text-area--character-counter">
+      <span class="{{prefix}}--text-area--character-counter--length">0</span>/<span
+        class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
+    </span>
+  </div>
+  {{else}}
+  <label for="text-area-4" class="{{prefix}}--label">Text Area label</label>
+  {{/if}}
+  <div class="{{prefix}}--form__helper-text">
     Optional helper text goes here
   </div>
-  <div class="{{@root.prefix}}--text-area__wrapper">
-    <textarea id="text-area-4"
-      class="{{@root.prefix}}--text-area {{@root.prefix}}--text-area--v2{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
-      rows="4" cols="50" placeholder="Placeholder text."></textarea>
+  <div class="{{prefix}}--text-area__wrapper">
+    <textarea id="text-area-4" class="{{prefix}}--text-area {{#if light}} {{prefix}}--text-area--light{{/if}}" rows="4"
+      cols="50" placeholder="Placeholder text." {{#if charCounter}} maxlength="{{maxLength}}" {{/if}}></textarea>
   </div>
 </div>
 
-<div class="bx--form-item">
-  <label for="text-area-5" class="bx--label bx--label--disabled">Text Area label</label>
-  <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">
+<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
+  {{#if charCounter}}
+  <div class="{{prefix}}--text-area__character-counter-title">
+    <label for="text-area-5" class="{{prefix}}--label {{prefix}}--label--disabled">Text Area label</label>
+    <span class="{{prefix}}--text-area--character-counter {{prefix}}--text-area--character-counter--disabled">
+      <span class="{{prefix}}--text-area--character-counter--length">0</span>/<span
+        class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
+    </span>
+  </div>
+  {{else}}
+  <label for="text-area-5" class="{{prefix}}--label {{prefix}}--label--disabled">Text Area label</label>
+  {{/if}}
+  <div class="{{prefix}}--form__helper-text {{prefix}}--form__helper-text--disabled">
     Optional helper text goes here
   </div>
-  <div class="{{@root.prefix}}--text-area__wrapper">
-    <textarea id="text-area-5" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4"
-      cols="50" placeholder="Placeholder text." disabled></textarea>
+  <div class="{{prefix}}--text-area__wrapper">
+    <textarea id="text-area-5" class="{{prefix}}--text-area {{#if light}} {{prefix}}--text-area--light{{/if}}" rows="4"
+      cols="50" placeholder="Placeholder text." disabled{{#if charCounter}} maxlength="{{maxLength}}"
+      {{/if}}></textarea>
+  </div>
+</div>
+
+
+<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
+  {{#if charCounter}}
+  <div class="{{prefix}}--text-area__character-counter-title">
+    <label for="text-area-6" class="{{prefix}}--label">Text Area label</label>
+    <span class="{{prefix}}--text-area--character-counter">
+      <span class="{{prefix}}--text-area--character-counter--length">243</span>/<span
+        class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
+    </span>
+  </div>
+  {{else}}
+  <label for="text-area-6" class="{{prefix}}--label">Text Area label</label>
+  {{/if}}
+  <div class="{{prefix}}--text-area__wrapper">
+    <button
+      class="{{prefix}}--text-area__readonly-icon {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom">
+      <span class="{{@root.prefix}}--assistive-text">This field cannot be edited to ensure successful
+        provisioning</span>
+      {{ carbon-icon 'EditOff16' }}
+    </button>
+    <div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
+      <div aria-describedby="unique-tooltip"
+        class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-center">
+        <textarea id="text-area-6" class="{{prefix}}--text-area {{#if light}} {{prefix}}--text-area--light{{/if}}"
+          rows="4" cols="50" placeholder="Placeholder text." {{#if charCounter}} maxlength="{{maxLength}}" {{/if}}
+          readonly>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat cupiditate sapiente ullam. Quod voluptate facere, dolore sit natus repellendus sint dolorem nesciunt eos vitae magni reprehenderit voluptatibus, exercitationem ducimus reiciendis.</textarea>
+      </div>
+      <div class="bx--assistive-text" id="unique-tooltip" role="tooltip">Lorem ipsum dolor sit amet consectetur
+        adipisicing elit. Fugiat cupiditate sapiente ullam. Quod voluptate
+        facere, dolore sit natus repellendus sint dolorem nesciunt eos vitae magni reprehenderit voluptatibus,
+        exercitationem ducimus reiciendis.</div>
+    </div>
   </div>
 </div>