From 24c76fdb2d217aae3234cc29a6d3c5e36e56adf7 Mon Sep 17 00:00:00 2001
From: Lucas Arcoverde <lucasaarcoverde@gmail.com>
Date: Tue, 14 Nov 2023 11:29:52 -0300
Subject: [PATCH 1/3] feat(field): add optional field behavior

---
 packages/components/src/field/field-label.tsx | 13 +++++++--
 .../components/src/field/field-message.tsx    |  6 ++---
 packages/components/src/field/field.css       | 10 +++----
 .../components/src/field/messages/bg.json     |  3 +++
 .../components/src/field/messages/de.json     |  3 +++
 .../components/src/field/messages/en.json     |  3 +++
 .../components/src/field/messages/es.json     |  3 +++
 .../components/src/field/messages/fr.json     |  3 +++
 .../components/src/field/messages/index.ts    | 27 +++++++++++++++++++
 .../components/src/field/messages/it.json     |  3 +++
 .../components/src/field/messages/ja.json     |  3 +++
 .../components/src/field/messages/ko.json     |  3 +++
 .../components/src/field/messages/nl.json     |  3 +++
 .../components/src/field/messages/pt.json     |  3 +++
 .../components/src/field/messages/ro.json     |  3 +++
 .../components/src/field/messages/th.json     |  3 +++
 16 files changed, 81 insertions(+), 11 deletions(-)
 create mode 100644 packages/components/src/field/messages/bg.json
 create mode 100644 packages/components/src/field/messages/de.json
 create mode 100644 packages/components/src/field/messages/en.json
 create mode 100644 packages/components/src/field/messages/es.json
 create mode 100644 packages/components/src/field/messages/fr.json
 create mode 100644 packages/components/src/field/messages/index.ts
 create mode 100644 packages/components/src/field/messages/it.json
 create mode 100644 packages/components/src/field/messages/ja.json
 create mode 100644 packages/components/src/field/messages/ko.json
 create mode 100644 packages/components/src/field/messages/nl.json
 create mode 100644 packages/components/src/field/messages/pt.json
 create mode 100644 packages/components/src/field/messages/ro.json
 create mode 100644 packages/components/src/field/messages/th.json

diff --git a/packages/components/src/field/field-label.tsx b/packages/components/src/field/field-label.tsx
index 90ffc522ff..d36e7e1f73 100644
--- a/packages/components/src/field/field-label.tsx
+++ b/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,7 +20,7 @@ export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
         data-disabled={disabled}
         {...restProps}
       >
-        {children}
+        {children} {optionalLabel}
       </label>
     )
   }
@@ -20,4 +28,5 @@ export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
 
 export interface FieldLabelProps extends ComponentPropsWithoutRef<'label'> {
   disabled?: boolean
+  optional?: boolean
 }
diff --git a/packages/components/src/field/field-message.tsx b/packages/components/src/field/field-message.tsx
index 41063f4e56..81a75f4eca 100644
--- a/packages/components/src/field/field-message.tsx
+++ b/packages/components/src/field/field-message.tsx
@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
-import { Stack } from '../stack'
+import { Flex } from '../flex'
 
 export const FieldMessage = forwardRef<HTMLDivElement, FieldMessageProps>(
   function FieldMessage(props, ref) {
@@ -11,14 +11,14 @@ export const FieldMessage = forwardRef<HTMLDivElement, FieldMessageProps>(
 
     return (
       <div ref={ref} data-sl-field-message {...restProps}>
-        <Stack space="$space-1">
+        <Flex direction="column">
           {helpText && <p data-sl-field-message-text>{helpText}</p>}
           {hasError && (
             <p data-sl-field-message-text role="alert">
               {errorText}
             </p>
           )}
-        </Stack>
+        </Flex>
       </div>
     )
   }
diff --git a/packages/components/src/field/field.css b/packages/components/src/field/field.css
index 6a298ebdf4..65e1f7b83d 100644
--- a/packages/components/src/field/field.css
+++ b/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);
     }
diff --git a/packages/components/src/field/messages/bg.json b/packages/components/src/field/messages/bg.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/bg.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/de.json b/packages/components/src/field/messages/de.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/de.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/en.json b/packages/components/src/field/messages/en.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/en.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/es.json b/packages/components/src/field/messages/es.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/es.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/fr.json b/packages/components/src/field/messages/fr.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/fr.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/index.ts b/packages/components/src/field/messages/index.ts
new file mode 100644
index 0000000000..7093d13cdd
--- /dev/null
+++ b/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,
+}
diff --git a/packages/components/src/field/messages/it.json b/packages/components/src/field/messages/it.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/it.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/ja.json b/packages/components/src/field/messages/ja.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/ja.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/ko.json b/packages/components/src/field/messages/ko.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/ko.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/nl.json b/packages/components/src/field/messages/nl.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/nl.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/pt.json b/packages/components/src/field/messages/pt.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/pt.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/ro.json b/packages/components/src/field/messages/ro.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/ro.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}
diff --git a/packages/components/src/field/messages/th.json b/packages/components/src/field/messages/th.json
new file mode 100644
index 0000000000..fbf560b8a2
--- /dev/null
+++ b/packages/components/src/field/messages/th.json
@@ -0,0 +1,3 @@
+{
+  "optional": "(optional)"
+}

From 15de9179b39ca0c2b15b088ffe21c5bf7cae23cb Mon Sep 17 00:00:00 2001
From: Lucas Arcoverde <lucasaarcoverde@gmail.com>
Date: Tue, 14 Nov 2023 11:30:06 -0300
Subject: [PATCH 2/3] feat(select-field): implement QA review

---
 .../src/select-field/select-field.css         | 12 ++++++-
 .../src/select-field/select-field.tsx         |  8 ++++-
 .../stories/select-field.stories.tsx          | 35 +++++++++++++++++--
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/select-field/select-field.css b/packages/components/src/select-field/select-field.css
index ef5f41d8c3..19a4fdca87 100644
--- a/packages/components/src/select-field/select-field.css
+++ b/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] {
diff --git a/packages/components/src/select-field/select-field.tsx b/packages/components/src/select-field/select-field.tsx
index 66246a6dd6..abdf38e45d 100644
--- a/packages/components/src/select-field/select-field.tsx
+++ b/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
 }
diff --git a/packages/components/src/select-field/stories/select-field.stories.tsx b/packages/components/src/select-field/stories/select-field.stories.tsx
index ddcf4ac3c1..2f9a2f8104 100644
--- a/packages/components/src/select-field/stories/select-field.stories.tsx
+++ b/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>
   )
 }

From f359ac24b5fb6e18680c1e73eb080b9cf4d6a854 Mon Sep 17 00:00:00 2001
From: Lucas Arcoverde <lucasaarcoverde@gmail.com>
Date: Fri, 17 Nov 2023 14:25:17 -0300
Subject: [PATCH 3/3] refactor(select-field): change field-message architecture

---
 packages/components/src/field/field-message.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/field/field-message.tsx b/packages/components/src/field/field-message.tsx
index 81a75f4eca..f83d6c5d06 100644
--- a/packages/components/src/field/field-message.tsx
+++ b/packages/components/src/field/field-message.tsx
@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
-import { Flex } from '../flex'
+import { Stack } from '../stack'
 
 export const FieldMessage = forwardRef<HTMLDivElement, FieldMessageProps>(
   function FieldMessage(props, ref) {
@@ -11,14 +11,14 @@ export const FieldMessage = forwardRef<HTMLDivElement, FieldMessageProps>(
 
     return (
       <div ref={ref} data-sl-field-message {...restProps}>
-        <Flex direction="column">
+        <Stack space="$space-0">
           {helpText && <p data-sl-field-message-text>{helpText}</p>}
           {hasError && (
             <p data-sl-field-message-text role="alert">
               {errorText}
             </p>
           )}
-        </Flex>
+        </Stack>
       </div>
     )
   }