Components

Contribute to the Ui component library

Principles

A11y centric Ui components: At the center of each component is the interface (props, v-model, imports and exports). The naming of props, attributes, etc. follows the semantic model of standard HTML and aria attributes. Again, this allows authors to use the same attributes on normal HTML nodes as on Funkwhale Ui components.
Focus on composability and locality: Instead of highly capable components, much of the the functionality (visual variant, routing, icons, badges and other affordances) are composed by the author explicitly, favoring locality over DRY. In addition, headless components <Sync> and <Map> allow users to scope state and data transformations inside a template node.
Coupling with the design system: The library relies on design system attributes exposed through ~/ui/attributes.ts. Use the classes, variables and attributes defined in ~/ui/fw.css.

Component categories

Adding new UI components

Choosing a UX pattern to implement

✔ I am using the same pattern in many different places in the app, and repeating it is error-prone

✔ The pattern is not coupled with a specific feature (such as API types, routing, ...)

✔ It's a conventional UI pattern and it fits into one of the seven categories listed above

Step by step

Create a file ~/ui/Xyz.vue and implement the component
Add companion files ~/ui/Xyz.md (docs) and ~/ui/examples/Xyz.a11y.vue. Describe how page authors can use the new component in an accessible way.
Add the accessible example to the Accessibility overview and document the necessary tests to verify its functioning and prevent regressions.

Use your browser's Dev tools (F12; Ctrl+Shift+F) to inspect rendered elements and find the origin of styles
Fix errors at the root where possible instead of adding overrides and exceptions
Avoid deep cascades of abstraction and overrides