Skip to content

Commit

Permalink
chore: Update hint message layout in DatePicker and PeriodField compo…
Browse files Browse the repository at this point in the history 
…nents
  • Loading branch information
@4dr1en
4dr1en committed Sep 26, 2024
1 parent 8c497a3 commit 49659f3
Show file tree
Hide file tree
Showing 5 changed files with 4,752 additions and 3,801 deletions.
18 changes: 12 additions & 6 deletions .../synapse-bridge/src/form-builder/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,8 +315,10 @@ exports[`FormBuilder > renders correctly 1`] = `
<transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-13-messages">
<div class="v-messages__message"></div>
</transition-group-stub>
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
<div data-v-2a54188f="" class="mt-2">
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
</div>
<!---->
</div>
</div>
Expand Down Expand Up @@ -389,8 +391,10 @@ exports[`FormBuilder > renders correctly 1`] = `
<transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-15-messages">
<div class="v-messages__message"></div>
</transition-group-stub>
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
<div data-v-2a54188f="" class="mt-2">
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
</div>
<!---->
</div>
</div>
Expand Down Expand Up @@ -458,8 +462,10 @@ exports[`FormBuilder > renders correctly 1`] = `
<transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-17-messages">
<div class="v-messages__message"></div>
</transition-group-stub>
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
<div data-v-2a54188f="" class="mt-2">
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
</div>
<!---->
</div>
</div>
Expand Down
60 changes: 31 additions & 29 deletions packages/synapse-bridge/src/patterns/DatePicker/DatePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,35 +299,37 @@ export default defineComponent({
</template>
<template #message></template>
<template #details>
<div
v-if="errorMessages?.length"
role="alert"
aria-live="polite"
class="error-message"
>
<ul>
<li v-for="error in errorMessages" :key="error">
{{ error }}
</li>
</ul>
</div>
<div
v-else-if="warningMessages.length"
role="alert"
aria-live="polite"
class="warning-message"
>
<ul>
<li
v-for="warning in warningMessages"
:key="warning"
>
{{ warning }}
</li>
</ul>
</div>
<div v-if="hint" class="hint-message">
{{ hint }}
<div class="mt-2">
<div
v-if="errorMessages?.length"
role="alert"
aria-live="polite"
class="error-message"
>
<ul>
<li v-for="error in errorMessages" :key="error">
{{ error }}
</li>
</ul>
</div>
<div
v-else-if="warningMessages.length"
role="alert"
aria-live="polite"
class="warning-message"
>
<ul>
<li
v-for="warning in warningMessages"
:key="warning"
>
{{ warning }}
</li>
</ul>
</div>
<div v-if="hint" class="hint-message">
{{ hint }}
</div>
</div>
</template>
</VTextField>
Expand Down
6 changes: 4 additions & 2 deletions ...s/synapse-bridge/src/patterns/DatePicker/tests/__snapshots__/DatePickerField.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,10 @@ exports[`DatePickerField > should render correctly 1`] = `
<transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-0-messages">
<div class="v-messages__message"></div>
</transition-group-stub>
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
<div data-v-2a54188f="" class="mt-2">
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
</div>
<!---->
</div>
</div>
Expand Down
12 changes: 8 additions & 4 deletions ...ages/synapse-bridge/src/patterns/PeriodField/tests/__snapshots__/PeriodField.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,10 @@ exports[`PeriodField > should render the component 1`] = `
<transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-0-messages">
<div class="v-messages__message"></div>
</transition-group-stub>
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
<div data-v-2a54188f="" class="mt-2">
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
</div>
<!---->
</div>
</div>
Expand Down Expand Up @@ -115,8 +117,10 @@ exports[`PeriodField > should render the component 1`] = `
<transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-2-messages">
<div class="v-messages__message"></div>
</transition-group-stub>
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
<div data-v-2a54188f="" class="mt-2">
<!--v-if-->
<div data-v-2a54188f="" class="hint-message">Format JJ/MM/AAAA</div>
</div>
<!---->
</div>
</div>
Expand Down
Loading

0 comments on commit 49659f3

Please sign in to comment.