feat: handle very long description in detailedList filterOption description

Author: dungdong-aws

src/components/chat-item/chat-item-form-items.ts

@@ -6,9 +6,11 @@
 import { Config } from '../../helper/config';
 import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
 import { cancelEvent } from '../../helper/events';
+import { StyleLoader } from '../../helper/style-loader';
 import testIds from '../../helper/test-ids';
 import { isMandatoryItemValid, isTextualFormItemValid } from '../../helper/validator';
 import { ChatItem, ChatItemFormItem, TextBasedFormItem } from '../../static';
+import { Button } from '../button';
 import { Card } from '../card/card';
 import { CardBody } from '../card/card-body';
 import { Checkbox } from '../form-items/checkbox';
@@ -35,6 +37,7 @@ export class ChatItemFormItemsWrapper {
   private readonly props: ChatItemFormItemsWrapperProps;
   private readonly options: Record<string, Select | TextArea | TextInput | RadioGroup | Stars | Checkbox | FormItemList | FormItemPillBox> = {};
   private readonly validationItems: Record<string, boolean> = {};
+  private readonly descriptionStates: Record<string, boolean> = {};
   private isValid: boolean = false;
   private tooltipOverlay: Overlay | null;
   private tooltipTimeout: ReturnType<typeof setTimeout>;
@@ -43,6 +46,7 @@ export class ChatItemFormItemsWrapper {
 
   render: ExtendedHTMLElement;
   constructor (props: ChatItemFormItemsWrapperProps) {
+    StyleLoader.getInstance().load('components/_form-item-description-collapsible.scss');
     this.props = props;
     this.render = DomBuilder.getInstance().build({
       type: 'div',
@@ -75,16 +79,84 @@ export class ChatItemFormItemsWrapper {
             chatItemOption.value = chatItemOption.options?.[0]?.value;
           }
         }
-        let description;
+        let description: ExtendedHTMLElement | undefined;
+
         if (chatItemOption.description != null) {
-          description = DomBuilder.getInstance().build({
-            type: 'span',
-            testId: testIds.chatItem.chatItemForm.description,
+          // Create a temporary element to check for overflow
+          const tempDescriptionElement = DomBuilder.getInstance().build({
+            type: 'div',
             classNames: [ 'mynah-ui-form-item-description' ],
-            children: [
-              chatItemOption.description,
-            ]
+            children: [ chatItemOption.description ],
+            attributes: {
+              style: 'position: absolute; visibility: hidden; pointer-events: none;'
+            }
           });
+
+          // Add to DOM temporarily to measure overflow
+          document.body.appendChild(tempDescriptionElement);
+          const isLongDescription = this.hasDescriptionOverflow(tempDescriptionElement);
+          document.body.removeChild(tempDescriptionElement);
+
+          const initialCollapsed = isLongDescription; // Auto-collapse descriptions with overflow
+
+          if (isLongDescription) {
+            // Initialize collapse state for long descriptions
+            this.descriptionStates[chatItemOption.id] = initialCollapsed;
+
+            const descriptionContent = DomBuilder.getInstance().build({
+              type: 'div',
+              classNames: [
+                'mynah-ui-form-item-description',
+                'mynah-ui-form-item-description-collapsible',
+                ...(initialCollapsed ? [ 'collapsed' ] : [])
+              ],
+              children: [ chatItemOption.description ]
+            });
+
+            const toggleButton = new Button({
+              label: initialCollapsed ? 'Show more' : 'Show less',
+              primary: false,
+              status: 'clear',
+              classNames: [ 'mynah-ui-form-item-description-toggle' ],
+              onClick: (e: Event) => {
+                cancelEvent(e);
+                const isCurrentlyCollapsed = this.descriptionStates[chatItemOption.id];
+                this.descriptionStates[chatItemOption.id] = !isCurrentlyCollapsed;
+
+                if (isCurrentlyCollapsed) {
+                  // Expand
+                  descriptionContent.removeClass('collapsed');
+                  // Update button label by finding the label element
+                  const buttonLabel = toggleButton.render.querySelector('.mynah-button-label');
+                  if (buttonLabel != null) {
+                    buttonLabel.innerHTML = 'Show less';
+                  }
+                } else {
+                  // Collapse
+                  descriptionContent.addClass('collapsed');
+                  // Update button label by finding the label element
+                  const buttonLabel = toggleButton.render.querySelector('.mynah-button-label');
+                  if (buttonLabel != null) {
+                    buttonLabel.innerHTML = 'Show more';
+                  }
+                }
+              }
+            });
+
+            description = DomBuilder.getInstance().build({
+              type: 'div',
+              testId: testIds.chatItem.chatItemForm.description,
+              children: [ descriptionContent, toggleButton.render ]
+            });
+          } else {
+            // Regular non-collapsible description for short text
+            description = DomBuilder.getInstance().build({
+              type: 'span',
+              testId: testIds.chatItem.chatItemForm.description,
+              classNames: [ 'mynah-ui-form-item-description' ],
+              children: [ chatItemOption.description ]
+            });
+          }
         }
         const fireModifierAndEnterKeyPress = (): void => {
           if ((chatItemOption as TextBasedFormItem).checkModifierEnterKeyPress === true && this.isFormValid()) {
@@ -323,6 +395,18 @@ export class ChatItemFormItemsWrapper {
     }
   };
 
+  private readonly hasDescriptionOverflow = (element: HTMLElement): boolean => {
+    // Get computed line height from CSS variables or fallback
+    const computedStyle = window.getComputedStyle(element);
+    const lineHeight = parseFloat(computedStyle.lineHeight);
+    const fallbackLineHeight = isNaN(lineHeight) || lineHeight === 0 ? 20 : lineHeight;
+
+    // Calculate if content would exceed 3 lines (the collapsed state shows 3 lines)
+    const maxCollapsedHeight = fallbackLineHeight * 3;
+
+    return element.scrollHeight > maxCollapsedHeight;
+  };
+
   private readonly getHandlers = (chatItemOption: ChatItemFormItem): Object => {
     if (chatItemOption.mandatory === true ||
       ([ 'textarea', 'textinput', 'numericinput', 'email', 'pillbox' ].includes(chatItemOption.type) && (chatItemOption as TextBasedFormItem).validationPatterns != null)) {
@@ -387,4 +471,33 @@ export class ChatItemFormItemsWrapper {
     });
     return valueMap;
   };
+
+  // Programmatic control methods for collapsible descriptions
+  setDescriptionCollapsed = (itemId: string, collapsed: boolean): void => {
+    if (this.descriptionStates[itemId] !== undefined) {
+      this.descriptionStates[itemId] = collapsed;
+      const descriptionElement = this.render.querySelector(`[data-testid="${testIds.chatItem.chatItemForm.description}"]`);
+      if (descriptionElement !== null) {
+        if (collapsed) {
+          descriptionElement.classList.add('collapsed');
+        } else {
+          descriptionElement.classList.remove('collapsed');
+        }
+      }
+    }
+  };
+
+  toggleDescriptionCollapsed = (itemId: string): void => {
+    if (this.descriptionStates[itemId] !== undefined) {
+      this.setDescriptionCollapsed(itemId, !this.descriptionStates[itemId]);
+    }
+  };
+
+  getDescriptionCollapsed = (itemId: string): boolean | undefined => {
+    return this.descriptionStates[itemId];
+  };
+
+  getAllDescriptionStates = (): Record<string, boolean> => {
+    return { ...this.descriptionStates };
+  };
 }

src/styles/components/_detailed-list.scss

@@ -39,7 +39,7 @@
             display: none;
         }
         > .mynah-chat-item-form-items-container {
-            gap: var(--mynah-sizing-4);
+            gap: var(--mynah-sizing-5);
         }
     }
     > .mynah-detailed-list-filter-actions-wrapper {

src/styles/components/_form-item-description-collapsible.scss

@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.mynah-ui-form-item-description-collapsible {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+    color: var(--mynah-color-text-default);
+    font-size: var(--mynah-font-size-small);
+    line-height: var(--mynah-line-height);
+    transition: all 0.3s ease;
+
+    &.collapsed {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: calc(var(--mynah-line-height) * 3);
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: var(--mynah-line-height);
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to bottom, transparent 0%, var(--mynah-color-bg) 100%);
+            pointer-events: none;
+        }
+    }
+
+    &:not(.collapsed) {
+        overflow: visible;
+    }
+}
+
+.mynah-ui-form-item-description-toggle {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: var(--mynah-sizing-1) var(--mynah-sizing-1) var(--mynah-sizing-1) var(--mynah-sizing-2);
+    margin-top: var(--mynah-sizing-1);
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: var(--mynah-very-short-transition);
+
+    .mynah-button-label {
+        font-size: var(--mynah-font-size-xsmall);
+        font-weight: 500;
+        text-align: right;
+        flex-shrink: 0;
+    }
+
+    &:focus {
+        background: transparent;
+    }
+}