Blue dots - SharePoint list enhancements

[paylord]

Hello,

I have used Fabric UI to style some custom SharePoint online navigation. I reference a local copy of fabric.min.css (v11) so it can be shared by both modern and classic pages.

With the recent SharePoint list enhancements that have rolled out we have started seeing blue dots appearing above the list column headings - as per https://answers.microsoft.com/en-us/msoffice/forum/all/blue-dots-above-a-document-library/7f884139-a269-49b1-b9b0-32e2c849daf6.

Please see attached images.

It would appear that the "display: inline-block" applied to ms-Icon through the above CSS is conflicting with the new hover effect icons to allow adding new columns.

Is this something that needs to be fixed in Fabric UI, an issue with the way the list enhancements have been deployed or a problem with the way I am using it?

Thanks

Dave

[lworkman]

Also ran into this problem. We fixed it by bundling fabric as a scoped import into out sass files.

It'd be great if this conflict was fixed, or if the SharePoint fabric styles were publicly available via an updated CDN. It's hard to develop comprehensive solutions for SharePoint when the target keeps changing.

[Jahnp]

Hey folks, can you share which version(s) of Fabric React you're using? This should have been fixed in microsoft/fluentui#11524 and included in [email protected]. The issue is likely related to the Fabric React icon sharing a class name with Fabric Core's .ms-Icon class, causing conflicts like microsoft/fluentui#11393)

[lworkman]

We weren't using the fabric react library, just the hosted style sheet (https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css) since we only needed the icons and didn't want to worry about compatibility.

[paylord]

@Jahnp Yep - same here - v11 of core. As you can see from my images above it certainly seems to be the ms-Icon which has a conflict.

[pratikgupta2]

CSS hack to prevent this along with any office UI fabric

[data-icon-name="CircleShapeSolid"]{ display: none !important; }