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)
• 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

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

People to notify
CC: @TheWebTech

[TheWebTech]

Do we support .css on color field?
I may be remembering wrong. Your code though would still function just fine.

[jasonnrosa]

Not that I'm aware of. I've generally been following this doc for where the .css property is supported and I tried following the original PR. We do have the .css for gradient. I'm happy to update if .css is available for the color field. That would be nice to keep the code a bit shorter.

[TheWebTech]

I read through all of the code, it all looked good and made sense. I didn't see any issues.

I have not tested the changes in my own account. Given the amount of CSS and HTML changes to support the new fields. I think it's worth myself or someone else testing the branch in their account first. I will try to spend some time to test this tomorrow.

[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 😆

[TheWebTech]

Tested in Chrome, Firefox, and Safari. Looked good.

Did notice an issue completely unrelated to the stylefields change.

The menu module when used outside of the header - because it's closer to the left side of the page, the dropdown gets cut off.

This is unlikely to happen in real sites often, but an easy solution is to add a :first-child selector and transform:unset;

You will need to also move the :before so that it lines up better with the first <li>

[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.