feat: 1030 update for text components (#1186)

* feat: 1030 update for text components * chore: fix snap * chore: text input snap * chore: merge update of snap Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
carbon-design-system · May 10, 2021 · 71f7848 · 71f7848
1 parent 3584b05
commit 71f7848
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 20 deletions.
diff --git a/packages/core/__tests__/__snapshots__/cv-text-area.test.js.snap b/packages/core/__tests__/__snapshots__/cv-text-area.test.js.snap
@@ -32,19 +32,19 @@ exports[`CvTextArea should render correctly when helper text slot is provided 1`
 exports[`CvTextArea should render correctly when invalid message is provided 1`] = `
 <div class="cv-text-area bx--form-item"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-area__wrapper" data-invalid="true">
-    <warningfilled16-stub class="bx--text-area__invalid-icon"></warningfilled16-stub> <textarea id="1" class="bx--text-area bx--text-area--invalid"></textarea>
+    <warningfilled16-stub class="bx--text-area__invalid-icon"></warningfilled16-stub> <textarea id="1" class="bx--text-area bx--text-area--invalid" aria-invalid="true" aria-describedby="error-1"></textarea>
   </div>
-  <div class="bx--form-requirement">invalid test message</div>
+  <div id="error-1" class="bx--form-requirement">invalid test message</div>
   <!---->
 </div>
 `;
 
 exports[`CvTextArea should render correctly when invalid message slot is provided 1`] = `
 <div class="cv-text-area bx--form-item"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-area__wrapper" data-invalid="true">
-    <warningfilled16-stub class="bx--text-area__invalid-icon"></warningfilled16-stub> <textarea id="1" class="bx--text-area bx--text-area--invalid"></textarea>
+    <warningfilled16-stub class="bx--text-area__invalid-icon"></warningfilled16-stub> <textarea id="1" class="bx--text-area bx--text-area--invalid" aria-invalid="true" aria-describedby="error-1"></textarea>
   </div>
-  <div class="bx--form-requirement">
+  <div id="error-1" class="bx--form-requirement">
     <div class="invalid-message-class">invalid message slot</div>
   </div>
   <!---->

diff --git a/packages/core/__tests__/__snapshots__/cv-text-input.test.js.snap b/packages/core/__tests__/__snapshots__/cv-text-input.test.js.snap
@@ -3,32 +3,38 @@
 exports[`CvTextInput should render correctly 1`] = `
 <div class="cv-text-input bx--form-item bx--text-input-wrapper"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-input__field-wrapper">
+    <!---->
     <!----> <input id="1" type="text" class="bx--text-input">
     <!---->
   </div>
   <!---->
   <!---->
+  <!---->
 </div>
 `;
 
 exports[`CvTextInput should render correctly when helper text is provided 1`] = `
 <div class="cv-text-input bx--form-item bx--text-input-wrapper"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-input__field-wrapper">
+    <!---->
     <!----> <input id="1" type="text" class="bx--text-input">
     <!---->
   </div>
   <!---->
+  <!---->
   <div class="bx--form__helper-text">helper test message</div>
 </div>
 `;
 
 exports[`CvTextInput should render correctly when helper text slot is provided 1`] = `
 <div class="cv-text-input bx--form-item bx--text-input-wrapper"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-input__field-wrapper">
+    <!---->
     <!----> <input id="1" type="text" class="bx--text-input">
     <!---->
   </div>
   <!---->
+  <!---->
   <div class="bx--form__helper-text">
     <div class="helper-text-class">helper text slot</div>
   </div>
@@ -38,56 +44,66 @@ exports[`CvTextInput should render correctly when helper text slot is provided 1
 exports[`CvTextInput should render correctly when invalid message is provided 1`] = `
 <div class="cv-text-input bx--form-item bx--text-input-wrapper"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-input__field-wrapper" data-invalid="true">
-    <warningfilled16-stub class="bx--text-input__invalid-icon"></warningfilled16-stub> <input id="1" type="text" class="bx--text-input bx--text-input--invalid">
+    <warningfilled16-stub class="bx--text-input__invalid-icon"></warningfilled16-stub>
+    <!----> <input id="1" type="text" class="bx--text-input bx--text-input--invalid">
     <!---->
   </div>
   <div class="bx--form-requirement">invalid test message</div>
   <!---->
+  <!---->
 </div>
 `;
 
 exports[`CvTextInput should render correctly when invalid message slot is provided 1`] = `
 <div class="cv-text-input bx--form-item bx--text-input-wrapper"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-input__field-wrapper" data-invalid="true">
-    <warningfilled16-stub class="bx--text-input__invalid-icon"></warningfilled16-stub> <input id="1" type="text" class="bx--text-input bx--text-input--invalid">
+    <warningfilled16-stub class="bx--text-input__invalid-icon"></warningfilled16-stub>
+    <!----> <input id="1" type="text" class="bx--text-input bx--text-input--invalid">
     <!---->
   </div>
   <div class="bx--form-requirement">
     <div class="invalid-message-class">invalid message slot</div>
   </div>
   <!---->
+  <!---->
 </div>
 `;
 
 exports[`CvTextInput should render correctly when light theme is used 1`] = `
 <div class="cv-text-input bx--form-item bx--text-input-wrapper"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-input__field-wrapper">
+    <!---->
     <!----> <input id="1" type="text" class="bx--text-input bx--text-input--light">
     <!---->
   </div>
   <!---->
   <!---->
+  <!---->
 </div>
 `;
 
 exports[`CvTextInput should render correctly when type is password and is not visible 1`] = `
 <div class="cv-text-input bx--form-item bx--text-input-wrapper bx--password-input-wrapper"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-input__field-wrapper">
+    <!---->
     <!----> <input id="1" data-toggle-password-visibility="true" type="password" class="bx--text-input bx--password-input"> <button type="button" class="bx--btn bx--text-input--password__visibility__toggle bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"><span class="bx--assistive-text">Show password</span>
       <view16-stub class="bx--icon-visibility-off"></view16-stub>
     </button></div>
   <!---->
   <!---->
+  <!---->
 </div>
 `;
 
 exports[`CvTextInput should render correctly when type is password and is visible 1`] = `
 <div class="cv-text-input bx--form-item bx--text-input-wrapper bx--password-input-wrapper"><label for="1" class="bx--label">test label</label>
   <div class="bx--text-input__field-wrapper">
+    <!---->
     <!----> <input id="1" data-toggle-password-visibility="true" type="password" class="bx--text-input bx--password-input"> <button type="button" class="bx--btn bx--text-input--password__visibility__toggle bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"><span class="bx--assistive-text">Show password</span>
       <view16-stub class="bx--icon-visibility-off"></view16-stub>
     </button></div>
   <!---->
   <!---->
+  <!---->
 </div>
 `;
diff --git a/packages/core/src/components/cv-tag/cv-tag.vue b/packages/core/src/components/cv-tag/cv-tag.vue
@@ -1,6 +1,7 @@
 <template>
   <component
-    :is="!isFilter || !hasClickListener ? 'div' : 'button'"
+    :is="!isFilter && hasClickListener ? 'button' : 'div'"
+    v-on="this.$listeners"
     :id="uid"
     :class="[
       `cv-tag ${carbonPrefix}--tag`,
@@ -10,7 +11,6 @@
         [`${carbonPrefix}--tag--${size}`]: size,
       },
     ]"
-    role="listitem"
     :title="title"
     @keydown.enter.stop.prevent="$emit('remove')"
     @keydown.space.prevent

diff --git a/packages/core/src/components/cv-text-area/cv-text-area-notes.md b/packages/core/src/components/cv-text-area/cv-text-area-notes.md
@@ -16,6 +16,7 @@ http://www.carbondesignsystem.com/components/text-input/code
 - invalid-message: optional error message
 - label: the label text for the text area
 - light: Lighter variant, typically alternate background
+- placeholder: standard behavior
 - theme: (deprecated use light) '' or 'light'
 - value: optional initial value of the text area,
 

diff --git a/packages/core/src/components/cv-text-area/cv-text-area.vue b/packages/core/src/components/cv-text-area/cv-text-area.vue
@@ -13,6 +13,8 @@
     <div :class="`${carbonPrefix}--text-area__wrapper`" :data-invalid="isInvalid">
       <WarningFilled16 v-if="isInvalid" :class="`${carbonPrefix}--text-area__invalid-icon`" />
       <textarea
+        :aria-invalid="isInvalid"
+        :aria-describedby="isInvalid ? errorId : undefined"
         :id="uid"
         :class="[
           `${carbonPrefix}--text-area`,
@@ -27,11 +29,11 @@
         ref="textarea"
       ></textarea>
     </div>
-    <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
+    <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid" :id="errorId">
       <slot name="invalid-message">{{ invalidMessage }}</slot>
     </div>
     <div
-      v-if="!isInvalid && isHelper"
+      v-if="isHelper"
       :class="[
         `${carbonPrefix}--form__helper-text`,
         { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
@@ -56,11 +58,13 @@ export default {
     invalidMessage: { type: String, default: undefined },
     label: String,
     value: String,
+    warnText: { type: String, default: undefined },
   },
   data() {
     return {
       isHelper: false,
       isInvalid: false,
+      isWarn: false,
     };
   },
   mounted() {
@@ -70,6 +74,9 @@ export default {
     this.checkSlots();
   },
   computed: {
+    errorId() {
+      return `error-${this.uid}`;
+    },
     // Bind listeners at the component level to the embedded input element and
     // add our own input listener to service the v-model. See:
     // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
@@ -84,7 +91,7 @@ export default {
     checkSlots() {
       // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
-      this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
+      this.isHelper = !this.isInvalid && !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
   },
 };

diff --git a/packages/core/src/components/cv-text-input/cv-text-input-notes.md b/packages/core/src/components/cv-text-input/cv-text-input-notes.md
@@ -22,6 +22,7 @@ http://www.carbondesignsystem.com/components/text-input/code
 - theme: (deprecated use light) '' or 'light'
 - type: If 'password' adds password features
 - value: optional initial value of the text input,
+- warn-text: optional used to convey a warning
 
 Other standard props e.g. disabled and placeholder
 
@@ -33,3 +34,4 @@ Focus - sets focus to the text input
 
 - helper-text: optional and overrides the helper-text attribute
 - invalid-message: optional and overrides the invalid-message attribute
+- warn-text: optional and overrides the warn-text attribute
diff --git a/packages/core/src/components/cv-text-input/cv-text-input.vue b/packages/core/src/components/cv-text-input/cv-text-input.vue
@@ -17,15 +17,27 @@
       ]"
       >{{ label }}</label
     >
-    <div :class="`${carbonPrefix}--text-input__field-wrapper`" :data-invalid="isInvalid">
+    <div
+      :class="[
+        `${carbonPrefix}--text-input__field-wrapper`,
+        { [`${carbonPrefix}--text-input__field-wrapper--warning`]: !isInvalid && isWarn },
+      ]"
+      :data-invalid="isInvalid"
+    >
       <WarningFilled16 v-if="isInvalid" :class="`${carbonPrefix}--text-input__invalid-icon`" />
+      <WarningAltFilled16
+        v-if="isWarn"
+        :class="`${carbonPrefix}--text-input__invalid-icon ${carbonPrefix}--text-input__invalid-icon--warning`"
+      />
+
       <input
         :id="uid"
         :class="[
           `${carbonPrefix}--text-input`,
           {
             [`${carbonPrefix}--text-input--light`]: isLight,
             [`${carbonPrefix}--text-input--invalid`]: isInvalid,
+            [`${carbonPrefix}--text-input--warning`]: isWarn,
             [`${carbonPrefix}--password-input`]: isPassword,
           },
         ]"
@@ -57,8 +69,11 @@
     <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
       <slot name="invalid-message">{{ invalidMessage }}</slot>
     </div>
+    <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
+      <slot name="warn-text">{{ warnText }}</slot>
+    </div>
     <div
-      v-if="!isInvalid && isHelper"
+      v-if="isHelper"
       :class="[
         `${carbonPrefix}--form__helper-text`,
         { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
@@ -71,13 +86,11 @@
 
 <script>
 import { uidMixin, themeMixin, methodsMixin, carbonPrefixMixin } from '../../mixins';
-import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
-import View16 from '@carbon/icons-vue/es/view/16';
-import ViewOff16 from '@carbon/icons-vue/es/view--off/16';
+import { WarningFilled16, WarningAltFilled16, View16, ViewOff16 } from '@carbon/icons-vue';
 
 export default {
   name: 'CvTextInput',
-  components: { WarningFilled16, View16, ViewOff16 },
+  components: { WarningFilled16, WarningAltFilled16, View16, ViewOff16 },
   mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   inheritAttrs: false,
   props: {
@@ -89,13 +102,15 @@ export default {
     passwordVisible: Boolean,
     type: String,
     value: String,
+    warnText: { type: String, default: undefined },
   },
   data() {
     return {
       dataPasswordVisible: this.isPassword && this.passwordVisible,
       dataType: this.type,
       isHelper: false,
       isInvalid: false,
+      isWarn: false,
     };
   },
   mounted() {
@@ -138,7 +153,11 @@ export default {
     checkSlots() {
       // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
-      this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
+      this.isWarn = !this.isInvalid && !!(this.$slots['warn-text'] || (this.warnText && this.warnText.length));
+      this.isHelper =
+        !this.isInvalid &&
+        !this.isWarn &&
+        !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
     togglePasswordVisibility() {
       const currentValue = this.$refs.input.value;

diff --git a/storybook/stories/cv-tag-story.js b/storybook/stories/cv-tag-story.js
@@ -79,6 +79,11 @@ let variants = [
     name: 'filter clear aria label',
     extra: { kind: { group: 'attr', value: 'filter @remove="onRemove"' } },
   },
+  {
+    name: 'interactive',
+    excludes: ['clearAriaLabel'],
+    extra: { kind: { group: 'attr', value: '@click="onClick"' } },
+  },
 ];
 
 let storySet = knobsHelper.getStorySet(variants, preKnobs);
@@ -110,6 +115,7 @@ for (const story of storySet) {
         template: templateViewString,
         props: settings.props,
         methods: {
+          onClick: action('Interactive as clicked'),
           onRemove: action('Filter remove event'),
         },
       };

diff --git a/storybook/stories/cv-text-input-story.js b/storybook/stories/cv-text-input-story.js
@@ -102,14 +102,26 @@ const preKnobs = {
     slot: 'invalid-message',
     value: 'Invalid message text',
   },
+  warnText: {
+    group: 'attr',
+    type: text,
+    config: ['warn text', ''],
+    prop: 'warn-text',
+    value: val => (val.length ? val : undefined),
+  },
+  warnTextSlot: {
+    group: 'slots',
+    slot: 'warn-text',
+    value: 'Some warning e.g. will override previous value',
+  },
 };
 
 const variants = [
   {
     name: 'default',
-    excludes: ['vModel', 'events', 'helperTextSlot', 'invalidMessageSlot'],
+    excludes: ['vModel', 'events', 'helperTextSlot', 'invalidMessageSlot', 'warnTextSlot'],
   },
-  { name: 'helper and error slots', excludes: ['vModel', 'events'] },
+  { name: 'helper, warn and error slots', excludes: ['vModel', 'events'] },
   { name: 'minimal', includes: ['label'] },
   { name: 'events', includes: ['label', 'events'] },
   { name: 'vModel', includes: ['label', 'vModel'] },