From 5cf3e22e0484c3085ddb48fa468b07e365a8b204 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 29 Jul 2025 14:26:31 +0200 Subject: [PATCH 1/3] Added new prop alignment to TextInput --- .../text-input/code/TextInputCodePage.tsx | 26 ++++++++++++++++--- .../lib/src/text-input/TextInput.stories.tsx | 15 ++++++++++- packages/lib/src/text-input/TextInput.tsx | 7 ++++- packages/lib/src/text-input/types.ts | 4 +++ 4 files changed, 47 insertions(+), 5 deletions(-) diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx index cf95811962..005a32df0d 100644 --- a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx +++ b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx @@ -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 @@ -32,13 +33,32 @@ const sections = [ - action - {actionTypeString} + + + alignment + + + + 'left' | 'center' | 'right' + + + Sets text-align CSS property inside the input. See{" "} + + MDN + {" "} + for further information. - Action to be displayed on the right side of the input. + 'left' + + + + action + + {actionTypeString} + Action to be displayed on the right side of the input. - diff --git a/packages/lib/src/text-input/TextInput.stories.tsx b/packages/lib/src/text-input/TextInput.stories.tsx index 7658125828..0d7fb5b118 100644 --- a/packages/lib/src/text-input/TextInput.stories.tsx +++ b/packages/lib/src/text-input/TextInput.stories.tsx @@ -139,7 +139,20 @@ const TextInput = () => ( action={action} /> - {" "} + <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 center" theme="light" level={4} /> + <DxcTextInput label="Text input" defaultValue="Aligned text" alignment="center" /> + </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 diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index 778629c0a2..1b101c7482 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -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; @@ -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)")}; @@ -105,6 +108,7 @@ const AutosuggestWrapper = ({ condition, wrapper, children }: AutosuggestWrapper const DxcTextInput = forwardRef<RefType, TextInputPropsType>( ( { + alignment = "left", action, ariaLabel = "Text input", autocomplete = "off", @@ -505,6 +509,7 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>( </Addon> )} <Input + alignment={alignment} aria-activedescendant={ hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1 ? `suggestion-${visualFocusIndex}` diff --git a/packages/lib/src/text-input/types.ts b/packages/lib/src/text-input/types.ts index 7d2d316f40..c2eb55666a 100644 --- a/packages/lib/src/text-input/types.ts +++ b/packages/lib/src/text-input/types.ts @@ -19,6 +19,10 @@ type Action = { }; type Props = { + /** + * Sets the alignment inside the input. + */ + alignment?: "left" | "right" | "center"; /** * Text to be placed above the input. This label will be used as the aria-label attribute of the list of suggestions. */ From 361028f73274ba7f7164c2adfa0fd973cdbfd97a Mon Sep 17 00:00:00 2001 From: Enrique Moreno <morenocarmonaenrique@gmail.com> Date: Thu, 31 Jul 2025 14:12:33 +0200 Subject: [PATCH 2/3] Removed center from the alignment options --- .../screens/components/text-input/code/TextInputCodePage.tsx | 2 +- packages/lib/src/text-input/TextInput.stories.tsx | 4 ---- packages/lib/src/text-input/types.ts | 2 +- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx index 005a32df0d..20def92a12 100644 --- a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx +++ b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx @@ -40,7 +40,7 @@ const sections = [ </DxcFlex> </td> <td> - <TableCode>'left' | 'center' | 'right'</TableCode> + <TableCode>'left' | 'right'</TableCode> </td> <td> Sets <Code>text-align</Code> CSS property inside the input. See{" "} diff --git a/packages/lib/src/text-input/TextInput.stories.tsx b/packages/lib/src/text-input/TextInput.stories.tsx index 0d7fb5b118..38281aba15 100644 --- a/packages/lib/src/text-input/TextInput.stories.tsx +++ b/packages/lib/src/text-input/TextInput.stories.tsx @@ -144,10 +144,6 @@ const TextInput = () => ( <Title title="Alignment left" theme="light" level={4} /> <DxcTextInput label="Text input" defaultValue="Aligned text" alignment="left" /> </ExampleContainer> - <ExampleContainer> - <Title title="Alignment center" theme="light" level={4} /> - <DxcTextInput label="Text input" defaultValue="Aligned text" alignment="center" /> - </ExampleContainer> <ExampleContainer> <Title title="Alignment right" theme="light" level={4} /> <DxcTextInput label="Text input" defaultValue="Aligned text" alignment="right" /> diff --git a/packages/lib/src/text-input/types.ts b/packages/lib/src/text-input/types.ts index c2eb55666a..5a14901e54 100644 --- a/packages/lib/src/text-input/types.ts +++ b/packages/lib/src/text-input/types.ts @@ -22,7 +22,7 @@ type Props = { /** * Sets the alignment inside the input. */ - alignment?: "left" | "right" | "center"; + 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. */ From 91d52821452c5a410c1017692a7ec44ad49616d4 Mon Sep 17 00:00:00 2001 From: Enrique Moreno <morenocarmonaenrique@gmail.com> Date: Thu, 31 Jul 2025 14:15:45 +0200 Subject: [PATCH 3/3] Added new best practices item --- .../components/text-input/overview/TextInputOverviewPage.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx index eaac08c87a..c25ea1d010 100644 --- a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx +++ b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx @@ -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> ), },