fix: Updates from PR comments

cloudscape-design · Jul 8, 2024 · 115a3bd · 115a3bd
1 parent fe97568
commit 115a3bd
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 25 deletions.
diff --git a/src/internal/generated/styles/tokens.d.ts b/src/internal/generated/styles/tokens.d.ts
@@ -65,5 +65,9 @@ export const colorChartsThresholdNeutral: string;
 // Spacing
 export const spaceXs: string;
 export const spaceXxxs: string;
+export const spaceScaledXxs: string;
 export const spaceScaledXs: string;
 export const spaceScaledS: string;
+
+// Line height
+export const lineHeightBodyM: string;
diff --git a/src/prompt-input/__integ__/prompt-input-form-submit.test.ts b/src/prompt-input/__integ__/prompt-input-form-submit.test.ts
@@ -12,7 +12,7 @@ class PromptInputPage extends BasePageObject {
   }
 
   async clickActionButton() {
-    await this.click(promptInputWrapper.findSubmitButton().toSelector());
+    await this.click(promptInputWrapper.findActionButton().toSelector());
   }
 
   async disableFormSubmitting() {

diff --git a/src/prompt-input/__tests__/prompt-input.test.tsx b/src/prompt-input/__tests__/prompt-input.test.tsx
@@ -69,22 +69,22 @@ describe('disableBrowserAutocorrect', () => {
 describe('action button', () => {
   test('not present if not added to props', () => {
     const { wrapper } = renderPromptInput({ value: '' });
-    expect(wrapper.findSubmitButton()).not.toBeInTheDocument();
+    expect(wrapper.findActionButton()).not.toBeInTheDocument();
   });
 
   test('present when added', () => {
     const { wrapper } = renderPromptInput({ value: '', actionButtonIconName: 'send' });
-    expect(wrapper.findSubmitButton().getElement()).toBeInTheDocument();
+    expect(wrapper.findActionButton().getElement()).toBeInTheDocument();
   });
 
   test('disabled when in disabled state', () => {
     const { wrapper } = renderPromptInput({ value: '', actionButtonIconName: 'send', disabled: true });
-    expect(wrapper.findSubmitButton().getElement()).toHaveAttribute('disabled');
+    expect(wrapper.findActionButton().getElement()).toHaveAttribute('disabled');
   });
 
   test('disabled when in read-only state', () => {
     const { wrapper } = renderPromptInput({ value: '', actionButtonIconName: 'send', readOnly: true });
-    expect(wrapper.findSubmitButton().getElement()).toHaveAttribute('disabled');
+    expect(wrapper.findActionButton().getElement()).toHaveAttribute('disabled');
   });
 });
 
@@ -115,7 +115,7 @@ describe('prompt input in form', () => {
 
   test('should submit the form when clicking the action button', () => {
     const [wrapper, submitSpy] = renderPromptInputInForm();
-    wrapper.findSubmitButton().click();
+    wrapper.findActionButton().click();
     expect(submitSpy).toHaveBeenCalled();
     expect(console.error).toHaveBeenCalledTimes(1);
     expect(console.error).toHaveBeenCalledWith(
@@ -170,7 +170,7 @@ describe('events', () => {
     });
 
     act(() => {
-      wrapper.findSubmitButton().click();
+      wrapper.findActionButton().click();
     });
 
     expect(onAction).toHaveBeenCalled();
@@ -237,7 +237,7 @@ describe('a11y', () => {
       expect(wrapper.findNativeTextarea().getElement()).toHaveAttribute('aria-describedby', 'my-custom-id');
     });
     test('can be customized without controlId', () => {
-      const { wrapper } = renderPromptInput({ value: '', id: undefined, ariaDescribedby: 'my-custom-id' });
+      const { wrapper } = renderPromptInput({ value: '', controlId: undefined, ariaDescribedby: 'my-custom-id' });
 
       expect(wrapper.findNativeTextarea().getElement()).toHaveAttribute('aria-describedby', 'my-custom-id');
     });

diff --git a/src/prompt-input/index.tsx b/src/prompt-input/index.tsx
@@ -17,12 +17,25 @@ const PromptInput = React.forwardRef(
       disableActionButton,
       spellcheck,
       readOnly,
+      actionButtonIconName,
+      minRows,
+      maxRows,
       ...props
     }: PromptInputProps,
     ref: React.Ref<PromptInputProps.Ref>
   ) => {
     const baseComponentProps = useBaseComponent('PromptInput', {
-      props: { readOnly, autoComplete, autoFocus, disableBrowserAutocorrect, disableActionButton, spellcheck },
+      props: {
+        readOnly,
+        autoComplete,
+        autoFocus,
+        disableBrowserAutocorrect,
+        disableActionButton,
+        spellcheck,
+        actionButtonIconName,
+        minRows,
+        maxRows,
+      },
     });
     return (
       <InternalPromptInput
@@ -32,6 +45,9 @@ const PromptInput = React.forwardRef(
         disableBrowserAutocorrect={disableBrowserAutocorrect}
         disableActionButton={disableActionButton}
         spellcheck={spellcheck}
+        actionButtonIconName={actionButtonIconName}
+        minRows={minRows}
+        maxRows={maxRows}
         {...props}
         {...baseComponentProps}
         ref={ref}

diff --git a/src/prompt-input/internal.tsx b/src/prompt-input/internal.tsx
@@ -9,9 +9,11 @@ import { useFormFieldContext } from '../internal/context/form-field-context';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import clsx from 'clsx';
 import styles from './styles.css.js';
+import testutilStyles from './test-classes/styles.css.js';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { convertAutoComplete } from '../input/utils';
 import { useDensityMode } from '@cloudscape-design/component-toolkit/internal';
+import * as tokens from '../internal/generated/styles/tokens';
 
 export interface InternalPromptInputProps extends PromptInputProps, InternalBaseComponentProps {}
 
@@ -30,7 +32,7 @@ const InternalPromptInput = React.forwardRef(
       disableActionButton,
       disableBrowserAutocorrect,
       disabled,
-      maxRows,
+      maxRows = 3,
       minRows,
       name,
       onAction,
@@ -55,6 +57,9 @@ const InternalPromptInput = React.forwardRef(
 
     const isCompactMode = useDensityMode(textareaRef) === 'compact';
 
+    const PADDING = tokens.spaceScaledXxs;
+    const LINE_HEIGHT = tokens.lineHeightBodyM;
+
     useForwardFocus(ref, textareaRef);
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -78,18 +83,15 @@ const InternalPromptInput = React.forwardRef(
     };
 
     const adjustTextareaHeight = useCallback(() => {
-      const PADDING = 4;
-      const LINE_HEIGHT = 20;
       if (textareaRef.current) {
         textareaRef.current.style.height = 'auto';
 
-        const newHeight = Math.min(
-          textareaRef.current.scrollHeight + PADDING,
-          (maxRows ?? 3) * (LINE_HEIGHT + PADDING / 2) + PADDING
-        );
-        textareaRef.current.style.height = `${newHeight}px`;
+        const maxRowsHeight = `calc(${maxRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING})`;
+        const scrollHeight = `calc(${textareaRef.current.scrollHeight}px + ${PADDING})`;
+
+        textareaRef.current.style.height = `min(${scrollHeight}, ${maxRowsHeight})`;
       }
-    }, [maxRows]);
+    }, [maxRows, LINE_HEIGHT, PADDING]);
 
     useEffect(() => {
       const handleResize = () => {
@@ -148,7 +150,7 @@ const InternalPromptInput = React.forwardRef(
         {hasActionButton && (
           <div className={styles.button}>
             <InternalButton
-              className={styles['action-button']}
+              className={testutilStyles['action-button']}
               ariaLabel={actionButtonAriaLabel}
               disabled={disabled || readOnly || disableActionButton}
               iconName={actionButtonIconName}

diff --git a/src/prompt-input/styles.scss b/src/prompt-input/styles.scss
@@ -92,7 +92,3 @@ $send-icon-right-spacing: awsui.$space-static-xxs;
   inset-inline-end: $send-icon-right-spacing;
   inset-block-end: 0;
 }
-
-.action-button {
-  /* used in test-utils */
-}
diff --git a/src/prompt-input/test-classes/styles.scss b/src/prompt-input/test-classes/styles.scss
@@ -0,0 +1,7 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.action-button {
+  /* used in test-utils */
+}
diff --git a/src/test-utils/dom/prompt-input/index.ts b/src/test-utils/dom/prompt-input/index.ts
@@ -3,6 +3,7 @@
 import { act, Simulate } from 'react-dom/test-utils';
 import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
 import styles from '../../../prompt-input/styles.selectors.js';
+import testutilStyles from '../../../prompt-input/test-classes/styles.selectors.js';
 
 export default class PromptInputWrapper extends ComponentWrapper {
   static rootSelector = styles.root;
@@ -11,8 +12,8 @@ export default class PromptInputWrapper extends ComponentWrapper {
     return this.find<HTMLTextAreaElement>(`.${styles.textarea}`)!;
   }
 
-  findSubmitButton(): ElementWrapper<HTMLButtonElement> {
-    return this.findByClassName<HTMLButtonElement>(styles['action-button'])!;
+  findActionButton(): ElementWrapper<HTMLButtonElement> {
+    return this.findByClassName<HTMLButtonElement>(testutilStyles['action-button'])!;
   }
 
   /**