fluentui-system-icons icon indicating copy to clipboard operation
fluentui-system-icons copied to clipboard

Published 20 hours ago • verified publisher icon microsoft

BUG: stylesheets mapping classes to glyphs clash with each other

Open dmoncada opened this issue 4 years ago • 1 comments

Repro steps

  1. Pull down the fonts and css files from the Fluent UI System Icons repo (both "regular" and "filled".)
  2. Import both "regular" and "filled" fonts/css files in an html file.
  3. Pick an arbitrary icon and its css class, print both "regular" and "filled" versions in the html. For example:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="FluentSystemIcons-Regular.css" />
    <link rel="stylesheet" href="FluentSystemIcons-Filled.css" />
  </head>
  <body>
    <h1>Test</h1>
    <div>
      <span>Regular: </span>
      <span><i class="icon-ic_fluent_airplane_24_regular"></i></span>
    </div>
    <div>
      <span>Filled: </span>
      <span><i class="icon-ic_fluent_airplane_24_filled"></i></span>
    </div>
  </body>
</html>

Expectation

Both "regular" and "filled" versions of the icon are rendered correctly.

Actual

In the example above, the "filled" version of the icon is rendered twice.

Root cause

In the example above, the icon-ic_fluent_airplane_24_regular class is matched by both the "regular" and "filled" css rules at the same time. That happens because both the *-Regular.css and *-Filled.css files are using the exact same rule, that is, they do not distinguish if the class being applied ends in either _regular or _filled:

i[class^="icon-"]:before, i[class*=" icon-"]:before

As a result, the FluentSystemIcons-Filled font is applied to the <i> element, resulting in a "filled" icon being shown (when a "regular" one was requested.)

Potential solution

Update the css rules to determine if the class ends in either _regular or _filled:

/* In *-Regular.css */
i[class^="icon-"][class$="regular"]:before,
i[class*=" icon-"][class$="regular"]:before { ...

/* In *-Filled.css */
i[class^="icon-"][class$="filled"]:before,
i[class*=" icon-"][class$="filled"]:before { ...

Notice, however, that the proposed update would not handle correctly the case where multiple css classes are being applied but the icon-ic_something class is not the last one in the list. For example:

<i class="icon-ic_fluent_airplane_24_filled some-other-class"></i>

So maybe the css rules can be updated to use a more sophisticated matching rule, to account for this as well. Unfortunately, not being an expert on css, I would not know how to write such a rule.

dmoncada avatar May 11 '21 21:05 dmoncada

Pinging @willhou, as he seems to be the one who initially added these css files.

dmoncada avatar May 11 '21 21:05 dmoncada