feat: Group layout component

[harveyives]

Currently, there appears to be no way of grouping components without applying any additional formatting to them. The Flex component achieves this, however in some situations it could interfere with the layout, and that is not always desired.

My main use case is grouping multiple components so that they can be placed into a ConditionalRender component easily. One option would be to allow the ConditionalRender to receive a list of components, however I wanted feedback on this solution first as it is fairly simple, and may have more use cases that I’m not aware of. Thanks!

[github-actions[bot]]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
quartz	✅ Ready (View Log)	Visit Preview	00fd86a3b7f3928e6b26701f13ce5f60435ad056

[saberzero1]

ConditionalRender takes component as config option with type QuartzComponent.

I'm not sure if this would work, but can't you just pass something that resolves to a QuartzComponent?

Something like:

component: (() => {
  return (
    <div>
      {Component.Explorer()}
      {Component.Graph()}
    </div>
  )
})

[harveyives]

Thanks @saberzero1, interesting idea.

I had a quick go, and I think it would have to look a little like this:

const c: QuartzComponentConstructor = () => ((_) => {
  return (
    <div>
      {Component.Explorer()}
      {Component.Graph()}
    </div>
  );
});

layout.config.ts had to be converted to a .tsx file as well.

However, it didn’t work unfortunately. I don’t have enough knowledge of Quartz to figure out exactly why. Do you have any further ideas? It built fine, but the components themselves didn’t appear.

I would be interested in @jackyzha0’s opinion, on whether or not the type for ConditionalRender or if there are other solutions to this that fit within the philosophy of Quartz. Otherwise, perhaps the Group component I proposed could be a good candidate?

[saberzero1]

Thanks @saberzero1, interesting idea.

I had a quick go, and I think it would have to look a little like this:

const c: QuartzComponentConstructor = () => ((_) => {
  return (
    <div>
      {Component.Explorer()}
      {Component.Graph()}
    </div>
  );
});

layout.config.ts had to be converted to a .tsx file as well.

However, it didn’t work unfortunately. I don’t have enough knowledge of Quartz to figure out exactly why. Do you have any further ideas? It built fine, but the components themselves didn’t appear.

I would be interested in @jackyzha0’s opinion, on whether or not the type for ConditionalRender or if there are other solutions to this that fit within the philosophy of Quartz. Otherwise, perhaps the Group component I proposed could be a good candidate?

There is currently a bug with the Flex component not respecting mobile-only/desktop-only. I have a proposed fix here.

This fix introduces the .flex-component CSS class to address the display being overridden. You could try that branch (or wait for merge) and override .flex-component's display: flex in your quartz/styles/custom.scss to disable the flex behavior.

Optionally, you could use the :has() CSS pseudo-element to enable/disable the flex behavior based on elements contained inside.