Bug 1656706 - Fix prefixed properties being displayed incorrectly in the Compatibility panel, for RTL r=daisuke

Differential Revision: https://phabricator.services.mozilla.com/D85663
This commit is contained in:
Itiel 2020-08-06 03:36:28 +00:00
parent 64cfd65a62
commit 2f84734040
3 changed files with 24 additions and 1 deletions

View File

@ -101,7 +101,15 @@ class IssueItem extends PureComponent {
{
className: "compatibility-issue-item__aliases",
},
aliases.map(alias => dom.li({ key: alias }, alias))
aliases.map(alias =>
dom.li(
{
key: alias,
className: "compatibility-issue-item__alias",
},
alias
)
)
);
}

View File

@ -59,11 +59,13 @@ exports[`IssueItem component renders a prefixNeeded issue of CSS property 1`] =
className="compatibility-issue-item__aliases"
>
<li
className="compatibility-issue-item__alias"
key="test-alias-1"
>
test-alias-1
</li>
<li
className="compatibility-issue-item__alias"
key="test-alias-2"
>
test-alias-2
@ -131,11 +133,13 @@ exports[`IssueItem component renders an issue which has deprecated and experimen
className="compatibility-issue-item__aliases"
>
<li
className="compatibility-issue-item__alias"
key="test-alias-1"
>
test-alias-1
</li>
<li
className="compatibility-issue-item__alias"
key="test-alias-2"
>
test-alias-2
@ -174,11 +178,13 @@ exports[`IssueItem component renders an issue which has deprecated and prefixNee
className="compatibility-issue-item__aliases"
>
<li
className="compatibility-issue-item__alias"
key="test-alias-1"
>
test-alias-1
</li>
<li
className="compatibility-issue-item__alias"
key="test-alias-2"
>
test-alias-2
@ -217,11 +223,13 @@ exports[`IssueItem component renders an issue which has deprecated, experimental
className="compatibility-issue-item__aliases"
>
<li
className="compatibility-issue-item__alias"
key="test-alias-1"
>
test-alias-1
</li>
<li
className="compatibility-issue-item__alias"
key="test-alias-2"
>
test-alias-2
@ -260,11 +268,13 @@ exports[`IssueItem component renders an issue which has experimental and prefixN
className="compatibility-issue-item__aliases"
>
<li
className="compatibility-issue-item__alias"
key="test-alias-1"
>
test-alias-1
</li>
<li
className="compatibility-issue-item__alias"
key="test-alias-2"
>
test-alias-2

View File

@ -114,6 +114,7 @@
.compatibility-issue-item__mdn-link {
color: var(--theme-highlight-blue);
text-decoration: none;
unicode-bidi: plaintext;
}
.compatibility-issue-item__aliases {
@ -124,6 +125,10 @@
padding-block-end: var(--compatibility-base-unit);
}
.compatibility-issue-item__alias {
unicode-bidi: plaintext;
}
.compatibility-unsupported-browser-list {
list-style: none;
padding: 0;