Merge pull request #555 from GetStream/remove-style-attributes-from-templates

Remove style attributes from templates

Author: szuperaz

.github/workflows/workflow.yml

@@ -6,7 +6,7 @@ on:
       - beta
       - test
       - theming-v2
-      - perf-message-list
+      - remove-style-attributes-from-templates
   pull_request:
     branches:
       - master

package.json

@@ -52,7 +52,7 @@
         "prerelease": true
       },
       {
-        "name": "perf-message-list",
+        "name": "remove-style-attributes-from-templates",
         "prerelease": true
       }
     ],

projects/stream-chat-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "4.60.0",
+  "version": "4.60.1-remove-style-attributes-from-templates.1",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",

projects/stream-chat-angular/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.60.0';
+export const version = '4.60.1-remove-style-attributes-from-templates.1';

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html

@@ -265,7 +265,6 @@
               str-chat__message-attachment-file--item
               str-chat-angular__message-attachment-file-single
             "
-            style="cursor: pointer; text-decoration: none"
             data-testclass="file-link"
             href="{{ attachmentContext.asset_url }}"
             target="_blank"

projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.html

@@ -25,7 +25,7 @@
       >
         <stream-icon-placeholder icon="retry"></stream-icon-placeholder>
       </div>
-      <div class="rfu-thumbnail__wrapper" style="width: 100; height: 100">
+      <div class="rfu-thumbnail__wrapper">
         <div class="rfu-thumbnail__overlay">
           <div
             class="rfu-icon-button"

projects/stream-chat-angular/src/lib/avatar/avatar.component.html

@@ -3,7 +3,7 @@
     location
   }}"
   title="{{ name }}"
-  [style]="{
+  [ngStyle]="{
     flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
     fontSize:
       initialsType === 'first-letter-of-first-word'
@@ -21,7 +21,7 @@
     alt="{{ initials }}"
     data-testid="avatar-img"
     (error)="isError = true"
-    [style]="{
+    [ngStyle]="{
       flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
       height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
       objectFit: 'cover',
@@ -30,11 +30,7 @@
     fetchpriority="high"
   />
   <ng-template #fallback>
-    <div
-      data-testid="fallback-img"
-      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
-      class="str-chat__avatar-fallback"
-    >
+    <div data-testid="fallback-img" class="str-chat__avatar-fallback">
       {{ initials }}
     </div>
   </ng-template>

projects/stream-chat-angular/src/lib/channel-list/channel-list.component.html

@@ -1,7 +1,6 @@
 <div
   #container
   data-testid="channel-list-container"
-  style="max-width: unset"
   class="str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{
     theme$ | async
   }}"
@@ -14,10 +13,7 @@
     "
     class="str-chat__channel-list-messenger"
   >
-    <div
-      class="str-chat__channel-list-messenger__main"
-      style="display: flex; flex-direction: column"
-    >
+    <div class="str-chat__channel-list-messenger__main">
       <ng-content select="[channel-list-top]"></ng-content>
       <div
         class="str-chat__channel-list-empty"

projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.html

@@ -60,7 +60,7 @@
     <stream-avatar-placeholder
       data-testclass="avatar"
       class="str-chat__avatar str-chat__avatar--circle"
-      [style]="'height: ' + themeVersion === '2' ? 30 : 20 + 'px'"
+      [ngStyle]="{ height: themeVersion === '2' ? 30 : 20 + 'px' }"
       [size]="themeVersion === '2' ? 30 : 20"
       [imageUrl]="item.image || item.user?.image"
       [name]="item.autocompleteLabel"

projects/stream-chat-angular/src/lib/message-input/message-input.component.html

@@ -19,7 +19,6 @@
       >
         <stream-icon-placeholder
           icon="close-no-outline"
-          style="font-size: 15px; line-height: 15px; width: 15px; height: 15px"
         ></stream-icon-placeholder>
       </button>
     </div>
@@ -53,7 +52,7 @@
       </div>
     </div>
   </div>
-  <div class="str-chat__input-flat-wrapper" style="width: 100%">
+  <div class="str-chat__input-flat-wrapper">
     <div
       class="{{
         mode === 'main'