Merge pull request #2264 from dxc-technology/Mil4n0r/implement_textinput_alignment

Added new prop `alignment` to `TextInput`

Author: Jialecl

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 = [
         </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>

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>
         ),
       },

packages/lib/src/text-input/TextInput.stories.tsx

@@ -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

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}`

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.
    */