AgnosticUI / agnosticui

AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Angular, and Svelte.
https://agnosticui.com
Apache License 2.0
724 stars 47 forks source link

Kebab | Meatball | Hamburger Menues — Svelte #175

Closed roblevintennis closed 2 years ago

roblevintennis commented 2 years ago

This is blocked by https://github.com/AgnosticUI/agnosticui/issues/174 but will build the component in Svelte.

Menu relationship

Kebab | Meatball | Hamburger Menues will be new “variants” within the main Menu component in efforts to keep things DRY. It will require updating w/copystyles.js and adding booleans like isHamburger, isKebab, and isMeatball. These have a certain structure with elements representing "dots" and "bars" (I'm spiking on the CSS package in my local dev env and getting these designed up now). So we'll likely need to utilize child components but that's an implementation detail.

UPDATE: I found this image that nicely defines these by name:

image

Bento is pretty nice but I think that can always wait until v2 to minimize any more scope screep

This is sort of step two for: https://github.com/AgnosticUI/agnosticui/issues/83

We can not worry about the site docs as we'll hold off until we have #83 done to do those

roblevintennis commented 2 years ago

cc / @Croug looks like until I add you to the org or something you have to interact with a comment or something before I can properly assign 🤷‍♂️

But I think as soon as I build out the html/css in agnostic-css/* you can do the first implementation here if you'd like 🙌

Croug commented 2 years ago

Cool cool, we can do sort of a call response thing, you can tag me in an issue and then I reply, then you can assign me

roblevintennis commented 2 years ago

Update: I've finished the design / html / css work and the menu trigger button used for these variants is completely different and I needed to work out how that maps to a framework implementation so I have started also on the agnostic-vue counterpart with a work-in-progress on the menu-kebab-hamburger-meatball branch.

I've basically just teased out the trigger button into its own MenuTrigger and plan to likely have that swappable with MenuTriggerKebab when props.isKebab == true and so on for hamburger and meatball variants. I think we'll likely need to do something similar here but not sure. I'll at mention you @Croug once it's done as the code diff will provide the most convenient clarity I think.

roblevintennis commented 2 years ago

@Croug As I've been working on https://github.com/AgnosticUI/agnosticui/pull/179 there are a lot more moving parts in some refactors I had to do and so I'd like to do these myself less the Angular one which we can tackle last. I just think it's likely we'll hit a lot of unpleasant merge conflicts if we try to collaborate on these. Sorry for the back and forth. I'll at mention you on a couple of other MVP issues which I think will be easier for us to coordinate.

roblevintennis commented 2 years ago

PR merged. Done