I’m exploring the Material 3 Design Kit, and I could use some assistance to fully understand what I’m currently observing.
As you see on the screenshot, there are a few layers with the “filled diamond” icon, which designates them as Variants. However, there are no parent or ancestor layers that are marked with the multiple-filled-diamonds icon, i.e. the component one. What’s the matter here?
That’s a component set with auto layout
Oh, I see, haha. Thank you.
Why it’s not marked the same way if I make my component auto-layouted here?
This seems bizarre, but I just noticed that the icon changes based on the presence of variants and which screen I view these components on.
Two components, one without variants, one with. Both have auto layout. The component’s icon will indicate auto layout only if the component has variants, and viewed on a non-retina screen. No difference on the retina screen (i.e. the icon displays as a component for both).
Can anyone confirm this?
Your example is a simple component, not a set
Component set is a container for components, thus having an indication that it has auto layout is sensible. For a single component it’s not a big deal as you cannot change flow direction and stuff
You are mistaken. That “Yes variants” component was created from two separate components and combined as variants, yielding a component set.
Plus, that doesn’t address what I’m talking about there as the icon still displays differently depending on the screen it’s viewed on.
Well, whatever, I’m not bothered
Yeah, you’re right.
Now adding auto-layout to the set:
(which also reversed the variants)
It seems that:
if there’s auto-layout on the component, and the component has variants, then that component’s icon changes to an “auto-layout” icon instead of a component icon?
And why only on a component that has variants?
Seems a strange design choice, IMHO.
For me personally, it’s already confusing enough to call a component with variants a “component set” when it’s really just a component. (And I’m still not clear on whether a “base component,” e.g. one named with a “.” or “_” prefix, is something else entirely…) We’ve got some of the diamond icons changing color from very faint to bright purple (when selected), and others staying the same color all the time (whether selected or not). And now we’ve got icons changing completely based on one specific property setting (auto-layout), as if that defines the type of component that it is. Odd.
Also confirmed that this behavior is different on a retina screen and a non-retina screen, as @IraX observed:
Very bizarre indeed.