Skip to content

Commit

Permalink
feat(bs5): Rename margin utils
Browse files Browse the repository at this point in the history 
ml-* & mr-* are now ms-* & me-*
  • Loading branch information
@gthomas-appfolio @phwebi
gthomas-appfolio authored and phwebi committed Oct 27, 2021
1 parent 702ad55 commit 35a37ef
Show file tree
Hide file tree
Showing 11 changed files with 28 additions and 28 deletions.
2 changes: 1 addition & 1 deletion docs/lib/NotFound/index.js
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/UI/Banner.js
View file
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/UI/Nav.js
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/examples/DropdownSetActiveFromChild.js
View file
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions docs/lib/examples/FormInline.js
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/examples/Navbar.js
View file
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions docs/lib/examples/NavbarToggler.js
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/examples/PopoverMulti.js
View file
Expand Up @@ -12,7 +12,7 @@ const PopoverItem = props => {
return (
<span>
<Button
className="mr-1"
className="me-1"
color="secondary"
id={"Popover-" + id}
type="button"
Expand Down
2 changes: 1 addition & 1 deletion docs/lib/examples/TooltipMulti.js
View file
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/ToastHeader.js
View file
Expand Up @@ -19,7 +19,7 @@ const propTypes = {
const defaultProps = {
tag: 'strong',
wrapTag: 'div',
tagClassName: 'mr-auto',
tagClassName: 'me-auto',
closeAriaLabel: 'Close',
charCode: 215,
};
Expand Down Expand Up @@ -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}
Expand Down
24 changes: 12 additions & 12 deletions types/reactstrap-tests.tsx
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
>
Expand Down Expand Up @@ -4281,7 +4281,7 @@ function Example() {
.
</p>
<UncontrolledTooltip
placement="right"
placement="end"
target="UncontrolledTooltipExample"
popperClassName="popperClassName"
>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 35a37ef

Please sign in to comment.