From 8bc329b66f5d4b1e935f02c66a7cfd6df0a06a5f Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 18 Nov 2025 14:08:35 +0100
Subject: [PATCH 1/2] fix(NcFormBox): add NcButton to supported components

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

From 8e36d37c2fb01f73c65179d898fa6d7da8f3db7e Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 18 Nov 2025 15:07:27 +0100
Subject: [PATCH 2/2] chore(NcFormBox): improve docs

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

[skip ci]
---
 .../NcAppSettingsDialog.vue                   |  20 ++-
 src/components/NcFormBox/NcFormBox.vue        | 122 ++++++++++++------
 2 files changed, 98 insertions(+), 44 deletions(-)

diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
index f34c465a85..3536b49199 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -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 {
@@ -514,10 +514,18 @@ export default {
 				<NcButton wide>Set as default mail app</NcButton>
 
 				<NcFormGroup label="Account settings">
-					<NcFormBox v-slot="{ itemClass }">
-						<NcFormBoxButton href="#">user@example.com</NcFormBoxButton>
-						<NcFormBoxButton href="#">sales@example.com</NcFormBoxButton>
-						<NcButton :class="itemClass" wide>
+					<NcFormBox>
+						<NcFormBoxButton label="user@example.com">
+							<template #icon>
+								<NcIconSvgWrapper :path="mdiArrowRight" inline />
+							</template>
+						</NcFormBoxButton>
+						<NcFormBoxButton label="sales@example.com">
+							<template #icon>
+								<NcIconSvgWrapper :path="mdiArrowRight" inline />
+							</template>
+						</NcFormBoxButton>
+						<NcButton wide>
 							<template #icon>
 								<NcIconSvgWrapper :path="mdiPlus" />
 							</template>
diff --git a/src/components/NcFormBox/NcFormBox.vue b/src/components/NcFormBox/NcFormBox.vue
index cb4724e1b9..4a97cf59fb 100644
--- a/src/components/NcFormBox/NcFormBox.vue
+++ b/src/components/NcFormBox/NcFormBox.vue
@@ -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="user@example.com">
+					<template #icon>
+						<NcIconSvgWrapper :path="mdiArrowRight" inline />
+					</template>
+				</NcFormBoxButton>
+				<NcFormBoxButton label="sales@example.com">
+					<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>