Skip to content

feat: add style.menu dropdown style overrides to PromptInput #4708

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ernst-dev wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat: add style.menu dropdown style overrides to PromptInput #4708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
64cb081
feat: add menu dropdown style overrides to PromptInput style API
ernst-dev Jul 9, 2026
0bfb606
chore(prompt-input): trim redundant comments on menu style API
ernst-dev Jul 9, 2026
274e6c9
Extend styling into options list
ernst-dev Jul 10, 2026
4db0848
Merge branch 'main' into dev-v3-ernstka-prompt-input-menu-styling
ernst-dev Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions build-tools/utils/custom-css-properties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,23 @@ const customCssPropertiesList = [
'promptInputStylePlaceholderFontSize',
'promptInputStylePlaceholderFontStyle',
'promptInputStylePlaceholderFontWeight',
// Prompt input menu/dropdown style properties
'promptInputMenuStyleBackgroundColor',
'promptInputMenuStyleBorderColor',
'promptInputMenuStyleBorderRadius',
'promptInputMenuStyleBorderWidth',
// Options list style properties (internal contract; consumed by the shared
// selectable-item / option components, currently only set by PromptInput's
// style.menu). Each is inert unless a host sets it, falling back to tokens.
'optionBackgroundDefault',
'optionBackgroundHighlighted',
'optionBackgroundSelected',
'optionColorDefault',
'optionColorHighlighted',
'optionColorDisabled',
'optionGroupLabelColor',
'optionFilterMatchBackground',
'optionFilterMatchColor',
// Progress bar style properties
'progressBarBackgroundColor',
'progressBarBorderRadius',
Expand Down
73 changes: 73 additions & 0 deletions pages/prompt-input/menu-style.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useState } from 'react';

import PromptInput, { PromptInputProps } from '~components/prompt-input';

import { palette } from '../app/themes/style-api';
import ScreenshotArea from '../utils/screenshot-area';

// Exercises the full style.menu API: the dropdown surface (background, border,
// radius) plus the option rows and filtering match highlight. Because the
// option backgrounds match the surface, the whole menu body reads as themed.
const menuStyle: PromptInputProps.Style['menu'] = {
backgroundColor: `light-dark(${palette.teal20}, ${palette.teal100})`,
borderColor: `light-dark(${palette.teal80}, ${palette.teal40})`,
borderRadius: '16px',
borderWidth: '3px',
options: {
backgroundColor: {
default: `light-dark(${palette.teal20}, ${palette.teal100})`,
highlighted: `light-dark(${palette.teal30}, ${palette.teal80})`,
selected: `light-dark(${palette.teal40}, ${palette.teal90})`,
},
color: {
default: `light-dark(${palette.teal100}, ${palette.teal10})`,
highlighted: `light-dark(${palette.teal100}, ${palette.white})`,
disabled: `light-dark(${palette.teal60}, ${palette.teal60})`,
groupLabel: `light-dark(${palette.teal90}, ${palette.teal20})`,
},
},
filterMatch: {
backgroundColor: `light-dark(${palette.teal40}, ${palette.teal60})`,
color: `light-dark(${palette.teal100}, ${palette.white})`,
},
};

const options: PromptInputProps.MenuDefinition['options'] = [
{ value: 'help', label: '/help', description: 'Show help' },
{ value: 'search', label: '/search', description: 'Search content' },
{ value: 'clear', label: '/clear', description: 'Clear the input' },
];

export default function MenuStylePage() {
const [value, setValue] = useState('');
const [tokens, setTokens] = useState<readonly PromptInputProps.InputToken[]>([]);

return (
<ScreenshotArea>
<h1>PromptInput — menu style override</h1>
<p>
Type <code>/</code> to open the command menu. The <code>style.menu</code> overrides theme the dropdown surface (
<code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>) as
well as the option rows (<code>options.backgroundColor</code>, <code>options.color</code>) and the filtering
match highlight (<code>filterMatch</code>). Filter the list to see the match highlight.
</p>
<PromptInput
ariaLabel="Prompt input with styled menu"
value={value}
tokens={tokens}
menus={[{ id: 'commands', trigger: '/', options, filteringType: 'auto' }]}
style={{ menu: menuStyle }}
onChange={({ detail }) => {
setValue(detail.value);
if (detail.tokens) {
setTokens(detail.tokens);
}
}}
onAction={() => {}}
i18nStrings={{ actionButtonAriaLabel: 'Send' }}
/>
</ScreenshotArea>
);
}
120 changes: 120 additions & 0 deletions src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22470,6 +22470,126 @@ inadvertently sending data (such as user passwords) to third parties.",
"inlineType": {
"name": "PromptInputProps.Style",
"properties": [
{
"inlineType": {
"name": "object",
"properties": [
{
"name": "backgroundColor",
"optional": true,
"type": "string",
},
{
"name": "borderColor",
"optional": true,
"type": "string",
},
{
"name": "borderRadius",
"optional": true,
"type": "string",
},
{
"name": "borderWidth",
"optional": true,
"type": "string",
},
{
"inlineType": {
"name": "{ backgroundColor?: string | undefined; color?: string | undefined; }",
"properties": [
{
"name": "backgroundColor",
"optional": true,
"type": "string",
},
{
"name": "color",
"optional": true,
"type": "string",
},
],
"type": "object",
},
"name": "filterMatch",
"optional": true,
"type": "{ backgroundColor?: string | undefined; color?: string | undefined; }",
},
{
"inlineType": {
"name": "object",
"properties": [
{
"inlineType": {
"name": "{ default?: string | undefined; highlighted?: string | undefined; selected?: string | undefined; }",
"properties": [
{
"name": "default",
"optional": true,
"type": "string",
},
{
"name": "highlighted",
"optional": true,
"type": "string",
},
{
"name": "selected",
"optional": true,
"type": "string",
},
],
"type": "object",
},
"name": "backgroundColor",
"optional": true,
"type": "{ default?: string | undefined; highlighted?: string | undefined; selected?: string | undefined; }",
},
{
"inlineType": {
"name": "object",
"properties": [
{
"name": "default",
"optional": true,
"type": "string",
},
{
"name": "disabled",
"optional": true,
"type": "string",
},
{
"name": "groupLabel",
"optional": true,
"type": "string",
},
{
"name": "highlighted",
"optional": true,
"type": "string",
},
],
"type": "object",
},
"name": "color",
"optional": true,
"type": "{ default?: string | undefined; highlighted?: string | undefined; disabled?: string | undefined; groupLabel?: string | undefined; }",
},
],
"type": "object",
},
"name": "options",
"optional": true,
"type": "{ backgroundColor?: { default?: string | undefined; highlighted?: string | undefined; selected?: string | undefined; } | undefined; color?: { default?: string | undefined; highlighted?: string | undefined; disabled?: string | undefined; groupLabel?: string | undefined; } | undefined; }",
},
],
"type": "object",
},
"name": "menu",
"optional": true,
"type": "{ backgroundColor?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; options?: { backgroundColor?: { default?: string | undefined; highlighted?: string | undefined; selected?: string | undefined; } | undefined; color?: { ...; } | undefined; } ...",
},
{
"inlineType": {
"name": "object",
Expand Down
6 changes: 3 additions & 3 deletions src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ exports[`getDropdownStyles handles all possible style configurations 2`] = `unde

exports[`getDropdownStyles handles all possible style configurations 3`] = `
{
"--awsui-dropdown-content-border-color-6b9ypa": "rgb(0, 0, 0)",
"--awsui-dropdown-content-border-radius-6b9ypa": "8px",
"--awsui-dropdown-content-border-width-6b9ypa": "2px",
"--awsui-dropdown-content-border-color-z17rmd": "rgb(0, 0, 0)",
"--awsui-dropdown-content-border-radius-z17rmd": "8px",
"--awsui-dropdown-content-border-width-z17rmd": "2px",
"background": "rgb(255, 255, 255)",
}
`;
Loading
Loading