Page MenuHomePhabricator

Step 1: Click on warning icon and get an explanation of what is wrong
Closed, ResolvedPublic13 Estimated Story Points


As an editor I want to understand what the warning icon means in order to fix it/make it go away.

Currently when seeing the “potential issues” icon I don’t know what the problem with my statement is. We should give you more context and explanation in a popper.


Spec: All like the constraint violation popper. It should look and behave the same.

GIVEN The icon is visible
AND I click on it
THEN a popper opens up
AND there is an explanation text ("The value changed, but the reference remained the same.")

GIVEN The popper is open
AND I click anywhere outside the modal, on the x or press ESC
THEN the popper closes

Acceptance criteria:

  • popper pops up when clicking the potential issues icon
  • popper closes when clicking outside the popper or x or pressing ESC
  • a click on any other keys are not part of this story and will be left out
  • assume the text on the popper will be static

Event Timeline

darthmon_wmde set the point value for this task to 13.Sep 3 2019, 9:10 AM

@Jan_Dittrich @Erdinc_Ciftci_WMDE Can you please add the mockup and proposed text?

ping @Jan_Dittrich @Erdinc_Ciftci_WMDE. We would appreciate final details for the mock up and the copy for the popper contents.

I added the mock. I can add the spec details if it helps, but I would just pick them via dev tools from the constraint violation popper, too, so I guess me writing them here is more tedious and more error prone. If not, just tell me.

This is the smallest story unit, do not break down further

Lydia_Pintscher renamed this task from Click on warning icon and get an explanation of what is wrong to Step 1: Click on warning icon and get an explanation of what is wrong.Oct 11 2019, 10:30 AM

FYI this looks like

in constraints

Final figma mock up to follow.

Changes to be included in the story, compared to the mock up in the state when writing these words:

  • X button in the corner, closing the popper
  • line element beyond the header
  • changes to the content of the popper, to possibly not contain any links. It looks there should be no link at this moment.
  • there should no "repeated title" in the content of the popper. The title should be "Potential reference/value mismatch"
  • colours and font will be specified in figma

final figma mockup is pasted in the ticket. It is to be found where the previous mockup has been.

As per story time discussion

Stuff we might want to fix includes:

"text of in the popper"
"The X"
"Placeholder text for the property"
"Capitalization of the heading" - should be consistent with Quality Constraints
Some spacing alignment; left and right margins
Styling of the texts

Hey team, I got a bit confused and need your help:

I'm guessing that we have to apply fixes to the popper developed in QA because we are creating the component from scratch instead of reusing the Property violation that correct? If so, I'd need to inspect the Constraint violation popper to make sure we're not making anything up in the design, and I'm not finding any examples on WD :( I'm sure you can help with that.

This is unless you want to redo this component a little bit, this time following Design system specs, in order to get it ready to be reused in the future 😄

Thanks for the link, @Lydia_Pintscher! This was quite a hideous task, but I believe I extracted the basic styles/spacing from the existing OOUI popper. You can find the specs in this Figma file, under "Design specs A: OOUI".

Still, I need to advise against creating yet another one-off component. We have the opportunity to create a version of the popper that is more in line with the basic design system principles (Please see "Design specs B" in that same file). This would prep this vue component to be integrated in the system, fostering its reusability. Moving in this direction means, though, that we'll have two (not too) different versions of the popper coexisting in production for an easy to estimate period of time, but at least we'll reduce the number of "places" where the component will need to be substituted in the future.