diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx index cf9581196..20def92a1 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' | '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/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx index eaac08c87..c25ea1d01 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 = [ Support various states consistently: reflect focus, disabled, error, and read-only states with distinct, accessible visual cues. + + Apply appropiate alignment: 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. + ), }, diff --git a/packages/lib/src/text-input/TextInput.stories.tsx b/packages/lib/src/text-input/TextInput.stories.tsx index 765812582..38281aba1 100644 --- a/packages/lib/src/text-input/TextInput.stories.tsx +++ b/packages/lib/src/text-input/TextInput.stories.tsx @@ -139,7 +139,16 @@ 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 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 778629c0a..1b101c748 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 7d2d316f4..5a14901e5 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"; /** * Text to be placed above the input. This label will be used as the aria-label attribute of the list of suggestions. */