Page MenuHomePhabricator

Add Radio component to WVUI
Closed, ResolvedPublic

Description

Existing components

MediaWiki community:

External libraries:

Wikimedia Design Style Guide links:

Implementation notes

How should input groups be handled?

There are a few things to think about:

  • How are data and events handled?
  • How are field elements like field-level labels, required indicators, and validation error messages included?
  • If using a group component, how are child components added (via data passed in as a prop or sub-components passed in as a slot)?

Existing implementations:

  • Bridge has a RadioGroup component but it's just used for additional styles
  • Wikibase vuejs components has a standalone Radio component with a required name prop
  • ContentTranslation has a RadioGroup component that gets passed a prop with item data, then it generates a Radio component for each item. It generates a name that's added to each radio input. Input events are manually handled.
  • MediaSearch and Buefy use standalone components and rely on the developer using v-model to handle data (a single value for a group of radios). The developer can use v-for to generate multiple input components.
  • Vuetify has a RadioGroup component that generates a field-level label and required behavior. v-model is used for data handling. Radios are added to the group as sub-components provided in the main slot.
How should the custom-styled input be built?

Existing implementations:

  • Wikit and termbox: the label has a styled ::before pseudo-element
  • MediaSearch, ContentTranslation, and Buefy: a separate <span> is styled (similar to OOUI)
  • Vuetify: a separate <div> is styled
How should the input-level label be handled?

Connecting input and label:

  • Wikit, termbox, Wikibase vuejs components, ContentTranslation: separate label with for attribute set to input's unique ID
  • MediaSearch and Buefy: label element wraps input

Passing label into input component:

  • Wikit, termbox, Wikibase vuejs components: named slot (also includes slot for description)
  • ContentTranslation, Vuetify: string prop
  • MediaSearch, Buefy: main slot

Event Timeline

Change 685584 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[wvui@master] [radio] Add the Radio component

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

Change 685584 merged by jenkins-bot:

[wvui@master] [radio] Add the Radio component

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

Volker_E triaged this task as Medium priority.
Volker_E moved this task from Backlog to Done on the WVUI board.
Volker_E moved this task from Done to Waiting for breaking release on the WVUI board.

Change 697700 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update wvui to 0.2.0

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

Change 697700 merged by jenkins-bot:

[mediawiki/core@master] Update wvui to 0.2.0

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