Merge pull request #21364 from opf/bug/69693-adjust-the-workspace-badge-icon-style-to-primer

Bug/69693 adjust the workspace badge icon style to primer

app/components/projects/row_component.rb

@@ -434,8 +434,11 @@ module Projects
       # Only show icon and type for non-project workspaces
       return unless project.workspace_type.in?(["portfolio", "program"])
 
-      render(Primer::Beta::Text.new(color: :muted)) do
-        icon = render(Primer::Beta::Octicon.new(icon: helpers.workspace_icon(project.workspace_type)))
+      render(Primer::Beta::Text.new(classes: "description")) do
+        icon = render(Primer::Beta::Octicon.new(
+                        icon: helpers.workspace_icon(project.workspace_type),
+                        size: :xsmall
+                      ))
         safe_join([icon, " ", I18n.t(:"label_#{project.workspace_type}")])
       end
     end

frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter-template.component.html

@@ -18,14 +18,14 @@
       @if (portfolioModelsEnabled) {
         @switch (item._type) {
           @case ('Portfolio') {
-            <span class="color-fg-muted flex-shrink-0">
-              <svg briefcase-icon size="small" />
+            <span class="description">
+              <svg briefcase-icon size="xsmall" />
               {{ this.I18n.t('js.include_workspaces.types.portfolio') }}
             </span>
           }
           @case ('Program') {
-            <span class="color-fg-muted flex-shrink-0">
-              <svg versions-icon size="small" />
+            <span class="description">
+              <svg versions-icon size="xsmall" />
               {{ this.I18n.t('js.include_workspaces.types.program') }}
             </span>
           }
@@ -53,14 +53,14 @@
       @if (portfolioModelsEnabled) {
         @switch (item._type) {
           @case ('Portfolio') {
-            <span class="color-fg-muted flex-shrink-0">
-              <svg briefcase-icon size="small" />
+            <span class="description">
+              <svg briefcase-icon size="xsmall" />
               {{ this.I18n.t('js.include_workspaces.types.portfolio') }}
             </span>
           }
           @case ('Program') {
-            <span class="color-fg-muted flex-shrink-0">
-              <svg versions-icon size="small" />
+            <span class="description">
+              <svg versions-icon size="xsmall" />
               {{ this.I18n.t('js.include_workspaces.types.program') }}
             </span>
           }

frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html

@@ -34,14 +34,14 @@
           @if (portfolioModelsEnabled) {
             @switch (project._type) {
               @case ('Portfolio') {
-                <span class="color-fg-muted">
-                  <svg briefcase-icon size="small" />
+                <span class="description">
+                  <svg briefcase-icon size="xsmall" />
                   {{ this.I18n.t('js.include_workspaces.types.portfolio') }}
                 </span>
               }
               @case ('Program') {
-                <span class="color-fg-muted">
-                  <svg versions-icon size="small" />
+                <span class="description">
+                  <svg versions-icon size="xsmall" />
                   {{ this.I18n.t('js.include_workspaces.types.program') }}
                 </span>
               }
@@ -75,14 +75,14 @@
             @if (portfolioModelsEnabled) {
               @switch (project._type) {
                 @case ('Portfolio') {
-                  <span class="color-fg-muted">
-                    <svg briefcase-icon size="small" />
+                  <span class="description">
+                    <svg briefcase-icon size="xsmall" />
                     {{ this.I18n.t('js.include_workspaces.types.portfolio') }}
                   </span>
                 }
                 @case ('Program') {
-                  <span class="color-fg-muted">
-                    <svg versions-icon size="small" />
+                  <span class="description">
+                    <svg versions-icon size="xsmall" />
                     {{ this.I18n.t('js.include_workspaces.types.program') }}
                   </span>
                 }

frontend/src/app/spot/styles/sass/components/list.sass

@@ -1,5 +1,7 @@
 @use "sass:list"
 
+@import '../../../../../global_styles/content/_autocomplete.sass'
+
 .spot-list
   display: flex
   flex-direction: column
@@ -93,6 +95,18 @@
         max-width: 100%
         width: 100%
 
+        &:has(.description)
+          display: flex
+          align-items: center
+
+          > span:first-child
+            text-overflow: ellipsis
+            white-space: nowrap
+            overflow: hidden
+
+        .description
+          @extend %autocomplete-description
+
     &-action_disabled &-title
       opacity: 0.5
 

frontend/src/global_styles/content/_autocomplete.sass

@@ -26,6 +26,15 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
+%autocomplete-description
+  display: flex
+  align-items: center
+  flex-shrink: 0
+  gap: var(--base-size-4, 4px)
+  color: var(--fgColor-muted)
+  font-size: var(--text-body-size-small, .75rem)
+  font-weight: var(--base-text-weight-normal, 400)
+
 /***** Auto-complete ****/
 
 div.autocomplete
@@ -140,12 +149,15 @@ div.autocomplete
   height: initial !important
   min-height: initial !important
 
-  .ng-value-label:not(:has(> *))
+  .ng-value-label:not(:has(span))
     display: initial !important
 
-  .ng-value-label:has(> *)
+  .ng-value-label:has(span)
     min-width: 0
 
+    .description
+      @extend %autocomplete-description
+
   .ng-placeholder
     // Fix overflow by providing a max width to the input
     //
@@ -165,6 +177,9 @@ div.autocomplete
 .ng-option-label
   vertical-align: top
 
+  .description
+    @extend %autocomplete-description
+
 .ng-option, .ng-optgroup
   line-height: 22px
   font-size: var(--body-font-size)

frontend/src/global_styles/content/_projects_list.sass

@@ -79,8 +79,13 @@ $content-padding: 10px
     a
       white-space: nowrap
 
+    .description
+      @extend %autocomplete-description
+
   td.project--hierarchy
     white-space: nowrap
+    display: flex
+    gap: var(--base-size-8, 8px)
 
   @for $i from 1 through 9
     tr.idnt-#{$i} td.project--hierarchy

modules/storages/spec/features/storages/admin/project_storages_spec.rb

@@ -383,7 +383,7 @@ RSpec.describe "Admin lists project mappings for a storage",
         current_page = 3
         visit admin_settings_storage_project_storages_path(storage, page: current_page)
 
-        project = project_storages_index_page.project_in_first_row(column_text_separator: "\t")
+        project = project_storages_index_page.project_in_first_row
         project_storages_index_page.click_menu_item_of("Remove project", project)
 
         # The original DeleteService would try to remove actual files from actual storages,

spec/support/capybara/primer_component_selectors.rb

@@ -69,8 +69,9 @@ end
 Capybara.add_selector :primer_text, locator_type: [String] do
   label "Primer Text"
 
-  xpath do |locator, **|
+  xpath do |locator, **options|
     xpath = XPath.descendant(:span)
+    xpath = xpath[XPath.attr(:class).contains_word(options[:class])] if options[:class]
     unless locator.nil?
       locator = locator.to_s
       xpath = xpath[XPath.string.n.is(locator)]

spec/support/components/projects/top_menu.rb

@@ -109,10 +109,10 @@ module Components
 
           if workspace_badge
             expect(item).to have_octicon
-            expect(item).to have_primer_text(workspace_badge, color: :muted)
+            expect(item).to have_primer_text(workspace_badge, class: "description")
           else
             expect(item).to have_no_octicon
-            expect(item).to have_no_primer_text(color: :muted)
+            expect(item).to have_no_primer_text(class: "description")
           end
         end
       end

spec/support/edit_fields/project_edit_field.rb

@@ -51,10 +51,10 @@ class ProjectEditField < SelectField
 
       if workspace_badge
         expect(option).to have_octicon
-        expect(option).to have_primer_text(workspace_badge, color: :muted)
+        expect(option).to have_primer_text(workspace_badge, class: "description")
       else
         expect(option).to have_no_octicon
-        expect(option).to have_no_primer_text(color: :muted)
+        expect(option).to have_no_primer_text(class: "description")
       end
     end
   end

spec/support/pages/projects/index.rb

@@ -49,7 +49,7 @@ module Pages
                                project.name
                              end
 
-            expect(page).to have_text(displayed_name)
+            expect(page).to have_text(displayed_name, normalize_ws: true)
           end
         end
       end