Skip to content

[major] TextInput suggestions popover changed to DxcPopover #2528

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

Merged
PelayoFelgueroso merged 6 commits into from
Aug 21, 2026
Merged

[major] TextInput suggestions popover changed to DxcPopover #2528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63c86b8
Sugeestions popover changed to DxcPopover
Jialecl Aug 19, 2026
474be4a
Merge branch 'master' into jialecl/suggestions-popover
Jialecl Aug 20, 2026
fc58ee6
Merge branch 'master' into jialecl/suggestions-popover
PelayoFelgueroso Aug 21, 2026
d3db8d8
Removed function onClose function from autosuggest
Jialecl Aug 21, 2026
69f2889
Merge branch 'jialecl/suggestions-popover' of https://github.com/dxc-…
Jialecl Aug 21, 2026
11a22a1
Bleed added in exchange of negative margin
Jialecl Aug 21, 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
73 changes: 35 additions & 38 deletions packages/lib/src/text-input/Suggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,10 @@ import Suggestion from "./Suggestion";
import { SuggestionsProps } from "./types";
import DxcIcon from "../icon/Icon";
import scrollbarStyles from "../styles/scroll";
import DxcBleed from "../bleed/Bleed";

const SuggestionsContainer = styled.div`
box-sizing: border-box;
max-height: 304px;
padding: var(--spacing-padding-xxs) var(--spacing-padding-none);
background-color: var(--color-bg-neutral-lightest);
border: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-medium);
border-radius: var(--border-radius-s);
box-shadow: var(--shadow-200);
color: var(--color-fg-neutral-dark);
font-family: var(--typography-font-family);
font-size: var(--typography-label-m);
Expand Down Expand Up @@ -66,38 +61,40 @@ const Suggestions = ({
}, [visualFocusIndex]);

return (
<SuggestionsContainer
onMouseDown={(event) => {
event.preventDefault();
}}
style={styles}
>
{isSearching ? (
<SuggestionsSystemMessage aria-live="polite">
{translatedLabels.textInput.searchingMessage}
</SuggestionsSystemMessage>
) : searchHasErrors ? (
<SuggestionsErrorMessage aria-live="assertive" role="alert">
<DxcIcon icon="filled_error" />
{translatedLabels.textInput.fetchingDataErrorMessage}
</SuggestionsErrorMessage>
) : (
<ul aria-label="Suggestions" id={id} ref={listboxRef} role="listbox" style={{ margin: 0, padding: 0 }}>
{suggestions.map((suggestion, index) => (
<Suggestion
highlighted={highlightedSuggestions}
id={`${id}-suggestion-${index}`}
isLast={index === suggestions.length - 1}
key={`${id}-suggestion-${index}`}
onClick={suggestionOnClick}
suggestion={suggestion}
value={value}
visuallyFocused={visualFocusIndex === index}
/>
))}
</ul>
)}
</SuggestionsContainer>
<DxcBleed horizontal="var(--spacing-padding-xs)">
<SuggestionsContainer
onMouseDown={(event) => {
event.preventDefault();
}}
style={styles}
>
{isSearching ? (
<SuggestionsSystemMessage aria-live="polite">
{translatedLabels.textInput.searchingMessage}
</SuggestionsSystemMessage>
) : searchHasErrors ? (
<SuggestionsErrorMessage aria-live="assertive" role="alert">
<DxcIcon icon="filled_error" />
{translatedLabels.textInput.fetchingDataErrorMessage}
</SuggestionsErrorMessage>
) : (
<ul aria-label="Suggestions" id={id} ref={listboxRef} role="listbox" style={{ margin: 0, padding: 0 }}>
{suggestions.map((suggestion, index) => (
<Suggestion
highlighted={highlightedSuggestions}
id={`${id}-suggestion-${index}`}
isLast={index === suggestions.length - 1}
key={`${id}-suggestion-${index}`}
onClick={suggestionOnClick}
suggestion={suggestion}
value={value}
visuallyFocused={visualFocusIndex === index}
/>
))}
</ul>
)}
</SuggestionsContainer>
</DxcBleed>
);
};

Expand Down
Loading
Loading