Skip to content

V8: fix umb-form-check icon z-index to bring icon to top#10872

Closed
nathanwoulfe wants to merge 1 commit intoumbraco:v8/contribfrom
nathanwoulfe:v8/form-check-icon-zindex
Closed

V8: fix umb-form-check icon z-index to bring icon to top#10872
nathanwoulfe wants to merge 1 commit intoumbraco:v8/contribfrom
nathanwoulfe:v8/form-check-icon-zindex

Conversation

@nathanwoulfe
Copy link
Copy Markdown
Contributor

Prerequisites

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

Relates to #10805

Description

The tick icon in the umb-form-check was sitting underneath the ::before pseudo element, so was not visible. Setting the z-index to a non-zero value bumps it back to the top.

@nul800sebastiaan given this was introduced in #10805, it should be included in the same release, being 8.17.

.icon,
.umb-icon {
font-size: 1.2rem;
z-index: 1;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@nathanwoulfe maybe we should add this to umb-form-check__icon which also set opacity: 1;
//cc @nul800sebastiaan

@bjarnef
Copy link
Copy Markdown
Contributor

bjarnef commented Aug 17, 2021

A few other things I noticed.

Grid add icon - seem to be fixed with line-height: 1;

image

Icons in media picker

image

@bjarnef
Copy link
Copy Markdown
Contributor

bjarnef commented Aug 17, 2021

Picture/Image icons not ideal aligned.

image

@bjarnef
Copy link
Copy Markdown
Contributor

bjarnef commented Aug 17, 2021

I also noticed a minor issue in <umb-block-card> where icon doesn't seen to inherit the color.

image

Mostly it is minor alignment or sizing issues though ☺

@nathanwoulfe
Copy link
Copy Markdown
Contributor Author

@bjarnef well spotted, I'll look at those too - some of the SVG icons may be slightly different sizes to the icon-font equivalent.

The block icon one will be due to setting color rather than fill/stroke

@bjarnef
Copy link
Copy Markdown
Contributor

bjarnef commented Aug 17, 2021

@nathanwoulfe that is taken care of here: https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/less/components/umb-icon.less#L10

A workaround, but there might be a better way to handle this 😅

image

Usually in inherits the color from the color class, but in this specific case it use inline style, but not inherited to the nested SVG here.

Another workaround is to remove the color class in this scenario passed in as part of the icon name: https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/components/blockcard/umb-block-card.html#L6

image

@bjarnef
Copy link
Copy Markdown
Contributor

bjarnef commented Aug 18, 2021

I fixed and cleaned up some stuff regarding block card icon in #10894

I also fixed some other issues with <umb-file-icon> in #10895

@umbrabot
Copy link
Copy Markdown

Hi there @nathanwoulfe!

Thanks for the contribution here and apologies if it has been a while since you heard from us. We have been in the very fortunate position of having lots of work to do. With this in mind, we are writing to let you know that with the release of the Long Term Support (LTS) version, 8.18, we have now moved into the support phase of Umbraco 8. You can read all about that here but to surmise, we will be keeping Umbraco 8 safe and well by releasing patching for security or regression issues if they arise but no longer will we do that for bug fixes. The same is still true for features, although we stopped merging those some time ago.

We'd love for you to keep contributing and while we are not able to merge this to Umbraco 8, if this is still something you'd like to see in Umbraco 9, please take a look and either create an issue to say so or find an issue that already exists. We'll be happy to give you some input around how you can adjust your pull request to target Umbraco 9. Even better, it might be something that Umbraco 9 already does or has. In which case, enjoy!

Once again, a huge thank you for the time you have spent working with us.

#H5YR
Your friendly Umbraco GitHub bot 🤖 🙂

@umbrabot umbrabot closed this Feb 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants