Skip to content

Commit

Permalink
Add tooltip support for radio fields
Browse files Browse the repository at this point in the history
The new single page form has 50% width radio fields. This
breaks the display of the help text so they now can be moved
into tooltips when needed.

Ticket: https://phabricator.wikimedia.org/T373520
  • Loading branch information
Abban committed Aug 30, 2024
1 parent 55e3257 commit 974679f
Show file tree
Hide file tree
Showing 6 changed files with 128 additions and 16 deletions.
6 changes: 5 additions & 1 deletion src/components/layout/LocaleSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@
@keyup.esc="active = false"
@blur="handleLocaleItemBlur"
>
{{ localeItem.label }}
<template #label>
{{ localeItem.label }}
</template>
</RadioFormInput>
</div>
<div class="navigation-locale-button-container">
Expand Down Expand Up @@ -162,6 +164,7 @@ useDetectOutsideClick( localeSelectorRef, handleLocaleItemBlur );
input {
left: map.get(units.$spacing, 'small');
z-index: 1;
}
label {
Expand All @@ -178,6 +181,7 @@ useDetectOutsideClick( localeSelectorRef, handleLocaleItemBlur );
}
input:checked + label {
border: 0;
background: colors.$primary-locale-active;
color: colors.$primary;
}
Expand Down
13 changes: 7 additions & 6 deletions src/components/pages/donation_form/Payment.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,15 @@
:show-error="!paymentTypeIsValid"
:error-message="$t('donation_form_payment_type_error')"
>
<template #message-BEZ>
<div v-if="disabledPaymentTypes.includes( 'BEZ' )" class="option-info-message">
<template #tooltip-BEZ>
<RadioFieldHelpText v-if="disabledPaymentTypes.includes( 'BEZ' )">
{{ $t( 'donation_form_address_choice_direct_debit_disclaimer' ) }}
</div>
</RadioFieldHelpText>
</template>
<template #message-SUB>
<div v-if="disabledPaymentTypes.includes( 'SUB' )" class="option-info-message">
<template #tooltip-SUB>
<RadioFieldHelpText v-if="disabledPaymentTypes.includes( 'SUB' )">
{{ $t( 'donation_form_SUB_payment_type_info' ) }}
</div>
</RadioFieldHelpText>
</template>
</RadioField>
</FormSection>
Expand All @@ -66,6 +66,7 @@ import { usePaymentFieldModel } from '@src/components/pages/donation_form/usePay
import { Validity } from '@src/view_models/Validity';
import FormSection from '@src/components/shared/form_elements/FormSection.vue';
import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
import RadioFieldHelpText from '@src/components/shared/form_elements/RadioFieldTooltip.vue';
interface Props {
paymentAmounts: number[];
Expand Down
78 changes: 78 additions & 0 deletions src/components/shared/form_elements/RadioFieldTooltip.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<template>
<span class="radio-field-tooltip">
<InfoIcon/>
<span :id="textId" class="radio-field-tooltip-text">
<slot/>
</span>
<span class="is-sr-only"><slot/></span>
</span>
</template>

<script setup lang="ts">
import InfoIcon from '@src/components/shared/icons/InfoIcon.vue';
interface Props {
textId?: string;
}
defineProps<Props>();
</script>

<style scoped lang="scss">
@use '@src/scss/settings/colors';
.radio-field-tooltip {
position: absolute;
display: block;
right: 10px;
top: 50%;
margin-top: -8px;
height: 16px;
width: 17px;
&-text {
position: absolute;
display: block;
visibility: hidden;
opacity: 0;
height: 60px;
width: 280px;
top: -70px;
right: -8px;
background: colors.$white;
padding: 10px;
border: 1px solid colors.$gray-dark;
border-radius: 2px;
color: rgba(0, 0, 0, .6);
box-shadow: 0 0 4px rgb( 0 0 0 / 10% );
transition: visibility 200ms, opacity 200ms ease-in-out;
&:before {
content: '';
position: absolute;
bottom: -9px;
right: 6px;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 10px 0 9px;
border-color: colors.$gray-mid transparent transparent transparent;
}
&:after {
content: '';
position: absolute;
bottom: -7px;
right: 8px;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: colors.$white transparent transparent transparent;
}
}
}
</style>
27 changes: 26 additions & 1 deletion src/components/shared/form_elements/RadioFormInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,19 @@
:value="nativeValue"
:disabled="disabled"
:required="required"
:readonly="disabled"
:aria-readonly="disabled"
:aria-describedby="ariaDescribedby"
:aria-invalid="ariaInvalid"
:aria-disabled="disabled"
:autofocus="autofocus"
@blur="$emit( 'blur' )"
/>
<label class="control-label" :for="id" :class="labelClass" @blur="$emit( 'blur' )"><slot/></label>
<label class="control-label" :for="id" :class="labelClass" @blur="$emit( 'blur' )">
<slot name="label"/>
<slot name="help-text"/>
<slot name="tooltip"/>
</label>
</div>
</template>

Expand Down Expand Up @@ -112,6 +119,7 @@ $check-size: map.get( units.$spacing, 'small' );
}
label {
position: relative;
display: block;
width: 100%;
height: 100%;
Expand All @@ -125,6 +133,23 @@ $check-size: map.get( units.$spacing, 'small' );
input:focus + label,
input:hover + label {
border: 1px solid colors.$primary;
.radio-field-tooltip-text {
visibility: visible;
opacity: 1;
}
}
&.is-disabled {
label {
border-color: colors.$gray-light;
color: colors.$gray-mid;
cursor: not-allowed;
}
input {
border-color: colors.$gray-mid;
}
}
&.is-active {
Expand Down
4 changes: 3 additions & 1 deletion src/components/shared/form_fields/AmountField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
:aria-invalid="showError"
:aria-describedby="ariaDescribedby"
>
{{ $n( paymentAmount / 100, 'euros' ) }}
<template #label>
{{ $n( paymentAmount / 100, 'euros' ) }}
</template>
</RadioFormInput>
</div>
</div>
Expand Down
16 changes: 9 additions & 7 deletions src/components/shared/form_fields/RadioField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,15 @@
:autofocus="autofocus"
@update:modelValue="onFieldChange"
>
{{ option.label }}
<slot :name="`message-${option.value}`"/>
<template #label>
{{ option.label }}
</template>
<template #help-text>
<slot :name="`message-${option.value}`"/>
</template>
<template #tooltip>
<slot :name="`tooltip-${option.value}`"/>
</template>
</RadioFormInput>
</div>
<span v-if="showError" class="help is-danger" :id="`${name}-error-message`">{{ errorMessage }}</span>
Expand Down Expand Up @@ -145,11 +152,6 @@ const onFieldChange = ( newValue: string | number | boolean | null ): void => {
color: rgba(0, 0, 0, .6);
margin-top: map.get(units.$spacing, 'xx-small');
}
&.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
}
Expand Down

0 comments on commit 974679f

Please sign in to comment.