1577655 - [Dismiss Wrapper] Change button visibility, button positioning, and back transition duration

Status: VERIFIED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Description

[Wolasi :wolasi]

Please make the following changes

Button Tweaks

• Change margins on .ds-dismiss .ds-dismiss-button to margin: 18px 18px 0 0;
• Button should always be visible, remove opacity property
• Add hover, press, and focus states per spec https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=97%3A18
• Change transition-duration for background on .ds-dismiss to 200ms

Comment 1

[Wolasi :wolasi]

Also, let's add a text label for accessibility. Label should be "Dismiss"

Comment 2

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5306

Comment 4

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/f70ae5522218

Comment 5

[Andreea Cupsa [:acupsa], Experiments QA]

Attachment: image_2019_10_07T10_37_44_217Z.png

I have verified this issue on Latest Firefox Nightly 71.0a1 (Build ID: 20191006214844) on Windows 10 x64, Mac 10.14.6 and Arch Linux 4.16.6 x64.
I have verified the following button tweaks and can confirm that:

• That the "Dismiss" button is always reproducible and no longer has the opacity property.
• The "Dismiss" button has a hover/press and focus state as per the design specifications.
• The transition-duration for the background is set to 200ms.

However, even if the margin for .ds-dismiss .ds-dismiss-button is set to the right value (margin: 18px 18px 0 0;), it seems that .ds-dismiss-ds-text-promo .ds-dismiss-button has higher priority than .ds-dismiss .ds-dismiss-button therefore overwriting the margin to 16px. I am attaching a screenshot.
@gsuntop, is this intended?

Comment 6

[Gavin Suntop [:gvn] (they/them)]

Good catch. Yes that should be margin: 18px 18px 0 0 not margin: 16px as overridden.

Comment 7

[Andreea Cupsa [:acupsa], Experiments QA]

As per the comments above (Comment 5 and Comment 6) this issue is only partially fixed.
Considering this I will reopen this issue.

Comment 8

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5351

Comment 9

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/98f2e390e85d

Comment 10

[Andreea Cupsa [:acupsa], Experiments QA]

I have verified this issue on Latest Firefox Nightly 71.0a1 (Build ID: 20191021095628) on Windows 10 x64, Mac 10.14.6 and Arch Linux 5.3.6 x64.
I have verified the following button tweaks and can confirm that:

• That the "Dismiss" button is always visible and no longer has the opacity property.
• The "Dismiss" button has a hover/press and focus state as per the design specifications.
• The transition-duration for the background is set to 200ms.
• The margin for .ds-dismiss .ds-dismiss-button is set to the right value: 18px 18px 0 0;