add sm size to badge

GitOrigin-RevId: 4e69d582ce770abcff10f3a6b34662f4873fc224

services/web/frontend/js/features/history/components/file-tree/history-file-tree-item.tsx

@@ -20,7 +20,9 @@ export default function FileTreeItem({
         <button className="item-name-button">
           <span className="item-name-button-text">{name}</span>
           {operation ? (
-            <Badge className="item-name-button-badge">{operation}</Badge>
+            <Badge className="item-name-button-badge" size="sm">
+              {operation}
+            </Badge>
           ) : null}
         </button>
       </div>

services/web/frontend/js/shared/components/badge.tsx

@@ -10,6 +10,7 @@ type BadgeProps = MergeAndOverride<
     closeButton?: boolean
     onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void
     closeBtnProps?: React.ComponentProps<'button'>
+    size?: 'sm'
   }
 >
 
@@ -20,6 +21,7 @@ function Badge({
   closeButton = false,
   onClose,
   closeBtnProps,
+  size,
   ...rest
 }: BadgeProps) {
   return (

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -119,9 +119,7 @@
       }
 
       .entity > .entity-name > button {
-        background-color: transparent;
-        border: 0;
-        padding: 0;
+        .reset-button;
         &:focus {
           outline: none;
         }
@@ -140,16 +138,10 @@
 
           .item-name-button-badge {
             text-transform: capitalize;
-            height: 20px;
-            font-size: @font-size-extra-small;
 
             &:hover {
               background-color: @neutral-20;
             }
-
-            .badge-new-comment {
-              margin-left: 0;
-            }
           }
         }
       }

services/web/frontend/stylesheets/components/badge.less

@@ -1,9 +1,10 @@
 .badge-new {
+  @size: 24px;
   @padding: 4px;
   display: inline-flex;
   align-items: center;
   overflow: hidden;
-  height: 24px;
+  height: @size;
   padding: @padding;
   white-space: nowrap;
   color: @ol-blue-gray-6;
@@ -14,19 +15,29 @@
     background-color: @neutral-30;
   }
 
-  &-comment {
-    margin-left: 2px;
+  &-prepend {
+    margin-right: 2px;
   }
 
   &-close {
     .reset-button;
-    width: 24px;
+    width: @size;
     margin-left: 4px;
     margin-right: -@padding;
-    font-size: 24px;
+    font-size: @size;
 
     &:hover {
       background-color: @neutral-40;
     }
   }
+
+  &-sm {
+    @size-sm: 20px;
+    height: @size-sm;
+    font-size: @font-size-extra-small;
+    .badge-new-close {
+      width: @size-sm;
+      font-size: @size-sm;
+    }
+  }
 }