fix: prevent unintended CSS inheritance on DropZone content

[DamianKocjan]

This pull request addresses a potential styling issue introduced by the recent change where DropZones are now wrapped in a <div>. Previously, users could directly style the container element of a component that included a DropZone (e.g., <section className="sectionBlock"><DropZone /></section>). The new wrapping <div> can cause unexpected inheritance of styles from parent elements, breaking existing layouts.

Problem:

With the new <div> wrapper, CSS rules targeting the parent container (e.g., section.sectionBlock) now also apply to the wrapping <div> and subsequently, to the content rendered within the DropZone. This can lead to unintended styling changes.

Example:

Consider the following component configuration:

const config = {
  components: {
    ComponentA: {
      render() {
        return <section className="sectionBlock"><DropZone zone="component-a-zone" /></section>;
      }
    },
    ComponentB: {
      render() {
        return <div>ComponentB</div>;
      }
    }
  }
};

Old Puck Version (Correct Behavior):

<section class="sectionBlock">
  <div>ComponentB</div>
</section>

New Puck Version (Incorrect Behavior - Unintended Styling):

<section class="sectionBlock">
  <div>  <!-- New wrapping div -->
    <div>ComponentB</div>
  </div>
</section>

In the new version, styles applied to section.sectionBlock might unintentionally affect the content within the DropZone due to the intermediate <div>.

Solution:

This pull request introduces the as prop to the DropZone component. This prop allows users to specify the HTML element to be used as the DropZone's container. By setting as="section", users can maintain the original structure and prevent unintended style inheritance.

Example Usage:

<DropZone zone="component-a-zone" as="section" />

This change allows users to have more control over the styling of their DropZones and ensures backward compatibility with existing component configurations. It avoids breaking existing layouts that rely on specific CSS rules targeting parent containers.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
puck-docs	✅ Ready (Inspect)	Visit Preview	Feb 12, 2025 10:55am

[vercel]

@DamianKocjan is attempting to deploy a commit to the Measured Team on Vercel.

A member of the Team first needs to authorize it.

[chrisvxd]

Thanks for this PR @DamianKocjan!

Some context: The previous version of Puck rendered inconsistently between the and environments. The Puck environment included a div, but the Render environment didn't. This resulted in inconsistencies between each environment.

Having said that, this as API is quite a nice addition and I can see why it might help, but I am concerned that it approach opens the door to other element types that might have their own user-agent styles that conflict with the DropZone styles and behaviour (li, table, input, etc). Although this API does mean that you don't need to update your class selectors, it doesn't provide a seamless upgrade path as the user still needs to specify the as.

Interested to hear your thoughts.

In future, we're expecting the slots API to be introduced in favour of DropZones (see #255). If we're going with as, we'll likely need to solve that for slots too.

[DamianKocjan]

I think it's easier to add extra styles for user-agent styles than to tweak css that's not in your control. We could add note with warning that style side effect might appear due to user-agent style.