Merge pull request #1271 from vtex/feat/select-qa

SelectField design QA

packages/components/src/field/field-label.tsx

@@ -1,9 +1,17 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+import { createMessageHook } from '../locale'
+import { messages } from './messages'
+
+const useMessage = createMessageHook(messages)
 
 export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
   function FieldLabel(props, ref) {
-    const { children, disabled = false, ...restProps } = props
+    const { children, disabled = false, optional, ...restProps } = props
+
+    const getMessage = useMessage()
+
+    const optionalLabel = optional && getMessage('optional')
 
     return (
       <label
@@ -12,12 +20,13 @@ export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
         data-disabled={disabled}
         {...restProps}
       >
-        {children}
+        {children} {optionalLabel}
       </label>
     )
   }
 )
 
 export interface FieldLabelProps extends ComponentPropsWithoutRef<'label'> {
   disabled?: boolean
+  optional?: boolean
 }

packages/components/src/field/field-message.tsx

@@ -11,7 +11,7 @@ export const FieldMessage = forwardRef<HTMLDivElement, FieldMessageProps>(
 
     return (
       <div ref={ref} data-sl-field-message {...restProps}>
-        <Stack space="$space-1">
+        <Stack space="$space-0">
           {helpText && <p data-sl-field-message-text>{helpText}</p>}
           {hasError && (
             <p data-sl-field-message-text role="alert">

packages/components/src/field/field.css

@@ -1,21 +1,19 @@
 @layer sl-components {
-
-  [data-sl-field][data-variant="default"] {
-
+  [data-sl-field][data-variant='default'] {
     --sl-element-template-areas: 'label' 'input' 'message';
     --sl-element-vertical-gap: var(--sl-space-1);
     --sl-element-horizontal-gap: var(--sl-space-0);
     --sl-element-label-color: var(--sl-fg-soft);
   }
 
-  [data-sl-field][data-variant="group"] {
+  [data-sl-field][data-variant='group'] {
     --sl-element-template-areas: 'label' 'input' 'message';
     --sl-element-vertical-gap: var(--sl-space-3);
     --sl-element-horizontal-gap: var(--sl-space-0);
     --sl-element-label-color: var(--sl-fg-soft);
   }
 
-  [data-sl-field][data-variant="control"] {
+  [data-sl-field][data-variant='control'] {
     --sl-element-template-areas: 'input label' '- message';
     --sl-element-label-color: var(--sl-fg);
     --sl-element-vertical-gap: var(--sl-space-0);
@@ -42,7 +40,7 @@
     }
 
     [data-sl-field-message-text] {
-      color: var(--sl-fg-muted);
+      color: var(--sl-fg);
       font: var(--sl-text-caption-2-font);
       letter-spacing: var(--sl-text-caption-2-letter-spacing);
     }

packages/components/src/field/messages/bg.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/de.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/en.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/es.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/fr.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/index.ts

@@ -0,0 +1,27 @@
+import bg from './bg.json'
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import fr from './fr.json'
+import it from './it.json'
+import ja from './ja.json'
+import ko from './ko.json'
+import nl from './nl.json'
+import pt from './pt.json'
+import ro from './ro.json'
+import th from './th.json'
+
+export const messages = {
+  'en-US': en,
+  'es-AR': es,
+  'fr-FR': fr,
+  'pt-BR': pt,
+  'ja-JP': ja,
+  'ko-KR': ko,
+  'it-IT': it,
+  'nl-NL': nl,
+  'ro-RO': ro,
+  'bg-BG': bg,
+  'th-TH': th,
+  'de-DE': de,
+}

packages/components/src/field/messages/it.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/ja.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/ko.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/nl.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/pt.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/ro.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/field/messages/th.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

packages/components/src/select-field/select-field.css

@@ -4,7 +4,7 @@
     font: var(--sl-text-body-font);
     letter-spacing: var(--sl-text-body-letter-spacing);
     padding: var(--sl-space-3) var(--sl-space-4);
-    padding-right: var(--sl-space-8);
+    padding-right: var(--sl-space-10);
     border: var(--sl-border-strong);
     border-radius: var(--sl-border-radius-medium);
     background: var(--sl-bg);
@@ -24,11 +24,19 @@
     &[data-error='true'] {
       border: var(--sl-border-critical-strong);
 
+      &:hover {
+        border: var(--sl-border-critical-strong-hover);
+      }
+
       &:focus-visible {
         box-shadow: var(--sl-focus-ring-critical);
       }
     }
 
+    &:hover {
+      border: var(--sl-border-strong);
+    }
+
     &:disabled {
       border: var(--sl-border-disabled);
       color: var(--sl-fg-disabled);
@@ -43,6 +51,8 @@
   [data-sl-select-field-input-container] {
     position: relative;
     width: 100%;
+    min-width: 20rem;
+    height: 2.75rem;
   }
 
   [data-sl-select-field-icon] {

packages/components/src/select-field/select-field.tsx

@@ -30,6 +30,7 @@ export const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(
       label,
       error = false,
       disabled = false,
+      optional = false,
       className,
       id: defaultId,
       ...otherProps
@@ -39,7 +40,11 @@ export const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(
 
     return (
       <Field data-sl-select-field className={className}>
-        {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
+        {label && (
+          <FieldLabel htmlFor={id} optional={optional}>
+            {label}
+          </FieldLabel>
+        )}
         <div data-sl-select-field-input-container>
           <select
             ref={ref}
@@ -74,4 +79,5 @@ export interface SelectFieldProps extends ComponentPropsWithoutRef<'select'> {
   errorText?: ReactNode
   helpText?: ReactNode
   disabled?: boolean
+  optional?: boolean
 }

packages/components/src/select-field/stories/select-field.stories.tsx

@@ -5,6 +5,9 @@ import './style.css'
 import React, { useState } from 'react'
 
 import { SelectField } from '../index'
+import { Stack } from '../../stack'
+import { IconQuestion } from '@vtex/shoreline-icons'
+import { Tooltip } from '../../tooltip'
 
 export default {
   title: 'shoreline-components/select-field',
@@ -60,18 +63,29 @@ export function All() {
         <option>Uva</option>
       </SelectField>
 
-      <SelectField label="Label" disabled>
+      <SelectField
+        label="Label"
+        helpText="Help text"
+        errorText="Error text"
+        optional
+      >
         <option>Maçã</option>
         <option>Banana</option>
         <option>Uva</option>
       </SelectField>
 
-      <SelectField label="Label" helpText="Help text" disabled>
+      <SelectField label="Label" disabled>
         <option>Maçã</option>
         <option>Banana</option>
         <option>Uva</option>
       </SelectField>
 
+      <SelectField label="Label" helpText="Help text" value="option-1" disabled>
+        <option value="option-1">Maçã</option>
+        <option>Banana</option>
+        <option>Uva</option>
+      </SelectField>
+
       <SelectField label="Label" errorText="Error text" error disabled>
         <option>Maçã</option>
         <option>Banana</option>
@@ -89,6 +103,23 @@ export function All() {
         <option>Banana</option>
         <option>Uva</option>
       </SelectField>
+
+      <SelectField
+        label={
+          <Stack direction="row" space="$space-1">
+            <span>Label</span>
+            <Tooltip text="Tooltip text">
+              <IconQuestion width={16} height={16} />
+            </Tooltip>
+          </Stack>
+        }
+        helpText="Help text"
+        errorText="Error text"
+      >
+        <option>Maçã</option>
+        <option>Banana</option>
+        <option>Uva</option>
+      </SelectField>
     </div>
   )
 }