styles(compass-query-bar): Update filter label placement and spacing styles COMPASS-6088 (#3437)

Author: Anemy

packages/compass-query-bar/src/components/query-bar.tsx

@@ -8,6 +8,7 @@ import {
   spacing,
   uiColors,
   withTheme,
+  Label,
 } from '@mongodb-js/compass-components';
 import type { Listenable } from 'reflux';
 import type AppRegistry from 'hadron-app-registry';
@@ -17,7 +18,10 @@ import type {
   QueryBarOptionProps,
 } from '../constants/query-option-definition';
 import { OPTION_DEFINITION } from '../constants/query-option-definition';
-import { QueryOption as QueryOptionComponent } from './query-option';
+import {
+  QueryOption as QueryOptionComponent,
+  queryOptionLabelContainerStyles,
+} from './query-option';
 import { QueryOptionsGrid } from './query-options-grid';
 import { QueryHistoryButtonPopover } from './query-history-button-popover';
 
@@ -40,12 +44,17 @@ const queryBarFirstRowStyles = css({
   display: 'flex',
   alignItems: 'flex-start',
   gap: spacing[2],
+  paddingLeft: spacing[2],
 });
 
 const filterContainerStyles = css({
   flexGrow: 1,
 });
 
+const filterLabelStyles = css({
+  padding: 0,
+});
+
 type QueryBarProps = {
   buttonLabel?: string;
   darkMode?: boolean;
@@ -112,6 +121,8 @@ const UnthemedQueryBar: React.FunctionComponent<QueryBarProps> = ({
     [onApply]
   );
 
+  const filterQueryOptionId = 'query-bar-option-input-filter';
+
   return (
     <form
       className={cx(queryBarFormStyles, darkMode && queryBarFormDarkStyles)}
@@ -121,16 +132,26 @@ const UnthemedQueryBar: React.FunctionComponent<QueryBarProps> = ({
       data-result-id={resultId}
     >
       <div className={queryBarFirstRowStyles}>
-        {showQueryHistoryButton && (
-          <QueryHistoryButtonPopover
-            localAppRegistry={localAppRegistry}
-            globalAppRegistry={globalAppRegistry}
-          />
-        )}
+        <div className={queryOptionLabelContainerStyles}>
+          <Label
+            htmlFor={filterQueryOptionId}
+            id="query-bar-option-input-filter-label"
+            className={filterLabelStyles}
+          >
+            Filter
+          </Label>
+          {showQueryHistoryButton && (
+            <QueryHistoryButtonPopover
+              localAppRegistry={localAppRegistry}
+              globalAppRegistry={globalAppRegistry}
+            />
+          )}
+        </div>
         <div className={filterContainerStyles}>
           <QueryOptionComponent
             hasError={!queryOptionProps.filterValid}
             queryOption="filter"
+            id={filterQueryOptionId}
             onChange={(value: string) => onChangeQueryOption('filter', value)}
             onApply={onApply}
             placeholder={

packages/compass-query-bar/src/components/query-history-button-popover.tsx

@@ -19,6 +19,7 @@ const openQueryHistoryButtonStyles = cx(
     display: 'inline-flex',
     alignItems: 'center',
     padding: spacing[2] - 2, // -2px for border.
+    marginLeft: spacing[1],
     '&:hover': {
       cursor: 'pointer',
     },
@@ -31,7 +32,6 @@ const queryHistoryPopoverStyles = css({
   maxHeight: 'calc(100vh - 270px)',
   marginTop: spacing[1],
   display: 'flex',
-  marginLeft: -spacing[2] - 1, // Align to the left of the query bar.
 });
 
 type QueryHistoryProps = {

packages/compass-query-bar/src/components/query-option.tsx

@@ -17,12 +17,12 @@ import type { QueryOption as QueryOptionType } from '../constants/query-option-d
 const queryOptionStyles = css({
   display: 'flex',
   position: 'relative',
-  alignItems: 'center',
+  alignItems: 'flex-start',
 });
 
 const queryOptionLabelStyles = css({
   // A bit of vertical padding so users can click the label easier.
-  padding: `${spacing[2]}px 0`,
+  paddingTop: spacing[1],
   marginRight: spacing[2],
 });
 
@@ -50,17 +50,19 @@ const optionInputWithErrorStyles = css({
   },
 });
 
-const queryOptionLabelContainerStyles = css({
-  whiteSpace: 'nowrap',
+export const queryOptionLabelContainerStyles = css({
+  // Hardcoded height as we want the label not to vertically
+  // center on the input area when it's expanded.
+  height: spacing[4] + spacing[1],
   textTransform: 'capitalize',
-  alignItems: 'center',
   display: 'flex',
-  margin: 0,
+  alignItems: 'center',
 });
 
 type QueryOptionProps = {
   darkMode?: boolean;
   hasError: boolean;
+  id: string;
   onChange: (value: string) => void;
   onApply: () => void;
   placeholder?: string;
@@ -76,6 +78,7 @@ const UnthemedQueryOption: React.FunctionComponent<QueryOptionProps> = ({
   hasError,
   onApply,
   onChange,
+  id,
   placeholder = '',
   queryOption,
   refreshEditorAction,
@@ -93,26 +96,23 @@ const UnthemedQueryOption: React.FunctionComponent<QueryOptionProps> = ({
       className={queryOptionStyles}
       data-testid={`query-bar-option-${queryOption}`}
     >
-      <div
-        className={queryOptionLabelContainerStyles}
-        data-testid="query-bar-option-label"
-      >
-        <Label
-          htmlFor={`query-bar-option-input-${queryOption}`}
-          id={`query-bar-option-input-${queryOption}-label`}
-          className={queryOptionLabelStyles}
-          // We hide the `Filter` label, but keep it in the dom for
-          // screen reader label support.
-          hidden={queryOption === 'filter'}
-        >
-          {queryOption}
-        </Label>
-      </div>
+      {/* The filter label is shown by the query bar. */}
+      {queryOption !== 'filter' && (
+        <div className={queryOptionLabelContainerStyles}>
+          <Label
+            htmlFor={id}
+            id={`query-bar-option-input-${queryOption}-label`}
+            className={queryOptionLabelStyles}
+          >
+            {queryOption}
+          </Label>
+        </div>
+      )}
       <div className={cx(isDocumentEditor && documentEditorOptionStyles)}>
         {isDocumentEditor ? (
           <OptionEditor
             hasError={hasError}
-            id={`query-bar-option-input-${queryOption}`}
+            id={id}
             queryOption={queryOption}
             onApply={onApply}
             onChange={onChange}
@@ -125,7 +125,7 @@ const UnthemedQueryOption: React.FunctionComponent<QueryOptionProps> = ({
         ) : (
           <TextInput
             aria-labelledby={`query-bar-option-input-${queryOption}-label`}
-            id={`query-bar-option-input-${queryOption}`}
+            id={id}
             data-testid="query-bar-option-input"
             className={cx(
               darkMode

packages/compass-query-bar/src/components/query-options-grid.tsx

@@ -10,13 +10,13 @@ import { OPTION_DEFINITION } from '../constants/query-option-definition';
 import { QueryOption as QueryOptionComponent } from './query-option';
 
 const gridStyles = css({
-  alignItems: 'center',
+  alignItems: 'flex-start',
   display: 'grid',
   flexGrow: 1,
   position: 'relative',
-  marginTop: spacing[1] + 2,
+  marginTop: spacing[2],
   padding: `0 ${spacing[2]}px`,
-  gap: `${spacing[1]}px ${spacing[2]}px`,
+  gap: spacing[2],
   gridTemplateColumns: 'repeat(6, 1fr)',
 });
 
@@ -191,6 +191,7 @@ export const QueryOptionsGrid: React.FunctionComponent<
             hasError={!queryOptionProps[`${optionName}Valid`]}
             onChange={(value: string) => onChangeQueryOption(optionName, value)}
             onApply={onApply}
+            id={`query-bar-option-input-${optionName}`}
             placeholder={
               queryOptionProps[`${optionName}Placeholder`] ||
               OPTION_DEFINITION[optionName].placeholder
@@ -213,6 +214,7 @@ export const QueryOptionsGrid: React.FunctionComponent<
           <QueryOptionComponent
             hasError={!queryOptionProps[`${optionName}Valid`]}
             key={`numeric-query-option-${optionName}`}
+            id={`query-bar-option-input-${optionName}`}
             onChange={(value: string) => onChangeQueryOption(optionName, value)}
             onApply={onApply}
             placeholder={