Page MenuHomePhabricator

Build the wvui-button component for Vue.js search
Closed, ResolvedPublic5 Estimated Story Points


Referencing T255902 for guidance, build the wvui-button for Vue.js search. Some of this component is already present in the scaffolding so this task may mostly be revising that.

Acceptance criteria

  • Component can wrap any slotted content.
  • All component acceptance criteria in T255902 are covered.

Event Timeline

@Niedzielski Please expand on ”Component can wrap any slotted content.“ What functionality do you have in mind?

@Volker_E, I was thinking the initial implementation would use a slot. In the boilerplate example, the slot would be replaced with Search pages containing <em>ba</em>. My reasoning was that this would allow the first iteration to focus on the button as a container with a button role.

Any slotted content is risky to me, we don't want a button that can carry an iframe to make the most extreme example.
What do we expect for a button to contain. Nothing interactive, nothing block.

ovasileva set the point value for this task to 5.Jul 1 2020, 4:27 PM

Regarding T255902 acceptance criteria:

Component template is guided by the above skeleton structure.


Component follows the WAI best-practice and applies descriptive ARIA roles and attributes.

I didn't add any since it's a semantic and literal button element. If you see something that should be there, please let me know.

Component styling is guided by OOUI CSS properties, uses WikimediaUI Base variables and follows BEM conventions.


Component is documented with a couple configurations in Storybook.


Component has Jest tests for at least the snapshots.


Any functions or methods added have a JSDoc description and TypeScript typing.


Any lessons learned, development tips, and usage notes wanted are documented in the readme or the migration guide.

I revised the linter config but didn't see any other changes to make.

Update the skeleton in this task too so it's easy to see what is being targeted for subsequent components.


nray reassigned this task from nray to Niedzielski.
nray updated the task description. (Show Details)

👍👍 Looks great! Great job!