8000 feat(CFormFloating): add new component · JM066/coreui-react@80b648d · GitHub
[go: up one dir, main page]
Skip to content

Commit 80b648d

Browse files
mrholekmrholek
committed
feat(CFormFloating): add new component
1 parent 944750e commit 80b648d

File tree

3 files changed

+153
-0
lines changed

3 files changed

+153
-0
lines changed

‎src/components/form/CFormFloating.mdx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
---
2+
title: React Floating labels
3+
name: Floating labels
4+
description: React floating label component. Create beautifully simple form labels that float over your input fields.
5+
menu: Forms
6+
route: /forms/floating-labels
7+
---
8+
9+
import { Playground, Props } from 'docz'
10+
import { CButton } from '../button/CButton'
11+
import { CForm } from './CForm'
12+
import { CFormControl } from './CFormControl'
13+
import { CFormFloating } from './CFormFloating'
14+
import { CFormLabel } from './CFormLabel'
15+
import { CFormSelect } from './CFormSelect'
16+
import { CCol } from '../grid/CCol'
17+
import { CRow } from '../grid/CRow'
18+
19+
## Example
20+
21+
Wrap a pair of `<CFormControl>` and `<CFormLabel>` elements in `CFormFloating` to enable floating labels with textual form fields. A `placeholder` is required on each `<CFormControl>` as our method of CSS-only floating labels uses the `:placeholder-shown` pseudo-element. Also note that the `<CFormControl>` must come first so we can utilize a sibling selector (e.g., `~`).
22+
23+
<Playground>
24+
<CFormFloating className="mb-3">
25+
<CFormControl type="email" id="floatingInput" placeholder="name@example.com" />
26+
<CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
27+
</CFormFloating>
28+
<CFormFloating>
29+
<CFormControl type="password" id="floatingPassword" placeholder="Password" />
30+
<CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
31+
</CFormFloating>
32+
</Playground>
33+
34+
When there's a `value` already defined, `<CFormLabel>`s will automatically adjust to their floated position.
35+
36+
<Playground>
37+
<CFormFloating>
38+
<CFormControl
39+
type="email"
40+
id="floatingInputValue"
41+
placeholder="name@example.com"
42+
value="test@example.com"
43+
/>
44+
<CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
45+
</CFormFloating>
46+
</Playground>
47+
48+
## Textareas
49+
50+
By default, `<CFormControl component="textarea">`s will be the same height as `<CFormControl>`s.
51+
52+
<Playground>
53+
<CFormFloating>
54+
<CFormControl
55+
component="textarea"
56+
id="floatingTextarea"
57+
placeholder="Leave a comment here"
58+
></CFormControl>
59+
<CFormLabel for="floatingTextarea">Comments</CFormLabel>
60+
</CFormFloating>
61+
</Playground>
62+
63+
To set a custom height on your `<CFormControl component="textarea">`, do not use the `rows` attribute. Instead, set an explicit `height` (either inline or via custom CSS).
64+
65+
<Playground>
66+
<CFormFloating>
67+
<CFormControl
68+
component="textarea"
69+
placeholder="Leave a comment here"
70+
id="floatingTextarea2"
71+
style={{ height: '100px' }}
72+
></CFormControl>
73+
<CFormLabel for="floatingTextarea2">Comments</CFormLabel>
74+
</CFormFloating>
75+
</Playground>
76+
77+
## Selects
78+
79+
Other than `<CFormControl>`, floating labels are only available on `<CFormSelect>`s. They work in the same way, but unlike `<CFormControl>`s, they'll always show the `<CFormLabel>` in its floated state. **Selects with `size` and `multiple` are not supported.**
80+
81+
<Playground>
82+
<CFormFloating>
83+
<CFormSelect id="floatingSelect" aria-label="Floating label select example">
84+
<option selected>Open this select menu</option>
85+
<option value="1">One</option>
86+
<option value="2">Two</option>
87+
<option value="3">Three</option>
88+
</CFormSelect>
89+
<CFormLabel for="floatingSelect">Works with selects</CFormLabel>
90+
</CFormFloating>
91+
</Playground>
92+
93+
## Layout
94+
95+
When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.
96+
97+
<Playground>
98+
<CRow xs={{gutter: 2}}>
99+
<CCol md>
100+
<CFormFloating>
101+
<CFormControl type="email" id="floatingInputGrid" placeholder="name@example.com" value="email@example.com" />
102+
<CFormLabel for="floatingInputGrid">Email address</CFormLabel>
103+
</CFormFloating>
104+
</CCol>
105+
<CCol md>
106+
<CFormFloating>
107+
<CFormSelect id="floatingSelectGrid" aria-label="Floating label select example">
108+
<option selected>Open this select menu</option>
109+
<option value="1">One</option>
110+
<option value="2">Two</option>
111+
<option value="3">Three</option>
112+
</CFormSelect>
113+
<CFormLabel for="floatingSelectGrid">Works with selects</CFormLabel>
114+
</CFormFloating>
115+
</CCol>
116+
</CRow>
117+
</Playground>
118+
119+
## API
120+
121+
### CFormFloating
122+
123+
<Props of={CFormFloating} />

‎src/components/form/CFormFloating.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { forwardRef, HTMLAttributes } from 'react'
2+
import PropTypes from 'prop-types'
3+
import classNames from 'classnames'
4+
5+
export interface CFormFloatingProps extends HTMLAttributes<HTMLDivElement> {
6+
/**
7+
* A string of all className you want applied to the component. [docs]
8+
*/
9+
className?: string
10+
}
11+
12+
export const CFormFloating = forwardRef<HTMLDivElement, CFormFloatingProps>(
13+
({ children, className, ...rest }, ref) => {
14+
const _className = classNames('form-floating', className)
15+
return (
16+
<div className={_className} {...rest} ref={ref}>
17+
{children}
18+
</div>
19+
)
20+
},
21+
)
22+
23+
CFormFloating.propTypes = {
24+
children: PropTypes.node,
25+
className: PropTypes.string,
26+
}
27+
28+
CFormFloating.displayName = 'CFormFloating'

‎src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import { CForm } from './components/form/CForm'
5050
import { CFormCheck } from './components/form/CFormCheck'
5151
import { CFormControl } from './components/form/CFormControl'
5252
import { CFormFeedback } from './components/form/CFormFeedback'
53+
import { CFormFloating } from './components/form/CFormFloating'
5354
import { CFormLabel } from './components/form/CFormLabel'
5455
import { CFormRange } from './components/form/CFormRange'
5556
import { CFormSelect } from './components/form/CFormSelect'
@@ -182,6 +183,7 @@ export {
182183
CFormCheck,
183184
CFormControl,
184185
CFormFeedback,
186+
CFormFloating,
185187
CFormLabel,
186188
CFormRange,
187189
CFormSelect,

0 commit comments

Comments
 (0)
0