Form

docs/components_page/components/form.md

@@ -11,6 +11,12 @@ The `FormGroup` is the easiest way to add structure to forms. It encourages prop
 
 {{example:components/form/simple.py:form}}
 
+
+## Floating labels
+
+Wrap an `Input` with `FloatingLabel` to create a label that floats over the form field.
+
+{{example:components/form/floating.py:form}}
 ## Horizontal form
 
 Create a horizontal form by setting `row=True` on the `FormGroup` component. Be sure to specify `width` on the `Label` component, and wrap your inputs in `Col` components.
@@ -35,7 +41,7 @@ Use the `valid` and `invalid` properties of `Input`, alongside the `FormFeedback
 
 The `Input` component has two properties, `valid` and `invalid`, that can be set in callbacks. They can be used to indicate whether the input value is valid or invalid. When `valid=True`, the `Input` will be styled with a green colored border, similarly when `invalid=True` the input will be styled with a red colored border.
 
-The `FormFeedback` component should be added to the `FormGroup` containing the `Input` it is associated with. Use the `valid` property to indicate whether the feedback should display for valid or invalid inputs. The feedback automatically display when the validity of the `Input` in the `FormGroup` matches that of the `FormFeedback`. This is perhaps easiest to see with an example such as the below.
+The `FormFeedback` component should be added to the `FormGroup` containing the `Input` it is associated with. Use the `type` property to indicate whether the feedback should display for valid or invalid inputs, it accepts the strings `"valid"` or `"invalid"`. The feedback automatically display when the validity of the `Input` in the `FormGroup` matches that of the `FormFeedback`. This is perhaps easiest to see with an example such as the below.
 
 {{example:components/form/feedback.py:email_input}}
 

docs/components_page/components/form/feedback.R

@@ -9,11 +9,11 @@ email_input <- htmlDiv(
         dbcInput(id = "email-input", type = "email", value = ""),
         dbcFormText("We only accept gmail..."),
         dbcFormFeedback(
-            "That looks like a gmail address :-)", valid = TRUE
+            "That looks like a gmail address :-)", type = "valid"
         ),
         dbcFormFeedback(
             "Sorry, we only accept gmail for some reason...",
-            valid = FALSE
+            type = "invalid"
         )
       )
     )

docs/components_page/components/form/feedback.jl

@@ -5,8 +5,8 @@ email_input = html_div([
         dbc_label("Email"),
         dbc_input(id="email-input", type="email", value=""),
         dbc_formtext("We only accept gmail..."),
-        dbc_formfeedback("That looks like a gmail address :-)", valid=true),
-        dbc_formfeedback("Sorry, we only accept gmail for some reason...", valid=false),
+        dbc_formfeedback("That looks like a gmail address :-)", type="valid"),
+        dbc_formfeedback("Sorry, we only accept gmail for some reason...", type="invalid"),
     ]),
 ]);
 

docs/components_page/components/form/feedback.py

@@ -10,11 +10,11 @@
                 dbc.Input(id="email-input", type="email", value=""),
                 dbc.FormText("We only accept gmail..."),
                 dbc.FormFeedback(
-                    "That looks like a gmail address :-)", valid=True
+                    "That looks like a gmail address :-)", type="valid"
                 ),
                 dbc.FormFeedback(
                     "Sorry, we only accept gmail for some reason...",
-                    valid=False,
+                    type="invalid",
                 ),
             ]
         )

docs/components_page/components/form/floating.py

@@ -0,0 +1,3 @@
+import dash_bootstrap_components as dbc
+
+form = dbc.FloatingLabel(dbc.Input(type="email"), label="Email address")

docs/components_page/components/form/inline.py

@@ -18,5 +18,4 @@
         ),
         dbc.Button("Submit", color="primary"),
     ],
-    inline=True,
 )

docs/components_page/components/form/row.py

@@ -10,7 +10,7 @@
             width=10,
         ),
     ],
-    row=True,
+    class_name="row",
 )
 
 password_input = dbc.FormGroup(
@@ -25,7 +25,7 @@
             width=10,
         ),
     ],
-    row=True,
+    class_name="row",
 )
 
 radios_input = dbc.FormGroup(
@@ -47,7 +47,7 @@
             width=10,
         ),
     ],
-    row=True,
+    class_name="row",
 )
 
 form = dbc.Form([email_input, password_input, radios_input])

docs/components_page/components/input/radio_check_standalone.py

@@ -15,7 +15,6 @@
                     class_name="form-check-label",
                 ),
             ],
-            check=True,
         ),
         dbc.FormGroup(
             [
@@ -28,7 +27,6 @@
                     class_name="form-check-label",
                 ),
             ],
-            check=True,
         ),
         html.Br(),
         html.P(id="standalone-radio-check-output"),

docs/demos/theme_explorer/input.py

@@ -10,14 +10,14 @@
             [
                 dbc.Label("Valid text input"),
                 dbc.Input(type="text", valid=True),
-                dbc.FormFeedback("That's a valid input!", valid=True),
+                dbc.FormFeedback("That's a valid input!", type="valid"),
             ]
         ),
         dbc.FormGroup(
             [
                 dbc.Label("Invalid text input"),
                 dbc.Input(type="text", invalid=True),
-                dbc.FormFeedback("That's an invalid input..."),
+                dbc.FormFeedback("That's an invalid input...", type="invalid"),
             ]
         ),
     ]

src/components/form/FloatingLabel.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {omit} from 'ramda';
+import {default as RBFloatingLabel} from 'react-bootstrap/FloatingLabel';
+
+/**
+ * A component for adding float labels to form controls in forms.
+ */
+const FloatingLabel = props => {
+  const {
+    children,
+    html_for,
+    className,
+    class_name,
+    loading_state,
+    ...otherProps
+  } = props;
+
+  // TODO: check this component
+  return (
+    <RBFloatingLabel
+      htmlFor={html_for}
+      className={class_name || className}
+      {...omit(['setProps'], otherProps)}
+      data-dash-is-loading={
+        (loading_state && loading_state.is_loading) || undefined
+      }
+    >
+      {children}
+    </RBFloatingLabel>
+  );
+};
+
+FloatingLabel.propTypes = {
+  /**
+   * The ID of this component, used to identify dash components
+   * in callbacks. The ID needs to be unique across all of the
+   * components in an app.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The children of this component
+   */
+  children: PropTypes.node,
+
+  /**
+   * Defines CSS styles which will override styles previously set.
+   */
+  style: PropTypes.object,
+
+  /**
+   * Often used with CSS to style elements with common properties.
+   */
+  class_name: PropTypes.string,
+
+  /**
+   * The text of the label.
+   */
+  label: PropTypes.string,
+
+  /**
+   * **DEPRECATED** Use `class_name` instead.
+   *
+   * Often used with CSS to style elements with common properties.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A unique identifier for the component, used to improve
+   * performance by React.js while rendering components
+   * See https://reactjs.org/docs/lists-and-keys.html for more info
+   */
+  key: PropTypes.string,
+
+  /**
+   * Set the `for` attribute of the label to bind it to a particular element
+   */
+  html_for: PropTypes.string,
+
+  /**
+   * Object that holds the loading state object coming from dash-renderer
+   */
+  loading_state: PropTypes.shape({
+    /**
+     * Determines if the component is loading or not
+     */
+    is_loading: PropTypes.bool,
+    /**
+     * Holds which property is loading
+     */
+    prop_name: PropTypes.string,
+    /**
+     * Holds the name of the component that is loading
+     */
+    component_name: PropTypes.string
+  })
+};
+
+export default FloatingLabel;

src/components/form/Form.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import {Form as RSForm} from 'reactstrap';
+import {default as RBForm} from 'react-bootstrap/Form';
 
 /**
  * The Form component can be used to organise collections of input components
@@ -19,7 +19,7 @@ const Form = (props) => {
     ...otherProps
   } = props;
   return (
-    <RSForm
+    <RBForm
       onSubmit={(e) => {
         if (prevent_default_on_submit) {
           e.preventDefault();
@@ -38,7 +38,7 @@ const Form = (props) => {
       }
     >
       {children}
-    </RSForm>
+    </RBForm>
   );
 };
 
@@ -96,13 +96,6 @@ Form.propTypes = {
    */
   method: PropTypes.oneOf(['GET', 'POST']),
 
-  /**
-   * Use inline=True to apply the `form-inline` class, allowing you to display
-   * a series of labels, form controls, and buttons on a single horizontal row.
-   * Form controls within inline forms vary slightly from their default states.
-   */
-  inline: PropTypes.bool,
-
   /**
    * Number of times the `Enter` key was pressed while the input had focus.
    */

src/components/form/FormFeedback.js

@@ -1,25 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import {FormFeedback as RSFormFeedback} from 'reactstrap';
+import FormControl from 'react-bootstrap/FormControl';
 
 /**
  * The FormFeedback component can be used to provide feedback on input values
  * in a form. Add the form feedback to a `FormGroup` and set the `valid` or
  * `invalid` props of the associated input to toggle visibility.
  */
-const FormFeedback = (props) => {
+const FormFeedback = props => {
   const {children, loading_state, className, class_name, ...otherProps} = props;
   return (
-    <RSFormFeedback
+    <FormControl.Feedback
       className={class_name || className}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
     >
       {children}
-    </RSFormFeedback>
+    </FormControl.Feedback>
   );
 };
 
@@ -61,10 +61,9 @@ FormFeedback.propTypes = {
   key: PropTypes.string,
 
   /**
-   * If True apply the valid styling to the feedback, else apply invalid
-   * styling.
+   * Either 'valid' or 'invalid'.
    */
-  valid: PropTypes.bool,
+  type: PropTypes.string,
 
   /**
    * Use styled tooltips to display validation feedback.
@@ -86,8 +85,8 @@ FormFeedback.propTypes = {
     /**
      * Holds the name of the component that is loading
      */
-    component_name: PropTypes.string,
-  }),
+    component_name: PropTypes.string
+  })
 };
 
 export default FormFeedback;

src/components/form/FormGroup.js

@@ -1,23 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import {FormGroup as RSFormGroup} from 'reactstrap';
+import {default as RBFormGroup} from 'react-bootstrap/FormGroup';
 
 /**
  * A component for grouping together inputs, labels, text and feedback.
  */
 const FormGroup = (props) => {
   const {children, loading_state, className, class_name, ...otherProps} = props;
   return (
-    <RSFormGroup
+    <RBFormGroup
       className={class_name || className}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
     >
       {children}
-    </RSFormGroup>
+    </RBFormGroup>
   );
 };
 
@@ -58,28 +58,6 @@ FormGroup.propTypes = {
    */
   key: PropTypes.string,
 
-  /**
-   * Apply row class to FormGroup to allow labels and inputs to be displayed
-   * horizontally in a row.
-   */
-  row: PropTypes.bool,
-
-  /**
-   * Apply `form-check` class instead of `form-group`. Useful when positioning
-   * labels with checkbox / radio inputs. Usually it will be better to use the
-   * pre-built dbc.Checklist or dbc.RadioItems components.
-   */
-  check: PropTypes.bool,
-
-  /**
-   * If check is True, apply the `form-check-inline` class in addition to
-   * `form-check`. If you want to make an inline list of checkboxes / radios
-   * we recommend using either dbc.Checklist or dbc.RadioItems with inline=True
-   *
-   * This prop has no effect if check=False.
-   */
-  inline: PropTypes.bool,
-
   /**
    * Object that holds the loading state object coming from dash-renderer
    */