Skip to content

Added new prop alignment to TextInput #2264

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
Jialecl merged 5 commits into from
Jul 31, 2025
Merged

Added new prop alignment to TextInput #2264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5cf3e22
Added new prop alignment to TextInput
Mil4n0r Jul 29, 2025
361028f
Removed center from the alignment options
Mil4n0r Jul 31, 2025
d2fdec3
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mil4n0r Jul 31, 2025
91d5282
Added new best practices item
Mil4n0r Jul 31, 2025
efb9af2
Merge branch 'master' into Mil4n0r/implement_textinput_alignment
Jialecl Jul 31, 2025
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
26 changes: 23 additions & 3 deletions apps/website/screens/components/text-input/code/TextInputCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import action from "./examples/action";
import functionSuggestions from "./examples/functionSuggestions";
import errorHandling from "./examples/errorHandling";
import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";

const actionTypeString = `{
icon?: string | (React.ReactNode
Expand All @@ -32,13 +33,32 @@ const sections = [
</thead>
<tbody>
<tr>
<td>action</td>
<td>
<ExtendedTableCode>{actionTypeString}</ExtendedTableCode>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="new" />
alignment
</DxcFlex>
</td>
<td>
<TableCode>'left' | 'right'</TableCode>
</td>
<td>
Sets <Code>text-align</Code> CSS property inside the input. See{" "}
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">
MDN
</DxcLink>{" "}
for further information.
</td>
<td>
Action to be displayed on the right side of the input.
<TableCode>'left'</TableCode>
</td>
</tr>
<tr>
<td>action</td>
<td>
<ExtendedTableCode>{actionTypeString}</ExtendedTableCode>
</td>
<td>Action to be displayed on the right side of the input.</td>
<td>-</td>
</tr>
<tr>
Expand Down
5 changes: 5 additions & 0 deletions apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,11 @@ const sections = [
<strong>Support various states consistently:</strong> reflect focus, disabled, error, and read-only states
with distinct, accessible visual cues.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Apply appropiate alignment:</strong> It is recommended to use left alignment in general, except
when there is a specific need for right alignment, such as in currency inputs or numeric fields, generally
using a suffix.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
Expand Down
11 changes: 10 additions & 1 deletion packages/lib/src/text-input/TextInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,16 @@ const TextInput = () => (
action={action}
/>
</ExampleContainer>
<Title title="Anatomy" theme="light" level={2} />{" "}
<Title title="Alignment" theme="light" level={2} />
<ExampleContainer>
<Title title="Alignment left" theme="light" level={4} />
<DxcTextInput label="Text input" defaultValue="Aligned text" alignment="left" />
</ExampleContainer>
<ExampleContainer>
<Title title="Alignment right" theme="light" level={4} />
<DxcTextInput label="Text input" defaultValue="Aligned text" alignment="right" />
</ExampleContainer>
<Title title="Anatomy" theme="light" level={2} />
<ExampleContainer>
<Title title="Complete example" theme="light" level={4} />
<DxcTextInput
Expand Down
7 changes: 6 additions & 1 deletion packages/lib/src/text-input/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,9 @@ const TextInput = styled.div<{
${({ disabled, error, readOnly }) => inputStylesByState(disabled, error, readOnly)}
`;

const Input = styled.input`
const Input = styled.input<{
alignment: TextInputPropsType["alignment"];
}>`
background: none;
border: none;
outline: none;
Expand All @@ -79,6 +81,7 @@ const Input = styled.input`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
${({ alignment }) => `text-align: ${alignment}`};

::placeholder {
color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-strong)")};
Expand All @@ -105,6 +108,7 @@ const AutosuggestWrapper = ({ condition, wrapper, children }: AutosuggestWrapper
const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
(
{
alignment = "left",
action,
ariaLabel = "Text input",
autocomplete = "off",
Expand Down Expand Up @@ -505,6 +509,7 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
</Addon>
)}
<Input
alignment={alignment}
aria-activedescendant={
hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1
? `suggestion-${visualFocusIndex}`
Expand Down
4 changes: 4 additions & 0 deletions packages/lib/src/text-input/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ type Action = {
};

type Props = {
/**
* Sets the alignment inside the input.
*/
alignment?: "left" | "right";
/**
* Text to be placed above the input. This label will be used as the aria-label attribute of the list of suggestions.
*/
Expand Down