Skip to content

Commit f4b2570

Browse files
mrholekmrholek
committed
refactor: update views
1 parent 8828ecc commit f4b2570

File tree

22 files changed

+275
-293
lines changed

22 files changed

+275
-293
lines changed

‎src/views/components/base/cards/Cards.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ const Cards = () => {
355355
</p>
356356
<Example href="components/card/#sizing">
357357
<CRow>
358-
<CCol sm="6">
358+
<CCol sm={6}>
359359
<CCard>
360360
<CCardBody>
361361
<CCardTitle>Special title treatment</CCardTitle>
@@ -366,7 +366,7 @@ const Cards = () => {
366366
</CCardBody>
367367
</CCard>
368368
</CCol>
369-
<CCol sm="6">
369+
<CCol sm={6}>
370370
<CCard>
371371
<CCardBody>
372372
<CCardTitle>Special title treatment</CCardTitle>

‎src/views/components/base/collapses/Collapses.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const Collapses = () => {
6464
Toggle both elements
6565
</CButton>
6666
<CRow>
67-
<CCol xs="6">
67+
<CCol xs={6}>
6868
<CCollapse visible={visibleA}>
6969
<CCard className="mt-3">
7070
<CCardBody>
@@ -75,7 +75,7 @@ const Collapses = () => {
7575
</CCard>
7676
</CCollapse>
7777
</CCol>
78-
<CCol xs="6">
78+
<CCol xs={6}>
7979
<CCollapse visible={visibleB}>
8080
<CCard className="mt-3">
8181
<CCardBody>

‎src/views/components/base/jumbotrons/Jumbotrons.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Jumbotrons = () => {
2121
<CButton size="lg">Example button</CButton>
2222
</CContainer>
2323
<CRow className="align-items-md-stretch">
24-
<CCol md="6">
24+
<CCol md={6}>
2525
<div className="h-100 p-5 text-white bg-dark rounded-3">
2626
<h2>Change the background</h2>
2727
<p>
@@ -33,7 +33,7 @@ const Jumbotrons = () => {
3333
</CButton>
3434
</div>
3535
</CCol>
36-
<CCol md="6">
36+
<CCol md={6}>
3737
<div className="h-100 p-5 bg-light border rounded-3">
3838
<h2>Add borders</h2>
3939
<p>

‎src/views/components/base/navbars/Navbars.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
CDropdownMenu,
99
CDropdownToggle,
1010
CForm,
11-
CFormControl,
11+
CFormInput,
1212
CImage,
1313
CNavbar,
1414
CNavbarNav,
@@ -44,7 +44,7 @@ const CNavbars = () => {
4444
</CNavbarNav>
4545
<CNavbarNav className="ms-auto">
4646
<CForm className="d-flex">
47-
<CFormControl className="me-sm-2" placeholder="Search" size="sm" />
47+
<CFormInput className="me-sm-2" placeholder="Search" size="sm" />
4848
<CButton color="light" className="my-2 my-sm-0" type="submit">
4949
Search
5050
</CButton>
@@ -148,7 +148,7 @@ const CNavbars = () => {
148148
<CCardBody>
149149
<CNavbar light color="light">
150150
<CForm className="d-flex">
151-
<CFormControl className="me-sm-2" placeholder="Search" size="sm" />
151+
<CFormInput className="me-sm-2" placeholder="Search" size="sm" />
152152
<CButton color="outline-success" className="my-2 my-sm-0" type="submit">
153153
Search
154154
</CButton>
@@ -162,7 +162,7 @@ const CNavbars = () => {
162162
<CCardBody>
163163
<CNavbar light color="light">
164164
<CForm className="d-flex">
165-
<CFormControl className="me-sm-2" placeholder="Username" />
165+
<CFormInput className="me-sm-2" placeholder="Username" />
166166
</CForm>
167167
</CNavbar>
168168
</CCardBody>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
CCardHeader,
1414
CCol,
1515
CFormCheck,
16-
CFormControl,
16+
CFormInput,
1717
CInputGroup,
1818
CInputGroupText,
1919
CRow,
@@ -220,7 +220,7 @@ const ButtonGroups = () => {
220220
</CButtonGroup>
221221
<CInputGroup>
222222
<CInputGroupText>@</CInputGroupText>
223-
<CFormControl
223+
<CFormInput
224224
placeholder="Input group example"
225225
aria-label="Input group example"
226226
aria-describedby="btnGroupAddon"
@@ -248,7 +248,7 @@ const ButtonGroups = () => {
248248
</CButtonGroup>
249249
<CInputGroup>
250250
<CInputGroupText>@</CInputGroupText>
251-
<CFormControl
251+
<CFormInput
252252
placeholder="Input group example"
253253
aria-label="Input group example"
254254
aria-describedby="btnGroupAddon"

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

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react'
2+
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
33
import { DocsCallout, Example } from 'src/reusable'
44

55
const ChecksRadios = () => {
@@ -106,25 +106,18 @@ const ChecksRadios = () => {
106106
attribute.
107107
</p>
108108
<Example href="forms/checks-radios#switches">
109-
<CFormCheck
110-
switch
111-
label="Default switch checkbox input"
112-
id="formSwitchCheckDefault"
113-
/>
114-
<CFormCheck
115-
switch
109+
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
110+
<CFormSwitch
116111
label="Checked switch checkbox input"
117112
id="formSwitchCheckChecked"
118113
defaultChecked
119114
/>
120-
<CFormCheck
121-
switch
115+
<CFormSwitch
122116
label="Disabled switch checkbox input"
123117
id="formSwitchCheckDisabled"
124118
disabled
125119
/>
126-
<CFormCheck
127-
switch
120+
<CFormSwitch
128121
label="Disabled checked switch checkbox input"
129122
id="formSwitchCheckCheckedDisabled"
130123
defaultChecked
@@ -141,19 +134,13 @@ const ChecksRadios = () => {
141134
</CCardHeader>
142135
<CCardBody>
143136
<Example href="forms/checks-radios#sizes">
144-
<CFormCheck
145-
switch
146-
label="Default switch checkbox input"
147-
id="formSwitchCheckDefault"
148-
/>
149-
<CFormCheck
150-
switch
137+
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
138+
<CFormSwitch
151139
size="lg"
152140
label="Large switch checkbox input"
153141
id="formSwitchCheckDefaultLg"
154142
/>
155-
<CFormCheck
156-
switch
143+
<CFormSwitch
157144
size="xl"
158145
label="Extra large switch checkbox input"
159146
id="formSwitchCheckDefaultXL"

‎src/views/components/forms/floating-labels/FloatingLabels.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import {
44
CCardBody,
55
CCardHeader,
66
CCol,
7-
CFormControl,
7+
CFormInput,
88
CFormLabel,
99
CFormFloating,
1010
CFormSelect,
11+
CFormTextarea,
1112
CRow,
1213
} from '@coreui/react'
1314
import { DocsCallout, Example } from 'src/reusable'
@@ -25,22 +26,21 @@ const FloatingLabels = () => {
2526
</CCardHeader>
2627
<CCardBody>
2728
<p className="text-medium-emphasis small">
28-
Wrap a pair of <code>&lt;CFormControl&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
29+
Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
2930
elements in <code>CFormFloating</code> to enable floating labels with textual form
30-
fields. A <code>placeholder</code> is required on each{' '}
31-
<code>&lt;CFormControl&gt;</code> as our method of CSS-only floating labels uses the{' '}
32-
<code>:placeholder-shown</code> pseudo-element. Also note that the{' '}
33-
<code>&lt;CFormControl&gt;</code> must come first so we can utilize a sibling selector
34-
(e.g., <code>~</code>).
31+
fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>{' '}
32+
as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>{' '}
33+
pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
34+
we can utilize a sibling selector (e.g., <code>~</code>).
3535
</p>
3636
<Example href="forms/floating-labels">
3737
<CFormFloating className="mb-3">
38-
<CFormControl type="email" id="floatingInput" placeholder="name@example.com" />
38+
<CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
3939
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
4040
</CFormFloating>
4141
<CFormFloating>
42-
<CFormControl type="password" id="floatingPassword" placeholder="Password" />
43-
<CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
42+
<CFormInput type="password" id="floatingPassword" placeholder="Password" />
43+
<CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
4444
</CFormFloating>
4545
</Example>
4646
<p className="text-medium-emphasis small">
@@ -49,7 +49,7 @@ const FloatingLabels = () => {
4949
</p>
5050
<Example href="forms/floating-labels">
5151
<CFormFloating>
52-
<CFormControl
52+
<CFormInput
5353
type="email"
5454
id="floatingInputValue"
5555
placeholder="name@example.com"
@@ -68,33 +68,30 @@ const FloatingLabels = () => {
6868
</CCardHeader>
6969
<CCardBody>
7070
<p className="text-medium-emphasis small">
71-
By default, <code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>s will be
72-
the same height as <code>&lt;CFormControl&gt;</code>s.
71+
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as{' '}
72+
<code>&lt;CFormInput&gt;</code>s.
7373
</p>
7474
<Example href="forms/floating-labels#textareas">
7575
<CFormFloating>
76-
<CFormControl
77-
component="textarea"
76+
<CFormTextarea
7877
id="floatingTextarea"
7978
placeholder="Leave a comment here"
80-
></CFormControl>
79+
></CFormTextarea>
8180
<CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
8281
</CFormFloating>
8382
</Example>
8483
<p className="text-medium-emphasis small">
85-
To set a custom height on your{' '}
86-
<code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>, do not use the{' '}
84+
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the{' '}
8785
<code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
8886
inline or via custom CSS).
8987
</p>
9088
<Example href="forms/floating-labels#textareas">
9189
<CFormFloating>
92-
<CFormControl
93-
component="textarea"
90+
<CFormTextarea
9491
placeholder="Leave a comment here"
9592
id="floatingTextarea2"
9693
style={{ height: '100px' }}
97-
></CFormControl>
94+
></CFormTextarea>
9895
<CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
9996
</CFormFloating>
10097
</Example>
@@ -108,9 +105,9 @@ const FloatingLabels = () => {
108105
</CCardHeader>
109106
<CCardBody>
110107
<p className="text-medium-emphasis small">
111-
Other than <code>&lt;CFormControl&gt;</code>, floating labels are only available on{' '}
108+
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on{' '}
112109
<code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
113-
<code>&lt;CFormControl&gt;</code>s, they&#39;ll always show the{' '}
110+
<code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the{' '}
114111
<code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
115112
<strong>
116113
Selects with <code>size</code> and <code>multiple</code> are not supported.
@@ -144,7 +141,7 @@ const FloatingLabels = () => {
144141
<CRow xs={{ gutter: 2 }}>
145142
<CCol md>
146143
<CFormFloating>
147-
<CFormControl
144+
<CFormInput
148145
type="email"
149146
id="floatingInputGrid"
150147
placeholder="name@example.com"

0 commit comments

Comments
 (0)