Skip to content

Commit 81b9082

Browse files
committed
fix(NcFormGroup): remove margin when no label/description
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
1 parent 041641f commit 81b9082

File tree

1 file changed

+22
-5
lines changed

1 file changed

+22
-5
lines changed

src/components/NcFormGroup/NcFormGroup.vue

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,18 @@ const slots = defineSlots<{
5353
}>()
5454
5555
const id = `nc-form-group-${createElementId()}`
56-
const labelId = `${id}-label`
5756
const descriptionId = `${id}-description`
5857
5958
const hasDescription = () => !!description || !!slots.description
6059
const getDescriptionId = () => hasDescription() ? descriptionId : undefined
60+
const hasContentOnly = () => hideLabel && (!hasDescription() || hideDescription)
6161
</script>
6262

6363
<template>
6464
<fieldset
6565
:class="[$style.formGroup, { [$style.formGroup_noGap]: noGap }]"
6666
:aria-describedby="getDescriptionId()">
67-
<legend :id="labelId" :class="[$style.formGroup__label, { 'hidden-visually': hideLabel }]">
67+
<legend :class="[$style.formGroup__label, { 'hidden-visually': hideLabel }]">
6868
<slot name="label">
6969
{{ label || '⚠️ Missing label' }}
7070
</slot>
@@ -74,7 +74,7 @@ const getDescriptionId = () => hasDescription() ? descriptionId : undefined
7474
{{ description }}
7575
</slot>
7676
</div>
77-
<div :class="$style.formGroup__content">
77+
<div :class="[$style.formGroup__content, { [$style.formGroup__content_only]: hasContentOnly() }]">
7878
<slot />
7979
</div>
8080
</fieldset>
@@ -106,8 +106,7 @@ const getDescriptionId = () => hasDescription() ? descriptionId : undefined
106106
flex-direction: column;
107107
gap: var(--form-group-content-gap);
108108
margin-block-start: calc(4 * var(--default-grid-baseline));
109-
110-
&:first-child {
109+
&.formGroup__content_only {
111110
margin-block-start: 0;
112111
}
113112
}
@@ -137,4 +136,22 @@ Labelled group of form elements.
137136
</NcFormGroup>
138137
</template>
139138
```
139+
140+
### Hidden label/description
141+
142+
You can visually hide the label and/or the description.\
143+
Note: you still must provide the label. Do not visually hide the missing label warning!
144+
145+
```vue
146+
<template>
147+
<NcFormGroup
148+
label="Personal information"
149+
description="Your contact details"
150+
hide-label
151+
hide-description>
152+
<NcTextField label="First name" />
153+
<NcTextField label="Last name" />
154+
</NcFormGroup>
155+
</template>
156+
```
140157
</docs>

0 commit comments

Comments
 (0)