fix(#2054): add maxwidth prop to dropdown, textarea and tooltip

Author: syedszeeshan

libs/angular-components/src/lib/components/dropdown/dropdown.spec.ts

@@ -21,6 +21,7 @@ import { fireEvent } from "@testing-library/dom";
       [testId]="testId"
       [id]="id"
       [width]="width"
+      [maxWidth]="maxWidth"
       [mt]="mt"
       [mr]="mr"
       [mb]="mb"
@@ -56,6 +57,7 @@ class TestDropdownComponent {
   placeholder?: string;
   testId?: string;
   width?: string;
+  maxWidth?: string;
   mt?: Spacing;
   mb?: Spacing;
   ml?: Spacing;
@@ -93,6 +95,7 @@ describe("GoABDropdown", () => {
     component.testId = "foo";
     component.id = "foo-dropdown";
     component.width = "200px";
+    component.maxWidth = "400px";
     component.mt = "s";
     component.mr = "m";
     component.mb = "l";
@@ -115,6 +118,7 @@ describe("GoABDropdown", () => {
     expect(el?.getAttribute("arialabel")).toBe("Label");
     expect(el?.getAttribute("arialabelledby")).toBe("foo-dropdown-label");
     expect(el?.getAttribute("autocomplete")).toBe("off");
+    expect(el?.getAttribute("maxwidth")).toBe("400px");
 
     // Check options
     const dropdownItems = el.querySelectorAll("goa-dropdown-item");

libs/angular-components/src/lib/components/dropdown/dropdown.ts

@@ -35,6 +35,7 @@ import { GoabControlValueAccessor } from "../base.component";
       [attr.placeholder]="placeholder"
       [attr.testid]="testId"
       [attr.width]="width"
+      [attr.maxwidth]="maxWidth"
       [attr.relative]="relative"
       [attr.autocomplete]="autoComplete"
       [id]="id"
@@ -63,6 +64,7 @@ export class GoabDropdown extends GoabControlValueAccessor {
   @Input({ transform: booleanAttribute }) native?: boolean;
   @Input() placeholder?: string;
   @Input() width?: string;
+  @Input() maxWidth?: string;
   @Input() autoComplete?: string;
   /***
    * @deprecated This property has no effect and will be removed in a future version

libs/angular-components/src/lib/components/tooltip/tooltip.spec.ts

@@ -14,6 +14,17 @@ class TestTooltipComponent {
   /** do nothing **/
 }
 
+@Component({
+  template: `
+    <goab-tooltip content="This is a tooltip" maxWidth="300px" testId="foo-maxwidth">
+      <goab-icon type="information-circle"></goab-icon>
+    </goab-tooltip>
+  `,
+})
+class TestTooltipMaxWidthComponent {
+  /** do nothing **/
+}
+
 describe("GoABTooltip", () => {
   let fixture: ComponentFixture<TestTooltipComponent>;
 
@@ -38,3 +49,23 @@ describe("GoABTooltip", () => {
     expect(goaIcon?.getAttribute("type")).toBe("information-circle");
   });
 });
+
+describe("GoABTooltip with maxWidth", () => {
+  let fixture: ComponentFixture<TestTooltipMaxWidthComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TestTooltipMaxWidthComponent],
+      imports: [GoabTooltip, GoabIcon],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestTooltipMaxWidthComponent);
+    fixture.detectChanges();
+  });
+
+  it("should render with maxWidth property", () => {
+    const el = fixture.nativeElement.querySelector("goa-tooltip");
+    expect(el?.getAttribute("maxwidth")).toBe("300px");
+    expect(el?.getAttribute("testid")).toBe("foo-maxwidth");
+  });
+});

libs/angular-components/src/lib/components/tooltip/tooltip.ts

@@ -15,6 +15,7 @@ import { GoabBaseComponent } from "../base.component";
       [attr.content]="getContentAsString()"
       [attr.halign]="hAlign"
       [attr.testid]="testId"
+      [attr.maxwidth]="maxWidth"
       [attr.mt]="mt"
       [attr.mb]="mb"
       [attr.ml]="ml"
@@ -37,6 +38,7 @@ export class GoabTooltip extends GoabBaseComponent {
   @Input() position?: GoabTooltipPosition;
   @Input() content?: string | TemplateRef<unknown>;
   @Input() hAlign?: GoabTooltipHorizontalAlignment;
+  @Input() maxWidth?: string;
 
   getContentAsString(): string {
     return this.content instanceof TemplateRef ? "" : this.content || "";

libs/react-components/specs/dropdown.browser.spec.tsx

@@ -9,7 +9,6 @@ describe("Dropdown Component", () => {
   };
 
   describe("Dropdown", () => {
-
     it("should render with the default props", async () => {
       // Setup
 
@@ -137,6 +136,39 @@ describe("Dropdown Component", () => {
           expect(computedStyle.width).toBe("300px");
         });
       });
+
+      it("applies maxWidth constraint when width exceeds maxWidth", async () => {
+        const Component = () => {
+          return (
+            <GoabDropdown
+              name="favcolor"
+              testId="favcolor-max"
+              width="800px"
+              maxWidth="320px"
+              onChange={noop}
+            >
+              <GoabDropdownItem label="Red" value="red" />
+              <GoabDropdownItem label="Blue" value="blue" />
+              <GoabDropdownItem label="Green" value="green" />
+            </GoabDropdown>
+          );
+        };
+
+        const result = render(<Component />);
+        const dropdown = result.getByTestId("favcolor-max");
+
+        await vi.waitFor(() => {
+          const styleAttr = dropdown.element().getAttribute("style") || "";
+          // Provided width custom prop present
+          expect(styleAttr).toContain("--width: 800px");
+          // Max width style applied to host when maxWidth prop provided (from Svelte template conditional)
+          expect(styleAttr).toMatch(/max-width:\s*320px/);
+
+          const computedStyle = window.getComputedStyle(dropdown.element());
+          // Effective width should not exceed maxWidth constraint
+          expect(computedStyle.width).toBe("320px");
+        });
+      });
     });
 
     describe("Popover position", () => {
@@ -437,7 +469,7 @@ describe("Dropdown Component", () => {
       // Result
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
-        name: "options",
+          name: "options",
         value: 2
       }));
     });

libs/react-components/specs/textarea.browser.spec.tsx

@@ -0,0 +1,76 @@
+import { render } from "vitest-browser-react";
+
+import { GoabTextArea } from "../src";
+import { expect, describe, it, vi } from "vitest";
+
+describe("TextArea Browser Tests", () => {
+  const noop = () => {
+    // noop
+  };
+
+  it("should render textarea component", async () => {
+    const Component = () => {
+      return (
+        <div data-testid="container">
+          <GoabTextArea
+            name="description"
+            testId="textarea"
+            placeholder="Enter description"
+            onChange={noop}
+          />
+        </div>
+      );
+    };
+
+    const result = render(<Component />);
+    const container = result.getByTestId("container");
+
+    // Verify elements are rendered
+    expect(container).toBeTruthy();
+
+    // Wait for the goa-textarea custom element to be present
+    await vi.waitFor(
+      () => {
+        const textareaEl = container.element().querySelector("goa-textarea");
+        expect(textareaEl).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
+  });
+
+  it("should apply maxWidth", async () => {
+    const Component = () => {
+      return (
+        <div data-testid="container">
+          <GoabTextArea
+            name="longtext"
+            testId="textarea-maxwidth"
+            width="800px"
+            maxWidth="300px"
+            value={"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ".repeat(10)}
+            onChange={noop}
+          />
+        </div>
+      );
+    };
+
+    const result = render(<Component />);
+    const container = result.getByTestId("container");
+
+    await vi.waitFor(
+      () => {
+        const host = container.element().querySelector("goa-textarea");
+        expect(host).toBeTruthy();
+
+        const computed = window.getComputedStyle(host as HTMLElement);
+        expect(computed.maxWidth).toBe("300px");
+
+        // Width should not exceed the maxWidth
+        const numericWidth = parseInt(computed.width || "0", 10);
+        expect(numericWidth).toBeGreaterThan(0);
+        expect(numericWidth).toBeLessThanOrEqual(300);
+      },
+      { timeout: 3000 },
+    );
+  });
+});