From 4c3313e27591ab09b72c48fd76ff91f758d47594 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 7 Jun 2022 13:27:42 -0400
Subject: [PATCH] improve badge RTL styles

---
 docs/components/badge.md               | 8 ++++----
 src/components/button/button.styles.ts | 6 ++++++
 src/components/button/button.ts        | 3 +++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/docs/components/badge.md b/docs/components/badge.md
index ffbfb4c3f..6c367f307 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -142,12 +142,12 @@ One of the most common use cases for badges is attaching them to buttons. To mak
   <sl-badge pill>30</sl-badge>
 </sl-button>
 
-<sl-button style="margin-left: 1rem;">
+<sl-button style="margin-inline-start: 1rem;">
   Warnings
   <sl-badge variant="warning" pill>8</sl-badge>
 </sl-button>
 
-<sl-button style="margin-left: 1rem;">
+<sl-button style="margin-inline-start: 1rem;">
   Errors
   <sl-badge variant="danger" pill>6</sl-badge>
 </sl-button>
@@ -163,14 +163,14 @@ const App = () => (
       <SlBadge pill>30</SlBadge>
     </SlButton>
 
-    <SlButton style={{ marginLeft: '1rem' }}>
+    <SlButton style={{ marginInlineStart: '1rem' }}>
       Warnings
       <SlBadge variant="warning" pill>
         8
       </SlBadge>
     </SlButton>
 
-    <SlButton style={{ marginLeft: '1rem' }}>
+    <SlButton style={{ marginInlineStart: '1rem' }}>
       Errors
       <SlBadge variant="danger" pill>
         6
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 2e7d41bed..711a7f6e8 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -456,6 +456,12 @@ export default css`
     pointer-events: none;
   }
 
+  .button--rtl ::slotted(sl-badge) {
+    right: auto;
+    left: 0;
+    transform: translateY(-50%) translateX(-50%);
+  }
+
   /*
    * Button spacing
    */
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index c9bd1d584..1000f496b 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -7,6 +7,7 @@ import '../../components/spinner/spinner';
 import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { HasSlotController } from '../../internal/slot';
+import { LocalizeController } from '../../utilities/localize';
 import styles from './button.styles';
 
 /**
@@ -49,6 +50,7 @@ export default class SlButton extends LitElement {
     }
   });
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+  private readonly localize = new LocalizeController(this);
 
   @state() private hasFocus = false;
 
@@ -181,6 +183,7 @@ export default class SlButton extends LitElement {
           'button--standard': !this.outline,
           'button--outline': this.outline,
           'button--pill': this.pill,
+          'button--rtl': this.localize.dir() === 'rtl',
           'button--has-label': this.hasSlotController.test('[default]'),
           'button--has-prefix': this.hasSlotController.test('prefix'),
           'button--has-suffix': this.hasSlotController.test('suffix')