fixing combobox styles for quiet and invalid (#2067)

Co-authored-by: Robert Snow <[email protected]>

Author: LFDanLu

packages/@adobe/spectrum-css-temp/components/inputgroup/index.css

@@ -44,7 +44,8 @@ governing permissions and limitations under the License.
     flex-shrink: 0;
   }
 
-  &.is-disabled {
+  /* Quiet or invalid inputgroup field button should always have a border width. */
+  &.is-disabled:not(.spectrum-InputGroup--invalid):not(.spectrum-InputGroup--quiet) {
     .spectrum-FieldButton {
       border-width: 0;
     }

packages/@adobe/spectrum-css-temp/components/inputgroup/skin.css

@@ -72,17 +72,33 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-InputGroup--quiet {
+  /*
+    specifically for readonly inputgroups that aren't disabled since the button will have the disabled class
+    but we don't want the border color to be the disabled quiet one
+  */
+  &:not(.is-disabled) {
+    .spectrum-FieldButton {
+      &:disabled,
+      &:disabled:hover {
+        border-color: var(--spectrum-textfield-quiet-border-color);
+      }
+    }
+  }
+
   .spectrum-FieldButton {
     &,
     &:hover,
     &:focus,
     &:active,
     &.is-selected,
     &:invalid,
-    &.spectrum-FieldButton--invalid,
+    &.spectrum-FieldButton--invalid {
+      border-color: var(--spectrum-textfield-quiet-border-color);
+    }
+
     &:disabled,
     &:disabled:hover {
-      border-color: var(--spectrum-textfield-quiet-border-color);
+      border-color: var(--spectrum-textfield-quiet-border-color-disabled);
     }
   }