Skip to content

Commit 7e498c0

Browse files
GretaDGretaD
authored
Merge pull request #7490 from nextcloud-libraries/chore/deprecate-crs-button-variant
chore(NcCheckboxRadioSwitch): deprecate button variant in favor of `NcRadioGroup`
2 parents 77800e3 + e857ab2 commit 7e498c0

1 file changed

Lines changed: 66 additions & 59 deletions

File tree

‎src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue‎

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,68 @@ export default {
7676
</script>
7777
```
7878

79-
### Standard radio set with alternative button style
79+
### Standard checkbox set
80+
```vue
81+
<template>
82+
<div>
83+
<NcCheckboxRadioSwitch :disabled="true" v-model="sharingPermission" value="r" name="sharing_permission">Permission read</NcCheckboxRadioSwitch>
84+
<NcCheckboxRadioSwitch v-model="sharingPermission" value="w" name="sharing_permission">Permission write</NcCheckboxRadioSwitch>
85+
<NcCheckboxRadioSwitch v-model="sharingPermission" value="d" name="sharing_permission">Permission delete</NcCheckboxRadioSwitch>
86+
<br>
87+
sharingPermission: {{ sharingPermission }}
88+
</div>
89+
</template>
90+
<script>
91+
export default {
92+
data() {
93+
return {
94+
sharingPermission: ['r', 'd'],
95+
}
96+
}
97+
}
98+
</script>
99+
```
100+
101+
### Standard switch
102+
```vue
103+
<template>
104+
<div>
105+
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch">Enable sharing</NcCheckboxRadioSwitch>
106+
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch" :disabled="true">Enable sharing (disabled)</NcCheckboxRadioSwitch>
107+
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch">
108+
Enable sharing. This can contain a long multiline text, that will be wrapped in a second row. It is generally not advised to have such long text inside of an element
109+
</NcCheckboxRadioSwitch>
110+
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch" description="Instead you can use a description as a prop which can also be a long multiline text, that will be wrapped in a second row.">
111+
Enable sharing.
112+
</NcCheckboxRadioSwitch>
113+
114+
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch">
115+
Enable sharing.
116+
<template #description>
117+
Or you can use a description as slot which can also be a <strong>long multiline text</strong>, that will be wrapped in a second row.
118+
</template>
119+
</NcCheckboxRadioSwitch>
120+
<br>
121+
sharingEnabled: {{ sharingEnabled }}
122+
</div>
123+
</template>
124+
<script>
125+
export default {
126+
data() {
127+
return {
128+
sharingEnabled: true,
129+
}
130+
},
131+
}
132+
</script>
133+
```
134+
135+
### Deprecated button variants
136+
⚠️ Warning the button variant is deprecated ⚠️
137+
The button variant does not provide proper grouping,
138+
to overcome this and other limitations we now provide `NcRadioGroup` instead.
139+
140+
#### Standard radio set with alternative button style
80141
```vue
81142
<template>
82143
<div>
@@ -136,7 +197,7 @@ export default {
136197
</script>
137198
```
138199

139-
### Radio set with button style and icons
200+
#### Radio set with button style and icons
140201
```vue
141202
<template>
142203
<div>
@@ -205,63 +266,6 @@ export default {
205266
}
206267
</script>
207268
```
208-
209-
### Standard checkbox set
210-
```vue
211-
<template>
212-
<div>
213-
<NcCheckboxRadioSwitch :disabled="true" v-model="sharingPermission" value="r" name="sharing_permission">Permission read</NcCheckboxRadioSwitch>
214-
<NcCheckboxRadioSwitch v-model="sharingPermission" value="w" name="sharing_permission">Permission write</NcCheckboxRadioSwitch>
215-
<NcCheckboxRadioSwitch v-model="sharingPermission" value="d" name="sharing_permission">Permission delete</NcCheckboxRadioSwitch>
216-
<br>
217-
sharingPermission: {{ sharingPermission }}
218-
</div>
219-
</template>
220-
<script>
221-
export default {
222-
data() {
223-
return {
224-
sharingPermission: ['r', 'd'],
225-
}
226-
}
227-
}
228-
</script>
229-
```
230-
231-
### Standard switch
232-
```vue
233-
<template>
234-
<div>
235-
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch">Enable sharing</NcCheckboxRadioSwitch>
236-
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch" :disabled="true">Enable sharing (disabled)</NcCheckboxRadioSwitch>
237-
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch">
238-
Enable sharing. This can contain a long multiline text, that will be wrapped in a second row. It is generally not advised to have such long text inside of an element
239-
</NcCheckboxRadioSwitch>
240-
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch" description="Instead you can use a description as a prop which can also be a long multiline text, that will be wrapped in a second row.">
241-
Enable sharing.
242-
</NcCheckboxRadioSwitch>
243-
244-
<NcCheckboxRadioSwitch v-model="sharingEnabled" type="switch">
245-
Enable sharing.
246-
<template #description>
247-
Or you can use a description as slot which can also be a <strong>long multiline text</strong>, that will be wrapped in a second row.
248-
</template>
249-
</NcCheckboxRadioSwitch>
250-
<br>
251-
sharingEnabled: {{ sharingEnabled }}
252-
</div>
253-
</template>
254-
<script>
255-
export default {
256-
data() {
257-
return {
258-
sharingEnabled: true,
259-
}
260-
},
261-
}
262-
</script>
263-
```
264-
265269
</docs>
266270

267271
<template>
@@ -410,6 +414,8 @@ export default {
410414
411415
/**
412416
* Toggle the alternative button style
417+
*
418+
* @deprecated - Use `NcRadioGroup` instead
413419
*/
414420
buttonVariant: {
415421
type: Boolean,
@@ -421,6 +427,7 @@ export default {
421427
* If so they will be grouped horizontally or vertically
422428
*
423429
* @type {'no'|'horizontal'|'vertical'}
430+
* @deprecated - Use `NcRadioGroup` instead
424431
*/
425432
buttonVariantGrouped: {
426433
type: String,

0 commit comments

Comments
 (0)