Style the dropdown option

woocommerce · Aug 19, 2022 · f286363 · f286363
1 parent f61bbc8
commit f286363
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/assets/js/blocks/attribute-filter/block.tsx b/assets/js/blocks/attribute-filter/block.tsx
@@ -525,7 +525,7 @@ const AttributeFilterBlock = ( {
 						disabled={ isDisabled }
 						placeholder={ sprintf(
 							/* translators: %s attribute name. */
-							__( 'Any %s', 'woo-gutenberg-products-block' ),
+							__( 'Select %s', 'woo-gutenberg-products-block' ),
 							attributeObject.label
 						) }
 						onChange={ ( tokens: string[] ) => {
@@ -611,24 +611,24 @@ const AttributeFilterBlock = ( {
 						isDisabled={ isDisabled }
 					/>
 				) }
-				<div className="wc-block-attribute-filter__actions">
-					{ checked.length > 0 && (
-						<FilterResetButton
-							onClick={ () => setChecked( [] ) }
-							screenReaderLabel={ __(
-								'Reset stock filter',
-								'woo-gutenberg-products-block'
-							) }
-						/>
-					) }
-					{ blockAttributes.showFilterButton && (
-						<FilterSubmitButton
-							className="wc-block-stock-filter__button"
-							disabled={ isLoading || isDisabled }
-							onClick={ () => onSubmit( checked ) }
-						/>
-					) }
-				</div>
+			</div>
+			<div className="wc-block-attribute-filter__actions">
+				{ checked.length > 0 && (
+					<FilterResetButton
+						onClick={ () => setChecked( [] ) }
+						screenReaderLabel={ __(
+							'Reset stock filter',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+				) }
+				{ blockAttributes.showFilterButton && (
+					<FilterSubmitButton
+						className="wc-block-stock-filter__button"
+						disabled={ isLoading || isDisabled }
+						onClick={ () => onSubmit( checked ) }
+					/>
+				) }
 			</div>
 		</>
 	);

diff --git a/assets/js/blocks/attribute-filter/style.scss b/assets/js/blocks/attribute-filter/style.scss
@@ -50,6 +50,30 @@
 		opacity: 0.6;
 	}
 
+	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
+		border: 1px solid $gray-700;
+		border-radius: 4px;
+		padding: $gap-smaller;
+
+		.components-form-token-field__input::placeholder {
+			color: $black;
+		}
+
+		.components-form-token-field__suggestions-list {
+			border: 1px solid $gray-700;
+			border-radius: 4px;
+			margin-top: $gap-smaller;
+			max-height: 21em;
+
+			.components-form-token-field__suggestion {
+				color: $black;
+				border: 1px solid $gray-400;
+				border-radius: 4px;
+				margin: $gap-small;
+				padding: $gap-small;
+			}
+		}
+	}
 }
 
 .wc-block-attribute-filter__multiple-toggle,