Merge pull request #1278 from vtex/feat/text-input-qa

TextInput: Design QA
vtex · Nov 24, 2023 · 187d902 · 187d902 · vercel · Nov 24, 2023
2 parents 28496cc + 27fe991
commit 187d902
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/packages/components/src/field/field-message.css b/packages/components/src/field/field-message.css
@@ -6,7 +6,7 @@
   }
 
   [data-sl-field-message-text] {
-    color: var(--sl-fg);
+    color: var(--sl-fg-soft);
     font: var(--sl-text-caption-2-font);
     letter-spacing: var(--sl-text-caption-2-letter-spacing);
   }

diff --git a/packages/components/src/select-field/select-field.tsx b/packages/components/src/select-field/select-field.tsx
@@ -58,6 +58,7 @@ export const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(
             data-disabled={disabled}
             aria-invalid={error}
             id={id}
+            aria-required={optional}
             {...otherProps}
           >
             <option value="" disabled>

diff --git a/packages/components/src/text-input/stories/text-input.stories.tsx b/packages/components/src/text-input/stories/text-input.stories.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 
 import { TextInput } from '../index'
 import { Stack } from '../../stack'
+import { Tooltip } from '../../tooltip'
+import { IconQuestion } from '@vtex/shoreline-icons'
 
 export default {
   title: 'shoreline-components/text-input',
@@ -28,6 +30,24 @@ export function All() {
         error
       />
       <TextInput label="Label" helpText="This is an input" />
+      <TextInput
+        label="Label"
+        disabled
+        helpText="This is an input"
+        value="Text input value"
+      />
+      <TextInput
+        label={
+          <Stack direction="row" space="$space-1">
+            <span>Label</span>
+            <Tooltip text="Tooltip text">
+              <IconQuestion width={16} height={16} />
+            </Tooltip>
+          </Stack>
+        }
+        helpText="This is an input"
+      />
+      <TextInput label="Label" optional helpText="This is an input" />
     </Stack>
   )
 }
diff --git a/packages/components/src/text-input/text-input.tsx b/packages/components/src/text-input/text-input.tsx
@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 import { Field, FieldLabel, FieldMessage } from '../field'
 import { useId } from '@vtex/shoreline-utils'
@@ -15,6 +15,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       label,
       helpText,
       errorText,
+      optional,
       id: defaultId,
       ...inputProps
     } = props
@@ -23,7 +24,9 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
 
     return (
       <Field data-sl-text-input className={className}>
-        <FieldLabel htmlFor={id}>{label}</FieldLabel>
+        <FieldLabel htmlFor={id} optional={optional}>
+          {label}
+        </FieldLabel>
         <div
           data-sl-text-input-container
           data-disabled={disabled}
@@ -39,6 +42,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             id={id}
             ref={ref}
             disabled={disabled}
+            aria-required={optional}
             {...inputProps}
           />
           {suffix && (
@@ -73,7 +77,8 @@ export interface TextInputProps
   Node added before input space
   */
   suffix?: React.ReactNode
-  label: string
+  label: ReactNode
   errorText?: string
   helpText?: string
+  optional?: boolean
 }