WIP: Search Overlay Button settings have no effect on the Close Button

Bugs
1

Browser: Chrome Version 147.0.7727.117 (Official Build) (64-bit)
OS: Windows 11

I am experiencing an issue with styling the Close Button of the Search element when the “Icon & Overlay” type is selected.

  1. Scope Clarification: Under Content tab → Overlay, there is a “Button” settings group (Width, Padding, Background, Typography, etc. - see Image 2). Are these controls specifically intended to style the Overlay’s “Close” button?

    image
    image795×543 40.4 KB

    image
    image654×992 64.5 KB

  2. Current Bug: If the answer is yes, these controls are currently not working. Changing the Typography or Background color within this panel has no effect on the Close button in the frontend; it remains at its default style.

  3. Current Workaround: To style the Close button, I am forced to create a custom element selector: .bricks-search-overlay button

    image
    image622×347 23.3 KB

Thanks

:bear:

2

Hi,
Thanks so much for your report!

The close icon uses the same styles as the search icon itself, which can be set under Button / Icon. The overlay button settings affect the search field’s submit button, as long as you’ve set a text.

It might be worth considering to adjust the grouping or the labels, because it’s not immediately clear what the settings do.

Best regards,
timmse

3

Hi @timmse ,

Thank you for the clarification, but I find the current logic leads to several inconsistencies and design limitations:

  1. Redundant Controls: When the “Icon & Overlay” type is selected, the “Text” input under the Button/Icon section has no effect on the frontend, yet its styles are applied to the Close button. This is counter-intuitive from a UX perspective.
  2. Ambiguous Scoping: - The “Button/Icon” section should be strictly for the initial Search trigger (Input/Button).

    • The “Overlay” section needs independent controls for:

      • Internal Input & Submit Button: Specific text and styling within the overlay.

      • Close Button: It currently inherits styles from the Open button, which is very restrictive.

  3. Icon Customization Gap: There is a clear need for independent Icon selection. What if a design requires a small “Search” icon to open the overlay, but a large, specific “X” icon to close it? Currently, we cannot choose a different icon or set a different size for the Close button specifically.

I highly recommend restructuring these setting groups. The Overlay Close button should have its own dedicated Icon selector and Style settings to provide the flexibility needed for modern web design.

Thanks

:bear:

4

As I said, it might make sense to name the labels a bit more clearly…

  1. It does. It’s the search button text.
  2. See 1 and my general opinion on considering to adjust the grouping/the labels :slight_smile:
  3. Separate controls would certainly be useful—for now, you can certainly use custom CSS to achieve this.

I’m going to create an improvement task :v:

5

Hi @timmse ,

Yep, that’s right. They should be reorganized like that. With more distinct customization options and placed correctly within the groups they belong to.

Thanks

:bear: