Feature request: Custom class names

[joepie91]

It'd be greatly helpful if it were possible to specify custom class names for each component in a FlexLayout layout, instead of just having the default class names like flexlayout__border_button--selected.

Custom class names would make it possible to integrate this library with eg. themeing systems that are based on CSS Modules, without requiring a lot of extra complexity in FlexLayout itself; it'd just have to internally replace the default class names with the specified ones, when they are specified.

What such an API might look like:

var json = {
	global: {
		classNames: {
			button: "layout-button",
			buttonSelected: "layout-button-selected"
			// ...
		}
	},
	borders: [],
	layout: {
		// ....
	}
};

So when somebody is using CSS Modules, it might look like:

var css = require("./style.css");

var json = {
	global: {
		classNames: {
			button: css.layoutButton,
			buttonSelected: css.layoutButtonSelected
			// ...
		}
	},
	borders: [],
	layout: {
		// ....
	}
};

... and they'd get completely locally-scoped styles.

[nealus]

I've added a new layout property:
classNameMapper?: (defaultClassName: string) => string
in the latest source.
I think this should handle your use case, please can you take a look and comment

[joepie91]

Functionality-wise, that looks exactly right. Thanks!

One useful addition would be a list of all the class names in the documentation and what they are for, so that users can know which class names to account for in their mapper.

Currently, this can already be figured out from the source code, but having a canonical list of them would be useful both for easier development and for more easily tracking changed class names across FlexLayout versions (in cases where they're changed).

[Aiso786]

Hello @nealus, that looks really great. When are you making another release to include this new feature ?