-
Notifications
You must be signed in to change notification settings - Fork 21
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.
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
chore(deps): update dependency daisyui to v3 - autoclosed #644
Conversation
|
Codecov Report
@@ Coverage Diff @@
## develop #644 +/- ##
========================================
Coverage 96.14% 96.14%
========================================
Files 91 91
Lines 2362 2362
Branches 509 509
========================================
Hits 2271 2271
Misses 76 76
Partials 15 15 📣 Codecov offers a browser extension for seamless coverage viewing on GitHub. Try it in Chrome or Firefox today! |
1e9603d
to
636efed
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Breaks the site, needs work
ad7865b
to
9c5817d
Compare
5d4c194
to
d4e8820
Compare
fdf17c0
to
c114703
Compare
089547e
to
d7b2d94
Compare
9796797
to
a857280
Compare
9f8614f
to
840b8ca
Compare
8434534
to
1bb90d6
Compare
b9dab7e
to
a193906
Compare
a193906
to
28f6a0c
Compare
28f6a0c
to
c95dc1a
Compare
Important Auto Review SkippedBot user detected. To trigger a single review, invoke the TipsChat with CodeRabbit Bot (
|
5ce186b
to
1b0d805
Compare
1b0d805
to
3f0215c
Compare
This PR contains the following updates:
1.25.4
->3.9.4
Release Notes
saadeghi/daisyui (daisyui)
v3.9.4
Compare Source
v3.9.3
Compare Source
v3.9.2
Compare Source
v3.9.1
Compare Source
v3.9.0
Compare Source
3.8.3 (2023-10-02)
Bug Fixes
3.8.2 (2023-09-30)
3.8.1 (2023-09-27)
Bug Fixes
disable input outline when there's an
<input>
tag inside a.input
wrapperadd
:focus-within
style to.input
(#2363)#2360 (20a8f62)
v3.8.3
Compare Source
v3.8.2
Compare Source
v3.8.1
Compare Source
v3.8.0
Compare Source
Features
tooltip
color variants now can be extended using apply (11fb1b1), closes #23713.7.7 (2023-09-21)
3.7.6 (2023-09-19)
Bug Fixes
join
(#2334) (e8b3589)3.7.5 (2023-09-17)
3.7.4 (2023-09-13)
3.7.3 (2023-09-06)
Bug Fixes
3.7.2 (2023-09-06)
Bug Fixes
3.7.1 (2023-09-06)
v3.7.7
Compare Source
v3.7.6
Compare Source
v3.7.5
Compare Source
v3.7.4
Compare Source
v3.7.3
Compare Source
v3.7.2
Compare Source
v3.7.1
Compare Source
v3.7.0
Compare Source
Features
3.6.6 (2023-09-06)
3.6.5 (2023-09-04)
Bug Fixes
<select>
font weight is not semibold anymore because it causes a bug in Safari (c773cdf)3.6.4 (2023-08-30)
Bug Fixes
3.6.3 (2023-08-25)
Bug Fixes
3.6.2 (2023-08-25)
3.6.1 (2023-08-22)
v3.6.6
Compare Source
v3.6.5
Compare Source
v3.6.4
Compare Source
v3.6.3
Compare Source
v3.6.2
Compare Source
v3.6.1
Compare Source
v3.6.0
Compare Source
Add types (
/src/index.d.ts
)3.5.1 (2023-08-03)
Bug Fixes
v3.5.1
Compare Source
v3.5.0
Compare Source
Features
v3.4.0
Compare Source
Features
3.3.2 (2023-07-24)
Bug Fixes
3.3.1 (2023-07-20)
Bug Fixes
toolbar
class of browser mockup tomockup-browser-toolbar
to avoid future conflicts (23f9e17)v3.3.2
Compare Source
v3.3.1
Compare Source
v3.3.0
Compare Source
Features
3.2.2 (2023-07-20)
Bug Fixes
3.2.1 (2023-07-07)
Bug Fixes
v3.2.2
Compare Source
v3.2.1
Compare Source
v3.2.0
Compare Source
Features
3.1.11 (2023-07-07)
Bug Fixes
3.1.10 (2023-07-06)
Bug Fixes
3.1.9 (2023-07-05)
Bug Fixes
3.1.8 (2023-07-05)
Bug Fixes
3.1.7 (2023-06-28)
3.1.6 (2023-06-23)
Bug Fixes
3.1.5 (2023-06-20)
Bug Fixes
3.1.4 (2023-06-20)
3.1.3 (2023-06-20)
3.1.2 (2023-06-20)
Bug fixes
3.1.1 (2023-06-16)
Bug Fixes
v3.1.11
Compare Source
v3.1.10
Compare Source
v3.1.9
Compare Source
v3.1.8
Compare Source
v3.1.7
Compare Source
v3.1.6
Compare Source
v3.1.5
Compare Source
v3.1.4
Compare Source
v3.1.3
Compare Source
v3.1.2
Compare Source
v3.1.1
Compare Source
v3.1.0
Compare Source
3.0.25 (2023-06-11)
3.0.21 (2023-06-09)
Bug Fixes
3.0.18 (2023-06-07)
Bug Fixes
3.0.5 (2023-06-07)
Bug Fixes
3.0.4 (2023-06-07)
Bug Fixes
3.0.2 (2023-06-03)
Bug Fixes
3.0.1 (2023-06-02)
Bug Fixes
v3.0.29
Compare Source
v3.0.28
Compare Source
v3.0.27
Compare Source
v3.0.26
Compare Source
v3.0.25
Compare Source
v3.0.24
Compare Source
v3.0.23
Compare Source
v3.0.22
Compare Source
v3.0.20
Compare Source
v3.0.19
Compare Source
v3.0.18
Compare Source
v3.0.17
Compare Source
v3.0.16
Compare Source
v3.0.15
Compare Source
v3.0.14
Compare Source
v3.0.12
Compare Source
v3.0.11
Compare Source
v3.0.10
Compare Source
v3.0.9
Compare Source
v3.0.8
Compare Source
v3.0.7
Compare Source
v3.0.6
Compare Source
v3.0.5
Compare Source
v3.0.4
Compare Source
v3.0.3
Compare Source
v3.0.2
Compare Source
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
classIt's a replacement for
button-group
andinput-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 (fordropdown
,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
anddark
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 likelg:drawer-open
to show drawer on specific screen sizes.Previously it wasn't customizable and
drawer-mobile
was only showing the drawer onlg:
screen size.Update your drawer class:
https://daisyui.com/components/drawer/
modal
now supports the new native HTML element<dialog>
as well.<dialog>
provides accessibility features without needing JS: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 themodal
to the top of the screen (modal-middle
andmodal-bottom
are also available)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 showtooltip
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 usingbg-base-200
background color instead ofneutral
(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
orbtn-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 nowneutral
instead ofneutral-focus
btn
now has agap-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 usingbg-base-200
background color instead ofneutral
(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)
https://daisyui.com/components/menu/#submenu
Using the standard
<details>
element now you can have collapsible submenu without any extra class name ortabindex
, without relying ondropdown
.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-*
classMenu 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>
withactive
class now has aneutral
background color instead ofprimary
. 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 JSnew class name
menu-dropdown
for the collapsed submenu if you want to control it using JSnew modifier class name
menu-dropdown-show
for to reveal the collapsed submenu if you want to control it using JShttps://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.
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 nowinline-flex
by default (instead offlex
)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.
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:
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
andtable-pin-cols
fortable
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
.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.
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 withdisabled
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 uselg:drawer-open
instead (or any other responsive prefix)Update your HTML:
Removed extra wrapper
<div>
fromalert
.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">
:table
now has awidth: 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 addw-auto
or another width class to the table to make it smaller.table
doesn't have aactive
modifier class anymoreWith 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 usebg-base-200
or any other color.table
doesn't have ahover
modifier class anymoreNow 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.table
doesn't have atable-compact
modifier class anymore.Use one of these new size modifiers instead:
table-xs
,table-sm
,table-md
,table-lg
btn
default color isbase-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:dropdown
doesn't have az-index
by default now.Using z-index for
dropdown
as a default style was a mistake because sometimes we need elements on top of the dropdown and sometimes we want the dropdown to be on top of other elements. Now you can usez-[1]
or any other z-index class to control it as you want.badge
insidebtn
now doesn't inherit thebtn
color automatically anymore. This was a bad design decision and it was limiting us to customizebadge
colors when it's inside abtn
loading
is no longer a modifier class forbtn
. Instead you can use the newloading
component class inside the button. This allows us to put the loading whereever we need it.bordered
andhover-bordered
modifier class names formenu
items are removed. Starting with version 3 there is no need for them because you can use Tailwind CSS border utility classes whereever you need.Bug fixes:
step
connectors not being visible on RTL mode.radio
animation on Safari.dropdown-hover
not working when focused using keyboard.tooltip
arrow using pixel formats and causing inaccurate positioning with different browser zoom levels.toast
whitespace issueDeveloper experience improvements
/src/colors
is renamed to/src/theming
because it's doing more than colors and the previous name was confusing.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
v2.52.0
Compare Source
v2.51.6
Compare Source
v2.51.5
Compare Source
v2.51.4
Compare Source
v2.51.3
Compare Source
v2.51.2
Compare Source
v2.51.1
Compare Source
v2.51.0
Compare Source
Features
tab-disabled
class name for visually disabling a tab itemtabs-boxed
(not just the active tab)Bug Fixes
2.50.2 (2023-02-20)
Bug Fixes
2.50.1 (2023-02-14)
Bug Fixes
v2.50.2
Compare Source
v2.50.1
Compare Source
v2.50.0
Compare Source
Bug Fixes
menu-title
opacity and color inheritance (bec2094)rating
border radius on mobile (df41fbc)v2.49.0
Compare Source
Bug Fixes
v2.48.0
Compare Source
Features
textarea
now hasxs
,sm
,md
andlg
sizes: #1462Bug Fixes
A
tooltip
without adata-tip
attribute will not show an empty tooltip anymore #1501Fix bordered menu entry on sub menus #1536
#1551 (8fce093)
2.47.1 (2023-01-25)
v2.47.1
Compare Source
v2.47.0
Compare Source
Features
Bug Fixes
2.46.1 (2023-01-02)
v2.46.1
Compare Source
v2.46.0
Compare Source
Bug Fixes
v2.45.0
Compare Source
Bug Fixes
v2.44.0
Compare Source
Bug Fixes
2.43.2 (2022-12-12)
2.43.1 (2022-12-12)
Bug Fixes
v2.43.2
Compare Source
v2.43.1
Compare Source
v2.43.0
Compare Source
Bug Fixes
2.42.1 (2022-11-24)
Bug Fixes
chat
(3887c6e)v2.42.1
Compare Source
v2.42.0
Compare Source
Features
chat
(522bc5e)Bug Fixes
v2.41.0
Compare Source
Features
toggle
now looks different from unchecked toggleBug Fixes
2.40.1 (2022-11-14)
Bug Fixes
v2.40.1
Compare Source
v2.40.0
Compare Source
Bug Fixes
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 PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR has been generated by Mend Renovate. View repository job log here.