InputGroup

facultyai · Aug 18, 2021 · 8416b1e · 8416b1e
1 parent 5fc033a
commit 8416b1e
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 251 deletions.
diff --git a/docs/components_page/components/input_group.md b/docs/components_page/components/input_group.md
@@ -5,32 +5,34 @@ lead: Easily extend form controls by adding text, buttons or button groups on ei
 
 ## Basic example
 
-Wrap a compatible input component and an `InputGroupAddon` in an `InputGroup`. Use the `addon_type` keyword argument of `InputGroupAddon` to ensure the correct styling.
+Wrap a compatible input component and either a `Button` or `InputGroupText` in an `InputGroup`.
 
 {{example:components/input_group/simple.py:input_groups}}
 
 ## Sizing
 
-Use the `size` argument of `InputGroup` to set the size of all the contents, including inputs and addons. Possible options are `'lg'`, `'md'`, and `'sm'` for large, medium and small respectively.
+Use the `size` argument of `InputGroup` to set the size of all the contents, including inputs and addons. Possible options are `'lg'`, `'md'` (the default), and `'sm'` for large, medium and small respectively.
 
 {{example:components/input_group/size.py:input_group}}
 
 ## Checkboxes and radios
 
-You can place a `Checkbox` or `RadioButton` inside the `InputGroup` instead of just text.
+You can place a `Checkbox` or `RadioButton` inside the `InputGroupText` instead of just text.
 
 {{example:components/input_group/check_radio.py:input_groups}}
 
 ## Button addons
 
+Buttons can be placed inside an `InputGroup`
+
 {{example:components/input_group/button.py:input_group}}
 
 ## DropdownMenu addons
 
+And so can `DropdownMenu` components.
+
 {{example:components/input_group/dropdown.py:input_group}}
 
 {{apidoc:src/components/input/InputGroup.js}}
 
-{{apidoc:src/components/input/InputGroupAddon.js}}
-
 {{apidoc:src/components/input/InputGroupText.js}}
diff --git a/docs/components_page/components/input_group/button.py b/docs/components_page/components/input_group/button.py
@@ -3,10 +3,7 @@
 
 input_group = dbc.InputGroup(
     [
-        dbc.InputGroupAddon(
-            dbc.Button("Random name", id="input-group-button", n_clicks=0),
-            addon_type="prepend",
-        ),
+        dbc.Button("Random name", id="input-group-button", n_clicks=0),
         dbc.Input(id="input-group-button-input", placeholder="name"),
     ]
 )

diff --git a/docs/components_page/components/input_group/check_radio.py b/docs/components_page/components/input_group/check_radio.py
@@ -4,17 +4,9 @@
 input_groups = html.Div(
     [
         dbc.InputGroup(
-            [
-                dbc.InputGroupAddon(dbc.RadioButton(), addon_type="prepend"),
-                dbc.Input(),
-            ],
+            [dbc.InputGroupText(dbc.RadioButton()), dbc.Input()],
             class_name="mb-3",
         ),
-        dbc.InputGroup(
-            [
-                dbc.InputGroupAddon(dbc.Checkbox(), addon_type="prepend"),
-                dbc.Input(),
-            ]
-        ),
+        dbc.InputGroup([dbc.InputGroupText(dbc.Checkbox()), dbc.Input()]),
     ]
 )
diff --git a/docs/components_page/components/input_group/dropdown.py b/docs/components_page/components/input_group/dropdown.py
@@ -9,12 +9,10 @@
     dbc.DropdownMenuItem("Clear", id="dropdown-menu-item-clear"),
 ]
 
-
+# TODO: check this renders properly once DropdownMenu is updated
 input_group = dbc.InputGroup(
     [
-        dbc.DropdownMenu(
-            dropdown_menu_items, label="Generate", addon_type="prepend"
-        ),
+        dbc.DropdownMenu(dropdown_menu_items, label="Generate"),
         dbc.Input(id="input-group-dropdown-input", placeholder="name"),
     ]
 )

diff --git a/docs/components_page/components/input_group/simple.py b/docs/components_page/components/input_group/simple.py
@@ -4,30 +4,27 @@
 input_groups = html.Div(
     [
         dbc.InputGroup(
-            [
-                dbc.InputGroupAddon("@", addon_type="prepend"),
-                dbc.Input(placeholder="Username"),
-            ],
+            [dbc.InputGroupText("@"), dbc.Input(placeholder="Username")],
             class_name="mb-3",
         ),
         dbc.InputGroup(
             [
                 dbc.Input(placeholder="Recipient's username"),
-                dbc.InputGroupAddon("@example.com", addon_type="append"),
+                dbc.InputGroupText("@example.com"),
             ],
             class_name="mb-3",
         ),
         dbc.InputGroup(
             [
-                dbc.InputGroupAddon("$", addon_type="prepend"),
+                dbc.InputGroupText("$"),
                 dbc.Input(placeholder="Amount", type="number"),
-                dbc.InputGroupAddon(".00", addon_type="append"),
+                dbc.InputGroupText(".00"),
             ],
             class_name="mb-3",
         ),
         dbc.InputGroup(
             [
-                dbc.InputGroupAddon("With textarea", addon_type="prepend"),
+                dbc.InputGroupText("With textarea"),
                 dbc.Textarea(),
             ],
             class_name="mb-3",
@@ -40,7 +37,7 @@
                         {"label": "Option 2", "value": 2},
                     ]
                 ),
-                dbc.InputGroupAddon("With select", addon_type="append"),
+                dbc.InputGroupText("With select"),
             ]
         ),
     ]

diff --git a/docs/components_page/components/input_group/size.py b/docs/components_page/components/input_group/size.py
@@ -3,18 +3,10 @@
 
 input_group = html.Div(
     [
-        dbc.InputGroup(
-            [dbc.InputGroupAddon("Large", addon_type="prepend"), dbc.Input()],
-            size="lg",
-        ),
+        dbc.InputGroup([dbc.InputGroupText("Large"), dbc.Input()], size="lg"),
         html.Br(),
-        dbc.InputGroup(
-            [dbc.InputGroupAddon("Default", addon_type="prepend"), dbc.Input()]
-        ),
+        dbc.InputGroup([dbc.InputGroupText("Default"), dbc.Input()]),
         html.Br(),
-        dbc.InputGroup(
-            [dbc.InputGroupAddon("Small", addon_type="prepend"), dbc.Input()],
-            size="sm",
-        ),
+        dbc.InputGroup([dbc.InputGroupText("Small"), dbc.Input()], size="sm"),
     ]
 )
diff --git a/src/components/input/InputGroup.js b/src/components/input/InputGroup.js
@@ -1,23 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import {InputGroup as RSInputGroup} from 'reactstrap';
+import {default as RBInputGroup} from 'react-bootstrap/InputGroup';
 
 /**
  * A component for grouping together inputs and buttons, dropdowns or text.
  */
 const InputGroup = (props) => {
   const {children, loading_state, className, class_name, ...otherProps} = props;
   return (
-    <RSInputGroup
+    <RBInputGroup
       className={class_name || className}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
     >
       {children}
-    </RSInputGroup>
+    </RBInputGroup>
   );
 };
 

diff --git a/src/components/input/InputGroupAddon.js b/src/components/input/InputGroupAddon.js
diff --git a/src/components/input/InputGroupText.js b/src/components/input/InputGroupText.js
@@ -1,23 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import {InputGroupText as RSInputGroupText} from 'reactstrap';
+import InputGroup from 'react-bootstrap/InputGroup';
 
 /**
  * Use for wrapping text in InputGroups.
  */
 const InputGroupText = (props) => {
   const {children, loading_state, className, class_name, ...otherProps} = props;
   return (
-    <RSInputGroupText
+    <InputGroup.Text
       className={class_name || className}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
     >
       {children}
-    </RSInputGroupText>
+    </InputGroup.Text>
   );
 };