Flourish UI Styles

Style UI elements (like @flourish/controls) in Flourish templates.

How to install

npm install -s @flourish/ui-styles

Add one or more control style objects to your template state:

export var state = {
    controls_style: {},
    button_style: {},
    dropdown_style: {},
    slider_style: {},
    searchbox_style: {},
}

Import settings for controls styling in your template.yml settings.

- property: controls_style
  import: "@flourish/ui-styles/controls-style"
- property: dropdown_style
  import: "@flourish/ui-styles/dropdown-style"
- property: button_style
  import: "@flourish/ui-styles/button-style"
- property: slider_style
  import: "@flourish/ui-styles/slider-style"
- property: searchbox_style
  import: "@flourish/ui-styles/searchbox-style"

Basics

Initialise the styling outside any function or in a special init function:

import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle, createSearchboxStyle } from "@flourish/ui-styles";
var controlsStyle = createGeneralControlsStyle(state.controls_style, ".fl-control"),
    buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons"),
    dropdownStyle = createDropdownStyle(state.dropdown_style, ".fl-control-dropdown"),
    sliderStyle = createSliderStyle(state.slider_style, ".fl-control-slider"),
    searchboxStyle = createSearchboxStyle(state.searchbox_style, ".fl-control-searchbox");

The init function takes the state object as a first argument. The second argument is the target container for styling. If you are using @flourish/controls you can just use the selectors in the code above.

If you're using this on custom HTML, make sure to target the direct parent container of your controls, and make sure to give your controls a classname of fl-control. If you're using specifically the button styles with custom HTML make sure your buttons also have a button class and your selected elements a selected class.

Then in the update function, make sure to update the styles with update(). To ensure right-to-left read direction support works correctly call the style update functions after the read direction of the template has been updated (i.e. layout.update() has been called).

controlsStyle.update();
buttonStyle.update();
dropdownStyle.update();
sliderStyle.update();
searchboxStyle.update();

Styling searchboxes

Use createSearchboxStyle with the searchbox control from @flourish/controls to style the search input, icon and suggestion dropdown. The imported settings let you keep the input expanded and customize its size, background color and opacity, text/icon color, stroke opacity and border radius.

Search behaviour, such as placeholder text and suggestions, is configured separately in the searchbox control settings.

Using defaults from @flourish/layout

There is an optional feature that allows you to inherit text and background color from the layout module. Just pass in the layout state object as a third argument when initializing the styles.

import { createButtonStyle } from "@flourish/ui-styles";
var buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons", state.layout);

Searchbox styles also support this argument. When no searchbox text or background color is set, they use the corresponding layout color:

var searchboxStyle = createSearchboxStyle(state.searchbox_style, ".fl-control-searchbox", state.layout);