@asd20/ui-next 2.30.0 → 2.30.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.30.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.30.0...ui-next-v2.30.1) (2026-10-06)
+
+
+### Bug Fixes
+
+* update styling on student records form ([3c9e73b](https://github.com/academydistrict20/asd20-ui-next/commit/3c9e73b669569aead47346fe52c5df432d1ecbf7))
+
 # [2.30.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.29.1...ui-next-v2.30.0) (2026-10-06)
 
 

package/package.json

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

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

@@ -5,26 +5,52 @@
       class="asd20-public-form-field__upload"
     >
       <label :for="inputId">{{ displayLabel }}</label>
-      <input
+      <asd20-button
         :id="inputId"
+        label="Choose files"
+        horizontal
+        bordered
+        :aria-label="`Choose files for ${field.label.toLowerCase()}`"
+        :aria-describedby="describedBy"
+        :aria-invalid="hasErrors ? 'true' : undefined"
+        @click="$refs.fileInput.click()"
+      />
+      <input
+        :id="`${inputId}-input`"
+        ref="fileInput"
         type="file"
         accept=".pdf,application/pdf"
         multiple
+        hidden
         :required="field.required"
-        :aria-describedby="describedBy"
-        :aria-invalid="hasErrors ? 'true' : undefined"
-        @change="
-          $emit('update:modelValue', Array.from($event.target.files || []))
-        "
+        :aria-label="field.label"
+        @change="addFiles"
       />
-      <ul v-if="modelValue.length">
-        <li
-          v-for="(file, index) in modelValue"
-          :key="index"
+      <div
+        class="asd20-public-form-field__file-selection"
+        aria-live="polite"
+      >
+        <ul
+          v-if="selectedFiles.length"
+          class="asd20-public-form-field__file-list"
         >
-          {{ file.name }}
-        </li>
-      </ul>
+          <li
+            v-for="(file, index) in selectedFiles"
+            :key="index"
+          >
+            <span>{{ file.name }}</span>
+            <asd20-button
+              label="Remove"
+              text-only
+              :aria-label="`Remove ${file.name}`"
+              @click="removeFile(index)"
+            />
+          </li>
+        </ul>
+        <p v-else>
+          No file chosen
+        </p>
+      </div>
     </div>
     <asd20-text-area-input
       v-else-if="field.type === 'textarea'"
@@ -65,30 +91,36 @@
       class="asd20-public-form-field__select"
     >
       <label :for="inputId">{{ displayLabel }}</label>
-      <select
-        :id="inputId"
-        :value="modelValue"
-        :required="field.required"
-        :aria-describedby="describedBy"
-        :aria-invalid="hasErrors ? 'true' : undefined"
-        @change="$emit('update:modelValue', $event.target.value)"
-      >
-        <option value="">
-          Please select
-        </option>
-        <option
-          v-for="option in field.options"
-          :key="option.value"
-          :value="option.value"
+      <div class="asd20-public-form-field__select-control">
+        <select
+          :id="inputId"
+          :value="modelValue"
+          :required="field.required"
+          :aria-describedby="describedBy"
+          :aria-invalid="hasErrors ? 'true' : undefined"
+          @change="$emit('update:modelValue', $event.target.value)"
         >
-          {{ option.label }}
-        </option>
-      </select>
+          <option value="">
+            Please select
+          </option>
+          <option
+            v-for="option in field.options"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
     </div>
 
     <fieldset
       v-else-if="field.type === 'radio'"
       class="asd20-public-form-field__choices"
+      :class="{
+        'asd20-public-form-field__choices--described':
+          field.options.some(option => option.description),
+      }"
       :aria-describedby="describedBy"
       :aria-invalid="hasErrors ? 'true' : undefined"
     >
@@ -108,7 +140,7 @@
           @change="$emit('update:modelValue', option.value)"
         />
         <span>
-          {{ option.label }}
+          <strong class="asd20-public-form-field__option-title">{{ option.label }}</strong>
           <span
             v-if="option.description"
             class="asd20-public-form-field__option-description"
@@ -161,6 +193,7 @@
 </template>
 
 <script>
+import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Checkbox from '../../atoms/Asd20Checkbox'
 import Asd20TextAreaInput from '../Asd20TextAreaInput'
 import Asd20TextInput from '../Asd20TextInput'
@@ -180,7 +213,7 @@ function districtToday() {
 
 export default {
   name: 'Asd20PublicFormField',
-  components: { Asd20Checkbox, Asd20TextAreaInput, Asd20TextInput },
+  components: { Asd20Button, Asd20Checkbox, Asd20TextAreaInput, Asd20TextInput },
   props: {
     field: { type: Object, required: true },
     modelValue: { type: [String, Boolean, Array], default: '' },
@@ -196,6 +229,9 @@ export default {
     }
   },
   computed: {
+    selectedFiles() {
+      return Array.isArray(this.modelValue) ? this.modelValue : []
+    },
     dateMaximum() {
       return this.field.type === 'date' && this.field.maxDate === 'today'
         ? districtToday()
@@ -239,6 +275,21 @@ export default {
       )
     },
   },
+  methods: {
+    addFiles(event) {
+      const addedFiles = Array.from(event.target.files || [])
+      if (addedFiles.length) {
+        this.$emit('update:modelValue', [...this.selectedFiles, ...addedFiles])
+      }
+      // The model owns the selection; reset the picker so later choices append
+      // and a removed document can be selected again.
+      event.target.value = ''
+    },
+    removeFile(index) {
+      this.$emit('update:modelValue', this.selectedFiles.filter((_, fileIndex) => fileIndex !== index))
+      this.$nextTick(() => document.getElementById(this.inputId)?.focus())
+    },
+  },
 }
 </script>
 
@@ -246,6 +297,44 @@ export default {
 @use '../../../design/component-stack' as *;
 
 .asd20-public-form-field {
+  &__option-title {
+    font-weight: 700;
+  }
+
+  &__upload {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  &__file-selection {
+    width: 100%;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  &__file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      align-items: baseline;
+      display: flex;
+      gap: 0.5rem;
+    }
+
+    span {
+      overflow-wrap: anywhere;
+    }
+  }
+
   &__option-description {
     display: block;
     font-weight: normal;
@@ -272,7 +361,24 @@ export default {
     margin-bottom: space(0.125);
   }
 
+  &__select-control {
+    position: relative;
+
+    &::after {
+      border-left: 0.5rem solid transparent;
+      border-right: 0.5rem solid transparent;
+      border-top: 0.5rem solid currentColor;
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
   select {
+    appearance: none;
     background: white;
     border: 2px solid var(--color__accent);
     border-radius: var(--website-shape__radius-s);
@@ -280,6 +386,7 @@ export default {
     color: var(--website-card__reverse-background-color);
     font: inherit;
     padding: space(0.25);
+    padding-right: 3rem;
     width: 100%;
   }
 
@@ -296,6 +403,15 @@ export default {
     margin: space(0.125) 0;
   }
 
+  &__choices--described label {
+    align-items: flex-start;
+  }
+
+  &__choices input[type='radio'] {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+
   &__help,
   &__character-count,
   &__errors {

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

@@ -143,6 +143,7 @@
             >
               <asd20-button
                 :label="formDefinition.submitLabel"
+                :disabled="!canSubmit"
                 horizontal
                 centered
                 bordered
@@ -152,6 +153,7 @@
             <asd20-button
               v-else
               :label="formDefinition.submitLabel"
+              :disabled="!canSubmit"
               horizontal
               centered
               bordered
@@ -266,6 +268,13 @@ export default {
     }
   },
   computed: {
+    canSubmit() {
+      return Boolean(
+        this.formDefinition &&
+        !this.sending &&
+        validatePublicFormValues(this.formDefinition, this.values).valid
+      )
+    },
     visibleFields() {
       return (this.formDefinition?.fields || [])
         .filter(field => isPublicFormFieldVisible(field, this.values))

package/src/helpers/publicFormDefinition.js

@@ -107,6 +107,7 @@ function normalizeField(field) {
     ),
     options: undefined,
     visibleWhen: normalizeCondition(field.visibleWhen),
+    requiredUnlessUploaded: boundedText(field.requiredUnlessUploaded, 'Upload field name', 64),
     requiredWhen:
       field.requiredWhen == null
         ? undefined
@@ -191,13 +192,13 @@ export function isPublicFormFieldVisible(field, values) {
 }
 
 export function isPublicFormFieldRequired(field, values) {
-  return (
-    field.required ||
-    field.requiredWhen?.some(condition =>
-      condition.values.includes(String(values[condition.fieldName] || '').trim())
-    ) ||
-    false
+  const required = field.required || field.requiredWhen?.some(condition =>
+    condition.values.includes(String(values[condition.fieldName] || '').trim())
   )
+  const uploaded = field.requiredUnlessUploaded &&
+    Array.isArray(values[field.requiredUnlessUploaded]) &&
+    values[field.requiredUnlessUploaded].length > 0
+  return Boolean(required && !uploaded)
 }
 
 export async function serializePublicFormValues(definition, values) {
@@ -252,6 +253,12 @@ export function normalizePublicFormDefinition(definition) {
     throw new Error('The public form contains duplicate field names.')
 
   for (const field of fields) {
+    if (field.requiredUnlessUploaded) {
+      const upload = fields.find(candidate => candidate.name === field.requiredUnlessUploaded)
+      if (!upload || upload.type !== 'file' || upload === field) {
+        throw new Error('The public form has an invalid upload requirement reference.')
+      }
+    }
     for (const condition of [
       field.visibleWhen,
       ...(field.requiredWhen || []),