Fixed Badge occupying space when it is anchored to a child component (#…

…2714) Co-authored-by: Josh Wooding <[email protected]>
jpmorganchase · Nov 13, 2023 · f3143bb · f3143bb · vercel · Nov 13, 2023
1 parent 1ea2d86
commit f3143bb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/.changeset/bright-masks-learn.md b/.changeset/bright-masks-learn.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+Fixed Badge occupying space when it is anchored to a child component.
diff --git a/packages/lab/src/badge/Badge.css b/packages/lab/src/badge/Badge.css
@@ -32,7 +32,7 @@
 }
 
 .saltBadge-topRight {
-  position: relative;
-  top: calc(-1 * var(--salt-spacing-100));
+  position: absolute;
   right: var(--salt-spacing-100);
+  transform: translateX(100%);
 }
diff --git a/packages/lab/stories/badge/badge.stories.tsx b/packages/lab/stories/badge/badge.stories.tsx
@@ -1,10 +1,12 @@
-import { Badge, Tabstrip, List, ListItem } from "@salt-ds/lab";
-import { Button } from "@salt-ds/core";
+import { Badge, List, ListItem } from "@salt-ds/lab";
+import { Button, FlexLayout, StackLayout } from "@salt-ds/core";
 
 import {
   SettingsSolidIcon,
   MessageIcon,
   NotificationIcon,
+  ThumbsDownIcon,
+  ThumbsUpIcon,
 } from "@salt-ds/icons";
 
 import { Meta, StoryFn } from "@storybook/react";
@@ -74,3 +76,28 @@ export const ListStory: StoryFn<typeof Badge> = () => {
     </List>
   );
 };
+
+export const MultipleButtons: StoryFn<typeof Badge> = () => {
+  return (
+    <StackLayout>
+      <FlexLayout>
+        <Badge value={20}>
+          <Button>
+            <ThumbsUpIcon />
+          </Button>
+        </Badge>
+        <Button>
+          <ThumbsDownIcon />
+        </Button>
+      </FlexLayout>
+      <FlexLayout>
+        <Button>
+          <ThumbsUpIcon />
+        </Button>
+        <Button>
+          <ThumbsDownIcon />
+        </Button>
+      </FlexLayout>
+    </StackLayout>
+  );
+};