Page MenuHomePhabricator

(MS 5) Create link component
Closed, ResolvedPublic8 Estimated Story Points


As a DS designer and developer, I want to be able to create links, because they are needed in the Simple Query Builder.


  • Links' styles are based on the Figma specs and follows the behavior and accessibility principles defined in the component documentation (TBD by @Sarai-WMDE).
  • The link styles are based on/created on top of link tokens (available in this draft PR).
  • Links are documented in Storybook according to the specifications (see below)


Links have the following states (as seen in the specs):

  • Default state
  • Hover
  • Active
  • Focus
  • Visited


The link component will be included in its own Storybook page, under Vue components:

  • Basic (controllable story displaying a link without icon)
  • All (displays all link variants – with and without icon – and states)

Controls should allow users to enable the icon, edit the link text and mark the link as visited.


To decide whether the following link features should be in scope:

  • A prop should allow implementers to make links underlined by default (see specs)
  • Link can take icons before and after the link text
  • In order to be able to use links embedded in description paragraphs, we should create a link mixin or class. The same mixin/class could be applied to create the link component

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Sarai-WMDE renamed this task from Create link component to Create link.Jan 26 2021, 2:33 PM
Sarai-WMDE updated the task description. (Show Details)
amy_rc renamed this task from Create link to (MS 5) Create link.Jan 27 2021, 2:50 PM
Sarai-WMDE renamed this task from (MS 5) Create link to (MS 5) Create link component.Feb 3 2021, 4:49 PM
bete added a subscriber: bete.
Sarai-WMDE removed the point value for this task.