New Tumblr meatballs menus

[marcustyphoon]

Łukasz posted in the XKit 7 discord server here:

Hi, Łukasz here, we're working on updated meatballs menus all over the site, starting with blog one. Launched this now for testing, enabled the feature flag for you folks too. Give it a spin, there might be some stuff that will need updates on your side. The rest of the menus will follow a similar structure.

My first notes from looking into it:

hm, looks like it should be fine. no distinct css for meatballs menus anymore, so we'll probably just have to process everything that looks like a modal menu (${keyToCss('menu')}${keyToCss('withinModal')}, #glass-container > div > [role="menu"], whatever)... but we were already jumping through the portal and checking dom position to figure out what kind of meatballs menu it was, so no new code really. although actually in case a different menu gets added to the header we should look for the meatballs icon in the button—maybe I take that back.

Based on the way Tumblr's development is trending (a lot of component composition), I generally expect this pattern of us not being able to rely on the CSS map to distinguish between things to continue. I think Ben hinted at potentially making some changes to help with this in the future, though, so I've paused looking into sick hax™ that would mitigate it ourselves. In the meantime I imagine we'll be doing a lot of kind of convoluted stuff like this.

[marcustyphoon]

I'm not automatically inclined to actually do this PR myself, as it's mostly CSS styling and of our team I don't think I'd be considered the one with the Opinions. But I can definitely do the initial implementation if you'd like; let me know, April!

[marcustyphoon]

Wait, I'm stupid—we can just follow the aria-labelledby and check if it's meatballs.

Okay, yeah, this is mostly a styling thing.