Merge pull request #1274 from thunderstore-io/12-18-fix_tag_text_elli…

…psing Fix tag text ellipsing
thunderstore-io · Dec 18, 2024 · 54d4ba3 · 54d4ba3
2 parents cdfd560 + f3f01c4
commit 54d4ba3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 16 deletions.
diff --git a/...cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx b/...cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx
@@ -41,7 +41,7 @@ export const CategoryTagCloud = (props: Props) => {
           onClick={() => setSearchValue("")}
           csSize="medium"
         >
-          {`"${searchValue}"`}
+          <span>{`"${searchValue}"`}</span>
           <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faXmark} className={styles.icon} />
           </NewIcon>
@@ -63,7 +63,7 @@ export const CategoryTagCloud = (props: Props) => {
               <FontAwesomeIcon icon={faBan} />
             </NewIcon>
           ) : undefined}
-          {c.name}
+          <span>{c.name}</span>
           <NewIcon csMode="inline" noWrapper rootClasses={styles.icon}>
             <FontAwesomeIcon icon={faXmark} />
           </NewIcon>
@@ -76,7 +76,7 @@ export const CategoryTagCloud = (props: Props) => {
         csModifiers={["ghost"]}
         rootClasses={styles.clearButton}
       >
-        Clear all
+        <span>Clear all</span>
         <NewIcon csMode="inline" noWrapper>
           <FontAwesomeIcon icon={faXmark} className={styles.icon} />
         </NewIcon>

diff --git a/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx b/apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
@@ -29,7 +29,9 @@ const Template: StoryFn<typeof NewTag> = () => {
                 csSize={size}
                 csModifiers={[modifier]}
               >
-                {size}-{variant}-{modifier}
+                <span>
+                  {size}-{variant}-{modifier}
+                </span>
                 <NewIcon csMode={"inline"} noWrapper>
                   <FontAwesomeIcon icon={faChevronDown} />
                 </NewIcon>
@@ -40,7 +42,9 @@ const Template: StoryFn<typeof NewTag> = () => {
                 csSize={size}
                 csModifiers={[modifier, "hoverable"]}
               >
-                {size}-{variant}-{modifier}-hoverable
+                <span>
+                  {size}-{variant}-{modifier}-hoverable
+                </span>
                 <NewIcon csMode={"inline"} noWrapper>
                   <FontAwesomeIcon icon={faChevronDown} />
                 </NewIcon>
@@ -56,7 +60,9 @@ const Template: StoryFn<typeof NewTag> = () => {
             csSize={size}
             csModifiers={[modifier]}
           >
-            {size}-{variant}-{modifier}
+            <span>
+              {size}-{variant}-{modifier}
+            </span>
             <NewIcon csMode={"inline"} noWrapper>
               <FontAwesomeIcon icon={faChevronDown} />
             </NewIcon>
@@ -77,7 +83,9 @@ const Template: StoryFn<typeof NewTag> = () => {
             csVariant={variant}
             csSize={size}
           >
-            {size}-{variant}-noModifier
+            <span>
+              {size}-{variant}-noModifier
+            </span>
             <NewIcon csMode={"inline"} noWrapper>
               <FontAwesomeIcon icon={faChevronDown} />
             </NewIcon>

diff --git a/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx b/packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx
@@ -142,7 +142,7 @@ export function CardPackage(props: Props) {
                   csSize="xsmall"
                   csModifiers={["dark", "hoverable"]}
                 >
-                  {c.name}
+                  <span>{c.name}</span>
                 </NewTag>
               ))
             : null}

diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.css b/packages/cyberstorm/src/newComponents/Tag/Tag.css
@@ -15,11 +15,7 @@
     padding-inline: var(--tag-padding-inline);
   }
 
-  .ts-tag__content {
-    display: flex;
-    gap: var(--tag-gap);
-    align-items: center;
-    justify-content: center;
+  .ts-tag > span {
     min-width: 0;
     overflow-x: clip;
     white-space: nowrap;

diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag.tsx b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
@@ -53,7 +53,7 @@ export const Tag = React.forwardRef<
         )}
         ref={fRef}
       >
-        <div className="ts-tag__content">{children}</div>
+        {children}
       </Actionable>
     );
   }
@@ -72,7 +72,7 @@ export const Tag = React.forwardRef<
         )}
         ref={fRef}
       >
-        <div className="ts-tag__content">{children}</div>
+        {children}
       </Actionable>
     );
   }
@@ -89,7 +89,7 @@ export const Tag = React.forwardRef<
       )}
       ref={forwardedRef}
     >
-      <div className="ts-tag__content">{children}</div>
+      {children}
     </Frame>
   );
 });