fix: Apply property filter max width only to filtering input

cloudscape-design · Oct 10, 2024 · 209b916 · 209b916
1 parent 54d9c3e
commit 209b916
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 66 deletions.
diff --git a/src/property-filter/internal.tsx b/src/property-filter/internal.tsx
@@ -316,70 +316,72 @@ const PropertyFilterInternal = React.forwardRef(
       <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>
         <div className={clsx(styles['search-field'], analyticsSelectors['search-field'])}>
           {customControl && <div className={styles['custom-control']}>{customControl}</div>}
-          <PropertyFilterAutosuggest
-            ref={inputRef}
-            virtualScroll={virtualScroll}
-            enteredTextLabel={i18nStrings.enteredTextLabel}
-            ariaLabel={filteringAriaLabel ?? i18nStrings.filteringAriaLabel}
-            placeholder={filteringPlaceholder ?? i18nStrings.filteringPlaceholder}
-            ariaLabelledby={rest.ariaLabelledby}
-            ariaDescribedby={textboxAriaDescribedBy}
-            controlId={rest.controlId}
-            value={filteringText}
-            disabled={disabled}
-            {...autosuggestOptions}
-            onChange={event => setFilteringText(event.detail.value)}
-            empty={filteringEmpty}
-            {...asyncAutosuggestProps}
-            expandToViewport={expandToViewport}
-            onOptionClick={handleSelected}
-            customForm={
-              operatorForm
-                ? {
-                    content: (
-                      <PropertyEditorContent
-                        key={customValueKey}
-                        property={propertyStep.property}
-                        operator={propertyStep.operator}
-                        filter={propertyStep.value}
-                        operatorForm={operatorForm}
-                        value={customFormValue}
-                        onChange={setCustomFormValue}
-                      />
-                    ),
-                    footer: (
-                      <PropertyEditorFooter
-                        key={customValueKey}
-                        property={propertyStep.property}
-                        operator={propertyStep.operator}
-                        value={customFormValue}
-                        i18nStrings={i18nStrings}
-                        onCancel={() => {
-                          setFilteringText('');
-                          inputRef.current?.close();
-                          inputRef.current?.focus({ preventDropdown: true });
-                        }}
-                        onSubmit={token => {
-                          addToken(token);
-                          setFilteringText('');
-                          inputRef.current?.focus({ preventDropdown: true });
-                          inputRef.current?.close();
-                        }}
-                      />
-                    ),
-                  }
-                : undefined
-            }
-            onCloseDropdown={() => setCustomFormValueRecord({})}
-            hideEnteredTextOption={internalFreeText.disabled && parsedText.step !== 'property'}
-            clearAriaLabel={i18nStrings.clearAriaLabel}
-            searchResultsId={showResults ? searchResultsId : undefined}
-          />
-          {showResults ? (
-            <div className={styles.results}>
-              <SearchResults id={searchResultsId}>{countText}</SearchResults>
-            </div>
-          ) : null}
+          <div className={styles['input-wrapper']}>
+            <PropertyFilterAutosuggest
+              ref={inputRef}
+              virtualScroll={virtualScroll}
+              enteredTextLabel={i18nStrings.enteredTextLabel}
+              ariaLabel={filteringAriaLabel ?? i18nStrings.filteringAriaLabel}
+              placeholder={filteringPlaceholder ?? i18nStrings.filteringPlaceholder}
+              ariaLabelledby={rest.ariaLabelledby}
+              ariaDescribedby={textboxAriaDescribedBy}
+              controlId={rest.controlId}
+              value={filteringText}
+              disabled={disabled}
+              {...autosuggestOptions}
+              onChange={event => setFilteringText(event.detail.value)}
+              empty={filteringEmpty}
+              {...asyncAutosuggestProps}
+              expandToViewport={expandToViewport}
+              onOptionClick={handleSelected}
+              customForm={
+                operatorForm
+                  ? {
+                      content: (
+                        <PropertyEditorContent
+                          key={customValueKey}
+                          property={propertyStep.property}
+                          operator={propertyStep.operator}
+                          filter={propertyStep.value}
+                          operatorForm={operatorForm}
+                          value={customFormValue}
+                          onChange={setCustomFormValue}
+                        />
+                      ),
+                      footer: (
+                        <PropertyEditorFooter
+                          key={customValueKey}
+                          property={propertyStep.property}
+                          operator={propertyStep.operator}
+                          value={customFormValue}
+                          i18nStrings={i18nStrings}
+                          onCancel={() => {
+                            setFilteringText('');
+                            inputRef.current?.close();
+                            inputRef.current?.focus({ preventDropdown: true });
+                          }}
+                          onSubmit={token => {
+                            addToken(token);
+                            setFilteringText('');
+                            inputRef.current?.focus({ preventDropdown: true });
+                            inputRef.current?.close();
+                          }}
+                        />
+                      ),
+                    }
+                  : undefined
+              }
+              onCloseDropdown={() => setCustomFormValueRecord({})}
+              hideEnteredTextOption={internalFreeText.disabled && parsedText.step !== 'property'}
+              clearAriaLabel={i18nStrings.clearAriaLabel}
+              searchResultsId={showResults ? searchResultsId : undefined}
+            />
+            {showResults ? (
+              <div className={styles.results}>
+                <SearchResults id={searchResultsId}>{countText}</SearchResults>
+              </div>
+            ) : null}
+          </div>
         </div>
         {filteringConstraintText && (
           <div id={constraintTextId} className={styles.constraint}>

diff --git a/src/property-filter/styles.scss b/src/property-filter/styles.scss
@@ -15,12 +15,14 @@ $operator-field-width: 120px;
 .search-field {
   display: flex;
   align-items: flex-end;
-  // The xs breakpoint, minus the table tools container padding
-  max-inline-size: calc(#{styles.$breakpoint-x-small} - 2 * #{awsui.$space-l});
 }
 
 .input-wrapper {
   flex-grow: 1;
+  display: flex;
+  align-items: flex-end;
+  // The xs breakpoint, minus the table tools container padding
+  max-inline-size: calc(#{styles.$breakpoint-x-small} - 2 * #{awsui.$space-l});
 }
 
 .add-token {