Skip to content

Commit da5258b

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent b59bb39 commit da5258b

File tree

3 files changed

+34
-35
lines changed

3 files changed

+34
-35
lines changed

‎docs/4.0/components/CSidebar.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { Playground, Props } from 'docz'
99
import {
1010
CSidebar,
1111
CSidebarNav,
12-
CCreateNavItem,
1312
CNavGroup,
1413
CNavGroupItems,
1514
CNavItem,
@@ -49,7 +48,6 @@ import navigation from './_nav'
4948
</CNavItem>
5049
</CNavGroup>
5150
</CNavGroup>
52-
<CCreateNavItem items={navigation} />
5351
<CNavItem>
5452
<CNavLink href="#">Link 17</CNavLink>
5553
</CNavItem>

‎docs/4.0/forms/CFormRange.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515

1616
## Overview
1717

18-
Create custom `<input type="range">` controls with `<CFormControl>`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
18+
Create custom `<input type="range">` controls with `<CFormRange>`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
1919

2020
<Playground>
2121
<CFormLabel htmlFor="customRange1">Example range</CFormLabel>

‎docs/4.0/forms/CInputGroup.mdx‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ import {
1717
CDropdownMenu,
1818
CDropdownToggle,
1919
CForm,
20-
CFormControl,
20+
CFormInput,
2121
CFormCheck,
2222
CFormLabel,
2323
CFormSelect,
24+
CFormTextarea,
2425
CInputGroup,
2526
CInputGroupText,
2627
CCol,
@@ -34,35 +35,35 @@ Place one add-on or button on either side of an input. You may also place one on
3435
<Playground>
3536
<CInputGroup className="mb-3">
3637
<CInputGroupText id="basic-addon1">@</CInputGroupText>
37-
<CFormControl placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
38+
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
3839
</CInputGroup>
3940

4041
<CInputGroup className="mb-3">
41-
<CFormControl placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
42+
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
4243
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
4344
</CInputGroup>
4445

4546
<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
4647
<CInputGroup className="mb-3">
4748
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
48-
<CFormControl id="basic-url" aria-describedby="basic-addon3"/>
49+
<CFormInput id="basic-url" aria-describedby="basic-addon3"/>
4950
</CInputGroup>
5051

5152
<CInputGroup className="mb-3">
5253
<CInputGroupText>$</CInputGroupText>
53-
<CFormControl aria-label="Amount (to the nearest dollar)"/>
54+
<CFormInput aria-label="Amount (to the nearest dollar)"/>
5455
<CInputGroupText>.00</CInputGroupText>
5556
</CInputGroup>
5657

5758
<CInputGroup className="mb-3">
58-
<CFormControl placeholder="Username" aria-label="Username"/>
59+
<CFormInput placeholder="Username" aria-label="Username"/>
5960
<CInputGroupText>@</CInputGroupText>
60-
<CFormControl placeholder="Server" aria-label="Server"/>
61+
<CFormInput placeholder="Server" aria-label="Server"/>
6162
</CInputGroup>
6263

6364
<CInputGroup>
6465
<CInputGroupText>With textarea</CInputGroupText>
65-
<CFormControl component="textarea" aria-label="With textarea"></CFormControl>
66+
<CFormTextarea aria-label="With textarea"></CFormTextarea>
6667
</CInputGroup>
6768
</Playground>
6869

@@ -73,7 +74,7 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
7374
<Playground>
7475
<CInputGroup className="flex-nowrap">
7576
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
76-
<CFormControl placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping"/>
77+
<CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping"/>
7778
</CInputGroup>
7879
</Playground>
7980

@@ -86,17 +87,17 @@ Add the relative form sizing classes to the `<CInputGroup>` itself and contents
8687
<Playground>
8788
<CInputGroup size="sm" className="mb-3">
8889
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
89-
<CFormControl aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
90+
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
9091
</CInputGroup>
9192

9293
<CInputGroup className="mb-3">
9394
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
94-
<CFormControl aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
95+
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
9596
</CInputGroup>
9697

9798
<CInputGroup size="lg">
9899
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
99-
<CFormControl aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
100+
<CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
100101
</CInputGroup>
101102
</Playground>
102103

@@ -109,26 +110,26 @@ Place any checkbox or radio option within an input group's addon instead of text
109110
<CInputGroupText>
110111
<CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
111112
</CInputGroupText>
112-
<CFormControl aria-label="Text input with checkbox"/>
113+
<CFormInput aria-label="Text input with checkbox"/>
113114
</CInputGroup>
114115

115116
<CInputGroup>
116117
<CInputGroupText>
117118
<CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
118119
</CInputGroupText>
119-
<CFormControl aria-label="Text input with radio button"/>
120+
<CFormInput aria-label="Text input with radio button"/>
120121
</CInputGroup>
121122
</Playground>
122123

123124
## Multiple inputs
124125

125-
While multiple `<CFormControl>`s are supported visually, validation styles are only available for input groups with a single `<CFormControl>`.
126+
While multiple `<CFormInput>`s are supported visually, validation styles are only available for input groups with a single `<CFormInput>`.
126127

127128
<Playground>
128129
<CInputGroup>
129130
<CInputGroupText>First and last name</CInputGroupText>
130-
<CFormControl aria-label="First name"/>
131-
<CFormControl aria-label="Last name"/>
131+
<CFormInput aria-label="First name"/>
132+
<CFormInput aria-label="Last name"/>
132133
</CInputGroup>
133134
</Playground>
134135

@@ -140,11 +141,11 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
140141
<CInputGroup className="mb-3">
141142
<CInputGroupText>$</CInputGroupText>
142143
<CInputGroupText>0.00</CInputGroupText>
143-
<CFormControl aria-label="Dollar amount (with dot and two decimal places)"/>
144+
<CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
144145
</CInputGroup>
145146

146147
<CInputGroup>
147-
<CFormControl aria-label="Dollar amount (with dot and two decimal places)"/>
148+
<CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
148149
<CInputGroupText>$</CInputGroupText>
149150
<CInputGroupText>0.00</CInputGroupText>
150151
</CInputGroup>
@@ -155,22 +156,22 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
155156
<Playground>
156157
<CInputGroup className="mb-3">
157158
<CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
158-
<CFormControl placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
159+
<CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
159160
</CInputGroup>
160161

161162
<CInputGroup className="mb-3">
162-
<CFormControl placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
163+
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
163164
<CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
164165
</CInputGroup>
165166

166167
<CInputGroup className="mb-3">
167168
<CButton type="button" color="secondary" variant="outline">Button</CButton>
168169
<CButton type="button" color="secondary" variant="outline">Button</CButton>
169-
<CFormControl placeholder="" aria-label="Example text with two button addons"/>
170+
<CFormInput placeholder="" aria-label="Example text with two button addons"/>
170171
</CInputGroup>
171172

172173
<CInputGroup>
173-
<CFormControl placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
174+
<CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
174175
<CButton type="button" color="secondary" variant="outline">Button</CButton>
175176
<CButton type="button" color="secondary" variant="outline">Button</CButton>
176177
</CInputGroup>
@@ -190,11 +191,11 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
190191
<CDropdownItem href="#">Separated link</CDropdownItem>
191192
</CDropdownMenu>
192193
</CDropdown>
193-
<CFormControl aria-label="Text input with dropdown button"/>
194+
<CFormInput aria-label="Text input with dropdown button"/>
194195
</CInputGroup>
195196

196197
<CInputGroup className="mb-3">
197-
<CFormControl aria-label="Text input with dropdown button"/>
198+
<CFormInput aria-label="Text input with dropdown button"/>
198199
<CDropdown alignment="end" variant="input-group">
199200
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
200201
<CDropdownMenu>
@@ -218,7 +219,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
218219
<CDropdownItem href="#">Separated link</CDropdownItem>
219220
</CDropdownMenu>
220221
</CDropdown>
221-
<CFormControl aria-label="Text input with 2 dropdown buttons"/>
222+
<CFormInput aria-label="Text input with 2 dropdown buttons"/>
222223
<CDropdown alignment="end" variant="input-group">
223224
<CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
224225
<CDropdownMenu>
@@ -247,11 +248,11 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
247248
<CDropdownItem href="#">Separated link</CDropdownItem>
248249
</CDropdownMenu>
249250
</CDropdown>
250-
<CFormControl aria-label="Text input with segmented dropdown button"/>
251+
<CFormInput aria-label="Text input with segmented dropdown button"/>
251252
</CInputGroup>
252253

253254
<CInputGroup>
254-
<CFormControl aria-label="Text input with segmented dropdown button"/>
255+
<CFormInput aria-label="Text input with segmented dropdown button"/>
255256
<CDropdown alignment="end" variant="input-group">
256257
<CButton type="button" color="secondary" variant="outline">Action</CButton>
257258
<CDropdownToggle color="secondary" variant="outline" split/>
@@ -319,21 +320,21 @@ Input groups include support for custom selects and custom file inputs. Browser
319320
<Playground>
320321
<CInputGroup className="mb-3">
321322
<CInputGroupText component="label" htmlFor="inputGroupFile01">Upload</CInputGroupText>
322-
<CFormControl type="file" id="inputGroupFile01"/>
323+
<CFormInput type="file" id="inputGroupFile01"/>
323324
</CInputGroup>
324325

325326
<CInputGroup className="mb-3">
326-
<CFormControl type="file" id="inputGroupFile02"/>
327+
<CFormInput type="file" id="inputGroupFile02"/>
327328
<CInputGroupText component="label" htmlFor="inputGroupFile02">Upload</CInputGroupText>
328329
</CInputGroup>
329330

330331
<CInputGroup className="mb-3">
331332
<CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
332-
<CFormControl type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
333+
<CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
333334
</CInputGroup>
334335

335336
<CInputGroup>
336-
<CFormControl type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
337+
<CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
337338
<CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
338339
</CInputGroup>
339340
</Playground>

0 commit comments

Comments
 (0)