[FEATURE] should be able to specify responsive prop

[andrewtpoe]

EXPECTED BEHAVIOR

What's the behavior you're expecting to see?

When I create a modifier for a component I am currently able to specify what the name of the prop being listened to is with a second argument to applyStyleModifiers:

applyStyleModifiers(MODIFIER_CONFIG, 'customPropName')

This is very useful, but, there is no way to specify the prop that the responsive logic is triggered by.

ACTUAL BEHAVIOR

What's actually happening instead?

Currently, the responsive behavior is always based on the size prop.

STEPS TO REPRODUCE

Please provide some simple steps to reproduce the issue.

It's the built-in logic. Just build and use a modifier with a responsive object.

SUGGESTED SOLUTION

Do you have any feedback on how this problem should be solved?

I propose adding an optional third argument to applyStyleModifiers that specifies the prop to be used to trigger the responsive logic:

applyStyleModifiers(MODIFIER_CONFIG, customModifierPropName, customSizePropName)

This will mean that a developer will not be able to specify a custom size prop without also specifying a custom modifier prop name, but it will not be a breaking change to the code.

An alternative suggestion is to allow the second argument to be either a string (current behavior) or an object that can have properties for updating both the modifier prop name and the size prop name:

applyStyleModifiers(MODIFIER_CONFIG, customModifierPropName)

// or...

applyStyleModifiers(MODIFIER_CONFIG, {modifierProp: customModifierPropName, responsiveProp: customSizePropName})