8000 docs: update content · asmhasansarker/coreui-react@3b02762 · GitHub
[go: up one dir, main page]
Skip to content

Commit 3b02762

Browse files
mrholekmrholek
committed
docs: update content
1 parent 8d585dc commit 3b02762

File tree

14 files changed

+1691
-475
lines changed

14 files changed

+1691
-475
lines changed

‎.vscode/__old/CFormInput copy.tsx

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, ReactNode } from 'react'
2+
3+
import classNames from 'classnames'
4+
import PropTypes from 'prop-types'
5+
6+
import { CFormFeedback, CFormFloating, CFormLabel, CFormText } from './'
7+
8+
export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
9+
/**
10+
* A string of all className you want applied to the component.
11+
*/
12+
className?: string
13+
/**
14+
* Toggle the disabled state for the component.
15+
*/
16+
disabled?: boolean
17+
/**
18+
* Provide valuable, actionable feedback.
19+
*
20+
* @since 4.2.0
21+
*/
22+
feedback?: ReactNode | string
23+
/**
24+
* Add a caption for a component, and turn on floating label styling.
25+
*
26+
* @since 4.2.0
27+
*/
28+
floatingLabel?: ReactNode | string
29+
/**
30+
* Set component validation state to invalid.
31+
*/
32+
invalid?: boolean
33+
/**
34+
* Add a caption for a component.
35+
*
36+
* @since 4.2.0
37+
*/
38+
label?: ReactNode | string
39+
/**
40+
* Method called immediately after the `value` prop changes.
41+
*/
42+
onChange?: ChangeEventHandler<HTMLInputElement>
43+
/**
44+
* Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]
45+
*/
46+
plainText?: boolean
47+
/**
48+
* Toggle the readonly state for the component.
49+
*/
50+
readOnly?: boolean
51+
/**
52+
* Size the component small or large.
53+
*/
54+
size?: 'sm' | 'lg'
55+
/**
56+
* Add helper text to the component.
57+
*
58+
* @since 4.2.0
59+
*/
60+
text?: ReactNode | string
61+
/**
62+
* Display validation feedback in a styled tooltip.
63+
*
64+
* @since 4.2.0
65+
*/
66+
tooltipFeedback?: boolean
67+
/**
68+
* Specifies the type of component.
69+
*/
70+
type?: 'color' | 'file' | 'text' | string
71+
/**
72+
* Set component validation state to valid.
73+
*/
74+
valid?: boolean
75+
/**
76+
* The `value` attribute of component.
77+
*
78+
* @controllable onChange
79+
* */
80+
value?: string | string[] | number
81+
}
82+
83+
export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
84+
(
85+
{
86+
children,
87+
className,
88+
feedback,
89+
floatingLabel,
90+
invalid,
91+
label,
92+
plainText,
93+
size,
94+
text,
95+
tooltipFeedback,
96+
type = 'text',
97+
valid,
98+
...rest
99+
},
100+
ref,
101+
) => {
102+
const _className = classNames(
103+
plainText ? 'form-control-plaintext' : 'form-control',
104+
{
105+
[`form-control-${size}`]: size,
106+
'form-control-color': type === 'color',
107+
'is-invalid': invalid,
108+
'is-valid': valid,
109+
},
110+
className,
111+
)
112+
return floatingLabel ? (
113+
<CFormFloating>
114+
<input className={_className} type={type} {...rest} ref={ref}>
115+
{children}
116+
</input>
117+
<CFormLabel htmlFor={rest.id}>{label || floatingLabel}</CFormLabel>
118+
</CFormFloating>
119+
) : (
120+
<>
121+
{label && <CFormLabel htmlFor={rest.id}>{label}</CFormLabel>}
122+
<input className={_className} type={type} {...rest} ref={ref}>
123+
{children}
124+
</input>
125+
{text && <CFormText id={rest['aria-describedby']}>{text}</CFormText>}
126+
{feedback && (valid || invalid) && (
127+
<CFormFeedback
128+
id={rest['aria-describedby']}
129+
invalid={invalid}
130+
tooltip={tooltipFeedback}
131+
valid={valid}
132+
>
133+
{feedback}
134+
</CFormFeedback>
135+
)}
136+
</>
137+
)
138+
},
139+
)
140+
141+
CFormInput.propTypes = {
142+
children: PropTypes.node,
143+
className: PropTypes.string,
144+
feedback: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
145+
floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
146+
invalid: PropTypes.bool,
147+
label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
148+
plainText: PropTypes.bool,
149+
size: PropTypes.oneOf(['sm', 'lg']),
150+
text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
151+
tooltipFeedback: PropTypes.bool,
152+
type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]),
153+
valid: PropTypes.bool,
154+
}
155+
156+
CFormInput.displayName = 'CFormInput'

‎packages/docs/content/4.1/components/icon.mdx

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -191,17 +191,4 @@ export const TabPanesExample = () => {
191191

192192
### CIcon
193193

194-
```jsx
195-
import CIcon from '@coreui/icons-react'
196-
```
197-
198-
| Property | Description | Type | Default |
199-
| --- | --- | --- | --- |
200-
| **className** | A string of all className you want applied to the component. | `string` | - |
201-
| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `object` \| `string[]` | - |
202-
| **height** | The height attribute defines the vertical length of an icon. | `number` | - |
203-
| **icon** | Name of the icon placed in React object or SVG content. | `string` \| `string[]` | - |
204-
| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - |
205-
| **title** | Title tag content. | `string` | - |
206-
| **use** | If defined component will be rendered using 'use' tag. | `string` | - |
207-
| **width** | The width attribute defines the horizontal length of an icon. | `number` | - |
194+
`markdown:CIcon.api.mdx`

‎packages/docs/content/4.1/forms/checkbox.mdx

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
title: React Checkbox Components
3+
name: Checkbox
4+
description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
5+
menu: Forms
6+
route: /forms/checkbox
7+
---
8+
9+
import { useEffect, useRef } from 'react'
10+
import {
11+
CButton,
12+
CFormCheck,
13+
} from '@coreui/react/src/index'
14+
15+
## Approach
16+
17+
Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
18+
19+
## Checkboxes
20+
21+
<Example>
22+
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
23+
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
24+
</Example>
25+
26+
```jsx
27+
<CFormCheck id="flexCheckDefault" label="Default checkbox"/>
28+
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
29+
```
30+
31+
### Indeterminate
32+
33+
Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
34+
35+
<Example>
36+
<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
37+
</Example>
38+
39+
```jsx
40+
<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
41+
```
42+
43+
### Disabled
44+
45+
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
46+
47+
<Example>
48+
<CFormCheck label="Disabled checkbox" disabled />
49+
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
50+
</Example>
51+
52+
```jsx
53+
<CFormCheck label="Disabled checkbox" disabled/>
54+
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
55+
```
56+
57+
## Default (stacked)
58+
59+
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
60+
61+
<Example>
62+
<CFormCheck id="defaultCheck1" label="Default checkbox" />
63+
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
64+
</Example>
65+
66+
```jsx
67+
<CFormCheck id="defaultCheck1" label="Default checkbox"/>
68+
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled/>
69+
```
70+
71+
## Inline
72+
73+
Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
74+
75+
<Example>
76+
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
77+
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
78+
<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
79+
</Example>
80+
81+
```jsx
82+
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
83+
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
84+
<CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
85+
```
86+
87+
## Without labels
88+
89+
Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
90+
91+
<Example>
92+
<div>
93+
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
94+
</div>
95+
</Example>
96+
97+
```jsx
98+
<CFormCheck id="checkboxNoLabel" value="" aria-label="..."/>
99+
```
100+
101+
## Checkbox toggle buttons
102+
103+
Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
104+
105+
<Example>
106+
<CFormCheck
107+
button={{ color: 'primary' }}
108+
id="btn-check"
109+
autoComplete="off"
110+
label="Single toggle"
111+
/>
112+
</Example>
113+
114+
```jsx
115+
<CFormCheck button={{ color: 'primary' }} id="btn-check" autoComplete="off" label="Single toggle" />
116+
```
117+
118+
<Example>
119+
<CFormCheck
120+
button={{ color: 'primary' }}
121+
id="btn-check-2"
122+
autoComplete="off"
123+
label="Checked"
124+
defaultChecked
125+
/>
126+
</Example>
127+
128+
```jsx
129+
<CFormCheck
130+
button={{ color: 'primary' }}
131+
id="btn-check-2"
132+
autoComplete="off"
133+
label="Checked"
134+
defaultChecked
135+
/>
136+
```
137+
138+
<Example>
139+
<CFormCheck
140+
button={{ color: 'primary' }}
141+
id="btn-check-3"
142+
autoComplete="off"
143+
label="Disabled"
144+
disabled
145+
/>
146+
</Example>
147+
148+
```jsx
149+
<CFormCheck
150+
button={{ color: 'primary' }}
151+
id="btn-check-3"
152+
autoComplete="off"
153+
label="Disabled"
154+
disabled
155+
/>
156+
```
157+
158+
### Outlined styles
159+
160+
Different variants of button, such at the various outlined styles, are supported.
161+
162+
<Example>
163+
<CFormCheck
164+
button={{ color: 'primary', variant: 'outline' }}
165+
id="btn-check-outlined"
166+
autoComplete="off"
167+
label="Single toggle"
168+
/>
169+
<CFormCheck
170+
button={{ color: 'secondary', variant: 'outline' }}
171+
id="btn-check-2-outlined"
172+
autoComplete="off"
173+
label="Checked"
174+
defaultChecked
175+
/>
176+
</Example>
177+
178+
```jsx
179+
<CFormCheck button={{ color: 'primary', variant: 'outline' }} id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
180+
<CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
181+
```
182+
183+
## API
184+
185+
### CFormCheck
186+
187+
`markdown:CFormCheck.api.mdx`

0 commit comments

Comments
 (0)
0