Fix the theme middleware to deal with the compose scenarios

[agubler]

Type: bug

The following has been addressed in the PR:

• There is a related issue
• All code matches the style guide
• Unit tests are included in the PR
• Any widget variant uses theme.compose like this
• WidgetProperties are exported

Description:

Update theme middleware to support default variant themes without requiring the use of composes for the default base theme in the variant css.

1. The combined classes from the variant css and base css are available for theming.

// base widget default theme
.root {

}

// variant widget default theme
.extra {

}

This will enable both the root and extra classes to be themed by targeting the variants key, for example:

// theme
{
    '@dojo/widgets/variant': {
        root: 'variant_theme_root',
        extra: 'variant_theme_extra'
    }
}

2. Falls back to the base theme when not specified in the variants theme

// theme
{
    '@dojo/widgets/base': {
        root: 'base_theme_root'
    },
    '@dojo/widgets/variant': {
        extra: 'variant_theme_extra'
    }
}

3. Add additional classes specified in the classes for both the variant and base css

// theme
{
    '@dojo/widgets/base': {
        root: 'base_theme_root'
    },
    '@dojo/widgets/variant': {
        extra: 'variant_theme_extra'
    }
}

// classes
{
    '@dojo/widgets/base': {
        root: ['base_classes_root']
    },
    '@dojo/widgets/variant': {
        root: ['variant_classes_root'],
        extra: ['variant_classes_extra']
    }
}

This will result in a theme objected constructed that includes the extra root class from @dojo/widgets/variant and the extra root class for @dojo/widgets/base will be applied in the base widget

4. Supports a known prefix for classes that need to passed as part of the base widgets theme

    '@dojo/widgets/base': {
        root: ['base_classes_root']
    },
    '@dojo/widgets/variant': {
        baseRoot: ['variant_prefix_theme_root']
    }

When passing base as the prefix will use the variant_prefix_theme_root class as the base widget's root class.

When a prefix is specified, only prefixed classes will be composed for the child's theme. It will not pass the class for an active class, even if the active class exists in the child's css.

Note: Changes the API to automatically create the composed theme to be passed to the base widget's theme property by the user. This saves the user have to constructed the theme every time.

Example Usage:

import theme from '../middleware/theme';
import { tsx, create } from '@dojo/framework/core/vdom';
import Button, { ButtonProperties } from '../button/index';
import * as outlinedButtonCss from '../theme/default/outlined-button.m.css';
import * as buttonCss from '../theme/default/button.m.css';

export interface OutlinedButtonProperties extends ButtonProperties {}

const factory = create({ theme }).properties<OutlinedButtonProperties>();

export const OutlinedButton = factory(function OutlinedButton({
	properties,
	children,
	middleware: { theme }
}) {
	const props = properties();

	return (
		<Button
			{...props}
			theme={theme.compose(
				buttonCss,
				outlinedButtonCss,
			)}
		>
			{children()}
		</Button>
	);
});

export default OutlinedButton;

[dojo-site]

This pull request has been deployed to:

• Docs Deployment: https://dojowidgets-cdgdbbc1u.now.sh
• Tests Deployment: https://dojowidgets-ankjcdmjh.now.sh

[dojo-site]

This pull request has been deployed to:

• Docs Deployment: https://dojowidgets-k2qhh3jsm.now.sh
• Tests Deployment: https://dojowidgets-ankjcdmjh.now.sh

[dojo-site]

This pull request has been deployed to:

• Docs Deployment: https://dojowidgets-k2qhh3jsm.now.sh
• Tests Deployment: https://dojowidgets-ankjcdmjh.now.sh

[dojo-site]

This pull request has been deployed to:

• Docs Deployment: https://dojowidgets-g8a7kypa0.now.sh
• Tests Deployment: https://dojowidgets-lhp11qn93.now.sh

[dojo-site]

This pull request has been deployed to:

• Docs Deployment: https://dojowidgets-ji84fkchd.now.sh
• Tests Deployment: https://dojowidgets-jr1bz3g82.now.sh

[dojo-site]

This pull request has been deployed to:

• Docs Deployment: https://dojowidgets-j8h48kap9.now.sh
• Tests Deployment: https://dojowidgets-73m91yntt.now.sh

[tomdye]

Have worked this through the scenarios i'm aware of and all appears to be working now