From faf5724d5fe1c3e0cdfe59912cc41e04f03b514c Mon Sep 17 00:00:00 2001
From: Vineeth Asok Kumar <me@vineethasok.com>
Date: Fri, 20 Oct 2023 15:12:14 +0200
Subject: [PATCH] Fix select value (#183)

* Fix select ellipsis issue

* Fix Badge alignment

* Fix Badge styling
---
 src/components/Badge/Badge.tsx                | 40 +++++++++----------
 src/components/Select/MultiSelectValue.tsx    | 11 ++++-
 src/components/Select/common/SelectStyled.tsx |  3 +-
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index e5632aaf..d8cf0eb2 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components";
 import { HorizontalDirection, Icon, IconName } from "@/components";
 import { HTMLAttributes, MouseEvent, ReactNode } from "react";
 import { EllipsisContainer } from "../commonElement";
+import IconWrapper from "../IconWrapper/IconWrapper";
 export type BadgeState =
   | "default"
   | "success"
@@ -47,6 +48,8 @@ const Content = styled.div<{ $state?: BadgeState; $size?: BadgeSize }>`
   display: inline-flex;
   align-items: center;
   gap: ${({ $size = "md", theme }) => theme.click.badge.space[$size].gap};
+  max-width: 100%;
+  justify-content: flex-start;
 `;
 
 const SvgContainer = styled.svg<{ $state?: BadgeState; $size?: BadgeSize }>`
@@ -58,13 +61,15 @@ const SvgContainer = styled.svg<{ $state?: BadgeState; $size?: BadgeSize }>`
 `;
 const BadgeContent = styled(EllipsisContainer)<{
   $state?: BadgeState;
-  $size?: BadgeSize;
+  size?: BadgeSize;
 }>`
+  width: auto;
+  overflow: hidden;
   svg {
-    ${({ $state = "default", $size = "md", theme }) => `
+    ${({ $state = "default", size = "md", theme }) => `
     color: ${theme.click.badge.color.text[$state]};
-    height: ${theme.click.badge.icon[$size].size.height};
-    width: ${theme.click.badge.icon[$size].size.width};
+    height: ${theme.click.badge.icon[size].size.height};
+    width: ${theme.click.badge.icon[size].size.width};
     gap: inherit;
   `}
   }
@@ -88,24 +93,15 @@ export const Badge = ({
     {...props}
   >
     <Content>
-      {icon && iconDir === "start" && (
-        <SvgContainer
-          as={Icon}
-          name={icon}
-          $state={state}
-          $size={size}
-        />
-      )}
-      <BadgeContent>{text}</BadgeContent>
-      {icon && iconDir === "end" && (
-        <SvgContainer
-          as={Icon}
-          name={icon}
-          $state={state}
-          $size={size}
-        />
-      )}
-
+      <BadgeContent
+        as={IconWrapper}
+        icon={icon}
+        iconDir={iconDir}
+        size={size}
+        $state={state}
+      >
+        {text}
+      </BadgeContent>
       {dismissible && (
         <SvgContainer
           name="cross"
diff --git a/src/components/Select/MultiSelectValue.tsx b/src/components/Select/MultiSelectValue.tsx
index 7fbec22c..df254ebf 100644
--- a/src/components/Select/MultiSelectValue.tsx
+++ b/src/components/Select/MultiSelectValue.tsx
@@ -15,6 +15,14 @@ const BadgeList = styled.div`
   color: inherit;
 `;
 
+const MultiSelectBadge = styled.div`
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  max-width: fit-content;
+`;
+
 interface MultiSelectValueProps {
   selectedValues: Array<string>;
   valueNode: Map<string, SelectItemProps>;
@@ -91,7 +99,8 @@ export const MultiSelectValue = ({
           } as DismissibleBadge;
         }
         return (
-          <Badge
+          <MultiSelectBadge
+            as={Badge}
             key={`multi-select-${id}-${value}`}
             size="sm"
             state={disabled ? "disabled" : "default"}
diff --git a/src/components/Select/common/SelectStyled.tsx b/src/components/Select/common/SelectStyled.tsx
index e5861620..b652b03e 100644
--- a/src/components/Select/common/SelectStyled.tsx
+++ b/src/components/Select/common/SelectStyled.tsx
@@ -6,13 +6,12 @@ export const SelectPopoverRoot = styled(Root)`
 `;
 
 export const SelectValue = styled.div`
-  display: flex;
-  flex-direction: column;
   text-align: left;
   flex: 1;
   gap: inherit;
   color: inherit;
   font: inherit;
+  overflow: hidden;
 `;
 
 export const StyledSelectTrigger = styled(Trigger)<{ $error: boolean }>`