feat(text-input): add design qa changes

vtex · Nov 21, 2023 · 589fcf5 · 589fcf5
1 parent 3fa1f69
commit 589fcf5
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/packages/components/src/field/field.css b/packages/components/src/field/field.css
@@ -40,7 +40,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
@@ -57,6 +57,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
@@ -4,6 +4,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',
@@ -30,6 +32,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'
@@ -14,6 +14,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       label,
       helpText,
       errorText,
+      optional,
       id: defaultId,
       ...inputProps
     } = props
@@ -22,7 +23,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}
@@ -38,6 +41,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             id={id}
             ref={ref}
             disabled={disabled}
+            aria-required={optional}
             {...inputProps}
           />
           {suffix && (
@@ -72,7 +76,8 @@ export interface TextInputProps
   Node added before input space
   */
   suffix?: React.ReactNode
-  label: string
+  label: ReactNode
   errorText?: string
   helpText?: string
+  optional?: boolean
 }