chore: Adds internal style api v2 to prompt input by vvaliyev · Pull Request #5254 · cloudscape-design/components

vvaliyev · 2026-11-04T12:14:48Z

Description

Adds the internal Style API v2 to Prompt input: root, textarea (the native textarea, or the editable element when tokens is set), actionButton forwards to Button.root, token forwards to Token.root, menu forwards to Dropdown.container. Menu options have no slot and paint their own background, so a menu background shows only outside the options.

Changes outside the component / behaviour changes:

src/prompt-input/styles.scss: the disabled placeholder (both modes) now reads --awsui-style-placeholder-color when it is set; default rendering is unchanged.
The height calculation reads the text element's padding and re-measures when the root, textarea, token or action button class changes, so minRows and maxRows hold with a consumer padding; padding or font set only under :hover, :focus or :focus-within is measured at the next content, rows, density, width or class change. Default heights are unchanged. In token mode p.paragraph inherits the font family of the text element.

The style-docs snapshot and the VR registration of the dev page follow in one PR for all components.

Tracker section: P3d34KdbCd6o.

Related links, issue #, if available: n/a

How has this been tested?

Unit tests for every slot and forward, dev page prompt-input/style-api-v2, build and lint green.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-11-04T12:30:23Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.84%. Comparing base (d25043b) to head (ea268fd).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5254   +/-   ##
=======================================
  Coverage   97.83%   97.84%           
=======================================
  Files        1008     1008           
  Lines       32590    32612   +22     
  Branches    12098    12114   +16     
=======================================
+ Hits        31886    31908   +22     
  Misses        698      698           
  Partials        6        6

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

🟡 Changes recommended

The font-family override does not reach entered text when tokens are enabled because the paragraph reset prevents inheritance from the editable element.

1 open issue

Editable paragraph ignores font-family override · New

What changed in this PR

Adds internal Style API v2 support to PromptInput, enabling custom styling in both native textarea and token modes.

Changes:

Adds root and textarea slots, with forwarding to action buttons, tokens, and dropdown menus.
Supports placeholder styling tokens, including disabled placeholder colors.
Adds slot-forwarding unit tests and a demo page covering component states.

File	Description
`src/prompt-input/tokens/use-token-mode.tsx`	Applies editable-element and inline-token classes.
`src/prompt-input/styles.scss`	Declares style slots and integrates placeholder tokens.
`src/prompt-input/internal.tsx`	Accepts and distributes style classes.
`src/prompt-input/components/token-mode.tsx`	Forwards menu styling to the dropdown container.
`src/prompt-input/__tests__/style-api.test.tsx`	Tests slot classes, forwarding, and DOM prop filtering.
`pages/prompt-input/style-api-v2.scss`	Defines custom styles for demo states and slots.
`pages/prompt-input/style-api-v2.page.tsx`	Demonstrates styling across native and token modes.

_{Review effort: Balanced}

Copilot

🟡 Changes recommended

Textarea height calculations still use stock padding and do not rerun when the slot class changes, potentially violating row limits and leaving content clipped or incorrectly sized.

2 open issues

1 resolved since last review

Editable paragraph ignores font-family override

_{Review effort: Balanced}

Copilot

🟡 Changes recommended

Changing only styleClassNames.token can alter token widths and wrapping without triggering height remeasurement, leaving the editable element at a stale fixed height even with maxRows={-1}.

2 open issues

1 resolved since last review

Recalculate textarea height when its class changes

_{Review effort: Balanced}

Copilot

Warning

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Copilot review overview

5 open issues

Exporting StyleClassNames from internal.tsx can unintentionally expand the module’s public… · New
getComputedStyle(element) is now called on every adjustInputHeight() run, which can be on each… · New
Keys on arrays of portals should be applied to the portal itself (the value returned by… · New
Remeasure height when the reference-token class changes
Calculate row limits using the textarea’s computed padding

_{Review effort: Lite}

+// Style API v2
+export interface StyleClassNames {
+  root?: string;
+  textarea?: string;
+  actionButton?: string;
+  token?: string;
+  menu?: string;
+}


+      // A Style API `padding` on the text element changes its block padding; add its difference from the
+      // stock padding to the row bounds so they still fit `minRows`/`maxRows` lines. The difference is 0 by default.
+      const computedStyle = getComputedStyle(element);
+      const paddingTop = toPaddingLength(computedStyle.paddingTop, designTokens.spaceFieldVertical);
+      const paddingBottom = toPaddingLength(computedStyle.paddingBottom, designTokens.spaceFieldVertical);
+      const paddingDelta = `(${paddingTop} + ${paddingBottom} - 2 * ${designTokens.spaceFieldVertical})`;
      const minRowsHeight = isTokenMode
-        ? `calc(${minRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING})`
-        : `calc(${LINE_HEIGHT} +  ${designTokens.spaceFieldVertical} * 2)`;
+        ? `calc(${minRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING} + ${paddingDelta})`
+        : `calc(${LINE_HEIGHT} + ${paddingTop} + ${paddingBottom})`;
      const scrollHeight = `calc(${element.scrollHeight}px)`;

      if (maxRows === -1) {
        element.style.height = `max(${scrollHeight}, ${minRowsHeight})`;
      } else {
-        const maxRowsHeight = `calc(${maxRows <= 0 ? DEFAULT_MAX_ROWS : maxRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING})`;
+        const maxRowsHeight = `calc(${maxRows <= 0 ? DEFAULT_MAX_ROWS : maxRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING} + ${paddingDelta})`;
        element.style.height = `min(max(${scrollHeight}, ${minRowsHeight}), ${maxRowsHeight})`;
      }


+        key={container.id}
+        variant="inline"
+        label={container.label}
+        disabled={!!disabled}
+        readOnly={!!readOnly}
+        styleClassNames={{ root: styleClassNames?.token }}
+      />,
      container.element


Copilot

🟡 Changes recommended

Textarea sizing can retain stale heights after focus or hover padding changes and clip requested rows with reduced or zero padding, requiring corrected bounds and browser sizing coverage.

6 open issues

1 resolved since last review

Remeasure height when the reference-token class changes

_{Review effort: Balanced}

+      const paddingTop = toPaddingLength(computedStyle.paddingTop, designTokens.spaceFieldVertical);
+      const paddingBottom = toPaddingLength(computedStyle.paddingBottom, designTokens.spaceFieldVertical);
+      const paddingDelta = `(${paddingTop} + ${paddingBottom} - 2 * ${designTokens.spaceFieldVertical})`;


+      const paddingDelta = `(${paddingTop} + ${paddingBottom} - 2 * ${designTokens.spaceFieldVertical})`;
      const minRowsHeight = isTokenMode
-        ? `calc(${minRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING})`
-        : `calc(${LINE_HEIGHT} +  ${designTokens.spaceFieldVertical} * 2)`;
+        ? `calc(${minRows} * (${LINE_HEIGHT} + ${PADDING} / 2) + ${PADDING} + ${paddingDelta})`


Copilot

🟢 Approval recommended

No active review issues are reported for the PromptInput Style API v2 changes.

5 open issues

Preserve requested line heights with reduced textarea padding
Remeasure when interaction styles change textarea padding
Keys on arrays of portals should be applied to the portal itself (the value returned by…
getComputedStyle(element) is now called on every adjustInputHeight() run, which can be on each…
Exporting StyleClassNames from internal.tsx can unintentionally expand the module’s public…

1 resolved since last review

Calculate row limits using the textarea’s computed padding

_{Review effort: Balanced}

Copilot

🟡 Changes recommended

With maxRows={1} and zero block padding, the height cap falls below one full line of text, causing clipping or scrolling in both modes.

6 open issues

_{Review effort: Balanced}

+      const paddingTop = toPaddingLength(computedStyle.paddingTop, designTokens.spaceFieldVertical);
+      const paddingBottom = toPaddingLength(computedStyle.paddingBottom, designTokens.spaceFieldVertical);
+      const paddingDelta = `(${paddingTop} + ${paddingBottom} - 2 * ${designTokens.spaceFieldVertical})`;


vvaliyev deployed to dev-pages-react18 November 4, 2026 12:20 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react16 November 4, 2026 12:20 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 4, 2026 12:27 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 4, 2026 14:49

Copilot started reviewing on behalf of vvaliyev November 4, 2026 14:50

View session

Copilot AI reviewed Nov 4, 2026

View reviewed changes

Comment thread src/prompt-input/styles.scss Resolved

vvaliyev force-pushed the style-v2-prompt-input branch from 294d5df to 15be9db Compare November 5, 2026 06:55

vvaliyev deployed to dev-pages-react16 November 5, 2026 06:58 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react18 November 5, 2026 06:59 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 5, 2026 07:06 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 5, 2026 07:08

Copilot started reviewing on behalf of vvaliyev November 5, 2026 07:08

View session

Copilot AI reviewed Nov 5, 2026

View reviewed changes

Comment thread src/prompt-input/internal.tsx Resolved

Comment thread src/prompt-input/styles.scss Resolved

vvaliyev force-pushed the style-v2-prompt-input branch from 15be9db to dbd09a3 Compare November 5, 2026 10:46

vvaliyev requested a balanced review from Copilot November 5, 2026 10:49

vvaliyev deployed to dev-pages-react16 November 5, 2026 10:49 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react18 November 5, 2026 10:49 — with GitHub Actions

View deployment

Copilot started reviewing on behalf of vvaliyev November 5, 2026 10:49

View session

Copilot AI reviewed Nov 5, 2026

View reviewed changes

Comment thread src/prompt-input/internal.tsx Resolved

vvaliyev deployed to allure-report November 5, 2026 10:57 — with GitHub Actions

View deployment

vvaliyev force-pushed the style-v2-prompt-input branch from dbd09a3 to 5641959 Compare November 5, 2026 14:43

vvaliyev deployed to dev-pages-react18 November 5, 2026 15:07 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react16 November 5, 2026 15:07 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 5, 2026 15:27

Copilot AI reviewed Nov 5, 2026

View reviewed changes

Copilot stopped reviewing on behalf of vvaliyev due to an error November 5, 2026 16:50
Workflow completed but conclusion is not available. This may indicate rate limiting or API issues.

vvaliyev deployed to allure-report November 5, 2026 18:37 — with GitHub Actions

View deployment

vvaliyev force-pushed the style-v2-prompt-input branch from 5641959 to 6ebc30f Compare November 8, 2026 20:40

vvaliyev deployed to dev-pages-react16 November 8, 2026 20:45 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react18 November 8, 2026 20:45 — with GitHub Actions

View deployment

vvaliyev deployed to allure-report November 8, 2026 20:52 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 9, 2026 05:12

Copilot started reviewing on behalf of vvaliyev November 9, 2026 05:12

View session

Copilot AI reviewed Nov 9, 2026

View reviewed changes

chore: Adds internal style api v2 to prompt input

ea268fd

vvaliyev force-pushed the style-v2-prompt-input branch from 6ebc30f to ea268fd Compare November 9, 2026 07:50

vvaliyev deployed to dev-pages-react16 November 9, 2026 07:53 — with GitHub Actions

View deployment

vvaliyev deployed to dev-pages-react18 November 9, 2026 07:53 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 9, 2026 07:53

Copilot started reviewing on behalf of vvaliyev November 9, 2026 07:57

View session

Copilot AI reviewed Nov 9, 2026

View reviewed changes

vvaliyev deployed to allure-report November 9, 2026 08:00 — with GitHub Actions

View deployment

vvaliyev requested a balanced review from Copilot November 9, 2026 09:44

Copilot started reviewing on behalf of vvaliyev November 9, 2026 09:44

View session

Copilot AI reviewed Nov 9, 2026

View reviewed changes

Navigation Menu

Repository navigation

chore: Adds internal style api v2 to prompt input - #5254

chore: Adds internal style api v2 to prompt input#5254
vvaliyev wants to merge 1 commit into
mainfrom
style-v2-prompt-input

vvaliyev commented Nov 4, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Nov 4, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

vvaliyev commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov Bot commented Nov 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vvaliyev commented Nov 4, 2026 •

edited

Loading

codecov Bot commented Nov 4, 2026 •

edited

Loading