make the class name optional and use two classes for hiding name of a…

…vatar for tablet and small screen laptop

app/components/users/avatar_component.rb

@@ -32,7 +32,7 @@ class AvatarComponent < ApplicationComponent
     include AvatarHelper
     include OpPrimer::ComponentHelpers
 
-    def initialize(user:, show_name: true, link: true, size: 'default', classes: '', title: nil, classes_for_name: '')
+    def initialize(user:, show_name: true, link: true, size: 'default', classes: '', title: nil, name_classes: '')
       super
 
       @user = user
@@ -41,7 +41,7 @@ def initialize(user:, show_name: true, link: true, size: 'default', classes: '',
       @size = size
       @title = title
       @classes = classes
-      @classes_for_name = classes_for_name
+      @name_classes = name_classes
     end
 
     def render?
@@ -56,7 +56,7 @@ def call
         hide_name: !@show_name,
         title: @title,
         class: @classes,
-        classes_for_name: @classes_for_name
+        name_classes: @name_classes
       )
     end
   end

frontend/src/app/shared/components/attachments/attachment-list/attachment-list-item.component.ts

@@ -120,7 +120,7 @@ export class OpAttachmentListItemComponent extends UntilDestroyedMixin implement
         this.principalRendererService.render(
           this.avatar.nativeElement,
           user,
-          { hide: true, link: false, classes: '' },
+          { hide: true, link: false },
           { hide: false, size: 'mini' },
         );
       });

frontend/src/app/shared/components/fields/display/field-types/multiple-lines-user-display-field.module.ts

@@ -52,7 +52,7 @@ export class MultipleLinesUserFieldModule extends ResourcesDisplayField {
     this.principalRenderer.renderMultiple(
       element,
       values,
-      { hide: false, link: false, classes: '' },
+      { hide: false, link: false },
       { hide: false, size: 'medium' },
       true,
     );

frontend/src/app/shared/components/fields/display/field-types/multiple-user-display-field.module.ts

@@ -76,7 +76,7 @@ export class MultipleUserFieldModule extends ResourcesDisplayField {
     this.principalRenderer.renderMultiple(
       element,
       valueForDisplay,
-      { hide: false, link: false, classes: '' },
+      { hide: false, link: false },
       { hide: false, size: 'medium' },
       false,
     );

frontend/src/app/shared/components/fields/display/field-types/user-display-field.module.ts

@@ -47,7 +47,7 @@ export class UserDisplayField extends DisplayField {
       this.principalRenderer.render(
         element,
         this.attribute,
-        { hide: false, link: false, classes: '' },
+        { hide: false, link: false },
         { hide: false, size: 'medium' },
       );
     }

frontend/src/app/shared/components/principal/principal-renderer.service.ts

@@ -21,7 +21,7 @@ export interface AvatarOptions {
 export interface NameOptions {
   hide:boolean;
   link:boolean;
-  classes:string;
+  classes?:string;
 }
 
 @Injectable({ providedIn: 'root' })
@@ -36,7 +36,7 @@ export class PrincipalRendererService {
   renderMultiple(
     container:HTMLElement,
     users:PrincipalLike[]|IPrincipal[],
-    name:NameOptions = { hide: false, link: false, classes: '' },
+    name:NameOptions = { hide: false, link: false },
     avatar:AvatarOptions = { hide: false, size: 'default' },
     multiLine = false,
   ):void {
@@ -66,7 +66,7 @@ export class PrincipalRendererService {
   render(
     container:HTMLElement,
     principal:PrincipalLike|IPrincipal,
-    name:NameOptions = { hide: false, link: true, classes: '' },
+    name:NameOptions = { hide: false, link: true },
     avatar:AvatarOptions = { hide: false, size: 'default' },
     title:string|null = null,
   ):void {
@@ -166,7 +166,9 @@ export class PrincipalRendererService {
     span.textContent = principal.name;
     span.classList.add('op-principal--name');
     span.title = title;
-    classes!== '' && span.classList.add(classes);
+    classes !== '' && classes.split(' ').forEach((cls)=>{
+      span.classList.add(cls);
+    });
     return span;
   }
 

frontend/src/app/shared/components/principal/principal.component.ts

@@ -70,7 +70,7 @@ export class OpPrincipalComponent implements OnInit {
 
   @Input() hideName = false;
 
-  @Input() classesForName = '';
+  @Input() nameClasses? = '';
 
   @Input() link = true;
 
@@ -99,7 +99,7 @@ export class OpPrincipalComponent implements OnInit {
         {
           hide: this.hideName,
           link: this.link,
-          classes: this.classesForName,
+          classes: this.nameClasses,
         },
         {
           hide: this.hideAvatar,

frontend/src/app/shared/components/storages/file-link-list-item/file-link-list-item.component.ts

@@ -125,14 +125,14 @@ export class FileLinkListItemComponent implements OnInit, AfterViewInit {
       this.principalRendererService.render(
         this.avatar.nativeElement as HTMLElement,
         { name: this.originData.lastModifiedByName, href: '/external_users/1' },
-        { hide: true, link: false, classes: '' },
+        { hide: true, link: false },
         { hide: false, size: 'mini' },
       );
     } else {
       this.principalRendererService.render(
         this.avatar.nativeElement as HTMLElement,
         { name: 'Not Available', href: '/placeholder_users/1' },
-        { hide: true, link: false, classes: '' },
+        { hide: true, link: false },
         { hide: false, size: 'mini' },
       );
     }

frontend/src/global_styles/layout/_base_mobile.sass

@@ -83,9 +83,10 @@
 @media screen and (max-width: $breakpoint-md)
   .hidden-for-tablet
     display: none !important
+
 @media screen and (max-width: $breakpoint-lg) and (min-width: $breakpoint-md)
   .hidden-for-small-screen-laptops-only
-    display: none!
+    display: none !important
 
 @media screen and (max-width: $breakpoint-md) and (min-width: $breakpoint-sm)
   .hidden-for-tablet-only

modules/avatars/app/helpers/avatar_helper.rb

@@ -45,8 +45,8 @@ module AvatarHelper
 
   # Returns the avatar image tag for the given +user+ if avatars are enabled
   # +user+ can be a User or a string that will be scanned for an email address (eg. 'joe <[email protected]>')
-  def avatar(principal, size: 'default', hide_name: true, classes_for_name: '', **options)
-    build_principal_avatar_tag principal, size:, hide_name:, classes_for_name:, **options
+  def avatar(principal, size: 'default', hide_name: true, name_classes: '', **options)
+    build_principal_avatar_tag principal, size:, hide_name:, name_classes:, **options
   rescue StandardError => e
     Rails.logger.error "Failed to create avatar for #{principal}: #{e}"
     ''.html_safe
@@ -106,7 +106,7 @@ def build_principal_avatar_tag(user, **options)
                             link: tag_options[:link],
                             size: tag_options[:size],
                             hideName: tag_options[:hide_name],
-                            classesForName: tag_options[:classes_for_name],
+                            nameClasses: tag_options[:name_classes],
                             title: tag_options.fetch(:title, '')
                           }
   end

modules/storages/app/components/storages/admin/storage_list_component.html.erb

@@ -37,7 +37,7 @@
             end
 
             grid.with_area(:user, tag: :div, color: :subtle, mr: 3, font_weight: :light, data: { 'test-selector': 'storage-creator' }, classes: 'ellipsis') do
-              render(Users::AvatarComponent.new(user: storage.creator, size: :mini, link: false, show_name: true, classes_for_name: 'hidden-for-mini-laptop'))
+              render(Users::AvatarComponent.new(user: storage.creator, size: :mini, link: false, show_name: true, name_classes: 'hidden-for-tablet-only hidden-for-small-screen-laptops-only'))
             end
 
             grid.with_area(:provider, tag: :div, color: :subtle, mr: 3, hide: :sm, data: { 'test-selector': 'storage-provider' }) do