platform-ui-theme

platform-ui-theme provides a way to generate a set of CSS classes for your MediaCentral | UX plugin that will include everything that is needed to make your plugin look like a native part of MediaCentral | UX.

Every CSS class that your plugin will use will be included in that CSS file. This way your plugin will not depend in negative way on any changes that are made to CSS styles of the MediaCentral | UX web application, and to give you (and other plugins that will be running alongside with your plugin) freedom to override the build-in styles any way you want.

The only rule that has to be strictly adhered is that all CSS style classes of your plugin must be prefixed by a prefix that is derived from your plugin's name. The prefix must be sufficiently unique, but not too long.

For example, if your company name is MyCompany, and the plugin is called MyPlugin, your plugin's prefix might be something like mycomp-myplug-. This way, a button class, when prefixed by this prefix, is going to be called mycomp-myplug-button.

Your plugin's own styles (ones that are not provided by platform-ui-theme) should also have the same prefix, like this:

1
2
3
4
5
6
7
8
9
/* override an existing style that was provided by platform-ui-theme */
.mycomp-myplug-button {
color: red;
}

/* create a completely new "menu" class within your plugin's class namespace */
.mycomp-myplug-menu {
color: blue;
}

Adding to project

To add platform-ui-theme to an NPM-based project with a SASS stylesheet, please do the following:

  1. Import the platform-ui-theme package into your package.json.
  2. In your main SCSS file, define a prefix for your CSS classes:
1
$theme-prefix: my-plugin;

This way, all your classes will be prefixed, e.g. the button class with be called .my-plugin-button.

  1. Import the mcux theme:
1
@import '../../node_modules/platform-ui-theme/themes/mcux';

This will create a set of classes for standard components. The classes will be prefixed with your $theme-prefix, like this:

1
2
3
4
.my-plugin-button
.my-plugin-checkbox
.my-plugin-table
/* etc */
  1. Use the prefixed class selector to add your own declarations to the standard classes, e.g.
1
2
3
.my-plugin-button {
margin: 16px;
}

Configuring SASS build process for Webpack

  1. It is assumed that you already have Webpack and css-loader installed, and its configuration resides in a webpack.config.js file.
  2. Install necessary dependencies:
1
npm install --save-dev sass-loader postcss-loader autoprefixer
  1. Make the following additions to your webpack.config.js file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const autoprefixer = require('autoprefixer');

module.exports = {
...
module: {
loaders: [
...
{test: /\.scss$/, loader: 'style-loader!css-loader!postcss-loader!sass-loader'}
]
},
postcss: [
autoprefixer({
browsers: [
"last 2 Chrome versions",
"last 2 Safari versions",
"last 2 Firefox versions",
"last 2 Edge versions"]
})
]
};

CSS styles provided by platform-ui-theme

Note that the usage examples below are given in React's JSX markup, not in standard HTML. In these examples, my-plugin- corresponds to your plugin's CSS class prefix.

button

1
<button className="my-plugin-button">My Button</button>

checkbox & label

1
2
3
4
<label className="my-plugin-label-inline">
<input className="my-plugin-checkbox" type="checkbox" />
<span>My Checkbox</span>
</label>

Note that due to browser compatibility issues, presence of a <span> tag immediately next to the <input> is mandatory.

In order to display the checkbox right to the label you don't need to change the layout, but you should use a special class name instead - my-plugin-checkbox-right:\

1
2
3
4
<label className="my-plugin-label">
<input className="my-plugin-checkbox-right" type="checkbox" />
<span>My Checkbox</span>
</label>

radio button & label

1
2
3
4
5
6
7
8
<label className="my-plugin-label-inline">
<input className="my-plugin-radio" type="radio" name="agree" />
<span>Yes</span>
</label>
<label className="my-plugin-label-inline">
<input className="my-plugin-radio" type="radio" name="agree" />
<span>No</span>
</label>

Note that due to browser compatibility issues, presence of a <span> tag immediately next to the <input> is mandatory.

textbox & label

1
2
3
4
<label className="my-plugin-label">
<span>My Text Box:</span>
<input className="my-plugin-textbox" type="text" />
</label>

fieldset & legend

My LegendMy Fieldset
1
2
3
4
5
6
<fieldset className="my-plugin-fieldset">
<legend className="my-plugin-fieldset-legend">
My Legend
</legend>
My Fieldset
</fieldset>

paragraph

Don't trouble trouble until trouble troubles you.

1
2
3
<p className="my-plugin-paragraph">
Don't trouble trouble until trouble troubles you.
</p>

table

My HeaderMy HeaderMy Header
My CellMy CellMy Cell
My CellMy CellMy Cell
My CellMy CellMy Cell
My CellMy CellMy Cell
1
2
3
4
5
6
7
8
9
10
11
12
<table className="my-plugin-table">
<thead>
<tr>
<td>My Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>My Cell</td>
</tr>
</tbody>
</table>

textarea

1
2
3
4
<label className="my-plugin-label-inline">
<span>Textarea:</span>
<textarea className="my-plugin-textarea"></textarea>
</label>

settings-layout

1
2
3
4
5
6
7
8
9
10
<div>
<div className="my-plugin-settings-content">
My Settings UI
</div>
<div className="my-plugin-settings-footer">
<div className="my-plugin-settings-buttons">
My Buttons
</div>
</div>
</div>

React components

ComboBox

ComboBox is a React component that also expects a platform-ui-theme stylesheet to be present on the page. Your plugin's prefix (not including a trailing dash) must be supplied into the prefix property of the ComboBox component. If a custom CSS class needs to be added (for example, to set the width of the element), its prefixed class name can be supplied via the className property. Other properties are:

items

The items property holds an object that is used as a list of items. Keys (property names) of the object are used as item IDs, and values (that should be strings) are used for the visible (and possibly editable) text for the drop-down list items.

editable

Whether to allow the user to enter custom text into the combobox.

defaultText

If editable is true, a default text can be supplied.

defaultSelectedItemId

If editable is false, an ID of the item to be selected by default can be supplied.

onDropDownSelect event

Fires when a new item is selected from the drop-down list. Arguments are (id, text).

onTextChange event

Fires either when a new item is selected from the drop-down list, or if the text is edited. The only argument is (text).

Usage example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ComboBox
prefix="my-plugin"
className="my-plugin-custom-style-class"
editable={false}
defaultText="Default text can be specified if editable"
defaultSelectedItemId="defaultIdForNonEditable"
items = {{
firstId: "First Text",
secondId: "Second Text",
thirdId: "Third Text",
fourthId: "Fourth Text",
fifthId: "Fifth Text",
}}
onTextChange={text => console.log('onTextChange:', text)}
onDropDownSelect={(id, text) => console.log('onDropDownSelect:', id, text)}
/>