Update dependency daisyui to v3 - autoclosed (!64) · Merge requests · Arch Linux / neoasknot

renovate requested to merge renovate/daisyui-3.x into main Jun 01, 2023

This MR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
daisyui (source)	`^2.52.0` -> `^3.0.1`

Release Notes

saadeghi/daisyui

`v3.0.1`

Compare Source

`v3.0.0`

Compare Source

New components

New loading component.

Shows a loading spinner and can be used inside any element.

You can choose different spinners: loading-spinner, loading-dots, loading-ring, loading-ball, loading-bars, loading-infinity

You can change the color using text-* utility class.

https://daisyui.com/components/loading/

New accordion.

It's collapse but now we can use it with radio buttons which allows us to make a JS-free and accessible accordion.

https://daisyui.com/components/accordion/
New join class

It's a replacement for button-group and input-group (with a more generic name) and it groups items together vertically or horizontally. It also gives border radius to the first and last item (based on responsive direction) and also if your item have a border, it overlaps the border between items so it looks good automatically.

join also can apply style to the indirect children. It's useful when you want ot have a wrapper around your button (for dropdown, tooltip, etc.) and you just want to apply style to the actual button, not the wrapper.

https://daisyui.com/components/join/

Theme improvements

Now only light and dark themes are active by default.

You can enable all themes by adding themes: true to daisyUI config or you can list the names of the themes you want.

https://daisyui.com/docs/config/

This is a decent improvement for CSS size on majority of websites because most developers use only 2 or 3 themes but all themes being active by default, was increasing the CSS size unnecessarily.
The default dark theme is now darker and it looks more comfortable when using a website at night.
Following themes had improvements in colors and are now more accessible when combining different elements together:

light, dark, bumblebee, forest, garden, halloween, luxury, retro, synthwave

Of course you can still customize the colors as you wish or even add your own themes.

New features on components

drawer no longer disables the root element scroll. Now it naturally let's the root element scroll.

Even with providing a responsive and collapsible sidebar, it no longer has daisyUI 2.x limitations like losing the scroll position when the page is changes or disabling the scroll on the root element.
Now drawer is hidden by default.

Instead of using uncustomizable drawer-mobile, we can use a responsive class like lg:drawer-open to show drawer on specific screen sizes.

Previously it wasn't customizable and drawer-mobile was only showing the drawer on lg: screen size.

Update your drawer class:
```
- <div class="drawer drawer-mobile">
+ <div class="drawer lg:drawer-open">
```
https://daisyui.com/components/drawer/
modal now supports the new native HTML element <dialog> as well.

<dialog> provides accessibility features without needing JS:
- Locks the focus inside the modal
- Closes the modal when you press the escape key
- Can be closed when you click outside the modal
- Prevents z-index issues
- Accessible for screen readers
Add new modal-backdrop class. The backdrop that covers the back of modal so we can close the modal by clicking outside.

Add new modal-top modifier if you want to align the modal to the top of the screen (modal-middle and modal-bottom are also available)

<button class="btn" onclick="my_modal.showModal()">
  open modal
</button>

<dialog id="my_modal" class="modal">
  <form method="dialog" class="modal-box">
    <p>Content</p>
    <button class="btn">Close</button>
  </form>
</dialog>

https://daisyui.com/components/modal/

tooltip now gets visible with keyboard navigation as well.
tooltip class is now responsive.

You can use responsive prefixes like sm:, md: etc to show tooltip only on specific screen sizes.
All tooltip position modifiers (tooltip-top, tooltip-bottom, tooltip-left, tooltip-right) are now responsive as well. So you can move the tooltip to different directions using responsive prefixes. This is useful when your tooltip is on the edge of screen on some screen sizes.

https://daisyui.com/components/tooltip/
New btn-neutral modifier class for button.
The default btn is now using bg-base-200 background color instead of neutral (a high contrast dark color) color.

Previously the default button was using a high contrast color and we didn't have any options to make a subtle button to look as consistent as other solid colors (primary, secondary, etc.) With this color as a default, we can have consistent set of solid buttons without relying on variants like btn-ghost or btn-outline which are not always the best option.

Now when we need a dark button we can use btn-neutral modifier class.
btn click animation now has slightly less bounce effect.
The default btn focus ring color is now neutral instead of neutral-focus
btn now has a gap-2 by default. Useful for having text and icons inside a button, next to each other.

https://daisyui.com/components/button/
New badge-neutral modifier class for badge.
The default badge is now using bg-base-200 background color instead of neutral (same as the default button)
badge inside the menu now justifies to the end by default.

This is useful when you use a badge inside a menu item because it aligns to the end of the menu item automatically.

You can use justify-self-* to override this behavior.

https://daisyui.com/components/badge/
All new style for menu
- All menu levels (ul > li > ul > ...) now have a consistent style. Showing a visually recognizable hierarchy (instead of opening a floating menu for the 2nd level by default and putting the rest of the levels inside the menu).
  
  This is good news for people who need multiple levels of submenu (either vertical or horizontal)
```
<ul class="menu">
  <li><a>Item 1</a></li>
  <li>
    <a>Parent</a>
    <ul>
      <li><a>Submenu 1</a></li>
      <li><a>Submenu 2</a></li>
    <li>
    <a>Item 3</a>
  </li>
</ul>
```
  https://daisyui.com/components/menu/#submenu
- Using the standard <details> element now you can have collapsible submenu without any extra class name or tabindex, without relying on dropdown.
```

<ul class="menu">
  <li><a>Item 1</a></li>
  <li>
    <details>
      <summary>Parent</summary>
      <ul>
        <li><a>Submenu 1</a></li>
        <li><a>Submenu 2</a></li>
      <li>
    </details>
    <a>Item 3</a>
  </li>
</ul>
```
  This allows us to easily create a multi-level 👏 collapsible 👏 accessible 👏 JS-free 👏 responsive 👏 and still customizable 👏 menu just by using a class name
  
  https://daisyui.com/components/menu/#collapsible-submenu
  
  Also, you can now create responsive "mega menus" using daisyUI.
  
  See all examples: https://daisyui.com/components/menu/
- Menu items are slightly smaller now. This makes more consistency with other components.
- Now menu has padding by default. No need for p-* class
- Menu items have border radius by default (you can change it using rounded-* utility classes)
- instead of menu-compact class now we have the standard sizing utilities like other elements:
  - menu-xs
  - menu-sm
  - menu-md
  - menu-lg
  https://daisyui.com/components/menu/#menu-sizes
- <li> with active class now has a neutral background color instead of primary. This creates a better design hierarchy and moves the focus to the more important elements like "call to action" buttons.
- new class name menu-dropdown-toggle for the parent item if you want to control it using JS
- new class name menu-dropdown for the collapsed submenu if you want to control it using JS
- new modifier class name menu-dropdown-show for to reveal the collapsed submenu if you want to control it using JS
  
  https://daisyui.com/components/menu/#collapsible-submenu-that-works-with-class-names
- badge inside the menu item now justifies to the end by default.
- New .focus class for menu items applies the same style when you focus the menu item using a mouse. This class name is useful if you want to apply styles for keyboard navigation as well.
dropdown now supports <details> tag as well.

This allows us to close the dropdown on second click or control the dropdown using JavaScript.

Class names are the same as before, but the HTML structure is simpler.
```
<details class="dropdown">
  <summary class="btn">open or close</summary>
  <div class="dropdown-content">Content</div>
</details>
```
The former HTML structure of dropdown (using CSS focus) is still supported and you can use whichever you prefer.

https://daisyui.com/components/dropdown/
carousel is now inline-flex by default (instead of flex)

This makes it easier to use carousel aside other elements.
btn class can now be used on <input type=radio> and <input type=checkbox> as well.

This is really usefull when you want to make a group of buttons visually those buttons are just changing a value. It's also better for accessibility because it's a native HTML element, it supports keyboard navigation and you won't need to deal with JavaScript or hidden inputs and labels.
```
<input type="radio" aria-label="Option 1" class="btn" />
<input type="radio" aria-label="Option 2" class="btn" />
```
The aria-label value will be shown inside the button by default and it's also accessible for screen readers. When radio input is checked, it gets the primary color (but you can customize it of course)

Same thing for checkbox:
```
<input type="checkbox" aria-label="Check me!" class="btn" />
```
https://daisyui.com/components/button/#buttons-with-different-html-tags
New style for .table

Starting with daisyUI 3.0, .table has a less opinionated style. It allows us to use tables on every surface colors and apply our own background color if needed.

Previously every table cell had background color and the whole table had a very opinionated border radius, header color, etc. This was not very flexible and it was hard to customize. But now you can use utility classes to customize the table as you wish.
table now has 4 sizes: table-xs, table-sm, table-md, table-lg which provides different font sizes and paddings to fit well on different screen sizes.
New modifier class names table-pin-rows and table-pin-cols for table

These classes are useful when you want to pin the heading row or heading column of a table. It's useful for tables with a lot of columns or rows.

Previously table's first header was pinned by default and this was limiting the use cases. Now you can use these classes only if you want the header to be pinned.

table-pin-rows makes the row inside <thead> sticky to top and the row inside <tfoot> sticky to bottom. table-pin-cols makes the <th> columns sticky to left and right automatically.

https://daisyui.com/components/table/
Improve collapse transition. No more jumps.
collapse now works with <details> tag as well.

This allows us to create a collapsible content without any extra class name or tabindex, without relying on CSS :focus.
```
<details class="collapse">
  <summary class="collapse-title">Click to open/close</summary>
  <div class="collapse-content">content</div>
</details>
```
This is useful when you want to create a collapsible content that is accessible and works without JavaScript.

collapse now works with radio inputs as well. This allows you to create an accordion JS-free where opening 1 item closes the other items.

<div class="collapse">
  <input type="radio" name="my-accordion-1" checked="checked" /> 
  <div class="collapse-title">Click to open this and close others</div>
  <div class="collapse-content">Content</div>
</div>

<div class="collapse">
  <input type="radio" name="my-accordion-1" /> 
  <div class="collapse-title">Click to open this and close others</div>
  <div class="collapse-content">Content</div>
</div>

<div class="collapse">
  <input type="radio" name="my-accordion-1" /> 
  <div class="collapse-title">Click to open this and close others</div>
  <div class="collapse-content">Content</div>
</div>

https://daisyui.com/components/collapse/

General improvements

:hover styles are now only available on devices that actually support hover.

On devices without hover, It's always annoying to work with elements that have hover styles because with the first tap, the hover style is applied and it won't go away until you tap somewhere else. This is confusing and annoying for a lot of people and it's not a good user experience.

Starting with daisyUI 3.0, hover styles are disabled on devices that don't support hover.
Now :disabled buttons and form elements have a disabled style as well. Previously the style was only applied to the elements with disabled attribute or *-disabled class name.

This is useful when you want to disable the whole form using a fieldset.

Breaking changes

Removed drawer-mobile class. If you want to have a fixed drawer on desktop but you want to hide it on mobile use lg:drawer-open instead (or any other responsive prefix)

Update your HTML:
```
- <div class="drawer drawer-mobile">
+ <div class="drawer lg:drawer-open">
```
Removed extra wrapper <div> from alert.
The previous HTML structure was not very efficient and it was causing many confusions because that extra div was necessary for the style to work properly.

Update your alert structure and remove that extra div inside <div class="alert">:
```
  <div class="alert">
-   <div>
      <span>12 unread messages. Tap to see.</span>
-   </div>
  </div>
```
table now has a width: 100% by default.

This may not be a breaking change for most people. Most developers already want the table to fill the width and they use it with w-full class or the data itself is long enough to cover the width. But if you have a small table, placed next to other elements, you should now add w-auto or another width class to the table to make it smaller.
table doesn't have a active modifier class anymore

With the new style you can use utility classes to apply background color for a row. Previously it wasn't possible because each cell had a background color and we had to rely on a new modifier class like active. Now you can use bg-base-200 or any other color.
```
- <tr class="active">
+ <tr class="bg-base-200">
```
table doesn't have a hover modifier class anymore

Now you can use hover:bg-base-200 or any other color instead. It's more flexible and you don't have to style each table cell separately.
```
- <tr class="hover">
+ <tr class="hover:bg-base-200">
```
table doesn't have a table-compact modifier class anymore.

Use one of these new size modifiers instead:

table-xs, table-sm, table-md, table-lg
```
- <table class="table table-compact">
+ <table class="table table-sm">
```
btn default color is base-200 now.

This creates consistency for all our solid button variants while providing access to the whole color palette.

You can use the new modifier btn-neutral if you prefer to keep the former color (neutral) for your button:
```
- <button class="btn">Button</button>
+ <button class="btn btn-neutral">Button</button>
```
dropdown doesn't have a z-index by default now.

Using z-index for dropdown as a default style was a mistake because sometimes we need elements on top of th dropdown and sometimes we want the dropdown to be on top of other elements. Now you can use z-[1] or any other z-index class to control it as you want.
badge inside btn now doesn't inherit the btn color automatically anymore. This was a bad design decision and it was limiting us to customize badge colors when it's inside a btn

Bug fixes:

Fix step connectors not being visible on RTL mode.
Fix radio animation on Safari.
Fix dropdown-hover not working when focused using keyboard.
Fix tooltip arrow using pixel formats and causing inaccurate positioning with different browser zoom levels.
Fix toast whitespace issue

Developer experience improvements

In the package, directory /src/colors is renamed to /src/theming because it's doing more than colors and the previous name was confusing.
Remove extra dev dependencies.
Console log is now more informative. It warns you about possible config issues and how to fix them.
daisyUI repo itself is now smaller in size and it takes less disk space. Also the new document website is running on the latest version of SvelteKit and Vite.

2.51.5 (2023-03-21)

Bug Fixes

#1700 (ef1941e)

2.51.4 (2023-03-15)

Bug Fixes

#1666, fix: #1691 - Button group responsive classes not working properly. (#1676) (60893db)

2.51.3 (2023-03-01)

Bug Fixes

#1569 extend breadcrumb support for an ordered list (#1648) (ca82b9b)

2.51.2 (2023-02-27)

Bug Fixes

#1640 (d075a2e)

2.51.1 (2023-02-25)

Bug Fixes

transition delay of the background colors on input, select and textarea (#1606) (cc16946)

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this MR and you won't be reminded about this update again.

If you want to rebase/retry this MR, check this box

This MR has been generated by Renovate Bot.

Edited Jun 02, 2023 by renovate

Admin message

Update dependency daisyui to v3 - autoclosed

Release Notes

v3.0.1

v3.0.0

New components

Theme improvements

New features on components

General improvements

Breaking changes

Bug fixes:

Developer experience improvements

2.51.5 (2023-03-21)

Bug Fixes

2.51.4 (2023-03-15)

Bug Fixes

2.51.3 (2023-03-01)

Bug Fixes

2.51.2 (2023-02-27)

Bug Fixes

2.51.1 (2023-02-25)

Bug Fixes

Configuration

Merge request reports

`v3.0.1`

`v3.0.0`