chore(form-field): form field and input refactor to provide context

packages/react/src/components/combobox/combobox.test.tsx.snap

@@ -266,6 +266,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -770,6 +771,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -1540,6 +1542,18 @@ input + .c2 {
   margin-left: var(--spacing-half);
 }
 
+.c4 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
 .c0 {
   margin: 0 0 var(--spacing-3x);
 }
@@ -1554,18 +1568,6 @@ input + .c2 {
   margin-bottom: var(--spacing-half);
 }
 
-.c4 {
-  color: #60666E;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
 .c10 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -1724,13 +1726,15 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
     Select an option
   </label>
   <span
     class="c4"
+    data-testid="field-hint"
     id="uuid1_hint"
   >
     Hint

packages/react/src/components/combobox/combobox.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { IconButton } from '../buttons/icon-button';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
@@ -77,7 +77,7 @@ const Textbox = styled.input<TextboxProps>`
     width: 100%;
 
     ${focus};
-    
+
     &::placeholder {
         color: ${({ theme }) => theme.component['combobox-placeholder-text-color']};
         font-style: italic;

packages/react/src/components/date-picker/date-picker.test.tsx.snap

@@ -350,6 +350,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -740,6 +741,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -1132,6 +1134,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -1524,6 +1527,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -1944,6 +1948,7 @@ label + .c5 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -2352,6 +2357,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -2910,6 +2916,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -4211,6 +4218,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -5487,6 +5495,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >

packages/react/src/components/date-picker/date-picker.tsx

@@ -26,7 +26,7 @@ import { v4 as uuid } from '../../utils/uuid';
 import { AbstractButton } from '../buttons/abstract/abstract-button';
 import { Button } from '../buttons/button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { Icon } from '../icon/icon';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';

packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap

@@ -217,6 +217,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -453,6 +454,18 @@ input + .c2 {
   margin-left: var(--spacing-half);
 }
 
+.c4 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
 .c0 {
   margin: 0 0 var(--spacing-3x);
 }
@@ -467,18 +480,6 @@ input + .c2 {
   margin-bottom: var(--spacing-half);
 }
 
-.c4 {
-  color: #60666E;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
 .c9 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -665,13 +666,15 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
     Select an option
   </label>
   <span
     class="c4"
+    data-testid="field-hint"
     id="uuid1_hint"
   >
     Hint
@@ -1138,6 +1141,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
@@ -2355,6 +2359,18 @@ input + .c2 {
   margin-left: var(--spacing-half);
 }
 
+.c4 {
+  color: #60666E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+}
+
 .c0 {
   margin: 0 0 var(--spacing-3x);
 }
@@ -2369,18 +2385,6 @@ input + .c2 {
   margin-bottom: var(--spacing-half);
 }
 
-.c4 {
-  color: #60666E;
-  display: block;
-  font-size: 0.75rem;
-  font-weight: var(--font-normal);
-  -webkit-letter-spacing: 0.02rem;
-  -moz-letter-spacing: 0.02rem;
-  -ms-letter-spacing: 0.02rem;
-  letter-spacing: 0.02rem;
-  line-height: 1.25rem;
-}
-
 .c8 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -2562,13 +2566,15 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid1"
     id="uuid1_label"
   >
     Select an option
   </label>
   <span
     class="c4"
+    data-testid="field-hint"
     id="uuid1_hint"
   >
     Hint

packages/react/src/components/dropdown-list/dropdown-list.tsx

@@ -14,7 +14,7 @@ import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { isLetterOrNumber } from '../../utils/regex';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { FieldContainer } from '../field-container/field-container';
+import { FieldContainer } from '../../internal/field/container/field-container';
 import { Icon, IconName } from '../icon/icon';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';