feat(Combobox): restrict custom values

kronostechnologies · Mar 28, 2024 · e733f7b · e733f7b
1 parent 307fdd0
commit e733f7b
Show file tree

Hide file tree

Showing 8 changed files with 591 additions and 150 deletions.
diff --git a/packages/react/src/components/combobox/combobox.test.tsx b/packages/react/src/components/combobox/combobox.test.tsx
diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -218,6 +218,26 @@ input + .c2 {
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
+.c5::-webkit-input-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c5::-moz-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c5:-ms-input-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c5::placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
 .c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -233,7 +253,7 @@ input + .c2 {
   height: var(--size-1x);
   padding: var(--spacing-half);
   position: absolute;
-  right: var(--spacing-half);
+  right: 0;
   width: var(--size-1x);
 }
 
@@ -255,13 +275,14 @@ input + .c2 {
     class="c4"
   >
     <input
-      aria-autocomplete="none"
+      aria-autocomplete="list"
       aria-controls="uuid1_listbox"
       aria-expanded="true"
       aria-invalid="false"
       aria-required="false"
       class="c5"
       data-testid="textbox"
+      disabled=""
       id="uuid1"
       role="combobox"
       tabindex="0"
@@ -701,6 +722,26 @@ input + .c2 {
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
+.c7::-webkit-input-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c7::-moz-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c7:-ms-input-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c7::placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
 .c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -716,7 +757,7 @@ input + .c2 {
   height: var(--size-1x);
   padding: var(--spacing-half);
   position: absolute;
-  right: var(--spacing-half);
+  right: 0;
   width: var(--size-1x);
 }
 
@@ -748,13 +789,13 @@ input + .c2 {
       height="16"
       width="16"
     />
-    validationErrorMessage
+    You must select an option
   </span>
   <div
     class="c6"
   >
     <input
-      aria-autocomplete="none"
+      aria-autocomplete="list"
       aria-controls="uuid1_listbox"
       aria-describedby="uuid1_invalid"
       aria-expanded="true"
@@ -1153,6 +1194,26 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
+.c3::-webkit-input-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c3::-moz-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c3:-ms-input-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c3::placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
 .c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1168,7 +1229,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
   height: var(--size-1x);
   padding: var(--spacing-half);
   position: absolute;
-  right: var(--spacing-half);
+  right: 0;
   width: var(--size-1x);
 }
 
@@ -1183,7 +1244,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
     class="c2"
   >
     <input
-      aria-autocomplete="none"
+      aria-autocomplete="list"
       aria-controls="uuid1_listbox"
       aria-expanded="true"
       aria-invalid="false"
@@ -1615,6 +1676,26 @@ input + .c2 {
   box-shadow: 0 0 0 2px #84C6EA;
 }
 
+.c6::-webkit-input-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c6::-moz-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c6:-ms-input-placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
+.c6::placeholder {
+  color: #B7BBC2;
+  font-style: italic;
+}
+
 .c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1630,7 +1711,7 @@ input + .c2 {
   height: var(--size-1x);
   padding: var(--spacing-half);
   position: absolute;
-  right: var(--spacing-half);
+  right: 0;
   width: var(--size-1x);
 }
 
@@ -1658,7 +1739,7 @@ input + .c2 {
     class="c5"
   >
     <input
-      aria-autocomplete="none"
+      aria-autocomplete="list"
       aria-controls="uuid1_listbox"
       aria-describedby="uuid1_hint"
       aria-expanded="true"