Skip to content

Commit b957978

Browse files
susnuxsusnux
authored
Merge pull request #7898 from nextcloud-libraries/backport/7886/stable8
[stable8] fix(NcFormBox): add NcButton to supported components
2 parents 4f0eca5 + d9e2827 commit b957978

3 files changed

Lines changed: 108 additions & 44 deletions

File tree

‎src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -494,10 +494,10 @@ In case of dynamic/conditional sections rendering explicit `order` prop must be
494494

495495
```vue
496496
<script>
497-
import { mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'
497+
import { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'
498498
export default {
499499
setup() {
500-
return { mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }
500+
return { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }
501501
},
502502
data() {
503503
return {
@@ -519,10 +519,18 @@ export default {
519519
<NcButton wide>Set as default mail app</NcButton>
520520

521521
<NcFormGroup label="Account settings">
522-
<NcFormBox v-slot="{ itemClass }">
523-
<NcFormBoxButton href="#">user@example.com</NcFormBoxButton>
524-
<NcFormBoxButton href="#">sales@example.com</NcFormBoxButton>
525-
<NcButton :class="itemClass" wide>
522+
<NcFormBox>
523+
<NcFormBoxButton label="user@example.com">
524+
<template #icon>
525+
<NcIconSvgWrapper :path="mdiArrowRight" inline />
526+
</template>
527+
</NcFormBoxButton>
528+
<NcFormBoxButton label="sales@example.com">
529+
<template #icon>
530+
<NcIconSvgWrapper :path="mdiArrowRight" inline />
531+
</template>
532+
</NcFormBoxButton>
533+
<NcButton wide>
526534
<template #icon>
527535
<NcIconSvgWrapper :path="mdiPlus" />
528536
</template>

‎src/components/NcButton/NcButton.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,7 @@ td.row-size {
425425
<script>
426426
import { isLegacy32 } from '../../utils/legacy.ts'
427427
import { logger } from '../../utils/logger.ts'
428+
import { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'
428429
429430
export default {
430431
name: 'NcButton',
@@ -611,6 +612,14 @@ export default {
611612
612613
emits: ['update:pressed', 'click'],
613614
615+
setup() {
616+
const { formBoxItemClass } = useNcFormBox()
617+
618+
return {
619+
formBoxItemClass,
620+
}
621+
},
622+
614623
computed: {
615624
/**
616625
* The real type to be used for the button, enforces `primary` for pressed state and, if stateful button, any other type for not pressed state
@@ -726,6 +735,7 @@ export default {
726735
active: isActive,
727736
'router-link-exact-active': isExactActive,
728737
},
738+
this.formBoxItemClass,
729739
],
730740
attrs: {
731741
'aria-label': this.ariaLabel,

‎src/components/NcFormBox/NcFormBox.vue‎

Lines changed: 84 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -87,65 +87,111 @@ provide(NC_FORM_BOX_CONTEXT_KEY, {
8787
<docs>
8888
### General
8989

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

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

94100
```vue
95101
<script>
102+
import { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'
103+
96104
export default {
105+
setup() {
106+
return { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }
107+
},
108+
97109
data() {
98110
return {
99111
text: 'Text',
100-
option: 'One'
112+
switchValue: false,
101113
}
102-
}
114+
},
103115
}
104116
</script>
105117

106118
<template>
107-
<NcFormBox>
108-
<NcTextField v-model="text" label="Text Field" />
109-
<NcTextField v-model="text" label="Text Field" />
110-
<NcTextField v-model="text" label="Text Field" />
111-
<NcSelect v-model="option" input-label="Select Field" :options="['One', 'Two', 'Three']" />
112-
</NcFormBox>
119+
<div style="display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));">
120+
<NcFormBox>
121+
<NcFormBoxCopyButton label="WebDAV URL" value="https://cloud.example.tld/remote.php/dav/files/user" />
122+
</NcFormBox>
123+
124+
<NcFormGroup label="Account settings">
125+
<NcFormBox>
126+
<NcFormBoxButton label="user@example.com">
127+
<template #icon>
128+
<NcIconSvgWrapper :path="mdiArrowRight" inline />
129+
</template>
130+
</NcFormBoxButton>
131+
<NcFormBoxButton label="sales@example.com">
132+
<template #icon>
133+
<NcIconSvgWrapper :path="mdiArrowRight" inline />
134+
</template>
135+
</NcFormBoxButton>
136+
<NcButton wide>
137+
<template #icon>
138+
<NcIconSvgWrapper :path="mdiPlus" />
139+
</template>
140+
Add mail account
141+
</NcButton>
142+
</NcFormBox>
143+
</NcFormGroup>
144+
145+
<NcFormGroup label="Device settings">
146+
<NcFormBox>
147+
<NcFormBoxSwitch v-model="switchValue" label="Turn camera and microphone off by default" />
148+
<NcFormBoxSwitch v-model="switchValue" label="Blur camera background by default" />
149+
<NcFormBoxSwitch
150+
v-model="switchValue"
151+
label="Skip device preview before joining a call"
152+
description="Will always show if recording consent is required" />
153+
</NcFormBox>
154+
</NcFormGroup>
155+
156+
<NcFormBox>
157+
<NcFormBoxButton
158+
label="Attachments folder"
159+
description="/Talk"
160+
inverted-accent>
161+
<template #icon>
162+
<NcIconSvgWrapper :path="mdiFolderOpenOutline" inline />
163+
</template>
164+
</NcFormBoxButton>
165+
</NcFormBox>
166+
</div>
113167
</template>
114168
```
115169

116170
### Advanced usage
117171

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

120175
```vue
121176
<template>
122-
<div>
123-
<h4>NcButton without a group</h4>
124-
<div>
125-
<NcButton wide>
126-
First button
127-
</NcButton>
128-
<NcButton wide>
129-
Second button
130-
</NcButton>
131-
<NcButton wide>
132-
Third button
133-
</NcButton>
134-
</div>
135-
136-
<h4>NcButton inside NcFormBox with scoped-slot</h4>
137-
<NcFormBox v-slot="{ itemClass }">
138-
<NcButton :class="itemClass" wide>
139-
First button
140-
</NcButton>
141-
<NcButton :class="itemClass" wide>
142-
Second button
143-
</NcButton>
144-
<NcButton :class="itemClass" wide>
145-
Third button
146-
</NcButton>
147-
</NcFormBox>
148-
</div>
177+
<NcFormBox v-slot="{ itemClass }">
178+
<button class="native-button" :class="itemClass">
179+
First native button
180+
</button>
181+
<button class="native-button" :class="itemClass">
182+
Second native button
183+
</button>
184+
<button class="native-button" :class="itemClass">
185+
Third native button
186+
</button>
187+
</NcFormBox>
149188
</template>
189+
190+
<style scoped>
191+
.native-button {
192+
/* Remove default server margin around a native button */
193+
margin: 0 !important;
194+
}
195+
</style>
150196
```
151197
</docs>

0 commit comments

Comments
 (0)