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. All raster images in Stream Dock should have both high and low-resolution versions.
| Icon | Size | @2x |
|---|---|---|
| Action Icon | 20 x 20 px | 40 x 40 px |
| Category Icon | 28 x 28 px | 56 x 56 px |
| Key Icon | 72 x 72 px | 144 x 144 px |
| Plugin Icon | 288 x 288 px | 576 x 576 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.