Page MenuHomePhabricator

Create RadioButton component
Closed, ResolvedPublic

Description

During the task break-down we reasoned

  • create dedicated component (internals so they make sense both in HTML and the vue-universe)
    • property for the name
    • property for the value
    • property for the checked state (vue value binding)
  • one slot for the label (so it can take HTML, incl strong, from the parent)
  • one slot for additional explanation text
  • possibly adding a click handler for the explanation text so it can also be used to select the respective radio button

Notes

Design specs (based on OOUI, WMF's specs & Termbox) available in Figma.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 4 2019, 11:22 AM
Pablo-WMDE updated the task description. (Show Details)Dec 4 2019, 11:37 AM
Pablo-WMDE updated the task description. (Show Details)Dec 4 2019, 11:40 AM
Sarai-WMDE updated the task description. (Show Details)Dec 20 2019, 5:17 PM
Michael claimed this task.Jan 6 2020, 10:29 AM
Michael moved this task from To do to Doing on the Wikidata-Bridge-Sprint-11 board.
Restricted Application added a project: User-Michael. · View Herald TranscriptJan 6 2020, 10:29 AM

Change 562290 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] WIP: Add radio input component

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

Change 562865 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Add RadioGroup component

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

Change 562290 merged by jenkins-bot:
[wikibase/vuejs-components@master] Add radio input component

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

Change 562865 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Add RadioGroup component

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

Michael removed Michael as the assignee of this task.Jan 10 2020, 3:39 PM
Michael added a subscriber: Michael.
NOTE: After this component is verified, a new version of this package still needs to be released to NPM. So please move this back to Todo after verification.

@Sarai-WMDE @Charlie_WMDE: Can you verify it and then move it back to todo?

This comment was removed by Sarai-WMDE.
Sarai-WMDE added a comment.EditedJan 13 2020, 9:19 AM

Hey, just checked that Storybook link and here are a couple of improvements I noticed:

  1. there's a lack of spacing between the label and the input (should be 8px).
  2. the color of the text label should be #222 (currently it's black)
  3. the input displays a hovered state if the label is hovered, but goes back to normal when specifically hovered after hovering the label (see attached gif). This happens both on selected and unselected states.

On my system (Firefox 72), the spacing is there, and I can’t reproduce the hover issue either (the circle stays blue when moving the mouse from the label text to the circle). Strange…

This turned out to be a Safari Issue. I'm currently working on a patch using flex-shrink: 0; that seems to do the trick

Change 563994 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] Fix Spacing in RadioInput on Safari 13

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

Change 563995 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] Use correct color for RadioInput label

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

Change 563995 merged by jenkins-bot:
[wikibase/vuejs-components@master] Use correct color for RadioInput label

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

Change 564049 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] Show cursor as pointer for enabled radio input labels

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

Change 563994 merged by jenkins-bot:
[wikibase/vuejs-components@master] Fix Spacing in RadioInput on Safari 13

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

Change 564049 merged by jenkins-bot:
[wikibase/vuejs-components@master] Show cursor as pointer for enabled radio input labels

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

Change 565030 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[wikibase/vuejs-components@master] Bump version to 0.1.3

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

Change 565030 merged by jenkins-bot:
[wikibase/vuejs-components@master] Bump version to 0.1.3

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

@Charlie_WMDE, @Sarai-WMDE,
please find this component for review in storybook.

Charlie_WMDE closed this task as Resolved.Jan 20 2020, 10:28 AM
Charlie_WMDE claimed this task.
Charlie_WMDE moved this task from Verification to Done on the Wikidata-Bridge-Sprint-12 board.

looks great! and super excited about the pimped story book \o/ it looks amazing!!!

Lydia_Pintscher reopened this task as Open.Jan 20 2020, 7:25 PM
Lydia_Pintscher moved this task from Done to To do on the Wikidata-Bridge-Sprint-12 board.

Cool.
Reopening and moving back to todo as Michael requested in an earlier comment here to make a release to NPM.

Lucas_Werkmeister_WMDE closed this task as Resolved.Jan 20 2020, 7:27 PM
Lucas_Werkmeister_WMDE moved this task from To do to Done on the Wikidata-Bridge-Sprint-12 board.

That release was already done in the meantime (Gerrit change, npm). (Slightly prematurely, but it was blocking other work.)