Hey, everybody! I wanted to share some prototypes I threw together of what this proposed idea would look like in a more concrete sense. Remember, this is all still very WIP, but this is more or less the direction we’re thinking of with the idea of being able to responsively alter the values of a control from within the popup.
Additionally, an idea we’re exploring is the concept of always making the label clickable next to any control, even if you haven’t altered it responsively yet using the toggles up in the Toolbar. This would allow you to easily enter into one of these “micro-flows” with a control without having to traverse up to the Toolbar and back again to first enable responsive styling to make an update and have it working on that control. You’d basically be able to click into any control directly and if you perform an overwrite above the base style, that will instantly turn on responsive styling for that control.
Let’s take the example of working with the Font Size of an Element. Say you’ve started with that Element and you haven’t changed anything at all, so its base font-size is set to 1em. If you were to click on the label next to that control which has not been overwritten responsviely, it would look something like this:
You can see that we have our base value of 1em applied to all breakpoint as it’s just inheriting from the cascade. Now, let’s say that you were to overwrite the value of the MD breakpoint to 2.5em within this popup, you would instantly see the following feedback:
Notice that the breakpoint icons on the left now are reflecting the inheritance status of values, in addition to showing our chaining paths to the left to help us visualize the cascade of values. The neat thing in this scenario is that you an instantly click into any input, overwrite a value, and see how it’s affecting the entire tree. If you need to copy and paste values manually, you can easily do that if needed. Also, if you wanted to perform a “hard” reset, you could still do that by clicking the icon of a “current” style like so:
So this would give you an indication that clicking that icon would reset the value back to the base style, just like how it is currently operating.
Below are some other examples of how this might look / function in various contexts. For simplicity, all of these will show a control that has a base value that is overwritten at the MD breakpoint, which will show how the cascade will work from there.
Let’s take the Padding control. If you clicked the label of the Padding Right control, you would see the unit slider for only that side of the Padding control in the popup:
Here is an example of what a picker-based input might feel like. In this example we’re looking at the horizontal alignment of children for a Flexbox control:
Here is an example of what a choose control might feel like. In this situation, we’re looking at how Text Align might feel:
Finally, here is an example of a color control (in this case, Background Color):
Hopefully this helps to give a little more context about the above proposal. Again, a big change to this as well would be the addition of making all labels instantly clickable, even if they’re not already “responsive.” This would allow quick and easy access to these control values at all breakpoints, and would effectively almost bring back a kind of parity from the old “responsive tabs” pattern found on Rows, Grids, and Cells.
