feat: use css for placement

Author: eirikbacker

packages/css/badge.css

@@ -26,32 +26,28 @@
 }
 
 .ds-badge--float {
-  transform-origin: center;
   position: absolute;
+  transform: translate(-50%, -50%);
 }
 
 .ds-badge--float.ds-badge--top-right {
   top: 0;
-  right: 0;
-  transform: translateX(50%) translateY(-50%);
+  left: 100%;
 }
 
 .ds-badge--float.ds-badge--top-left {
   top: 0;
   left: 0;
-  transform: translateX(-50%) translateY(-50%);
 }
 
 .ds-badge--float.ds-badge--bottom-right {
-  bottom: 0;
-  right: 0;
-  transform: translateX(50%) translateY(50%);
+  top: 100%;
+  left: 100%;
 }
 
 .ds-badge--float.ds-badge--bottom-left {
-  bottom: 0;
+  top: 100%;
   left: 0;
-  transform: translateX(-50%) translateY(50%);
 }
 
 .ds-bade--accent {

packages/react/src/components/Badge/Badge.stories.tsx

@@ -24,7 +24,13 @@ const meta: Meta<typeof Badge> = {
       control: { type: 'select' },
     },
     placement: {
-      options: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
+      options: [
+        'right top',
+        'left top',
+        'right bottom',
+        'left bottom',
+        '10% 90%',
+      ],
       control: { type: 'radio' },
     },
   },
@@ -48,16 +54,28 @@ export const Floating: Story = (args) => (
       gap: 'var(--ds-spacing-6)',
     }}
   >
-    <Badge color='accent' size='md' placement='top-right'>
+    <Badge color='accent' size='md' placement='right top'>
       <EnvelopeClosedFillIcon fontSize='2rem' />
     </Badge>
-    <Badge color='accent' size='md' placement='top-left'>
+    <Badge color='accent' size='md' placement='left top'>
       <EnvelopeClosedFillIcon fontSize='2rem' />
     </Badge>
-    <Badge color='accent' size='md' placement='bottom-right'>
+    <Badge color='accent' size='md' placement='right bottom'>
       <EnvelopeClosedFillIcon fontSize='2rem' />
     </Badge>
-    <Badge color='accent' size='md' placement='bottom-left'>
+    <Badge color='accent' size='md' placement='left bottom'>
+      <EnvelopeClosedFillIcon fontSize='2rem' />
+    </Badge>
+    <Badge color='accent' size='md' placement='90% 25%'>
+      <EnvelopeClosedFillIcon fontSize='2rem' />
+    </Badge>
+    <Badge color='accent' size='md' placement='10% 25%'>
+      <EnvelopeClosedFillIcon fontSize='2rem' />
+    </Badge>
+    <Badge color='accent' size='md' placement='.25em 1.5em'>
+      <EnvelopeClosedFillIcon fontSize='2rem' />
+    </Badge>
+    <Badge color='accent' size='md' placement='1.75em 1.5em'>
       <EnvelopeClosedFillIcon fontSize='2rem' />
     </Badge>
   </div>

packages/react/src/components/Badge/Badge.tsx

@@ -28,7 +28,12 @@ export type BadgeProps = {
    *
    * @default top-right
    */
-  placement?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  placement?:
+    | 'right top'
+    | 'left top'
+    | 'right bottom'
+    | 'left bottom'
+    | (CSSStyleDeclaration['backgroundPosition'] & {}); // For better IntelliSense - see https://stackoverflow.com/a/61048124
   /**
    * The badge will float on top of the children
    */
@@ -61,13 +66,14 @@ const paragraphSizeMap: {
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
   (
     {
+      children,
+      className,
       color = 'accent',
-      size = 'md',
-      placement = 'top-right',
       count,
       maxCount,
-      children,
-      className,
+      placement = 'top right',
+      size = 'md',
+      style,
       ...rest
     },
     ref,
@@ -82,9 +88,11 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
               `ds-badge--${size}`,
               `ds-badge--${color}`,
               count && 'ds-badge--count',
-              children && `ds-badge--${placement}`,
               children && 'ds-badge--float',
             )}
+            style={
+              children ? { ...parsePlacement(placement), ...style } : style
+            }
             ref={ref}
             {...rest}
           >
@@ -97,3 +105,15 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
 );
 
 Badge.displayName = 'Badge';
+
+function parsePlacement(placement: BadgeProps['placement']) {
+  const parts = placement?.toLowerCase().split(/[\s-]+/) || [];
+  let [left = '100%', top = '0%'] = parts;
+
+  if (parts.includes('bottom')) top = '100%';
+  if (parts.includes('left')) left = '0%';
+  if (parts.includes('right')) left = '100%';
+  if (parts.includes('top')) top = '0%';
+
+  return { left, top };
+}