Skip to content

Commit 9b847ae

Browse files
mrholekmrholek
committed
refactor: update examples
1 parent ac31229 commit 9b847ae

File tree

2 files changed

+31
-44
lines changed

2 files changed

+31
-44
lines changed

‎src/views/components/buttons/button-groups/ButtonGroups.js

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -114,22 +114,19 @@ const ButtonGroups = () => {
114114
<DocsExample href="components/button-group#checkbox-and-radio-button-groups">
115115
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
116116
<CFormCheck
117-
button
118-
buttonVariant="outline"
117+
button={{ variant: 'outline' }}
119118
id="btncheck1"
120119
autoComplete="off"
121120
label="Checkbox 1"
122121
/>
123122
<CFormCheck
124-
button
125-
buttonVariant="outline"
123+
button={{ variant: 'outline' }}
126124
id="btncheck2"
127125
autoComplete="off"
128126
label="Checkbox 2"
129127
/>
130128
<CFormCheck
131-
button
132-
buttonVariant="outline"
129+
button={{ variant: 'outline' }}
133130
id="btncheck3"
134131
autoComplete="off"
135132
label="Checkbox 3"
@@ -140,26 +137,23 @@ const ButtonGroups = () => {
140137
<CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
141138
<CFormCheck
142139
type="radio"
143-
button
144-
buttonVariant="outline"
140+
button={{ variant: 'outline' }}
145141
name="btnradio"
146142
id="btnradio1"
147143
autoComplete="off"
148144
label="Radio 1"
149145
/>
150146
<CFormCheck
151147
type="radio"
152-
button
153-
buttonVariant="outline"
148+
button={{ variant: 'outline' }}
154149
name="btnradio"
155150
id="btnradio2"
156151
autoComplete="off"
157152
label="Radio 2"
158153
/>
159154
<CFormCheck
160155
type="radio"
161-
button
162-
buttonVariant="outline"
156+
button={{ variant: 'outline' }}
163157
name="btnradio"
164158
id="btnradio3"
165159
autoComplete="off"
@@ -413,9 +407,7 @@ const ButtonGroups = () => {
413407
<CButtonGroup vertical role="group" aria-label="Vertical button group">
414408
<CFormCheck
415409
type="radio"
416-
button
417-
buttonColor="danger"
418-
buttonVariant="outline"
410+
button={{ color: 'danger', variant: 'outline' }}
419411
name="vbtnradio"
420412
id="vbtnradio1"
421413
autoComplete="off"
@@ -424,19 +416,15 @@ const ButtonGroups = () => {
424416
/>
425417
<CFormCheck
426418
type="radio"
427-
button
428-
buttonColor="danger"
429-
buttonVariant="outline"
419+
button={{ color: 'danger', variant: 'outline' }}
430420
name="vbtnradio"
431421
id="vbtnradio2"
432422
autoComplete="off"
433423
label="Radio 2"
434424
/>
435425
<CFormCheck
436426
type="radio"
437-
button
438-
buttonColor="danger"
439-
buttonVariant="outline"
427+
button={{ color: 'danger', variant: 'outline' }}
440428
name="vbtnradio"
441429
id="vbtnradio3"
442430
autoComplete="off"

‎src/views/components/forms/checks-radios/ChecksRadios.js

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -281,25 +281,35 @@ const ChecksRadios = () => {
281281
further be grouped in a button group if needed.
282282
</p>
283283
<DocsExample href="forms/checks-radios#toggle-buttons">
284-
<CFormCheck button id="btn-check" autoComplete="off" label="Single toggle" />
284+
<CFormCheck
285+
button={{ color: 'primary ' }}
286+
id="btn-check"
287+
autoComplete="off"
288+
label="Single toggle"
289+
/>
285290
</DocsExample>
286291
<DocsExample href="forms/checks-radios#toggle-buttons">
287292
<CFormCheck
288-
button
293+
button={{ color: 'primary ' }}
289294
id="btn-check-2"
290295
autoComplete="off"
291296
label="Checked"
292297
defaultChecked
293298
/>
294299
</DocsExample>
295300
<DocsExample href="forms/checks-radios#toggle-buttons">
296-
<CFormCheck button id="btn-check-3" autoComplete="off" label="Disabled" disabled />
301+
<CFormCheck
302+
button={{ color: 'primary ' }}
303+
id="btn-check-3"
304+
autoComplete="off"
305+
label="Disabled"
306+
disabled
307+
/>
297308
</DocsExample>
298309
<h3>Radio toggle buttons</h3>
299310
<DocsExample href="forms/checks-radios#toggle-buttons">
300311
<CFormCheck
301-
button
302-
buttonColor="secondary"
312+
button={{ color: 'secondary' }}
303313
type="radio"
304314
name="options"
305315
id="option1"
@@ -308,17 +318,15 @@ const ChecksRadios = () => {
308318
defaultChecked
309319
/>
310320
<CFormCheck
311-
button
312-
buttonColor="secondary"
321+
button={{ color: 'secondary' }}
313322
type="radio"
314323
name="options"
315324
id="option2"
316325
autoComplete="off"
317326
label="Radio"
318327
/>
319328
<CFormCheck
320-
button
321-
buttonColor="secondary"
329+
button={{ color: 'secondary' }}
322330
type="radio"
323331
name="options"
324332
id="option3"
@@ -327,8 +335,7 @@ const ChecksRadios = () => {
327335
disabled
328336
/>
329337
<CFormCheck
330-
button
331-
buttonColor="secondary"
338+
button={{ color: 'secondary' }}
332339
type="radio"
333340
name="options"
334341
id="option4"
@@ -343,19 +350,15 @@ const ChecksRadios = () => {
343350
<DocsExample href="forms/checks-radios#toggle-buttons">
344351
<div>
345352
<CFormCheck
346-
button
347-
buttonColor="primary"
348-
buttonVariant="outline"
353+
button={{ color: 'primary', variant: 'outline' }}
349354
id="btn-check-outlined"
350355
autoComplete="off"
351356
label="Single toggle"
352357
/>
353358
</div>
354359
<div>
355360
<CFormCheck
356-
button
357-
buttonColor="secondary"
358-
buttonVariant="outline"
361+
button={{ color: 'secondary', variant: 'outline' }}
359362
id="btn-check-2-outlined"
360363
autoComplete="off"
361364
label="Checked"
@@ -364,9 +367,7 @@ const ChecksRadios = () => {
364367
</div>
365368
<div>
366369
<CFormCheck
367-
button
368-
buttonColor="success"
369-
buttonVariant="outline"
370+
button={{ color: 'success', variant: 'outline' }}
370371
type="radio"
371372
name="options-outlined"
372373
id="success-outlined"
@@ -375,9 +376,7 @@ const ChecksRadios = () => {
375376
defaultChecked
376377
/>
377378
<CFormCheck
378-
button
379-
buttonColor="danger"
380-
buttonVariant="outline"
379+
button={{ color: 'danger', variant: 'outline' }}
381380
type="radio"
382381
name="options-outlined"
383382
id="danger-outlined"

0 commit comments

Comments
 (0)