From f95ff93a717985078d59dcf470794c6fa0e691f1 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Fri, 1 Mar 2024 16:17:24 -0500
Subject: [PATCH] [CL-181] Fix toggle group badge alignment (#8167)

---
 .../src/toggle-group/toggle-group.stories.ts   | 18 +++++-------------
 .../src/toggle-group/toggle.component.ts       |  6 ++----
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/libs/components/src/toggle-group/toggle-group.stories.ts b/libs/components/src/toggle-group/toggle-group.stories.ts
index f150449630..8fdd22efe3 100644
--- a/libs/components/src/toggle-group/toggle-group.stories.ts
+++ b/libs/components/src/toggle-group/toggle-group.stories.ts
@@ -30,23 +30,15 @@ type Story = StoryObj<ToggleGroupComponent>;
 export const Default: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /* HTML */ `
       <bit-toggle-group [(selected)]="selected" aria-label="People list filter">
-        <bit-toggle value="all">
-          All <span bitBadge variant="info">3</span>
-        </bit-toggle>
+        <bit-toggle value="all"> All <span bitBadge variant="info">3</span> </bit-toggle>
 
-        <bit-toggle value="invited">
-          Invited
-        </bit-toggle>
+        <bit-toggle value="invited"> Invited </bit-toggle>
 
-        <bit-toggle value="accepted">
-          Accepted <span bitBadge variant="info">2</span>
-        </bit-toggle>
+        <bit-toggle value="accepted"> Accepted <span bitBadge variant="info">2</span> </bit-toggle>
 
-        <bit-toggle value="deactivated">
-          Deactivated
-        </bit-toggle>
+        <bit-toggle value="deactivated"> Deactivated </bit-toggle>
       </bit-toggle-group>
     `,
   }),
diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts
index d12da7faa1..55c678d017 100644
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -70,10 +70,8 @@ export class ToggleComponent<TValue> {
       // Fix for bootstrap styles that add bottom margin
       "!tw-mb-0",
 
-      // Fix for badge being pushed slightly lower when inside a button.
-      // Inspired by bootstrap, which does the same.
-      "[&>[bitBadge]]:tw-relative",
-      "[&>[bitBadge]]:tw--top-px",
+      // Fix for badge being slightly off center vertically
+      "[&>[bitBadge]]:tw-mt-px",
     ];
   }