feat(chat): rename bool props and default values to false

Author: teodosiah

src/components/chat/chat-input.ts

@@ -39,11 +39,11 @@ export default class IgcChatInputComponent extends LitElement {
     );
   }
 
-  @property({ type: Boolean, attribute: 'enable-attachments' })
-  public enableAttachments = true;
+  @property({ type: Boolean, attribute: 'disable-attachments' })
+  public disableAttachments = false;
 
-  @property({ type: Boolean, attribute: 'enable-emoji-picker' })
-  public enableEmojiPicker = true;
+  @property({ type: Boolean, attribute: 'disable-emojis' })
+  public disableEmojis = false;
 
   @query('textarea')
   private textInputElement!: HTMLTextAreaElement;
@@ -142,17 +142,17 @@ export default class IgcChatInputComponent extends LitElement {
   protected override render() {
     return html`
       <div class="input-container">
-        ${this.enableAttachments
-          ? html`
+        ${this.disableAttachments
+          ? ''
+          : html`
               <igc-file-input multiple @igcChange=${this.handleFileUpload}>
                 <igc-icon
                   slot="file-selector-text"
                   name="attachment"
                   collection="material"
                 ></igc-icon>
               </igc-file-input>
-            `
-          : ''}
+            `}
 
         <div class="input-wrapper">
           <igc-textarea
@@ -166,13 +166,13 @@ export default class IgcChatInputComponent extends LitElement {
         </div>
 
         <div class="buttons-container">
-          ${this.enableEmojiPicker
-            ? html`
+          ${this.disableEmojis
+            ? ''
+            : html`
                 <igc-emoji-picker
                   @emoji-selected=${this.addEmoji}
                 ></igc-emoji-picker>
-              `
-            : ''}
+              `}
 
           <igc-icon-button
             name="send-message"

src/components/chat/chat-message-list.ts

@@ -34,8 +34,8 @@ export default class IgcChatMessageListComponent extends LitElement {
   @property({ type: Boolean, attribute: 'scroll-bottom' })
   public scrollBottom = true;
 
-  @property({ type: Boolean, attribute: 'enable-reactions' })
-  public enableReactions = true;
+  @property({ type: Boolean, attribute: 'disable-reactions' })
+  public disableReactions = false;
 
   private formatDate(date: Date): string {
     const today = new Date();
@@ -114,7 +114,7 @@ export default class IgcChatMessageListComponent extends LitElement {
                 <igc-chat-message
                   .message=${message}
                   .user=${this.user}
-                  .enableReactions=${this.enableReactions}
+                  .disableReactions=${this.disableReactions}
                 ></igc-chat-message>
               `
             )}

src/components/chat/chat-message.ts

@@ -35,8 +35,8 @@ export default class IgcChatMessageComponent extends LitElement {
   @property({ reflect: true, attribute: false })
   public user: IgcUser | undefined;
 
-  @property({ type: Boolean, attribute: 'enable-reactions' })
-  public enableReactions = true;
+  @property({ type: Boolean, attribute: 'disable-reactions' })
+  public disableReactions = false;
 
   private formatTime(date: Date | undefined): string | undefined {
     return date?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
@@ -89,6 +89,13 @@ export default class IgcChatMessageComponent extends LitElement {
           ${this.message?.text.trim()
             ? html` <div class="bubble">${this.message?.text}</div>`
             : ''}
+          ${this.message?.attachments && this.message?.attachments.length > 0
+            ? html`<igc-message-attachments
+                .attachments=${this.message?.attachments}
+              >
+              </igc-message-attachments>`
+            : ''}
+
           <div class="meta">
             <span class="time"
               >${this.formatTime(this.message?.timestamp)}</span
@@ -101,21 +108,15 @@ export default class IgcChatMessageComponent extends LitElement {
                 >`
               : ''}
           </div>
-          ${this.message?.attachments && this.message?.attachments.length > 0
-            ? html`<igc-message-attachments
-                .attachments=${this.message?.attachments}
-              >
-              </igc-message-attachments>`
-            : ''}
         </div>
-        ${this.enableReactions
-          ? html`<igc-message-reactions
+        ${this.disableReactions
+          ? ''
+          : html`<igc-message-reactions
               .reactions=${this.message?.reactions}
               .messageId=${this.message?.id}
               .currentUserId=${this.isCurrentUser() ? sender?.id : ''}
               @add-reaction=${this.handleAddReaction}
-            ></igc-message-reactions>`
-          : ''}
+            ></igc-message-reactions>`}
       </div>
     `;
   }

src/components/chat/chat.ts

@@ -49,14 +49,14 @@ export default class IgcChatComponent extends EventEmitterMixin<
   @property({ type: Boolean, attribute: 'scroll-bottom' })
   public scrollBottom = true;
 
-  @property({ type: Boolean, attribute: 'enable-reactions' })
-  public enableReactions = true;
+  @property({ type: Boolean, attribute: 'disable-reactions' })
+  public disableReactions = false;
 
-  @property({ type: Boolean, attribute: 'enable-attachments' })
-  public enableAttachments = true;
+  @property({ type: Boolean, attribute: 'disable-attachments' })
+  public disableAttachments = false;
 
-  @property({ type: Boolean, attribute: 'enable-emoji-picker' })
-  public enableEmojiPicker = true;
+  @property({ type: Boolean, attribute: 'disable-emojis' })
+  public disableEmojis = false;
 
   @property({ type: String, attribute: 'header-text', reflect: true })
   public headerText = '';
@@ -173,12 +173,12 @@ export default class IgcChatComponent extends EventEmitterMixin<
           .user=${this.user}
           .typingUsers=${this.typingUsers}
           .scrollBottom=${this.scrollBottom}
-          .enableReactions=${this.enableReactions}
+          .disableReactions=${this.disableReactions}
         >
         </igc-chat-message-list>
         <igc-chat-input
-          .enableAttachments=${this.enableAttachments}
-          .enableEmojiPicker=${this.enableEmojiPicker}
+          .disableAttachments=${this.disableAttachments}
+          .disableEmojis=${this.disableEmojis}
           @message-send=${this.handleSendMessage}
         ></igc-chat-input>
       </div>

stories/chat.stories.ts

@@ -16,20 +16,20 @@ const metadata: Meta<IgcChatComponent> = {
       control: 'boolean',
       table: { defaultValue: { summary: 'true' } },
     },
-    enableReactions: {
+    disableReactions: {
       type: 'boolean',
       control: 'boolean',
-      table: { defaultValue: { summary: 'true' } },
+      table: { defaultValue: { summary: 'false' } },
     },
-    enableAttachments: {
+    disableAttachments: {
       type: 'boolean',
       control: 'boolean',
-      table: { defaultValue: { summary: 'true' } },
+      table: { defaultValue: { summary: 'false' } },
     },
-    enableEmojiPicker: {
+    disableEmojis: {
       type: 'boolean',
       control: 'boolean',
-      table: { defaultValue: { summary: 'true' } },
+      table: { defaultValue: { summary: 'false' } },
     },
     headerText: {
       type: 'string',
@@ -39,9 +39,9 @@ const metadata: Meta<IgcChatComponent> = {
   },
   args: {
     scrollBottom: true,
-    enableReactions: true,
-    enableAttachments: true,
-    enableEmojiPicker: true,
+    disableReactions: false,
+    disableAttachments: false,
+    disableEmojis: false,
     headerText: '',
   },
 };
@@ -50,9 +50,9 @@ export default metadata;
 
 interface IgcChatArgs {
   scrollBottom: boolean;
-  enableReactions: boolean;
-  enableAttachments: boolean;
-  enableEmojiPicker: boolean;
+  disableReactions: boolean;
+  disableAttachments: boolean;
+  disableEmojis: boolean;
   headerText: string;
 }
 type Story = StoryObj<IgcChatArgs>;
@@ -69,14 +69,12 @@ const otherUser: any = {
   id: 'user2',
   name: 'Alice',
   avatar: 'https://www.infragistics.com/angular-demos/assets/images/men/2.jpg',
-  isTyping: false,
 };
 
 const thirdUser: any = {
   id: 'user3',
   name: 'Sam',
   avatar: 'https://www.infragistics.com/angular-demos/assets/images/men/3.jpg',
-  isTyping: false,
 };
 
 const initialMessages: any[] = [