In the image there are 3 arrow icons, each have the same transform on hover, to make them appear on hover. I set the hover to happen over “Grid”, thinking it would not percolate up further than the first parent grid. So only one arrow animated at a time.
But it does percolate up through the dom through all parent grids, so no matter where in the page I hover all three arrows animate in.
Is there something I can do to the first parent grid of each of the arrows (shown with grid previews in image) to stop it percolating up any further and see that as the grid I want to trigger the transform?
Interesting discovery. I was thinking the same thing. Either add an additional ID option as @Doobox Gary suggested, or list all the parent elements for selection.
I guess the first one would be the easiest and most flexible approach?
Yeah, something has to have gone pear shaped in a subsequent build since the option to select “Grid” or “Container” were added. If you use “Container” its always going to trigger absolutely anywhere in the page, since its almost certainly cover by at least one container..
Classes added are :
group-hover/grid + transforms to do
or
group-hover/container + transforms to do
targets them all.
"Parent works because it hones the target with :
group-hover/rwAD00DD9E_6477_452C_AE72_3E9A36DEC2F8: + transforms to do
“rwAD00DD9E_6477_452C_AE72_3E9A36DEC2F8” being the parent id.
Maybe there’s the odd use case for “Grid” + “Container” as is. But there’s defienetely a use case for “ID”.
The way the Parent setting works with Tailwind’s group classes doesn’t currently allow for targeting “the closest Grid/Flex/Container/etc”—it’s just a generic group. So, unfortunately, any parent of the specified type will trigger the hover transition.
Having looked at your project, I think it’s going to be tricky to achieve the effect you’re after with the current component structure.
We could add support for a custom ID, similar to how we handle Filter groups. That could give you more precise control and solve the issue.
We’ll chat about it internally and see if we can get a solution into the next beta
The only catch is that the component must be nested somewhere inside a component that has the custom ID applied, and the custom id class needs to be formatted with the group modifier, like so: group/parent-component-id
Our built in layout components, such as Container/Grid/Flex, will automatically apply the Advanced->ID field as a group modified tailwind class.
This will be included in the next beta.
Let me know if you have questions, or think I’ve missed something
I’ll have another think on the naming, but Custom Container ID isn’t quite right either as it works with Container, Flex, Grid, and any component that has a group/{customID} class applied
