Skip to content

[stable8] fix(NcFormBox): add NcButton to supported components #7898

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
backportbot wants to merge 2 commits into
base: stable8
Choose a base branch
from
Draft

[stable8] fix(NcFormBox): add NcButton to supported components #7898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8bc329b
fix(NcFormBox): add NcButton to supported components
ShGKme Nov 18, 2025
8e36d37
chore(NcFormBox): improve docs
ShGKme Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,10 +489,10 @@ In case of dynamic/conditional sections rendering explicit `order` prop must be

```vue
<script>
import { mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'
import { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'
export default {
setup() {
return { mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }
return { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }
},
data() {
return {
Expand All @@ -514,10 +514,18 @@ export default {
<NcButton wide>Set as default mail app</NcButton>

<NcFormGroup label="Account settings">
<NcFormBox v-slot="{ itemClass }">
<NcFormBoxButton href="#">[email protected]</NcFormBoxButton>
<NcFormBoxButton href="#">[email protected]</NcFormBoxButton>
<NcButton :class="itemClass" wide>
<NcFormBox>
<NcFormBoxButton label="[email protected]">
<template #icon>
<NcIconSvgWrapper :path="mdiArrowRight" inline />
</template>
</NcFormBoxButton>
<NcFormBoxButton label="[email protected]">
<template #icon>
<NcIconSvgWrapper :path="mdiArrowRight" inline />
</template>
</NcFormBoxButton>
<NcButton wide>
<template #icon>
<NcIconSvgWrapper :path="mdiPlus" />
</template>
Expand Down
122 changes: 84 additions & 38 deletions src/components/NcFormBox/NcFormBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,65 +87,111 @@ provide(NC_FORM_BOX_CONTEXT_KEY, {
<docs>
### General

Visually group form elements with a small gap and rounded corners forming a solid group for supported components.
A container of supported components with a small gap and rounded corners forming a solid group.

**Note**: if the group has a semantic meaning, consider using the `<NcFormGroup>` component.
Currently supported components:
- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context
- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard
- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type="switch">` in a box
- **`<NcButton>`**: a general button in case there is a kind of primary action within a box

**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.

```vue
<script>
import { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'

export default {
setup() {
return { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }
},

data() {
return {
text: 'Text',
option: 'One'
switchValue: false,
}
}
},
}
</script>

<template>
<NcFormBox>
<NcTextField v-model="text" label="Text Field" />
<NcTextField v-model="text" label="Text Field" />
<NcTextField v-model="text" label="Text Field" />
<NcSelect v-model="option" input-label="Select Field" :options="['One', 'Two', 'Three']" />
</NcFormBox>
<div style="display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));">
<NcFormBox>
<NcFormBoxCopyButton label="WebDAV URL" value="https://cloud.example.tld/remote.php/dav/files/user" />
</NcFormBox>

<NcFormGroup label="Account settings">
<NcFormBox>
<NcFormBoxButton label="[email protected]">
<template #icon>
<NcIconSvgWrapper :path="mdiArrowRight" inline />
</template>
</NcFormBoxButton>
<NcFormBoxButton label="[email protected]">
<template #icon>
<NcIconSvgWrapper :path="mdiArrowRight" inline />
</template>
</NcFormBoxButton>
<NcButton wide>
<template #icon>
<NcIconSvgWrapper :path="mdiPlus" />
</template>
Add mail account
</NcButton>
</NcFormBox>
</NcFormGroup>

<NcFormGroup label="Device settings">
<NcFormBox>
<NcFormBoxSwitch v-model="switchValue" label="Turn camera and microphone off by default" />
<NcFormBoxSwitch v-model="switchValue" label="Blur camera background by default" />
<NcFormBoxSwitch
v-model="switchValue"
label="Skip device preview before joining a call"
description="Will always show if recording consent is required" />
</NcFormBox>
</NcFormGroup>

<NcFormBox>
<NcFormBoxButton
label="Attachments folder"
description="/Talk"
inverted-accent>
<template #icon>
<NcIconSvgWrapper :path="mdiFolderOpenOutline" inline />
</template>
</NcFormBoxButton>
</NcFormBox>
</div>
</template>
```

### Advanced usage

Use scoped slots params to apply the item class to custom items.
Scoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.
Create an issue if you need a composable to inject the class into a custom component.

```vue
<template>
<div>
<h4>NcButton without a group</h4>
<div>
<NcButton wide>
First button
</NcButton>
<NcButton wide>
Second button
</NcButton>
<NcButton wide>
Third button
</NcButton>
</div>

<h4>NcButton inside NcFormBox with scoped-slot</h4>
<NcFormBox v-slot="{ itemClass }">
<NcButton :class="itemClass" wide>
First button
</NcButton>
<NcButton :class="itemClass" wide>
Second button
</NcButton>
<NcButton :class="itemClass" wide>
Third button
</NcButton>
</NcFormBox>
</div>
<NcFormBox v-slot="{ itemClass }">
<button class="native-button" :class="itemClass">
First native button
</button>
<button class="native-button" :class="itemClass">
Second native button
</button>
<button class="native-button" :class="itemClass">
Third native button
</button>
</NcFormBox>
</template>

<style scoped>
.native-button {
/* Remove default server margin around a native button */
margin: 0 !important;
}
</style>
```
</docs>