Binding variables at the source

My team and I are working on this exact issue right now, and for the same use case (“desktop to mobile automation”, as you put it). The best “workaround” we have is to re-wrapping an instance of our component in a new main component that has a single “breakpoint” property with values matching the modes in our breakpoint variable collection. For usability, we expose all the props of the nested instance, since those props are the ones consumers will actually want and need to configure.

So you have

-- ❖ Button Expose all nested instances props

----  ◇ Button.breakpoint-prop Where the variable binding happens, also exposing nested instances’ properties

-------- ◇ Button.useful-props Where the “useful” props live for consumers: showing and hiding icons, editing the label string, a hierarchy prop would live here

Thanks! This seems like a nice workaround. Is there a way to hide Desktop/Mobile variant option (already binded) for the final shared component? Are you essentially re-wrapping the main source component twice – one for breakpoints, and one for useful props?

Actually the more i'm playing around with this, i realize that the “useful props” and the breakpoint property will probably exist within the same component. and that's good! the fewer subcomponents the better.

but to your question about hiding the breakpoint property: no, sadly not. there's a topic elsewhere in the forum about that (choosing specific properties to expose, rather than the current “all or nothing” situation).

the good news is that even if a consumer tries to adjust the value of the breakpoint property on the subcomponent, they can't!! it being bound to the text string prevents it from being changed to anything other than the mode that string variable value is assigned to.