Skip to content

Fix styling of search icon in search filter#9631

Merged
OwainWilliams merged 1 commit intoumbraco:v8/contribfrom
bjarnef:v8/bug/umb-search-filter-styling
Jan 13, 2021
Merged

Fix styling of search icon in search filter#9631
OwainWilliams merged 1 commit intoumbraco:v8/contribfrom
bjarnef:v8/bug/umb-search-filter-styling

Conversation

@bjarnef
Copy link
Copy Markdown
Contributor

@bjarnef bjarnef commented Jan 10, 2021

Prerequisites

  • I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes #9541

Description

This PR fixes some styling issues with search icon inside search filter after the <umb-search-filter> component has been introduced and changed to <umb-icon> inside search filter component, where the icon-search was removed. I have kept to old class so it still looks nice if packages used the old markup.

It seems a bit unnecessary to have the w-100 class here
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less#L6-L8 since we already have the utility class here https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/utilities/_width.less#L24

but removing this + the html selector in the component styling, it seems the styling in forms.less is prioritized, so the padding was overwritten by forms.less styling.
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less#L14-L19

We can look at this in another PR. For now this should fix these styling issues.

Icon Picker
image

DataType Picker
image

Copy link
Copy Markdown
Contributor

@OwainWilliams OwainWilliams left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Thanks @bjarnef - This does indeed fix the issue.

@OwainWilliams OwainWilliams merged commit 16cd19e into umbraco:v8/contrib Jan 13, 2021
@bjarnef bjarnef deleted the v8/bug/umb-search-filter-styling branch January 15, 2021 11:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

umb-search-filter broken in "Select editor" window

3 participants