diff --git a/src/FormGroup.js b/src/FormGroup.js index b4b56fd0f..6456a7226 100644 --- a/src/FormGroup.js +++ b/src/FormGroup.js @@ -9,6 +9,7 @@ const propTypes = { check: PropTypes.bool, switch: PropTypes.bool, inline: PropTypes.bool, + floating: PropTypes.bool, disabled: PropTypes.bool, tag: tagPropType, className: PropTypes.string, @@ -27,6 +28,7 @@ const FormGroup = (props) => { disabled, check, inline, + floating, tag: Tag, ...attributes } = props; @@ -39,7 +41,8 @@ const FormGroup = (props) => { formCheck ? 'form-check' : 'mb-3', props.switch ? 'form-switch' : false, formCheck && inline ? 'form-check-inline' : false, - formCheck && disabled ? 'disabled' : false + formCheck && disabled ? 'disabled' : false, + floating && 'form-floating' ), cssModule); if (Tag === 'fieldset') { diff --git a/src/__tests__/FormGroup.spec.js b/src/__tests__/FormGroup.spec.js index 64e247205..06bf663cf 100644 --- a/src/__tests__/FormGroup.spec.js +++ b/src/__tests__/FormGroup.spec.js @@ -118,6 +118,18 @@ describe('FormGroup', () => { expect(wrapper.hasClass('row')).toBe(false); }); + it('should render with "form-floating" class when floating prop is truthy', () => { + const wrapper = shallow(Yo!); + + expect(wrapper.hasClass('form-floating')).toBe(true); + }); + + it('should not render with "form-floating" class when floating prop is falsey', () => { + const wrapper = shallow(Yo!); + + expect(wrapper.hasClass('form-floating')).toBe(false); + }); + it('should render additional classes', () => { const wrapper = shallow(Yo!); diff --git a/stories/Forms.stories.js b/stories/Forms.stories.js index 18e5e88e6..503491022 100644 --- a/stories/Forms.stories.js +++ b/stories/Forms.stories.js @@ -15,15 +15,16 @@ export default { } }; -export { default as Input } from './examples/Input'; -export { default as Form } from './examples/Form'; -export { default as FormFeedback } from './examples/FormFeedback'; -export { default as FormGrid } from './examples/FormGrid'; -export { default as FormGridFormRow } from './examples/FormGridFormRow'; -export { default as FormInline } from './examples/FormInline'; -export { default as LabelHidden } from './examples/LabelHidden'; -export { default as InlineCheckboxes } from './examples/InlineCheckboxes'; -export { default as InputGridSizing } from './examples/InputGridSizing'; -export { default as InputSizing } from './examples/InputSizing'; -export { default as InputType } from './examples/InputType'; -export { default as Props } from './examples/FormProps'; \ No newline at end of file +export { default as Input } from './examples/Form/Input'; +export { default as Form } from './examples/Form/Form'; +export { default as FormFeedback } from './examples/Form/FormFeedback'; +export { default as FormGrid } from './examples/Form/FormGrid'; +export { default as FormGridFormRow } from './examples/Form/FormGridFormRow'; +export { default as FormInline } from './examples/Form/FormInline'; +export { default as FloatingLabels } from './examples/Form/LabelFloating'; +export { default as HiddenLabels } from './examples/Form/LabelHidden'; +export { default as InlineCheckboxes } from './examples/Form/InlineCheckboxes'; +export { default as InputGridSizing } from './examples/Form/InputGridSizing'; +export { default as InputSizing } from './examples/Form/InputSizing'; +export { default as InputType } from './examples/Form/InputType'; +export { default as Props } from './examples/Form/FormProps'; \ No newline at end of file diff --git a/stories/examples/Form.js b/stories/examples/Form/Form.js similarity index 100% rename from stories/examples/Form.js rename to stories/examples/Form/Form.js diff --git a/stories/examples/FormFeedback.js b/stories/examples/Form/FormFeedback.js similarity index 100% rename from stories/examples/FormFeedback.js rename to stories/examples/Form/FormFeedback.js diff --git a/stories/examples/FormGrid.js b/stories/examples/Form/FormGrid.js similarity index 100% rename from stories/examples/FormGrid.js rename to stories/examples/Form/FormGrid.js diff --git a/stories/examples/FormGridFormRow.js b/stories/examples/Form/FormGridFormRow.js similarity index 100% rename from stories/examples/FormGridFormRow.js rename to stories/examples/Form/FormGridFormRow.js diff --git a/stories/examples/FormInline.js b/stories/examples/Form/FormInline.js similarity index 100% rename from stories/examples/FormInline.js rename to stories/examples/Form/FormInline.js diff --git a/stories/examples/FormProps.js b/stories/examples/Form/FormProps.js similarity index 87% rename from stories/examples/FormProps.js rename to stories/examples/Form/FormProps.js index 5f237b468..85487cd1d 100644 --- a/stories/examples/FormProps.js +++ b/stories/examples/Form/FormProps.js @@ -1,6 +1,6 @@ import React from 'react'; import { Form, FormGroup, Label, Input, FormText } from 'reactstrap'; -import Props from './Props'; +import Props from '../Props'; const Example = () => ( diff --git a/stories/examples/InlineCheckboxes.js b/stories/examples/Form/InlineCheckboxes.js similarity index 100% rename from stories/examples/InlineCheckboxes.js rename to stories/examples/Form/InlineCheckboxes.js diff --git a/stories/examples/Input.js b/stories/examples/Form/Input.js similarity index 100% rename from stories/examples/Input.js rename to stories/examples/Form/Input.js diff --git a/stories/examples/InputGridSizing.js b/stories/examples/Form/InputGridSizing.js similarity index 100% rename from stories/examples/InputGridSizing.js rename to stories/examples/Form/InputGridSizing.js diff --git a/stories/examples/InputSizing.js b/stories/examples/Form/InputSizing.js similarity index 100% rename from stories/examples/InputSizing.js rename to stories/examples/Form/InputSizing.js diff --git a/stories/examples/InputType.js b/stories/examples/Form/InputType.js similarity index 100% rename from stories/examples/InputType.js rename to stories/examples/Form/InputType.js diff --git a/stories/examples/Form/LabelFloating.js b/stories/examples/Form/LabelFloating.js new file mode 100644 index 000000000..6d274a56a --- /dev/null +++ b/stories/examples/Form/LabelFloating.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; + +const Example = (props) => { + return ( + <> +

Wrap a pair of <Input> and <Label> components in <FormGroup floating> to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <Input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <Input> must come first so we can utilize a sibling selector (e.g., ~).

+
+ + + + + {' '} + + + + + {' '} + +
+ + ); +} + +export default Example; diff --git a/stories/examples/LabelHidden.js b/stories/examples/Form/LabelHidden.js similarity index 100% rename from stories/examples/LabelHidden.js rename to stories/examples/Form/LabelHidden.js diff --git a/types/lib/FormGroup.d.ts b/types/lib/FormGroup.d.ts index cbe797d79..78f6e0ec7 100644 --- a/types/lib/FormGroup.d.ts +++ b/types/lib/FormGroup.d.ts @@ -6,6 +6,7 @@ export interface FormGroupProps extends React.HTMLAttributes { row?: boolean; check?: boolean; inline?: boolean; + floating?: boolean; disabled?: boolean; tag?: React.ElementType; cssModule?: CSSModule;