| Jdlrobson | |
| Jun 16 2023, 6:02 PM |
| F37125109: Screenshot 2023-06-30 at 5.38.55 PM.png | |
| Jul 1 2023, 12:48 AM |
| F37125107: Screenshot 2023-06-30 at 5.36.59 PM.png | |
| Jul 1 2023, 12:48 AM |
| F37125103: Screen Recording 2023-06-30 at 5.32.33 PM.mov.gif | |
| Jul 1 2023, 12:48 AM |
| F37111381: Screenshot 2023-06-21 at 11.23.37 AM.png | |
| Jun 21 2023, 6:23 PM |
| F37111291: image.png | |
| Jun 21 2023, 4:02 PM |
| F37111285: image.png | |
| Jun 21 2023, 4:02 PM |
| F37111287: image.png | |
| Jun 21 2023, 4:02 PM |
| F37110532: Screenshot 2023-06-20 at 3.14.28 PM.png | |
| Jun 20 2023, 7:16 PM |
The first pass of the IP masking banner was done in T330510.
There are 2 known problems with the design that didn't meet the original spec
Note: The button in Minerva mobile skin will appear unstyled on page load. This is expected until work on T319260 is done.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Jdlrobson | T335440 [EPIC] Web team support for IP masking | |||
| Resolved | Jdlrobson | T339379 Follow up work: Iterate on IP masking banner |
Change 931622 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):
[mediawiki/core@master] [WIP] Temporary user banner - tooltip styling
Some thoughts on next steps for this ticket:
We're going to have to modify this design slightly in order to limit the implementation to CSS & HTML.
By using the <details> & <summary> elements we get the popup behaviour & accessibility for free, but the downside is that the tooltip will only open and close by clicking the info icon (i.e. the <summary> element). That means clicking anywhere else on the page will not close the popup.
In the patch below, I've created a version where the info icon changes into a close icon when the tooltip is open.
Would this be an acceptable compromise?
 |  |
Test wiki created on Patch demo by RHo (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/12a1e3184e/w
Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/a78b999a52/w
@RHo apologies, forgot to push an edit to the patch, this patchdemo is (slightly) more presentable: https://patchdemo.wmflabs.org/wikis/a78b999a52/wiki/Main_Page
Thanks Jan! See comments/questions below..
We're going to have to modify this design slightly in order to limit the implementation to CSS & HTML.
By using the <details> & <summary> elements we get the popup behaviour & accessibility for free, but the downside is that the tooltip will only open and close by clicking the info icon (i.e. the <summary> element). That means clicking anywhere else on the page will not close the popup.
In the patch below, I've created a version where the info icon changes into a close icon when the tooltip is open.
Would this be an acceptable compromise?
My intention for MVP is to use existing components as much as possible, so had thought this would reuse the existing OOUI PopUpButtonWidget component until the Pop-up. Am I understanding correctly that this cannot/should not use that component? If that is incorrect, but it's the specific version of this with the close inside is problematic, I would be open to simplifying by using the version of this tooltip without the close at all. Basically use the same thing that is on the Special:Preferences > Notifications page:
| PopUpButtonWidget/Tooltip on Preferences | Desktop  | Mobile  |
The reason this would be preferred is for simplicity and not introducing a new interaction pattern (close replacing info icon). I am also wondering about keyboard accessibility as in the patchdemo it seems that the esc key doesn't close the popup, (but does work on the Preferences one). Second question is if the Mobile version requires more work to customise here than it would to use something OOTB?
Ideally I was hoping this would reuse the OOUI PopUpButtoWidget and looks like it is in the Codex Planned components as Tooltip, so should this be added as use-case to T280677?
We talked about this today. Vector is currently using OOUI for popups but the code for this needs to apply to all skins including Minerva (and Minerva does not use OOUI for performance reasons). On the long term we need to get this component added to Codex. It's not clear what the best short term plan is here - we can either use OOUI with a performance penalty or work on a new component inside core, with the eventual goal to replace either implementations with Codex.
Personally given the timeline for Codex, it seems like the path of shortest resistance might be to use OOUI short and swap it out with Codex before roll out.
Change 933496 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):
[mediawiki/core@master] Improve mobile layout for temporary account banner
Change 933507 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[mediawiki/core@master] Hide temporary banner in print
In further discussing this, the consensus was that it makes sense to use the OOUI component short term, while Design-System-Team will consider the Tooltip (T340456) a high priority component, with the expectation that it be swapped out in the banner when available.
Change 933496 merged by jenkins-bot:
[mediawiki/core@master] Improve mobile layout for temporary account banner
Change 933507 merged by jenkins-bot:
[mediawiki/core@master] Hide temporary banner in print
Change 934418 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):
[mediawiki/skins/Vector@master] Remove "interface-temp-user-banner" option
Change 934419 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Remove "interface-temp-user-banner" option
Change 934418 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Remove "interface-temp-user-banner" option
Change 934419 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Remove "interface-temp-user-banner" option
Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f48d2ebcba/w
Change 931622 merged by jenkins-bot:
[mediawiki/core@master] Create mediawiki.tempUserBanner module
Change 934573 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):
[mediawiki/core@master] Improve mobile layout for temp-user-banner
Change 934573 merged by jenkins-bot:
[mediawiki/core@master] Improve mobile layout for temp-user-banner
Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/07348a6a02/w
Status: ✅ PASS
Environment: patchdemo
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA
Test Artifact(s):
@Jdlrobson, the "buttons" are responsive but have lost their styling. I'm assuming that is the scope of another task but bringing your attention to it here just in case it isn't.
✅ AC1: The banner is responsive
 |
✅ AC2: Per the design the buttons should be on a new line:
see above
✅ AC3: There is a tooltip
✅ AC4: Displayed in printed PDF
Test wiki on Patch demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:
Test wiki on Patch demo by RHo (WMF) using patch(es) linked to this task was deleted:
Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:
Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted: