Style Guide
Design style guidelines for Stream Dock plugins
General
To maintain consistency across the Mirabox ecosystem, we have established some guidelines for Stream Dock plugins.
Plugin Name
The name of the plugin should accurately represent its functionality. The name should not include "Plugin" or "Stream Dock."
Icon Colors
Action and Category icons should be a single color with a transparent background.
Icon Sizes
Use vector images whenever possible.
| Icon | Size |
|---|---|
| Action Icon | 128 x 128 px |
| Category Icon | 128 x 128 px |
| Key Icon | 128 x 128 px |
| Plugin Icon | 128 x 128 px |
Button Feedback
Use showAlert and showOk messages to inform users whether their button actions are successful.
Reducing Complexity
We encourage reducing the complexity of the property inspector as much as possible. Here are a few ways to simplify the property inspector for your plugin:
For complex actions, consider splitting the action into multiple actions to reduce complexity.
Consider dividing the property inspector into required and optional sections. For optional parts, consider collapsing them to reduce complexity.
Choose the right controls; different form controls provide a better user experience for different types of information.
Radio buttons are ideal for selecting between two or three options but can be overwhelming for many options. For scenarios with more than 3 options, consider using a dropdown list instead.
For dropdown lists with many options, consider adding option groups if there are potential categories.
For dropdown lists with many options, consider adding another dropdown to filter the number of options.