@asd20/ui-next 2.22.4 → 2.23.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.23.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.0...ui-next-v2.23.1) (2026-09-09)
+
+
+### Bug Fixes
+
+* revise api contract for send email help text ([7cb7247](https://github.com/academydistrict20/asd20-ui-next/commit/7cb7247a133fc24f0dc9fbd4e56125bf2b38042e))
+* revise send email subject heading and field colors; revise help text ([8fa8bf3](https://github.com/academydistrict20/asd20-ui-next/commit/8fa8bf379e577d562ba5fba35e60c07a6285bbee))
+
+# [2.23.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.4...ui-next-v2.23.0) (2026-09-08)
+
+
+### Features
+
+* add subject to directory email form ([e81778f](https://github.com/academydistrict20/asd20-ui-next/commit/e81778f1ff7ba90196e747799cd32b2028a06c8f))
+
 ## [2.22.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.3...ui-next-v2.22.4) (2026-08-31)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.22.4",
+  "version": "2.23.1",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/molecules/Asd20TextAreaInput/index.vue

@@ -26,8 +26,16 @@
     <div
       v-if="computedHelpText"
       class="asd20-text-area-input__help-text"
-      v-html="computedHelpText"
-    />
+    >
+      <span
+        v-if="helpText"
+        v-html="helpText"
+      />
+      <span
+        v-if="maxLength !== null"
+        class="asd20-text-area-input__character-count"
+      >{{ characterCountText }}</span>
+    </div>
     <div
       v-for="(v, index) in validationErrors"
       :key="index"
@@ -136,11 +144,22 @@ $input-focus-color: var(--color__accent-t50);
   }
 
   &__help-text {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: space(0.25);
+    width: 100%;
     color: var(--website-card__reverse-background-color);
     font-size: 0.75rem;
     margin-top: space(0.125);
   }
 
+  &__character-count {
+    margin-left: auto;
+    text-align: right;
+    white-space: nowrap;
+  }
+
   &__validation-error {
     color: var(--color__danger-s20);
     font-size: 0.75rem;

package/src/components/molecules/Asd20TextInput/index.vue

@@ -22,8 +22,16 @@
     <div
       v-if="computedHelpText"
       class="asd20-text-input__help-text"
-      v-html="computedHelpText"
-    />
+    >
+      <span
+        v-if="helpText"
+        v-html="helpText"
+      />
+      <span
+        v-if="maxLength !== null"
+        class="asd20-text-input__character-count"
+      >{{ characterCountText }}</span>
+    </div>
     <div
       v-for="(v, index) in validationErrors"
       :key="index"
@@ -129,11 +137,22 @@ $input-focus-color: var(--color__accent-t50);
   }
 
   &__help-text {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: space(0.25);
+    width: 100%;
     color: var(--website-card__reverse-background-color);
     font-size: 0.75rem;
     margin-top: space(0.125);
   }
 
+  &__character-count {
+    margin-left: auto;
+    text-align: right;
+    white-space: nowrap;
+  }
+
   &__validation-error {
     color: var(--color__danger-s20);
     font-size: 0.75rem;

package/src/components/organisms/Asd20ComposeEmailModal/index.vue

@@ -25,11 +25,20 @@
         aria-required="true"
         @validated="validationErrors.senderEmail = $event"
       />
+      <asd20-text-input
+        id="subject"
+        v-model="emailMessage.subject"
+        label="Subject"
+        maxlength="200"
+        aria-required="true"
+        @validated="validationErrors.subject = $event"
+      />
       <asd20-text-area-input
         id="messageBody"
         v-model="emailMessage.messageBody"
         label="Message"
         help-text="All fields are required."
+        maxlength="8000"
         aria-required="true"
         @validated="validationErrors.messageBody = $event"
       />
@@ -97,6 +106,7 @@ export default {
     validationErrors: {
       senderName: [],
       senderEmail: [],
+      subject: [],
       messageBody: [],
     },
     composing: false,
@@ -106,6 +116,7 @@ export default {
     emailMessage: {
       senderName: '',
       senderEmail: '',
+      subject: '',
       messageBody: '',
     },
   }),
@@ -122,9 +133,11 @@ export default {
       return (
         Boolean(this.emailMessage.senderName) &&
         Boolean(this.emailMessage.senderEmail) &&
+        Boolean(this.emailMessage.subject) &&
         Boolean(this.emailMessage.messageBody) &&
         this.validationErrors.senderName.length === 0 &&
         this.validationErrors.senderEmail.length === 0 &&
+        this.validationErrors.subject.length === 0 &&
         this.validationErrors.messageBody.length === 0
       )
     },
@@ -173,6 +186,7 @@ export default {
       this.emailMessage = {
         senderEmail: '',
         senderName: '',
+        subject: '',
         messageBody: '',
       }
     },

package/src/helpers/sendEmail.js

@@ -5,6 +5,7 @@ function emailMessageIsValid(emailMessage) {
     !!emailMessage.recipientId &&
     !!emailMessage.senderEmail &&
     !!emailMessage.senderName &&
+    !!emailMessage.subject &&
     !!emailMessage.messageBody
   )
 }

package/src/mixins/inputComponentMixin.js

@@ -119,13 +119,14 @@ export default {
 
     computedHelpText() {
       if (this.maxLength !== null) {
-        return (
-          this.helpText +
-          `${(this.resolvedValue || '').length}/${this.maxLength} characters.`
-        )
+        return [this.helpText, this.characterCountText].filter(Boolean).join(' ')
       }
       return this.helpText
     },
+    characterCountText() {
+      if (this.maxLength === null) return ''
+      return `${(this.resolvedValue || '').length}/${this.maxLength}`
+    },
     maxLength() {
       if (!Object.prototype.hasOwnProperty.call(this.$attrs, 'maxlength')) {
         return null