Page MenuHomePhabricator

Finish Styling Popper
Closed, ResolvedPublic

Description

We decided we will style the popper according to option B from: https://www.figma.com/file/eTg3ZdtUM50gGZJlEHyIVH/taintedReferences?node-id=0%3A1

Still need to fix the position of the "x" icon to be just right. I.e. not overlapping with the horizontal line and a little closer to the right hand side.

Event Timeline

Change 556229 had a related patch set uploaded (by Rosalie Perside (WMDE); owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@master] Add styles to tainted reference popper

https://gerrit.wikimedia.org/r/556229

Change 556229 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Add styles to tainted reference popper

https://gerrit.wikimedia.org/r/556229

Change 556409 had a related patch set uploaded (by Addshore; owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@wmf/1.35.0-wmf.10] Add styles to tainted reference popper

https://gerrit.wikimedia.org/r/556409

Hi there! I cannot properly inspect the popper in Beta, but I can notice it needs just a couple adjustment to follow the specs. Moving this task to "To Do" as indicated by @Lydia_Pintscher

Component in beta:

popper_beta.png (426×932 px, 50 KB)

Design with specs (fixes are outlined):

specs.png (514×1 px, 122 KB)

Changes in a nutshell (by order of importance):

  • The close button should contain an icon instead of text. I believe you already created a ticket to fix this. Do you need me to provide an svg? Please let me know
  • The spacing between the body and bottom text should be of only 8px.
  • The size of the popper title and the body font should be 14px/ 22px (line-height) in both cases.
  • The title shouldn't be capitalized (my bad!!)

Change 556640 had a related patch set uploaded (by Rosalie Perside (WMDE); owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@master] Fix tainted references popper title

https://gerrit.wikimedia.org/r/556640

Change 556409 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@wmf/1.35.0-wmf.10] Add styles to tainted reference popper

https://gerrit.wikimedia.org/r/556409

Change 556640 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Fix tainted references popper title

https://gerrit.wikimedia.org/r/556640

Change 556663 had a related patch set uploaded (by Tarrow; owner: Tarrow):
[mediawiki/extensions/Wikibase@master] TR: Adjust placing and spacing of feedback link

https://gerrit.wikimedia.org/r/556663

Change 556663 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] TR: Adjust placing and spacing of feedback link

https://gerrit.wikimedia.org/r/556663

Change 556710 had a related patch set uploaded (by Tarrow; owner: Tarrow):
[mediawiki/extensions/Wikibase@master] TR: Fix line heights

https://gerrit.wikimedia.org/r/556710

Change 556714 had a related patch set uploaded (by Addshore; owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@wmf/1.35.0-wmf.10] Fix tainted references popper title

https://gerrit.wikimedia.org/r/556714

Change 556715 had a related patch set uploaded (by Addshore; owner: Tarrow):
[mediawiki/extensions/Wikibase@wmf/1.35.0-wmf.10] TR: Adjust placing and spacing of feedback link

https://gerrit.wikimedia.org/r/556715

Change 556717 had a related patch set uploaded (by Addshore; owner: Tarrow):
[mediawiki/extensions/Wikibase@wmf/1.35.0-wmf.10] TR: Fix line heights

https://gerrit.wikimedia.org/r/556717

Change 556710 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] TR: Fix line heights and close icon size

https://gerrit.wikimedia.org/r/556710

Change 557845 had a related patch set uploaded (by Rosalie Perside (WMDE); owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@master] TR: Fix line Space between help link and popper text

https://gerrit.wikimedia.org/r/557845

Change 556714 abandoned by Addshore:
Fix tainted references popper title

Reason:
Plan is no longer to backport these per mattermost discussion.

https://gerrit.wikimedia.org/r/556714

Change 556715 abandoned by Addshore:
TR: Adjust placing and spacing of feedback link

Reason:
Plan is no longer to backport these per mattermost discussion.

https://gerrit.wikimedia.org/r/556715

Change 556717 abandoned by Addshore:
TR: Fix line heights

Reason:
Plan is no longer to backport these per mattermost discussion.

https://gerrit.wikimedia.org/r/556717

Change 557845 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] TR: Fix line Space between help link and popper text

https://gerrit.wikimedia.org/r/557845

Change 558065 had a related patch set uploaded (by Rosalie Perside (WMDE); owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@master] TR:Change <span/> to <button/> for the popper close button

https://gerrit.wikimedia.org/r/558065

Change 558065 abandoned by Rosalie Perside (WMDE):
TR:Change <span/> to <button/> for the popper close button

Reason:
this change I85d2ba1f7a32f04b4039503d21cfc1a839df89c6 will have the html tag change in it

https://gerrit.wikimedia.org/r/558065

Change 558481 had a related patch set uploaded (by Rosalie Perside (WMDE); owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@master] Remove on focus property on close button

https://gerrit.wikimedia.org/r/558481

Change 558560 had a related patch set uploaded (by Rosalie Perside (WMDE); owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@master] TR: Add close on ESC key press and finish styling the popper close button

https://gerrit.wikimedia.org/r/558560

Change 558560 abandoned by Rosalie Perside (WMDE):
TR: Add close on ESC key press and finish styling the popper close button

https://gerrit.wikimedia.org/r/558560

Change 558570 had a related patch set uploaded (by Rosalie Perside (WMDE); owner: Rosalie Perside (WMDE)):
[mediawiki/extensions/Wikibase@master] TR: Add close on ESC key press and finish styling the popper close button

https://gerrit.wikimedia.org/r/558570

Change 558481 abandoned by Rosalie Perside (WMDE):
Remove on focus property on close button

https://gerrit.wikimedia.org/r/558481

Change 558570 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] TR: Add close on ESC key press and finish styling the popper close button

https://gerrit.wikimedia.org/r/558570

Change 559454 had a related patch set uploaded (by Tarrow; owner: Tarrow):
[mediawiki/extensions/Wikibase@master] TR: Adjust style again

https://gerrit.wikimedia.org/r/559454

Put up one more which hopefully gets us bang on the spec apart form these odd artefacts (a little tiny vertical line by the help link) that I don't understand. If anyone has any idea then I'd be happy to know about it:

image.png (145×516 px, 9 KB)

Change 559454 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] TR: Adjust style again

https://gerrit.wikimedia.org/r/559454