danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
feat(@dpc-sdp/ripple-ui-forms): show required message for checkboxes with no label
author
Jeffrey Dowdle
date
(Apr 4, 2023, 9:29 AM +1000)
commit
3c5f77b9
3c5f77b9472c6fa6a01dc481e910efa628a57db6
parent
5fa21762
5fa21762e1cd8e89fd68a9cd7c85b1d33412ed67
+42
-13
+1
-2
packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts
+1
-2
packages/ripple-tide-landing-page/mapping/components/webforms/webforms-mapping.ts
···
165
165
id: fieldKey,
166
166
name: fieldKey,
167
167
disabled: field['#disabled'],
168
-
// TODO: It's not clear what field we should be using for the 'label' here because it's a new requirement, setting as 'help title' for now
169
-
label: field['#help_title'] || field['#title'],
168
+
label: field['#help_title'],
170
169
help: field['#description'],
171
170
checkboxLabel: field['#title'],
172
171
value: field['#default_value'],
+14
-6
packages/ripple-ui-forms/src/components/RplFormOptions/RplFormCheckboxGroup.vue
+14
-6
packages/ripple-ui-forms/src/components/RplFormOptions/RplFormCheckboxGroup.vue
···
51
51
52
52
<template>
53
53
<div class="rpl-form-option-group">
54
-
<RplFormOption v-for="(option, i) in options" :id="option.id" :key="option.id" type="checkbox"
55
-
:data-rpl-focus-input="i === 0 ? id : undefined" :variant="variant" :name="option.id" :label="option.label"
56
-
:disabled="disabled || option.disabled" :checked="isChecked(option.id)" @on-change="handleToggle(option.id)" />
54
+
<RplFormOption
55
+
v-for="(option, i) in options"
56
+
:id="option.id"
57
+
:key="option.id"
58
+
type="checkbox"
59
+
:data-rpl-focus-input="i === 0 ? id : undefined"
60
+
:variant="variant"
61
+
:name="option.id"
62
+
:label="option.label"
63
+
:disabled="disabled || option.disabled"
64
+
:checked="isChecked(option.id)"
65
+
@on-change="handleToggle(option.id)"
66
+
/>
57
67
</div>
58
68
</template>
59
69
60
-
<style src="./RplFormCheckboxGroup.css">
61
-
62
-
</style>
70
+
<style src="./RplFormCheckboxGroup.css"></style>
+12
-2
packages/ripple-ui-forms/src/components/RplFormOptions/RplFormOption.vue
+12
-2
packages/ripple-ui-forms/src/components/RplFormOptions/RplFormOption.vue
···
19
19
onChange: (checked: boolean) => void
20
20
onValue?: boolean | string | number
21
21
offValue?: boolean | string | number
22
+
showRequiredInLabel?: boolean
22
23
}
23
24
24
25
const props = withDefaults(defineProps<RplFormOptionProps>(), {
···
27
28
variant: 'default',
28
29
onChange: () => undefined,
29
30
onValue: true,
30
-
offValue: false
31
+
offValue: false,
32
+
showRequiredInLabel: false
31
33
})
32
34
33
35
const emit = defineEmits<{ (e: 'onChange', value: boolean): void }>()
···
73
75
>
74
76
<span class="rpl-form-option__mark-tick rpl-form-option__radio-tick" />
75
77
</span>
76
-
<span class="rpl-form-option__label-text rpl-type-p">{{ label }}</span>
78
+
<span class="rpl-form-option__label-text rpl-type-p">
79
+
{{ label }}
80
+
<span
81
+
v-if="showRequiredInLabel"
82
+
class="rpl-form-label__required rpl-type-label-small"
83
+
>
84
+
(Required)
85
+
</span>
86
+
</span>
77
87
</label>
78
88
</div>
79
89
</template>
+10
packages/ripple-ui-forms/src/formkit-features.ts
+10
packages/ripple-ui-forms/src/formkit-features.ts
···
36
36
})
37
37
}
38
38
39
+
export const hasNoLabel = (node: FormKitNode): void => {
40
+
node.on('created', () => {
41
+
if (node.context?.fns) {
42
+
node.context.fns.hasNoLabel = () => {
43
+
return !node.props.label
44
+
}
45
+
}
46
+
})
47
+
}
48
+
39
49
export const getAriaDescribedBy = (node: FormKitNode): void => {
40
50
node.on('created', () => {
41
51
if (node.context?.fns) {
+2
-1
packages/ripple-ui-forms/src/inputs/checkbox.ts
+2
-1
packages/ripple-ui-forms/src/inputs/checkbox.ts
···
25
25
'aria-invalid': '$fns.isFieldInvalid()',
26
26
'aria-required': '$fns.isFieldRequired()',
27
27
'data-rpl-focus-input': '$id',
28
-
required: '$fns.isFieldRequired()'
28
+
required: '$fns.isFieldRequired()',
29
+
showRequiredInLabel: '$fns.hasNoLabel()'
29
30
}
30
31
}),
31
32
library: inputLibrary,
+3
-2
packages/ripple-ui-forms/src/inputs/input-utils.ts
+3
-2
packages/ripple-ui-forms/src/inputs/input-utils.ts
···
35
35
import {
36
36
isFieldRequired,
37
37
isFieldInvalid,
38
-
getAriaDescribedBy
38
+
getAriaDescribedBy,
39
+
hasNoLabel
39
40
} from '../formkit-features'
40
41
import { rplInputGrid } from '../sections/rplInputGrid'
41
42
···
58
59
RplFormActions: markRaw(RplFormActions)
59
60
}
60
61
61
-
export const rplFeatures = [isFieldRequired, isFieldInvalid, getAriaDescribedBy]
62
+
export const rplFeatures = [isFieldRequired, isFieldInvalid, getAriaDescribedBy, hasNoLabel]
62
63
63
64
/*
64
65
* Creates a Formkit schema based on Ripple opinionated defaults for label and help messages, use