Styling

UI hints is a section of the property definition json and contains specifications to assist in the presentation and flow of the property dialog. The specifications indicate which controls to use to display and gather input on the fields.

Overriding styles and color themes
Common Canvas styling guidelines

Overriding styles and color themes

Loading fonts

You may find that there is a pause in common canvas behavior, such as when the context menu is first displayed, which is caused by fonts being loaded. This can be fixed by adding the following to the .scss file for your application:

$font-path: "/fonts";
@import "carbon-components/scss/globals/scss/styles";

The fonts will need to be imported from carbon before carbon styles and placed in a public /fonts directory. You can see an example of this in the common-canvas test harness (which is the equivalent of a host application) in this repo. That is, the index.scss file contains the lines above and the grunt build files ensures the fonts are copied fromnode_modules/carbon-components/src/globals/ to the <carbon fonts folder> directory.

SCSS styling (recommended)

If you want to use the full power of scss styling with variable overrides etc then include these imports in your main scss file:

@import "carbon-components/scss/globals/scss/styles";
@import "@elyra/canvas/src/index.scss";

use autoprefixer when building
if using webpack under the sass-loader and make sure to include

options: { includePaths: ["node_modules"] }

Again, you can refer to the test harness index.scss file for sample code.

CSS styling for quick start

If you just want to get up and running and don’t care about scss then import these regular css files:

carbon-components/css/carbon-components.min.css

@elyra/canvas/dist/styles/common-canvas.min.css

version 8.x and older @elyra/canvas/dist/common-canvas.min.css

More information about Carbon components can be found at https://www.carbondesignsystem.com/developing/get-started/

3rd party styling

If you are using the expression builder in common-properties then also include these libraries:

codemirror/addon/hint/show-hint.css
codemirror/lib/codemirror.css

If you are using common-properties then also include the react-virtualized styles:

react-virtualized/styles.css

Common Canvas styling guidelines

Used the data-id attribute on inputs to be used for automated tests. Format for common properties should be properties-
className format format for common-properties should be properties-
Limit the use of html(DOM) ids
Minimum inline styling. This allows for consumers to easily override styling.
scss/sass styling should be added to the component’s folder
No important! in styling *( Use variables for all colors(preferably from carbon)

Common Properties: Accessibility

Common Properties: Development testing guidelines