[fix] Restrict tag class scope

[domq]

This fixes a CSS clash since class="tag" is not exactly rare, as seen for instance on the screenshot below (for Storybook).

[rosamaggi]

[github-actions]

Unit Test Results

    1 files      1 suites   0s ⏱️
267 tests 250 ✔️ 0 💤   0 ❌ 17 🔥
267 runs  233 ✔️ 0 💤 17 ❌ 17 🔥

For more details on these errors, see this check.

Results for commit 093a21b.

♻️ This comment has been updated with latest results.

[github-actions]

🔎 Download the Backstop report for this pull request (link valid for 90 days):

• backstop-report.zip

[domq]

🔎 Download the Backstop report for this pull request (link valid for 90 days):

* [backstop-report.zip](https://nightly.link/epfl-si/elements/actions/artifacts/1108741094.zip)

I eyeballed the Backstop report and could only find false positives, such as this one.

[williambelle]

If the storybook code is like this:

<div class="language-jsx css-1lwmlsb" style="white-space: pre;">
  <span class="token punctuation">{</span><span class=""> </span><span class=""> </span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class=""> </span>
  <span class="token punctuation">{</span><span class=""> </span><span class=""> </span><span class="token keyword control-flow">return</span><span class=""> </span><span class="token tag punctuation">&lt;</span>
  <span class="token tag class-name">Button</span><span class="token tag punctuation">&gt;</span><span class="token plain-text"> </span><span class="token plain-text"> </span><span class="token tag punctuation">&lt;</span>
  <span class="token tag">svg</span><span class="token tag"> </span><span class="token tag attr-name">className</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span>
  <span class="token tag attr-value">icon</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">aria-hidden</span>
  <span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">true</span><span class="token tag attr-value punctuation">"</span>
  <span class="token tag punctuation">&gt;</span><span class="token plain-text"> </span><span class="token plain-text"> </span><span class="token tag punctuation">&lt;</span><span class="token tag">use</span><span class="token tag"> </span>
  <span class="token tag attr-name">xlinkHref</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span>
  <span class="token tag script language-javascript template-string template-punctuation string">`</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation">${</span>
  <span class="token tag script language-javascript template-string interpolation">featherIcons</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation">}</span>
  <span class="token tag script language-javascript template-string string">#save</span><span class="token tag script language-javascript template-string template-punctuation string">`</span>
  <span class="token tag script language-javascript punctuation">}</span><span class="token tag"> </span><span class="token tag punctuation">/&gt;</span><span class="token plain-text"> </span><span class="token plain-text"> </span>
  <span class="token tag punctuation">&lt;/</span><span class="token tag">svg</span><span class="token tag punctuation">&gt;</span><span class="token plain-text"> </span><span class="token plain-text"> </span>
  <span class="token tag punctuation">&lt;</span><span class="token tag">span</span><span class="token tag"> </span><span class="token tag attr-name">style</span>
  <span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript punctuation">{</span>
  <span class="token tag script language-javascript"> </span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript literal-property property">marginLeft</span>
  <span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'5px'</span>
  <span class="token tag script language-javascript"> </span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript punctuation">}</span>
  <span class="token tag script language-javascript punctuation">}</span><span class="token tag punctuation">&gt;</span><span class="token plain-text">Label</span><span class="token tag punctuation">&lt;/</span>
  <span class="token tag">span</span><span class="token tag punctuation">&gt;</span><span class="token plain-text"> </span><span class="token plain-text"> </span><span class="token tag punctuation">&lt;/</span>
  <span class="token tag class-name">Button</span><span class="token tag punctuation">&gt;</span><span class="token punctuation">;</span><span class=""> </span><span class=""> </span><span class="token punctuation">}</span>
  <span class=""> </span><span class=""></span><span class="token punctuation">}</span>
</div>

and we add span.tag, isn't that equal to what you already have?

[rosamaggi]

Yes, It doesn't correct the problem in storybook. So I commit directly a fix in the epfl-element-react project:
epfl-si/epfl-elements-react@85f3297

[domq]

If the storybook code is like this: [...]
and we add span.tag, isn't that equal to what you already have?

That is correct, but I still think the PR has merit, as we shouldn't spray all the CSS styles over any and all things that have class="tag". While this indeed doesn't solve the storybook case, this PR applies the narrowest possible containment to .tag styles without breaking the promises stated in the elements documentation.

[williambelle]

I think we need to add div and p.

Tag input

elements/assets/components/atoms/tag/tag-input.js

Line 7 in cd5053e

item: (data, escape) => `<div class="tag tag-primary">${escape(data.text)}</div>`,

Graph Search

elements/assets/components/content-types/graph-search/graph-search.twig

Line 4 in cd5053e

<p class="tag tag-sm bg-light border-light mb-2"><strong>Concepts</strong></p>

[domq]

I think we need to add div and p.

Done. Apologies for not spotting that in Backstop.