Bug 1500391 Comment 12 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Thanks for the feedback Matt! I have tried using a button and I think it might be worth keeping this for a follow up because it brings a few additional questions:

1) the photon docs suggest different background colors for the buttons in the warning message on :hover and :active:
   - hover is Yellow 70 #a47f00 
   - active is Yellow 80 #715100
   Knowing that the text color for warning messages is Yellow 90, the contrast is extremely bad for those two states. Should we use a different text color?

2) What should happen when the message is too long to fit the width of the container? should we force it to be on one line and add an ellipsis, should we go multiline and display the button centered next to it, multiline but button aligned top ?

+--------------------------------------+
| Test is too long but... [learn more] |
+--------------------------------------+

+--------------------------------------+
| Test is too long but we              | 
| can put it on several   [learn more] |
| lines so this is ok.                 | 
+--------------------------------------+

+--------------------------------------+
| Test is too long but we [learn more] | 
| can put it on several                |
| lines so this is ok.                 | 
+--------------------------------------+

There is a mention about this in https://firefox-dev.tools/photon/components/message-bars.html#warning (last item of the page). They suggest to break the button into a new line when the message is on multiple lines, but in my situation I don't know if the message will be on multiple lines (depends on localization + viewport width). Should I then assume multiline?

+--------------------------------------+
| Even if the text is short...         |
| [learn more]                         |
+--------------------------------------+
Thanks for the feedback Matt! I have tried using a button and I think it might be worth keeping this for a follow up because it brings a few additional questions:

1) the photon docs suggest different background colors for the buttons in the warning message on :hover and :active:
   - hover is Yellow 70 #a47f00 
   - active is Yellow 80 #715100
   Knowing that the text color for warning messages is Yellow 90, the contrast is extremely bad for those two states. Should we use a different text color?

2) What should happen when the message is too long to fit the width of the container? should we force it to be on one line and add an ellipsis, should we go multiline and display the button centered next to it, multiline but button aligned top ?

```
+--------------------------------------+
| Test is too long but... [learn more] |
+--------------------------------------+

+--------------------------------------+
| Test is too long but we              | 
| can put it on several   [learn more] |
| lines so this is ok.                 | 
+--------------------------------------+

+--------------------------------------+
| Test is too long but we [learn more] | 
| can put it on several                |
| lines so this is ok.                 | 
+--------------------------------------+
```

There is a mention about this in https://firefox-dev.tools/photon/components/message-bars.html#warning (last item of the page). They suggest to break the button into a new line when the message is on multiple lines, but in my situation I don't know if the message will be on multiple lines (depends on localization + viewport width). Should I then assume multiline?

```
+--------------------------------------+
| Even if the text is short...         |
| [learn more]                         |
+--------------------------------------+
```

Back to Bug 1500391 Comment 12