-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(v5): Add floating labels (#5567)
* feat(v5): Add floating labels * Add tests * Clean up * Clean up * Fix bad merge
- Loading branch information
Showing
11 changed files
with
233 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import classNames from 'classnames'; | ||
import PropTypes from 'prop-types'; | ||
import * as React from 'react'; | ||
|
||
import FormGroup, { FormGroupProps } from './FormGroup'; | ||
import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers'; | ||
import { useBootstrapPrefix } from './ThemeProvider'; | ||
|
||
export interface FloatingLabelProps extends FormGroupProps, BsPrefixProps { | ||
controlId?: string; | ||
label: React.ReactNode; | ||
} | ||
|
||
const propTypes = { | ||
as: PropTypes.elementType, | ||
|
||
/** | ||
* Sets `id` on `<FormControl>` and `htmlFor` on `<label>`. | ||
*/ | ||
controlId: PropTypes.string, | ||
|
||
/** | ||
* Form control label. | ||
*/ | ||
label: PropTypes.node.isRequired, | ||
}; | ||
|
||
const FloatingLabel: BsPrefixRefForwardingComponent< | ||
'div', | ||
FloatingLabelProps | ||
> = React.forwardRef( | ||
({ bsPrefix, className, children, controlId, label, ...props }, ref) => { | ||
bsPrefix = useBootstrapPrefix(bsPrefix, 'form-floating'); | ||
|
||
return ( | ||
<FormGroup | ||
ref={ref} | ||
className={classNames(className, bsPrefix)} | ||
controlId={controlId} | ||
{...props} | ||
> | ||
{children} | ||
<label htmlFor={controlId}>{label}</label> | ||
</FormGroup> | ||
); | ||
}, | ||
); | ||
|
||
FloatingLabel.displayName = 'FloatingLabel'; | ||
FloatingLabel.propTypes = propTypes; | ||
|
||
export default FloatingLabel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import createWithBsPrefix from './createWithBsPrefix'; | ||
|
||
export default createWithBsPrefix('form-floating'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { mount } from 'enzyme'; | ||
|
||
import FloatingLabel from '../src/FloatingLabel'; | ||
import Form from '../src/Form'; | ||
|
||
describe('<FloatingLabel>', () => { | ||
it('should render correctly', () => { | ||
const wrapper = mount( | ||
<FloatingLabel label="MyLabel"> | ||
<Form.Control type="text" /> | ||
</FloatingLabel>, | ||
); | ||
|
||
wrapper | ||
.assertSingle('div.form-floating') | ||
.assertSingle('input[type="text"]'); | ||
|
||
wrapper.assertSingle('label').text().should.equal('MyLabel'); | ||
}); | ||
|
||
it('should pass controlId to input and label', () => { | ||
const wrapper = mount( | ||
<FloatingLabel label="MyLabel" controlId="MyId"> | ||
<Form.Control type="text" /> | ||
</FloatingLabel>, | ||
); | ||
|
||
wrapper.assertSingle('input[id="MyId"]'); | ||
wrapper.assertSingle('label[htmlFor="MyId"]'); | ||
}); | ||
|
||
it('should support "as"', () => { | ||
mount( | ||
<FloatingLabel label="MyLabel" as="span"> | ||
<Form.Control type="text" /> | ||
</FloatingLabel>, | ||
).assertSingle('span.form-floating'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<> | ||
<FloatingLabel | ||
controlId="floatingInput" | ||
label="Email address" | ||
className="mb-3" | ||
> | ||
<Form.Control type="email" placeholder="name@example.com" /> | ||
</FloatingLabel> | ||
<FloatingLabel controlId="floatingPassword" label="Password"> | ||
<Form.Control type="password" placeholder="Password" /> | ||
</FloatingLabel> | ||
</>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<> | ||
<Form.Floating className="mb-3"> | ||
<Form.Control | ||
id="floatingInputCustom" | ||
type="email" | ||
placeholder="name@example.com" | ||
/> | ||
<label htmlFor="floatingInputCustom">Email address</label> | ||
</Form.Floating> | ||
<Form.Floating> | ||
<Form.Control | ||
id="floatingPasswordCustom" | ||
type="password" | ||
placeholder="Password" | ||
/> | ||
<label htmlFor="floatingPasswordCustom">Password</label> | ||
</Form.Floating> | ||
</>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<Row className="g-2"> | ||
<Col md> | ||
<FloatingLabel controlId="floatingInputGrid" label="Email address"> | ||
<Form.Control type="email" placeholder="name@example.com" /> | ||
</FloatingLabel> | ||
</Col> | ||
<Col md> | ||
<FloatingLabel controlId="floatingSelectGrid" label="Works with selects"> | ||
<Form.Select aria-label="Floating label select example"> | ||
<option>Open this select menu</option> | ||
<option value="1">One</option> | ||
<option value="2">Two</option> | ||
<option value="3">Three</option> | ||
</Form.Select> | ||
</FloatingLabel> | ||
</Col> | ||
</Row>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<FloatingLabel controlId="floatingSelect" label="Works with selects"> | ||
<Form.Select aria-label="Floating label select example"> | ||
<option>Open this select menu</option> | ||
<option value="1">One</option> | ||
<option value="2">Two</option> | ||
<option value="3">Three</option> | ||
</Form.Select> | ||
</FloatingLabel>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<> | ||
<FloatingLabel controlId="floatingTextarea" label="Comments" className="mb-3"> | ||
<Form.Control as="textarea" placeholder="Leave a comment here" /> | ||
</FloatingLabel> | ||
<FloatingLabel controlId="floatingTextarea2" label="Comments"> | ||
<Form.Control | ||
as="textarea" | ||
placeholder="Leave a comment here" | ||
style={{ height: '100px' }} | ||
/> | ||
</FloatingLabel> | ||
</>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters