Skip to content

Commit 9303781

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent 626b7b2 commit 9303781

File tree

13 files changed

+205
-193
lines changed

13 files changed

+205
-193
lines changed

‎docs/4.0/components/CButtonGroup.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
CDropdownMenu,
2020
CDropdownToggle,
2121
CFormCheck,
22-
CFormControl,
22+
CFormInput,
2323
CInputGroup,
2424
CInputGroupText
2525
} from '../../../src/index.ts'
@@ -127,7 +127,7 @@ Feel free to combine input groups with button groups in your toolbars. Similar t
127127
</CButtonGroup>
128128
<CInputGroup>
129129
<CInputGroupText>@</CInputGroupText>
130-
<CFormControl placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
130+
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
131131
</CInputGroup>
132132
</CButtonToolbar>
133133
<CButtonToolbar className="justify-content-between" role="group" aria-label="Toolbar with button groups">
@@ -139,7 +139,7 @@ Feel free to combine input groups with button groups in your toolbars. Similar t
139139
</CButtonGroup>
140140
<CInputGroup>
141141
<CInputGroupText>@</CInputGroupText>
142-
<CFormControl placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
142+
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
143143
</CInputGroup>
144144
</CButtonToolbar>
145145
</Playground>

‎docs/4.0/components/CCard.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ Using the grid, wrap cards in columns and rows as needed.
219219

220220
<Playground>
221221
<CRow>
222-
<CCol sm="6">
222+
<CCol sm={6} >
223223
<CCard>
224224
<CCardBody>
225225
<CCardTitle>Special title treatment</CCardTitle>
@@ -228,7 +228,7 @@ Using the grid, wrap cards in columns and rows as needed.
228228
</CCardBody>
229229
</CCard>
230230
</CCol>
231-
<CCol sm="6">
231+
<CCol sm={6} >
232232
<CCard>
233233
<CCardBody>
234234
<CCardTitle>Special title treatment</CCardTitle>
@@ -430,10 +430,10 @@ Using a combination of grid and utility classes, cards can be made horizontal in
430430
<Playground>
431431
<CCard className="mb-3" style={{ maxWidth: '540px'}}>
432432
<CRow className="g-0">
433-
<CCol md="4">
433+
<CCol md={4}>
434434
<CCardImage component="svg" className="docs-placeholder-img rounded-0" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></CCardImage>
435435
</CCol>
436-
<CCol md="8">
436+
<CCol md={8}>
437437
<CCardBody>
438438
<CCardTitle>Card title</CCardTitle>
439439
<CCardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CCardText>

‎docs/4.0/components/CCollapse.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ A `<CButton>` can show and hide multiple elements.
6868
Toggle both elements
6969
</CButton>
7070
<CRow>
71-
<CCol xs="6">
71+
<CCol xs={6}>
7272
<CCollapse visible={visibleA}>
7373
<CCard className="mt-3">
7474
<CCardBody>
@@ -79,7 +79,7 @@ A `<CButton>` can show and hide multiple elements.
7979
</CCard>
8080
</CCollapse>
8181
</CCol>
82-
<CCol xs="6">
82+
<CCol xs={6}>
8383
<CCollapse visible={visibleB}>
8484
<CCard className="mt-3">
8585
<CCardBody>

‎docs/4.0/components/CDropdown.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
CDropdownToggle,
2424
CForm,
2525
CFormCheck,
26-
CFormControl,
26+
CFormInput,
2727
CFormLabel,
2828
CNavbar,
2929
CNavbarBrand,
@@ -474,11 +474,11 @@ Put a form within a dropdown menu, or make it into a dropdown menu.
474474
<CForm className="px-4 py-4">
475475
<div className="mb-3">
476476
<CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
477-
<CFormControl type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
477+
<CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
478478
</div>
479479
<div className="mb-3">
480480
<CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
481-
<CFormControl type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
481+
<CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
482482
</div>
483483
<div className="mb-3">
484484
<CFormCheck id="dropdownCheck" label="Remember me"/>

‎docs/4.0/components/CNavbar.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
CDropdownMenu,
2222
CDropdownToggle,
2323
CForm,
24-
CFormControl,
24+
CFormInput,
2525
CInputGroup,
2626
CInputGroupText,
2727
CNav,
@@ -85,7 +85,7 @@ Here's an example of all the sub-components included in a responsive light-theme
8585
</CNavItem>
8686
</CNavbarNav>
8787
<CForm className="d-flex">
88-
<CFormControl type="search" className="me-2" placeholder="Search"/>
88+
<CFormInput type="search" className="me-2" placeholder="Search"/>
8989
<CButton type="submit" color="success" variant="outline">Search</CButton>
9090
</CForm>
9191
</CCollapse>
@@ -258,7 +258,7 @@ Place various form controls and components within a navbar:
258258
<CNavbar colorScheme="light" className="bg-light">
259259
<CContainer fluid>
260260
<CForm className="d-flex">
261-
<CFormControl type="search" className="me-2" placeholder="Search"/>
261+
<CFormInput type="search" className="me-2" placeholder="Search"/>
262262
<CButton type="submit" color="success" variant="outline">Search</CButton>
263263
</CForm>
264264
</CContainer>
@@ -272,7 +272,7 @@ Immediate child elements of `<CNavbar>` use flex layout and will default to `jus
272272
<CContainer fluid>
273273
<CNavbarBrand href="#">Navbar</CNavbarBrand>
274274
<CForm className="d-flex">
275-
<CFormControl type="search" className="me-2" placeholder="Search"/>
275+
<CFormInput type="search" className="me-2" placeholder="Search"/>
276276
<CButton type="submit" color="success" variant="outline">Search</CButton>
277277
</CForm>
278278
</CContainer>
@@ -286,7 +286,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
286286
<CForm className="container-fluid">
287287
<CInputGroup>
288288
<CInputGroupText id="basic-addon1">@</CInputGroupText>
289-
<CFormControl placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
289+
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
290290
</CInputGroup>
291291
</CForm>
292292
</CNavbar>
@@ -354,7 +354,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
354354
</CNavItem>
355355
</CNavbarNav>
356356
<CForm className="d-flex">
357-
<CFormControl type="search" className="me-2" placeholder="Search"/>
357+
<CFormInput type="search" className="me-2" placeholder="Search"/>
358358
<CButton type="submit" color="light" variant="outline">Search</CButton>
359359
</CForm>
360360
</CCollapse>
@@ -391,7 +391,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
391391
</CNavItem>
392392
</CNavbarNav>
393393
<CForm className="d-flex">
394-
<CFormControl type="search" className="me-2" placeholder="Search"/>
394+
<CFormInput type="search" className="me-2" placeholder="Search"/>
395395
<CButton type="submit" color="light" variant="outline">Search</CButton>
396396
</CForm>
397397
</CCollapse>
@@ -428,7 +428,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
428428
</CNavItem>
429429
</CNavbarNav>
430430
<CForm className="d-flex">
431-
<CFormControl type="search" className="me-2" placeholder="Search"/>
431+
<CFormInput type="search" className="me-2" placeholder="Search"/>
432432
<CButton type="submit" color="primary" variant="outline">Search</CButton>
433433
</CForm>
434434
</CCollapse>
@@ -539,7 +539,7 @@ With no `<CNavbarBrand>` shown at the smallest breakpoint:
539539
</CNavItem>
540540
</CNavbarNav>
541541
<CForm className="d-flex">
542-
<CFormControl type="search" className="me-2" placeholder="Search"/>
542+
<CFormInput type="search" className="me-2" placeholder="Search"/>
543543
<CButton type="submit" color="success" variant="outline">Search</CButton>
544544
</CForm>
545545
</CCollapse>
@@ -578,7 +578,7 @@ With a brand name shown on the left and toggler on the right:
578578
</CNavItem>
579579
</CNavbarNav>
580580
<CForm className="d-flex">
581-
<CFormControl type="search" className="me-2" placeholder="Search"/>
581+
<CFormInput type="search" className="me-2" placeholder="Search"/>
582582
<CButton type="submit" color="success" variant="outline">Search</CButton>
583583
</CForm>
584584
</CCollapse>
@@ -617,7 +617,7 @@ With a toggler on the left and brand name on the right:
617617
</CNavItem>
618618
</CNavbarNav>
619619
<CForm className="d-flex">
620-
<CFormControl type="search" className="me-2" placeholder="Search"/>
620+
<CFormInput type="search" className="me-2" placeholder="Search"/>
621621
<CButton type="submit" color="success" variant="outline">Search</CButton>
622622
</CForm>
623623
</CCollapse>

‎docs/4.0/forms/CForm.mdx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
CButton,
1313
CForm,
1414
CFormCheck,
15-
CFormControl,
15+
CFormInput,
1616
CFormLabel,
1717
CFormSelect,
1818
CFormText,
@@ -32,12 +32,12 @@ Here’s a quick example to demonstrate CoreUI’s form styles. Keep reading for
3232
<CForm>
3333
<div className="mb-3">
3434
<CFormLabel htmlFor="exampleInputEmail1">Email address</CFormLabel>
35-
<CFormControl type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
35+
<CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
3636
<CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
3737
</div>
3838
<div className="mb-3">
3939
<CFormLabel htmlFor="exampleInputPassword1">Email Password</CFormLabel>
40-
<CFormControl type="password" id="exampleInputPassword1" />
40+
<CFormInput type="password" id="exampleInputPassword1" />
4141
</div>
4242
<CFormCheck
4343
className="mb-3"
@@ -67,7 +67,7 @@ Form text below inputs can be styled with `<CFormText>`. If a block-level elemen
6767
<CForm>
6868
<div className="mb-3">
6969
<CFormLabel htmlFor="inputPassword5">Password</CFormLabel>
70-
<CFormControl type="password" id="inputPassword5" aria-describedby="passwordHelpBlock" />
70+
<CFormInput type="password" id="inputPassword5" aria-describedby="passwordHelpBlock" />
7171
<CFormText id="passwordHelpBlock">
7272
Your password must be 8-20 characters long, contain letters and numbers, and must not
7373
contain spaces, special characters, or emoji.
@@ -86,7 +86,7 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
8686
</CFormLabel>
8787
</CCol>
8888
<CCol xs="auto">
89-
<CFormControl type="password" id="inputPassword6" aria-describedby="passwordHelpInline" />
89+
<CFormInput type="password" id="inputPassword6" aria-describedby="passwordHelpInline" />
9090
</CCol>
9191
<CCol xs="auto">
9292
<CFormText component="span" id="passwordHelpInline">
@@ -114,7 +114,7 @@ However, if your form also includes custom button-like elements such as `<CButto
114114
<legend>Disabled fieldset example</legend>
115115
<div className="mb-3">
116116
<CFormLabel htmlFor="disabledTextInput">Disabled input</CFormLabel>
117-
<CFormControl id="disabledTextInput" placeholder="Disabled input" />
117+
<CFormInput id="disabledTextInput" placeholder="Disabled input" />
118118
</div>
119119
<div className="mb-3">
120120
<CFormLabel htmlFor="disabledSelect">Disabled select menu</CFormLabel>

‎docs/4.0/forms/CFormCheck.mdx

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import {
1111
CButton,
1212
CForm,
1313
CFormCheck,
14-
CFormControl,
1514
CFormLabel,
15+
CFormSwitch,
1616
CFormText
1717
} from '../../../src/index.ts'
1818

@@ -73,18 +73,18 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
7373
A switch has the markup of a custom checkbox but uses the `switch` boolean properly to render a toggle switch. Switches also support the `disabled` attribute.
7474

7575
<Playground>
76-
<CFormCheck switch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
77-
<CFormCheck switch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
78-
<CFormCheck switch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
79-
<CFormCheck switch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
76+
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
77+
<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
78+
<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
79+
<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
8080
</Playground>
8181

8282
### Sizes
8383

8484
<Playground>
85-
<CFormCheck switch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
86-
<CFormCheck switch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
87-
<CFormCheck switch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
85+
<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
86+
<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
87+
<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
8888
</Playground>
8989

9090
## Default (stacked)
@@ -138,24 +138,24 @@ Create button-like checkboxes and radio buttons by using `button` boolean proper
138138
### Checkbox toggle buttons
139139

140140
<Playground>
141-
<CFormCheck button id="btn-check" autoComplete="off" label="Single toggle"/>
141+
<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle"/>
142142
</Playground>
143143

144144
<Playground>
145-
<CFormCheck button id="btn-check-2" autoComplete="off" label="Checked" defaultChecked/>
145+
<CFormCheck button={{ color: 'primary' }} id="btn-check-2" autoComplete="off" label="Checked" defaultChecked/>
146146
</Playground>
147147

148148
<Playground>
149-
<CFormCheck button id="btn-check-3" autoComplete="off" label="Disabled" disabled/>
149+
<CFormCheck button={{ color: 'primary' }} id="btn-check-3" autoComplete="off" label="Disabled" disabled/>
150150
</Playground>
151151

152152
### Radio toggle buttons
153153

154154
<Playground>
155-
<CFormCheck button buttonColor="secondary" type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
156-
<CFormCheck button buttonColor="secondary" type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
157-
<CFormCheck button buttonColor="secondary" type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
158-
<CFormCheck button buttonColor="secondary" type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
155+
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
156+
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
157+
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
158+
<CFormCheck button={{ color: 'secondary' }} type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
159159
</Playground>
160160

161161
### Outlined styles
@@ -164,13 +164,23 @@ Different variants of button, such at the various outlined styles, are supported
164164

165165
<Playground>
166166
<div>
167-
<CFormCheck button buttonColor="primary" buttonVariant="outline" id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
167+
<CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
168168
</div>
169169
<div>
170-
<CFormCheck button buttonColor="secondary" buttonVariant="outline" id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
170+
<CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
171171
</div>
172172
<div>
173-
<CFormCheck button buttonColor="success" buttonVariant="outline" type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
174-
<CFormCheck button buttonColor="danger" buttonVariant="outline" type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
173+
<CFormCheck button={{ color: 'success', variant: 'outline' }} type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
174+
<CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
175175
</div>
176-
</Playground>
176+
</Playground>
177+
178+
## API
179+
180+
### CFormCheck
181+
182+
<Props of={CFormCheck} />
183+
184+
### CFormSwitch
185+
186+
<Props of={CFormSwitch} />

0 commit comments

Comments
 (0)