From 35a37ef21d751207b4951aa5b6aca34b9efd4d5a Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Sat, 23 Jan 2021 21:07:41 -0800
Subject: [PATCH] feat(bs5):  Rename margin utils

ml-* & mr-* are now ms-* & me-*
---
 docs/lib/NotFound/index.js                    |  2 +-
 docs/lib/UI/Banner.js                         |  2 +-
 docs/lib/UI/Nav.js                            |  4 ++--
 .../examples/DropdownSetActiveFromChild.js    |  2 +-
 docs/lib/examples/FormInline.js               |  8 +++----
 docs/lib/examples/Navbar.js                   |  2 +-
 docs/lib/examples/NavbarToggler.js            |  4 ++--
 docs/lib/examples/PopoverMulti.js             |  2 +-
 docs/lib/examples/TooltipMulti.js             |  2 +-
 src/ToastHeader.js                            |  4 ++--
 types/reactstrap-tests.tsx                    | 24 +++++++++----------
 11 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/docs/lib/NotFound/index.js b/docs/lib/NotFound/index.js
index 27989a949..ebc40c91b 100644
--- a/docs/lib/NotFound/index.js
+++ b/docs/lib/NotFound/index.js
@@ -19,7 +19,7 @@ export default () => {
                 Can't find what you're looking for? <a href="https://github.com/reactstrap/reactstrap/issues/new">Open</a> up an issue.
               </p>
               <p>
-                <Button outline color="danger" className="mr-1" tag={Link} to="/">Get Started</Button>
+                <Button outline color="danger" className="me-1" tag={Link} to="/">Get Started</Button>
                 <Button color="danger" tag={Link} to="/components/">View Components</Button>
               </p>
             </Col>
diff --git a/docs/lib/UI/Banner.js b/docs/lib/UI/Banner.js
index b1e7a6ee0..a83b548a6 100644
--- a/docs/lib/UI/Banner.js
+++ b/docs/lib/UI/Banner.js
@@ -6,7 +6,7 @@ export default function Banner() {
       className="bg-dark fixed-top d-flex flex-column flex-md-row justify-content-center align-items-center text-center"
       style={{ width: '100%', minHeight: '4em' }}
     >
-      <span className="text-light mr-3 h4">Black Lives Matter.</span>
+      <span className="text-light me-3 h4">Black Lives Matter.</span>
       <a
         className="h4 banner-link"
         target="_blank"
diff --git a/docs/lib/UI/Nav.js b/docs/lib/UI/Nav.js
index 85a7ccb3d..c8e5b7056 100644
--- a/docs/lib/UI/Nav.js
+++ b/docs/lib/UI/Nav.js
@@ -22,10 +22,10 @@ export default class UINav extends React.Component {
     return (
         <Navbar className="header" color="faded" light expand="md" style={{ marginTop: "100px" }}>
           <Container>
-            <NavbarBrand className="mr-auto" tag={Link} to="/">reactstrap</NavbarBrand>
+            <NavbarBrand className="me-auto" tag={Link} to="/">reactstrap</NavbarBrand>
             <NavbarToggler onClick={this.toggleNavbar} />
             <Collapse navbar isOpen={this.state.showNavbar}>
-              <Nav navbar className="ml-sm-auto">
+              <Nav navbar className="ms-sm-auto">
                 <NavItem>
                   <DocSearch />
                 </NavItem>
diff --git a/docs/lib/examples/DropdownSetActiveFromChild.js b/docs/lib/examples/DropdownSetActiveFromChild.js
index 088a078e6..92a3f9260 100644
--- a/docs/lib/examples/DropdownSetActiveFromChild.js
+++ b/docs/lib/examples/DropdownSetActiveFromChild.js
@@ -4,7 +4,7 @@ import { Navbar, Nav, NavItem, NavLink, UncontrolledDropdown, DropdownToggle, Dr
 export default function Example () {
   return (
     <Navbar color="light" light expand="md">
-      <Nav className="ml-auto" navbar>
+      <Nav className="ms-auto" navbar>
         <NavItem>
           <NavLink href="/components/">Inactive Link</NavLink>
         </NavItem>
diff --git a/docs/lib/examples/FormInline.js b/docs/lib/examples/FormInline.js
index 13853e73a..d7ce5ad17 100644
--- a/docs/lib/examples/FormInline.js
+++ b/docs/lib/examples/FormInline.js
@@ -4,12 +4,12 @@ import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
 const Example = (props) => {
   return (
     <Form inline>
-      <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
-        <Label for="exampleEmail" className="mr-sm-2">Email</Label>
+      <FormGroup className="mb-2 me-sm-2 mb-sm-0">
+        <Label for="exampleEmail" className="me-sm-2">Email</Label>
         <Input type="email" name="email" id="exampleEmail" placeholder="something@idk.cool" />
       </FormGroup>
-      <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
-        <Label for="examplePassword" className="mr-sm-2">Password</Label>
+      <FormGroup className="mb-2 me-sm-2 mb-sm-0">
+        <Label for="examplePassword" className="me-sm-2">Password</Label>
         <Input type="password" name="password" id="examplePassword" placeholder="don't tell!" />
       </FormGroup>
       <Button>Submit</Button>
diff --git a/docs/lib/examples/Navbar.js b/docs/lib/examples/Navbar.js
index a170378f3..22ce1ca11 100644
--- a/docs/lib/examples/Navbar.js
+++ b/docs/lib/examples/Navbar.js
@@ -25,7 +25,7 @@ const Example = (props) => {
         <NavbarBrand href="/">reactstrap</NavbarBrand>
         <NavbarToggler onClick={toggle} />
         <Collapse isOpen={isOpen} navbar>
-          <Nav className="mr-auto" navbar>
+          <Nav className="me-auto" navbar>
             <NavItem>
               <NavLink href="/components/">Components</NavLink>
             </NavItem>
diff --git a/docs/lib/examples/NavbarToggler.js b/docs/lib/examples/NavbarToggler.js
index 554a2bf90..55880fe0c 100644
--- a/docs/lib/examples/NavbarToggler.js
+++ b/docs/lib/examples/NavbarToggler.js
@@ -9,8 +9,8 @@ const Example = (props) => {
   return (
     <div>
       <Navbar color="faded" light>
-        <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
-        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
+        <NavbarBrand href="/" className="me-auto">reactstrap</NavbarBrand>
+        <NavbarToggler onClick={toggleNavbar} className="me-2" />
         <Collapse isOpen={!collapsed} navbar>
           <Nav navbar>
             <NavItem>
diff --git a/docs/lib/examples/PopoverMulti.js b/docs/lib/examples/PopoverMulti.js
index 183d24e52..a4e27d244 100644
--- a/docs/lib/examples/PopoverMulti.js
+++ b/docs/lib/examples/PopoverMulti.js
@@ -12,7 +12,7 @@ const PopoverItem = props => {
   return (
     <span>
       <Button
-        className="mr-1"
+        className="me-1"
         color="secondary"
         id={"Popover-" + id}
         type="button"
diff --git a/docs/lib/examples/TooltipMulti.js b/docs/lib/examples/TooltipMulti.js
index 7a08f5bfa..3a57e39cc 100644
--- a/docs/lib/examples/TooltipMulti.js
+++ b/docs/lib/examples/TooltipMulti.js
@@ -11,7 +11,7 @@ const TooltipItem = props => {
 
   return (
     <span>
-      <Button className="mr-1" color="secondary" id={"Tooltip-" + id}>
+      <Button className="me-1" color="secondary" id={"Tooltip-" + id}>
         {item.text}
       </Button>
       <Tooltip
diff --git a/src/ToastHeader.js b/src/ToastHeader.js
index 4abdc5c06..4a609c9dd 100644
--- a/src/ToastHeader.js
+++ b/src/ToastHeader.js
@@ -19,7 +19,7 @@ const propTypes = {
 const defaultProps = {
   tag: 'strong',
   wrapTag: 'div',
-  tagClassName: 'mr-auto',
+  tagClassName: 'me-auto',
   closeAriaLabel: 'Close',
   charCode: 215,
 };
@@ -72,7 +72,7 @@ const ToastHeader = (props) => {
   return (
     <WrapTag {...attributes} className={classes}>
       {icon}
-      <Tag className={mapToCssModules(classNames(tagClassName, { "ml-2": icon != null }), cssModule)}>
+      <Tag className={mapToCssModules(classNames(tagClassName, { "ms-2": icon != null }), cssModule)}>
         {children}
       </Tag>
       {close || closeButton}
diff --git a/types/reactstrap-tests.tsx b/types/reactstrap-tests.tsx
index 04b071568..2b4d51d68 100644
--- a/types/reactstrap-tests.tsx
+++ b/types/reactstrap-tests.tsx
@@ -2987,7 +2987,7 @@ class Example75 extends React.Component<any, any> {
           <NavbarBrand href="/">reactstrap</NavbarBrand>
           <NavbarToggler onClick={this.toggle} />
           <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav className="ml-auto" navbar>
+            <Nav className="ms-auto" navbar>
               <NavItem>
                 <NavLink href="/components/">Components</NavLink>
               </NavItem>
@@ -3036,10 +3036,10 @@ class Example76 extends React.Component<any, any> {
     return (
       <div>
         <Navbar color="faded" light>
-          <NavbarBrand href="/" className="mr-auto">
+          <NavbarBrand href="/" className="me-auto">
             reactstrap
           </NavbarBrand>
-          <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
+          <NavbarToggler onClick={this.toggleNavbar} className="me-2" />
           <Collapse isOpen={!this.state.collapsed} navbar>
             <Nav navbar>
               <NavItem>
@@ -3434,7 +3434,7 @@ class PopoverItem extends React.Component<any, any> {
     return (
       <span>
         <Button
-          className="mr-1"
+          className="me-1"
           color="secondary"
           id={'Popover-' + this.props.id}
           onClick={this.toggle}
@@ -4127,7 +4127,7 @@ class Example102 extends React.Component<any, any> {
           .
         </p>
         <Tooltip
-          placement="right"
+          placement="end"
           isOpen={this.state.tooltipOpen}
           target="TooltipExample"
           toggle={this.toggle}
@@ -4201,7 +4201,7 @@ class TooltipItem extends React.Component<any, any> {
     return (
       <span>
         <Button
-          className="mr-1"
+          className="me-1"
           color="secondary"
           id={'Tooltip-' + this.props.id}
         >
@@ -4281,7 +4281,7 @@ function Example() {
         .
       </p>
       <UncontrolledTooltip
-        placement="right"
+        placement="end"
         target="UncontrolledTooltipExample"
         popperClassName="popperClassName"
       >
@@ -4391,7 +4391,7 @@ class Example108 extends React.Component<any, any> {
           <NavbarToggler onClick={this.toggle} />
           <NavbarBrand href="/">reactstrap</NavbarBrand>
           <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav className="ml-auto" navbar>
+            <Nav className="ms-auto" navbar>
               <NavItem>
                 <NavLink href="/components/">Components</NavLink>
               </NavItem>
@@ -4430,7 +4430,7 @@ class Example109 extends React.Component<any, any> {
           <NavbarToggler onClick={this.toggle} />
           <NavbarBrand href="/">reactstrap</NavbarBrand>
           <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav className="ml-auto" navbar>
+            <Nav className="ms-auto" navbar>
               <NavItem>
                 <NavLink href="/components/">Components</NavLink>
               </NavItem>
@@ -4469,7 +4469,7 @@ class Example110 extends React.Component<any, any> {
           <NavbarToggler onClick={this.toggle} />
           <NavbarBrand href="/">reactstrap</NavbarBrand>
           <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav className="ml-auto" navbar>
+            <Nav className="ms-auto" navbar>
               <NavItem>
                 <NavLink href="/components/">Components</NavLink>
               </NavItem>
@@ -4510,7 +4510,7 @@ class Example111 extends React.Component<any, any> {
             reactstrap
           </NavbarBrand>
           <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav className="ml-auto" navbar>
+            <Nav className="ms-auto" navbar>
               <NavItem>
                 <NavLink href="/components/">Components</NavLink>
               </NavItem>
@@ -4551,7 +4551,7 @@ class Example112 extends React.Component<any, any> {
             reactstrap
           </NavbarBrand>
           <Collapse isOpen={this.state.isOpen} navbar>
-            <Nav className="ml-auto" navbar>
+            <Nav className="ms-auto" navbar>
               <NavItem>
                 <NavLink href="/components/">Components</NavLink>
               </NavItem>