Combobox design fixes (#1492)

* changing combobox button width to be 32px

* updating combobox action button style when menu is open

* tentative stab at adjusting label and combobox input distance

* updating css to match textfield 5.3 XD

* adding line height to quiet textfield input to match XD

fixes the icon position for quiet textarea w/ validation and normal icon

* fixing combobox field button hover styles so they dont apply for isQuiet

* updating textfield and inputgroup quiet focus styles

when field is focused (not keyboard focused just clicked), should not have a box-shadow

* fixing quiet combobox menu so input text aligns with menu text

* making fieldbutton gray 900 hover style only appear if the button itself is hovered

* altering textfield label text line height to match XD design

this value matched my photoshop overlap comparison between XD and storybook best

* adding negative margin so label can use line height specified in XD

* removing label positioning changes

* fixing invalid quiet combobox boxshadow  so it only appears on keyboard focus

* passing isPressed to combobox button when popover is open

* removing some extraneous props

Author: LFDanLu

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

@@ -25,7 +25,7 @@ governing permissions and limitations under the License.
   --spectrum-datepicker-range-dash-padding-top: 0;
   --spectrum-datepicker-range-dash-line-height: calc(var(--spectrum-textfield-height) - var(--spectrum-global-dimension-size-100));
 
-  --spectrum-combobox-button-width: calc(var(--spectrum-global-dimension-size-400) + var(--spectrum-global-dimension-size-25));
+  --spectrum-combobox-button-width: var(--spectrum-global-dimension-size-400);
 }
 
 .spectrum-InputGroup {
@@ -121,6 +121,12 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-InputGroup-popover--quiet {
+  /* Define this var so it can be read from JS */
+  --spectrum-dropdown-quiet-offset: calc(var(--spectrum-dropdown-quiet-popover-offset-x) + var(--spectrum-popover-border-size));
+  margin-inline-end: calc(var(--spectrum-dropdown-quiet-offset) * -1);
+}
+
 .spectrum-Datepicker--range {
   border-radius: var(--spectrum-border-radius);
   /* Input Group */

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

@@ -101,8 +101,20 @@ governing permissions and limitations under the License.
       }
     }
 
-    /* Always add the 2px ring for keyboard focus for quiet inputgroups */
     &.is-focused {
+      .spectrum-FieldButton {
+        border-color: var(--spectrum-textfield-quiet-border-color-key-focus);
+      }
+
+      &.spectrum-InputGroup--invalid,
+      &:invalid {
+        .spectrum-FieldButton {
+          border-color: var(--spectrum-textfield-border-color-error);
+        }
+      }
+    }
+
+    &:focus-ring {
       .spectrum-InputGroup-input {
         box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus);
       }
@@ -120,7 +132,6 @@ governing permissions and limitations under the License.
 
         .spectrum-FieldButton {
           box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);
-          border-color: var(--spectrum-textfield-border-color-error);
         }
       }
     }

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

@@ -115,7 +115,6 @@ governing permissions and limitations under the License.
     &:focus,
     &.is-focused {
       border-color: var(--spectrum-textfield-quiet-border-color-key-focus);
-      box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus);
     }
 
     &:focus-ring {
@@ -134,11 +133,6 @@ governing permissions and limitations under the License.
     &:invalid {
       border-color: var(--spectrum-textfield-border-color-error);
 
-      &:focus,
-      &.is-focused {
-        box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);
-      }
-
       &:focus-ring { /* might break things due to pre-defined focus-ring */
         &:not(:active) {
           border-color: var(--spectrum-textfield-border-color-error);
@@ -160,11 +154,6 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Textfield--quiet.spectrum-Textfield--invalid & {
-    &:focus,
-    &.is-focused {
-      box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);
-    }
-
     &:focus-ring { /* might break things due to pre-defined focus-ring */
       &:not(:active) {
         box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-error);

packages/@react-spectrum/combobox/src/ComboBox.tsx

@@ -68,6 +68,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
     menuTrigger = 'input',
     shouldFlip = true,
     direction = 'bottom',
+    isQuiet,
     loadingState,
     onLoadMore
   } = props;
@@ -134,14 +135,16 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
 
   let style = {
     ...overlayProps.style,
-    width: menuWidth
+    width: isQuiet ? null : menuWidth,
+    minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
   };
 
   return (
     <>
       <Field {...props} labelProps={labelProps} ref={domRef}>
         <ComboBoxInput
           {...props}
+          isOpen={state.isOpen}
           loadingState={loadingState}
           inputProps={inputProps}
           inputRef={inputRef}
@@ -151,6 +154,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
       <Popover
         isOpen={state.isOpen}
         UNSAFE_style={style}
+        UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}
         ref={popoverRef}
         placement={placement}
         hideArrow
@@ -164,8 +168,6 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(pr
           focusOnPointerEnter
           layout={layout}
           state={state}
-          // Set max height: inherit so Tray scrolling works
-          UNSAFE_style={{maxHeight: 'inherit'}}
           shouldUseVirtualFocus
           isLoading={loadingState === 'loadingMore'}
           onLoadMore={onLoadMore}
@@ -185,7 +187,6 @@ interface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {
   inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>,
   triggerProps: AriaButtonProps,
   triggerRef: RefObject<FocusableRefValue<HTMLElement>>,
-  className?: string,
   style?: React.CSSProperties
 }
 
@@ -201,8 +202,9 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
     triggerRef,
     autoFocus,
     style,
-    className,
-    loadingState
+    UNSAFE_className,
+    loadingState,
+    isOpen
   } = props;
   let {hoverProps, isHovered} = useHover({});
   let formatMessage = useMessageFormatter(intlMessages);
@@ -243,7 +245,7 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
               'spectrum-InputGroup--invalid': validationState === 'invalid',
               'is-hovered': isHovered
             },
-            className
+            UNSAFE_className
           )
         }>
         <TextFieldBase
@@ -272,7 +274,7 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
           validationState={validationState}
           isLoading={loadingState === 'loading' || loadingState === 'filtering'}
           loadingIndicator={loadingState != null && loadingCircle} />
-        <PressResponder preventFocusOnPress>
+        <PressResponder preventFocusOnPress isPressed={isOpen}>
           <FieldButton
             {...triggerProps}
             ref={triggerRef}