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

BDD
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

mocks
desktop

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

mobile

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

Notes:

• 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