Existing components
MediaWiki community:
- Bridge: RadioGroup
- Wikibase vuejs components: Radio
- MediaSearch: Radio (styles), binaryInput mixin (styles)
- ContentTranslation: RadioGroup/Radio
External libraries:
- Vuetify: RadioGroup/Radio
- Buefy: Radio, CheckboxRadioMixin
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