feat!: remove InputGroupAddon

reactstrap · Oct 27, 2021 · 322d0ad · 322d0ad
1 parent 01f64df
commit 322d0ad
Show file tree

Hide file tree

Showing 14 changed files with 68 additions and 258 deletions.
diff --git a/docs/lib/Components/InputGroupPage.js b/docs/lib/Components/InputGroupPage.js
@@ -51,12 +51,6 @@ export default class InputGroupPage extends React.Component {
   className: PropTypes.string
 };
 
-InputGroupAddOn.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
-  className: PropTypes.string
-};
-
 InputGroupButton.propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
@@ -79,7 +73,7 @@ InputGroupButton.propTypes = {
           </PrismCode>
         </pre>
 
-        <SectionTitle>Addon Sizing</SectionTitle>
+        <SectionTitle>Input Group Sizing</SectionTitle>
         <div className="docs-example">
           <div>
             <AddonSizingExample />

diff --git a/docs/lib/examples/InputGroupAddon.js b/docs/lib/examples/InputGroupAddon.js
@@ -1,31 +1,23 @@
 import React from 'react';
-import { InputGroup, InputGroupText, InputGroupAddon, Input } from 'reactstrap';
+import { InputGroup, InputGroupText, Input } from 'reactstrap';
 
 const Example = (props) => {
   return (
     <div>
       <InputGroup>
-        <InputGroupAddon addonType="prepend">
-          <InputGroupText>To the Left!</InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>To the Left!</InputGroupText>
         <Input />
       </InputGroup>
       <br />
       <InputGroup>
         <Input />
-        <InputGroupAddon addonType="append">
-          <InputGroupText>To the Right!</InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>To the Right!</InputGroupText>
       </InputGroup>
       <br />
       <InputGroup>
-        <InputGroupAddon addonType="prepend">
-          <InputGroupText>To the Left!</InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>To the Left!</InputGroupText>
         <Input placeholder="and..." />
-        <InputGroupAddon addonType="append">
-          <InputGroupText>To the Right!</InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>To the Right!</InputGroupText>
       </InputGroup>
     </div>
   );

diff --git a/docs/lib/examples/InputGroupButton.js b/docs/lib/examples/InputGroupButton.js
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import {
   InputGroup,
-  InputGroupAddon,
-  InputGroupButtonDropdown,
+  Dropdown,
   Input,
   Button,
   DropdownToggle,
@@ -21,13 +20,13 @@ const Example = (props) => {
   return (
     <div>
       <InputGroup>
-        <InputGroupAddon addonType="prepend"><Button>I'm a button</Button></InputGroupAddon>
+        <Button>I'm a button</Button>
         <Input />
       </InputGroup>
       <br />
       <InputGroup>
         <Input />
-        <InputGroupButtonDropdown addonType="append" isOpen={dropdownOpen} toggle={toggleDropDown}>
+        <Dropdown isOpen={dropdownOpen} toggle={toggleDropDown}>
           <DropdownToggle caret>
             Button Dropdown
           </DropdownToggle>
@@ -38,11 +37,11 @@ const Example = (props) => {
             <DropdownItem divider />
             <DropdownItem>Another Action</DropdownItem>
           </DropdownMenu>
-        </InputGroupButtonDropdown>
+        </Dropdown>
       </InputGroup>
       <br />
       <InputGroup>
-        <InputGroupButtonDropdown addonType="prepend" isOpen={splitButtonOpen} toggle={toggleSplit}>
+        <Dropdown isOpen={splitButtonOpen} toggle={toggleSplit}>
           <Button outline>Split Button</Button>
           <DropdownToggle split outline />
           <DropdownMenu>
@@ -52,9 +51,9 @@ const Example = (props) => {
             <DropdownItem divider />
             <DropdownItem>Another Action</DropdownItem>
           </DropdownMenu>
-        </InputGroupButtonDropdown>
+        </Dropdown>
         <Input placeholder="and..." />
-        <InputGroupAddon addonType="append"><Button color="secondary">I'm a button</Button></InputGroupAddon>
+        <Button color="secondary">I'm a button</Button>
       </InputGroup>
     </div>
   );

diff --git a/docs/lib/examples/InputGroupButtonShorthand.js b/docs/lib/examples/InputGroupButtonShorthand.js
@@ -1,31 +1,23 @@
 import React from 'react';
-import { InputGroup, InputGroupAddon, Button, Input } from 'reactstrap';
+import { InputGroup, Button, Input } from 'reactstrap';
 
 const Example = (props) => {
   return (
     <div>
       <InputGroup>
-        <InputGroupAddon addonType="prepend">
-          <Button>To the Left!</Button>
-        </InputGroupAddon>
+        <Button>To the Left!</Button>
         <Input />
       </InputGroup>
       <br />
       <InputGroup>
         <Input />
-        <InputGroupAddon addonType="append">
-          <Button color="secondary">To the Right!</Button>
-        </InputGroupAddon>
+        <Button color="secondary">To the Right!</Button>
       </InputGroup>
       <br />
       <InputGroup>
-        <InputGroupAddon addonType="prepend">
-          <Button color="danger">To the Left!</Button>
-        </InputGroupAddon>
+        <Button color="danger">To the Left!</Button>
         <Input placeholder="and..." />
-        <InputGroupAddon addonType="append">
-          <Button color="success">To the Right!</Button>
-        </InputGroupAddon>
+        <Button color="success">To the Right!</Button>
       </InputGroup>
     </div>
   );

diff --git a/docs/lib/examples/InputGroupOverview.js b/docs/lib/examples/InputGroupOverview.js
@@ -1,48 +1,38 @@
 import React from 'react';
-import { InputGroup, InputGroupAddon, InputGroupText, Input } from 'reactstrap';
+import { InputGroup, InputGroupText, Input } from 'reactstrap';
 
 const Example = (props) => {
   return (
     <div>
       <InputGroup>
-        <InputGroupAddon addonType="prepend">
-          <InputGroupText>@</InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>@</InputGroupText>
         <Input placeholder="username" />
       </InputGroup>
       <br />
       <InputGroup>
-        <InputGroupAddon addonType="prepend">
-          <InputGroupText>
-            <Input addon type="checkbox" aria-label="Checkbox for following text input" />
-          </InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>
+          <Input addon type="checkbox" aria-label="Checkbox for following text input" />
+        </InputGroupText>
         <Input placeholder="Check it out" />
       </InputGroup>
       <br />
       <InputGroup>
         <Input placeholder="username" />
-        <InputGroupAddon addonType="append">
-          <InputGroupText>@example.com</InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>@example.com</InputGroupText>
       </InputGroup>
       <br />
       <InputGroup>
-        <InputGroupAddon addonType="prepend">
-          <InputGroupText>$</InputGroupText>
-          <InputGroupText>$</InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>$</InputGroupText>
+        <InputGroupText>$</InputGroupText>
         <Input placeholder="Dolla dolla billz yo!" />
-        <InputGroupAddon addonType="append">
-          <InputGroupText>$</InputGroupText>
-          <InputGroupText>$</InputGroupText>
-        </InputGroupAddon>
+        <InputGroupText>$</InputGroupText>
+        <InputGroupText>$</InputGroupText>
       </InputGroup>
       <br />
       <InputGroup>
-        <InputGroupAddon addonType="prepend">$</InputGroupAddon>
+        <InputGroupText>$</InputGroupText>
         <Input placeholder="Amount" min={0} max={100} type="number" step="1" />
-        <InputGroupAddon addonType="append">.00</InputGroupAddon>
+        <InputGroupText>.00</InputGroupText>
       </InputGroup>
     </div>
   );

diff --git a/docs/lib/examples/InputGroupSizing.js b/docs/lib/examples/InputGroupSizing.js
@@ -1,21 +1,21 @@
 import React from 'react';
-import { InputGroup, InputGroupAddon, Input } from 'reactstrap';
+import { InputGroup, InputGroupText, Input } from 'reactstrap';
 
 const Example = (props) => {
   return (
     <div>
       <InputGroup size="lg">
-        <InputGroupAddon addonType="prepend">@lg</InputGroupAddon>
+        <InputGroupText>@lg</InputGroupText>
         <Input />
       </InputGroup>
       <br />
       <InputGroup>
-        <InputGroupAddon addonType="prepend">@normal</InputGroupAddon>
+        <InputGroupText>@normal</InputGroupText>
         <Input />
       </InputGroup>
       <br />
       <InputGroup size="sm">
-        <InputGroupAddon addonType="prepend">@sm</InputGroupAddon>
+        <InputGroupText>@sm</InputGroupText>
         <Input />
       </InputGroup>
     </div>

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -16,7 +16,6 @@ const propTypes = {
   isOpen: PropTypes.bool,
   nav: PropTypes.bool,
   active: PropTypes.bool,
-  addonType: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['prepend', 'append'])]),
   size: PropTypes.string,
   tag: tagPropType,
   toggle: PropTypes.func,
@@ -34,7 +33,6 @@ const defaultProps = {
   direction: 'down',
   nav: false,
   active: false,
-  addonType: false,
   inNavbar: false,
   setActiveFromChild: false
 };
@@ -252,7 +250,6 @@ class Dropdown extends React.Component {
       nav,
       setActiveFromChild,
       active,
-      addonType,
       tag,
       menuRole,
       ...attrs
@@ -275,10 +272,9 @@ class Dropdown extends React.Component {
       nav && active ? 'active' : false,
       setActiveFromChild && subItemIsActive ? 'active' : false,
       {
-        [`input-group-${addonType}`]: addonType,
         'btn-group': group,
         [`btn-group-${size}`]: !!size,
-        dropdown: !group && !addonType,
+        dropdown: !group,
         show: isOpen,
         'nav-item': nav
       }

diff --git a/src/InputGroupAddon.js b/src/InputGroupAddon.js
diff --git a/src/__tests__/InputGroupAddon.spec.js b/src/__tests__/InputGroupAddon.spec.js
diff --git a/src/index.js b/src/index.js
@@ -63,7 +63,6 @@ export FormGroup from './FormGroup';
 export FormText from './FormText';
 export Input from './Input';
 export InputGroup from './InputGroup';
-export InputGroupAddon from './InputGroupAddon';
 export InputGroupButtonDropdown from './InputGroupButtonDropdown';
 export InputGroupText from './InputGroupText';
 export Label from './Label';

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -82,8 +82,6 @@ export { default as Input } from './lib/Input';
 export { InputProps } from './lib/Input';
 export { default as InputGroup } from './lib/InputGroup';
 export { InputGroupProps } from './lib/InputGroup';
-export { default as InputGroupAddon } from './lib/InputGroupAddon';
-export { InputGroupAddonProps } from './lib/InputGroupAddon';
 export { default as InputGroupButtonDropdown } from './lib/InputGroupButtonDropdown';
 export { InputGroupButtonDropdownProps } from './lib/InputGroupButtonDropdown';
 export { default as InputGroupText } from './lib/InputGroupText';