Implementation Guidelines

Below are some guidelines that components in this library should follow. Use this document to help guide the design of the component APIs and their behaviour.

The following principles apply to writing components for this component library. Some of the guidelines here may not apply or make sense in an application context.

Keep project goals in mind

Ensure all contributions consider the goals of the project layed out on the homepage including following accesibility guidelines.

Prefer slots over properties

Where a property will just be rendered into the DOM, prefer to provide it via slots instead of props.

Example

Prefer this:

<InputLabel>My input label</InputLabel>

Over this:

<InputLabel text="My input label" />

Rationale

Slots allow for more than just text, for example icons, bold & italics, links.

Prefer components over multiple properties

Where there are multiple properties referring to one aspect of the component, prefer to separate that section out into a component that can then be provided by a slot.

Example

Prefer this:

<Navbar><NavBarTitle href="/">PeoplePlus</NavBarTitle></Navbar>

Over this:

<Navbar title="PeoplePlus" titleHref="/" />

Rationale

Along with the benefits provided by using a slot over a property for the text content, this also groups related properties, and makes it easier to expose many properties and events without needing to prefix them all, or even using `$$restProps`.

© 2024 PeoplePlus™. All rights reserved.