anoblet/feat/cxl-details

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	32.12 KB (+3.88% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	23.61 KB (+0.61% 🔺)
packages/cxl-ui/pkg/dist-web/vendor.js	125.6 KB (-0.05% 🔽)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	194.35 KB (+0.67% 🔺)

[lkraav]

I would expect display to render similar to https://vaadin.com/docs/latest/components/accordion#summary demo - small font below panel title.

Although we should probably try to use <vaadin-horizontal-layout> in there, because it gets too bloated vertically.

Not sure yet how different fields should be best separated horizontally.

[anoblet]

I would expect display to render similar to https://vaadin.com/docs/latest/components/accordion#summary demo - small font below panel title.

I agree this looks nice, and using Vaadin layouts elements would help.

I'm realizing this may be a bit more complicated than I thought. Each step needs to listen to changes from a different number of input elements, and render a different template.

I'm working on a version that uses a step attribute, registers listeners, and renders a different template accordingly. It's difficult not having control of the template since it's in light-dom.

[lkraav]

I would expect display to render similar to https://vaadin.com/docs/latest/components/accordion#summary demo - small font below panel title.

I agree this looks nice, and using Vaadin layouts elements would help.

I'm realizing this may be a bit more complicated than I thought. Each step needs to listen to changes from a different number of input elements, and render a different template.

I'm working on a version that uses a step attribute, registers listeners, and renders a different template accordingly. It's difficult not having control of the template since it's in light-dom.

Maybe we could make this extended details declaratively configurable, with some data attribute that lists the field IDs to get values from.

And it doesn't need to listen in real time, it only pulls values when closing.

Also, Lit version of Details was just merged into V24b2. Might be worth upgrading everything to that.

[anoblet]

What are your thoughts on having a separate element for each step? I created a sample gist here: https://gist.github.com/anoblet/800aca41e581f3917e690fce3cb8c805

Of course we could change the listeners to the close event.

There's a bit of thinking needed to be done in order to get this done efficiently.

[lkraav]

What are your thoughts on having a separate element for each step? I created a sample gist here: https://gist.github.com/anoblet/800aca41e581f3917e690fce3cb8c805

That sounds very not DRY principle.

Again, I would not listen to list of change events, only collect and render on panel close.

[anoblet]

@lkraav

Is this the right strategy?

https://github.com/conversionxl/aybolit/pull/260/files#diff-5b340fbc027a59cb6f7754b9d9d92bd833bc8114cdd974c5cffb76fe6c4d1a37

Fire on close, switch case on step attribute.