Page MenuHomePhabricator

Add editing widget/input to client edit modal
Closed, ResolvedPublic13 Estimated Story Points


As a Wikidata Bridge tester I want to see what editing a value would look like without saving it yet.

GIVEN a Wikidata Bridge enabled template
WHEN clicking an edit link
THEN a modal opens showing the current value from the repository and the associated Property ID
AND I can change the value


desktop_full.png (483×500 px, 14 KB)

whitespace is where the scrollbar would go. if adding this to the mocks makes no sense from your perspective, please let me know


mobile_full.png (595×375 px, 16 KB)

Break points:
Mainly just at width 500px where it goes from floaty modal to full screen.
Everything larger in width/height has no impact on the modal size.
Everything smaller in height shrinks the modal. Content is reachable by scrolling.
Everything smaller in width takes away padding until a minimum of 20px (turquoise) on the left and right side are left. After that the text fields will be reduced in width.

for more details and specs, see figma mocks
for behavior of buttons/input widgets, please see "Dialogs -> process dialog (medium)" in the OOUI demos (at this point the docs are outdated)

Acceptance criteria:

  • there is an editable value field in the client modal
  • the ID of the Property is shown as input field label
  • It works for Properties of datatype string; for unsupported Property datatypes, show an error message (hard-coded for now)
  • Look as specified in figma and add created components to story book
  • The feature has browser tests


  • Behaviour for multiple values is not part of the Acceptance criteria but will be in a follow-up story, in case that changes something for the implementation
  • please have a look at the OOUI TextInputWidget and how it behaves when active vs not active. The state in the mocks is the active state.
  • the X (cancel button) can currently be found under "Dialogs -> process dialog (medium)" in the OOUI demos (not yet under widgets). For behavior on hover etc. please check there
  • for details on when the "publish changes" button in enabled vs disabled, please see the MVP 1.1 section on the main figma page (Bridge MVP)
  • When the modal opens the InputWidget is in focus and active (blue border, cursor inside the field)
  • It can be made off-focus i.e. normal state(?) when clicking inside the modal but outside the widget
  • there is TermTextField in termbox which implements the "growing text field" in vue

Event Timeline

Charlie_WMDE renamed this task from Add editing widgets/inputs to client edit popup to Add editing widgets/inputs to client edit modal.Jul 4 2019, 4:00 PM
Charlie_WMDE updated the task description. (Show Details)

Yes it is one particular step towards that epic.

Lydia_Pintscher renamed this task from Add editing widgets/inputs to client edit modal to Add editing widget/input to client edit modal.Jul 11 2019, 9:05 AM
Lucas_Werkmeister_WMDE set the point value for this task to 13.

I just realized we did not talked about character limit of the input field -> is that part of this story?

@Matthias_Geisler_WMDE Good question, I think it should be. The character limit should be taken from Wikidata, where depending on the property (?) the character limit is determined.

From the UI side, I added a screenshot of how the inout widgets should behave, when the input length exceeds the horizontal space

As discussed in the daily today let's move the limit into a new story. I'l open one.

There is still the scrollbar in the input field which is kinda meh:

scrollbar.png (150×768 px, 6 KB)

I cannot reproduce this - not with chrome, chromium, firefox or opera.