Skip to content

feat: improvements related to drawer #4215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

feat: improvements related to drawer #4215

wants to merge 7 commits into from
+69 −61

Conversation

@pdanpdan
Copy link
Contributor

@pdanpdan pdanpdan commented Oct 23, 2025 •
edited
Loading

  1. add transition for :root bg change on scrollock to be in sync with backdrop color change
  2. do not force drawer height to screen height when drawer-open - in this case the drawer belongs to the natural flow of the document.
  3. reorganize layers in drawer so that :checked and drawer-open are both in modifiers layer - in this way we can apply style for :checked and revert them if drawer-open
  4. do not alter scrollbar color if drawer-open (it is part of the normal flow of the document)
  5. move logic for drawer required backdrop in drawer (from rootscrolllock)

@saadeghi
This move is good from the POV of css generation because now the styles are auto-generated in case variants are used for drawer-open.

This move is not good because now we have styles that concern rootscrolllock in drawer.

The best would be if we could move these 2 blocks of code in rootscrolllock and declare them as variants as they are in drawer.

Fixed the problem:

  • now we have rootscrollgutter and rootscrolllock that apply gutter and lock based on settings (if included)
  • modal and drawer set the values for the settings

So rootscrollgutter and rootscrolllock are independent, can be included as desired, do not depend on tw prefix or daisy prefix, and do not depend on how(variant) the modal or drawer are used

@pdanpdan
feat: add a transition for :root bg change on scrolllock to sync with…
5d14548 
… backdrop
@pdanpdan
feat: allow auto height for drawer-open
100562e 
- drawer-open will be part of the page content and we do not want it to be forced to screen height (it will participate to general page height)
- if we want to force it to screen height we can use `h-screen` on `drawer-side`
@pdanpdan
feat: reorganize layers so that :checked and drawer-open for the draw…
380b0a8 
…er are both in modifiers layer

This allows us to apply style when drawer visibility is checked, and revert-layer later if it is drawer-open.

Do not change scrollbar-color if .drawer-open (the scrollbar is part of the page normal flow)
@pdanpdan
feat: move logic for drawer required backdrop in drawer (from rootscr…
c3a8224 
…olllock)

This move is good from the POV of css generation because now the styles are auto-generated in case variants are used for drawer-open.

This move is not good because now we have styles that concern rootscrolllock in drawer.

The best would be if we could move these 2 blocks of code in rootscrolllock and declare them as variants as they are in drawer.
@pdanpdan pdanpdan marked this pull request as ready for review October 23, 2025 23:40
@pdanpdan
Copy link
Contributor Author

I used this as Component.astro for testing

<dialog id="modal_1" class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="modal-action">
      <label class="btn btn-ghost" for="show-scroll">
        Toggle page scrollbar
      </label>
      <label class="btn btn-ghost" for="hide-scroll-modal1">
        Toggle modal scrollbar
      </label>
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <button class="btn">Close</button>
      </form>
    </div>

    <input type="checkbox" class="peer hidden" id="hide-scroll-modal1" checked />
    <div class="peer-checked:hidden">
      <p class="py-4">Line 1</p>
      <p class="py-4">Line 2</p>
      <p class="py-4">Line 3</p>
      <p class="py-4">Line 4</p>
      <p class="py-4">Line 5</p>
      <p class="py-4">Line 6</p>
      <p class="py-4">Line 7</p>
      <p class="py-4">Line 8</p>
      <p class="py-4">Line 9</p>
      <p class="py-4">Line 10</p>
      <p class="py-4">Line 11</p>
      <p class="py-4">Line 12</p>
      <p class="py-4">Line 13</p>
      <p class="py-4">Line 14</p>
      <p class="py-4">Line 15</p>
      <p class="py-4">Line 16</p>
      <p class="py-4">Line 17</p>
      <p class="py-4">Line 18</p>
      <p class="py-4">Line 19</p>
      <p class="py-4">Line 20</p>
    </div>
  </div>
</dialog>

<dialog id="modal_2" class="modal modal-bottom">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Hello!</h3>
    <p class="py-4">Press ESC key or click the button below to close</p>
    <div class="modal-action">
      <label class="btn btn-ghost" for="show-scroll">
        Toggle page scrollbar
      </label>
      <label class="btn btn-ghost" for="hide-scroll-modal2">
        Toggle modal scrollbar
      </label>
      <form method="dialog">
        <!-- if there is a button in form, it will close the modal -->
        <button class="btn">Close</button>
      </form>
    </div>

    <input type="checkbox" class="peer hidden" id="hide-scroll-modal2" checked />
    <div class="peer-checked:hidden">
      <p class="py-4">Line 1</p>
      <p class="py-4">Line 2</p>
      <p class="py-4">Line 3</p>
      <p class="py-4">Line 4</p>
      <p class="py-4">Line 5</p>
      <p class="py-4">Line 6</p>
      <p class="py-4">Line 7</p>
      <p class="py-4">Line 8</p>
      <p class="py-4">Line 9</p>
      <p class="py-4">Line 10</p>
      <p class="py-4">Line 11</p>
      <p class="py-4">Line 12</p>
      <p class="py-4">Line 13</p>
      <p class="py-4">Line 14</p>
      <p class="py-4">Line 15</p>
      <p class="py-4">Line 16</p>
      <p class="py-4">Line 17</p>
      <p class="py-4">Line 18</p>
      <p class="py-4">Line 19</p>
      <p class="py-4">Line 20</p>
    </div>
  </div>
</dialog>

<div class="drawer xl:drawer-open">
  <input id="drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <div class="p-4">
      <div class="navbar bg-base-300 gap-4">
        <button class="btn btn-primary" onclick="modal_1.showModal()">
          Open Modal
        </button>

        <button class="btn btn-primary" onclick="modal_2.showModal()">
          Open Bottom Modal
        </button>

        <label class="btn btn-secondary drawer-button" for="drawer">
          Open drawer
        </label>

        <label class="btn btn-ghost" for="show-scroll">
          Toggle scrollbar
        </label>
      </div>

      <input type="checkbox" class="peer hidden" id="show-scroll" />
      <div class="h-[20vh] peer-checked:h-[120vh] mt-2 bg-base-200 p-4">
        Page content here
      </div>
    </div>
  </div>

  <div class="drawer-side max-h-screen">
    <label for="drawer" aria-label="close sidebar" class="drawer-overlay"></label>

    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <li>
        <label class="btn btn-ghost" for="show-scroll">
          Toggle page scrollbar
        </label>
      </li>
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
      <li>
        <label class="btn btn-ghost" for="hide-scroll-drawer">
          Toggle drawer scrollbar
        </label>
      </li>
      <input type="checkbox" class="peer hidden" id="hide-scroll-drawer" checked />
      <div class="peer-checked:hidden">
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
        <li><a>Sidebar Item 1</a></li>
        <li><a>Sidebar Item 2</a></li>
      </div>
    </ul>
  </div>
</div>

@saadeghi saadeghi self-assigned this Oct 23, 2025
saadeghi
saadeghi reviewed Oct 24, 2025
View reviewed changes
@pdanpdan
feat: refactor rootscrollgutter and rootscrolllock
decd39b 
- rootscrolllock and rootscrollgutter (if included) apply settings based on flags set by the components as needed
- modal always sets flags for overflow hidden, backdrop, ...
- drawer checked sets flags for overflow hidden, backdrop, ... in its own layer
- but drawer open reverts flags for overflow hidden, backdrop, ... in its own layer
@pdanpdan
fix: only revert drawer setting if it was checked
42b4207
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@saadeghi saadeghi saadeghi left review comments

Assignees

@saadeghi saadeghi

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@pdanpdan @saadeghi