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;