Merge pull request #30233 from overleaf/td-select-check-icon

Fix regression with select check icon

GitOrigin-RevId: c76e126c26395429cd3d41ac4e6ee36259062224

services/web/frontend/js/features/settings/components/emails/downshift-input.tsx

@@ -81,7 +81,7 @@ function Downshift({
     )
   }
 
-  const TickIcon = function () {
+  const tickIcon = function () {
     return isCiam ? <Check /> : 'check'
   }
 
@@ -116,7 +116,7 @@ function Downshift({
               active: selectedItem === item,
               'dropdown-item-highlighted': highlightedIndex === index,
             })}
-            trailingIcon={selectedItem === item ? <TickIcon /> : undefined}
+            trailingIcon={selectedItem === item ? tickIcon() : undefined}
           >
             {highlightMatchedCharacters(item, inputValue)}
           </DropdownItem>

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

@@ -152,7 +152,7 @@ export const Select = <T,>({
     value = defaultText
   }
 
-  const TickIcon = function () {
+  const tickIcon = function () {
     return isCiam ? <Check /> : 'check'
   }
 
@@ -183,9 +183,7 @@ export const Select = <T,>({
                 })}
                 active={selectedItem === item}
                 trailingIcon={
-                  selectedIcon && selectedItem === item ? (
-                    <TickIcon />
-                  ) : undefined
+                  selectedIcon && selectedItem === item ? tickIcon() : undefined
                 }
                 description={itemToSubtitle ? itemToSubtitle(item) : undefined}
                 {...itemProps}

services/web/frontend/stylesheets/ciam/ciam-layout.scss

@@ -225,6 +225,10 @@
 
   .dropdown-item {
     border-radius: var(--ds-border-radius-200);
+
+    :has(.dropdown-item-trailing-icon) {
+      padding-right: calc(var(--ds-font-size-350) + var(--ds-spacing-200));
+    }
   }
 
   // Allow dropdowns to be wider than the form container where necessary