From 115a3bdfe892be96be46d1d16ac4674f2f671835 Mon Sep 17 00:00:00 2001 From: Katie George Date: Mon, 8 Jul 2024 11:22:24 -0700 Subject: [PATCH] fix: Updates from PR comments --- src/internal/generated/styles/tokens.d.ts | 4 ++++ .../prompt-input-form-submit.test.ts | 2 +- .../__tests__/prompt-input.test.tsx | 14 ++++++------ src/prompt-input/index.tsx | 18 ++++++++++++++- src/prompt-input/internal.tsx | 22 ++++++++++--------- src/prompt-input/styles.scss | 4 ---- src/prompt-input/test-classes/styles.scss | 7 ++++++ src/test-utils/dom/prompt-input/index.ts | 5 +++-- 8 files changed, 51 insertions(+), 25 deletions(-) create mode 100644 src/prompt-input/test-classes/styles.scss diff --git a/src/internal/generated/styles/tokens.d.ts b/src/internal/generated/styles/tokens.d.ts index c0b054f1aa..4d883b741a 100644 --- 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 index cae662504c..3768ce683d 100644 --- 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 index 2020869816..4383d35ffb 100644 --- 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 index 6db7662f73..0ee308b0f8 100644 --- 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 ) => { const baseComponentProps = useBaseComponent('PromptInput', { - props: { readOnly, autoComplete, autoFocus, disableBrowserAutocorrect, disableActionButton, spellcheck }, + props: { + readOnly, + autoComplete, + autoFocus, + disableBrowserAutocorrect, + disableActionButton, + spellcheck, + actionButtonIconName, + minRows, + maxRows, + }, }); return ( ) => { @@ -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 && (
(`.${styles.textarea}`)!; } - findSubmitButton(): ElementWrapper { - return this.findByClassName(styles['action-button'])!; + findActionButton(): ElementWrapper { + return this.findByClassName(testutilStyles['action-button'])!; } /**