Add style fields to theme modules

[jasonnrosa]

Types of change

• [ ] Bug fix (change which fixes an issue)
• [ ] Enhancement (change which improves upon an existing feature)
• [X] New feature (change which adds new functionality)

Description

This pull request implements the new style fields feature on the boilerplate's modules. The style fields feature allows developers to add style related fields in the "style" tab of a module.

Best practices Changelog Sign up to participate in the style fields beta

Notes

We're currently omitting adding style fields to the menu as we are aiming to do a larger rebuild in the near future that will include some accessibility improvements.

Checklist

• [X] I have read the CONTRIBUTING document.
• [X] My code follows the style guide requirements.
• [X] I have thoroughly tested my change.

People to notify CC: @TheWebTech

[jasonnrosa]

Thanks for checking this out Jon! Here is an example page if you wanted a quick reference to the editor. Please excuse my beautiful choice of test styles 😆

[JacobLett]

Is there a way to set a style when adding a module to a template? How would you modify this to make the text color white? {% dnd_module path='@hubspot/header', header_tag='h1', value='title', horizontal_alignment="CENTER" %}{% end_dnd_module %}

[TheWebTech]

Hi @JacobLett, this update adds style fields to the modules in the boilerplate.

You set style field values at the template level very similarly to content fields, more on this can be found at: https://developers.hubspot.com/en/docs/cms/building-blocks/modules/using-modules-in-templates#setting-template-level-default-values-for-style-fields

Right now default modules do not yet use style fields. So you would need to use CSS or a custom module instead and add a style field.

When modules use style fields you'll notice a field group in the fields.json or in the Design Manager fields listed as "Styles".

[JacobLett]

Right now default modules do not yet use style fields. So you would need to use CSS or a custom module instead and add a style field. Hi @TheWebTech thank you for explaining this because I was thinking the default modules already had this and I was missing something.