This repository has been archived by the owner on Jun 7, 2024. It is now read-only.
chore(deps): update dependency daisyui to v4 #14
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=60&v=4){kind=small}
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
renovate
bot
force-pushed
the
renovate/daisyui-4.x
branch
from
d5dcbaf to
bd8bbbc
Compare
Renovate Ignore NotificationBecause you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
^2.24.0->^4.0.0Release Notes
saadeghi/daisyui (daisyui)
v4.0.7Compare Source
v4.0.6Compare Source
Bug Fixes
v4.0.5Compare Source
Bug Fixes
v4.0.4Compare Source
Bug Fixes
v4.0.3Compare Source
v4.0.2Compare Source
Bug Fixes
v4.0.1Compare Source
v4.0.0Compare Source
Breaking changes
--p,--s, etc) now contain OKLCH values instead of HSL.hsl(var(--p))you have to change it tooklch(var(--p))*-focuscolor names. They where being used only for buttons.primary-focussecondary-focusaccent-focusneutral-focuscolor-mix(). For example to make primary (--p) color darker, you can use this class name:bg-[color-mix(in_oklab,oklch(var(--p)),black)]mr-*,pl-*, etc)rtldaisyUI configtailwindcss-flipplugin anymore.rtl: trueintailwind.config.jsdir=rtlto<html>tag and everything will be RTL on runtime.tabitem.tabare removed:tab-liftedtab-borderedtab-lgtab-mdtab-smtab-xstabsclass instead:tabs-liftedtabs-borderedtabs-lgtabs-mdtabs-smtabs-xstabsclass is now using grid, instead of flex.:before) instead of two (:beforeandafter)--btn-text-caseCSS variable from themesrtlconfig because RTL is now automaticcolord,rtlcss,postcss,tailwindcssculori,picocolorsFeatures
timelineskeletondifftheme-controllerdivider-primarydivider-secondarydivider-accentdivider-neutraldivider-successdivider-warningdivider-infodivider-errordivider-startdivider-endbtn-infobtn-successbtn-warningbtn-errortabtag now grows and fills the empty spacetabclass can now be a radio input.aria-labelvalue will be shown as the tab title so it's accessible for screen readers and keyboard navigation.tab-contentclass allows you to switch tab content@tailwindcss/forms@tailwindcss/formsplugin (even though you don't need it alongside daisyUI)themeRootconfig:rootto receive the color CSS variables.Bug Fixes
Docs
v3.9.4Compare Source
v3.9.3Compare Source
v3.9.2Compare Source
v3.9.1Compare Source
v3.9.0Compare 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.inputwrapperadd
:focus-withinstyle to.input(#2363)#2360 (20a8f62)
v3.8.3Compare Source
v3.8.2Compare Source
v3.8.1Compare Source
v3.8.0Compare Source
Features
tooltipcolor 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.7Compare Source
v3.7.6Compare Source
v3.7.5Compare Source
v3.7.4Compare Source
v3.7.3Compare Source
v3.7.2Compare Source
v3.7.1Compare Source
v3.7.0Compare 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.6Compare Source
v3.6.5Compare Source
v3.6.4Compare Source
v3.6.3Compare Source
v3.6.2Compare Source
v3.6.1Compare Source
v3.6.0Compare Source
Add types (
/src/index.d.ts)3.5.1 (2023-08-03)
Bug Fixes
v3.5.1Compare Source
v3.5.0Compare Source
Features
v3.4.0Compare Source
Features
3.3.2 (2023-07-24)
Bug Fixes
3.3.1 (2023-07-20)
Bug Fixes
toolbarclass of browser mockup tomockup-browser-toolbarto avoid future conflicts (23f9e17)v3.3.2Compare Source
v3.3.1Compare Source
v3.3.0Compare Source
Features
3.2.2 (2023-07-20)
Bug Fixes
3.2.1 (2023-07-07)
Bug Fixes
v3.2.2Compare Source
v3.2.1Compare Source
v3.2.0Compare 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.11Compare Source
v3.1.10Compare Source
v3.1.9Compare Source
v3.1.8Compare Source
v3.1.7Compare Source
v3.1.6Compare Source
v3.1.5Compare Source
v3.1.4Compare Source
v3.1.3Compare Source
v3.1.2Compare Source
v3.1.1Compare Source
v3.1.0Compare 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.29Compare Source
v3.0.28Compare Source
v3.0.27Compare Source
v3.0.26Compare Source
v3.0.25Compare Source
v3.0.24Compare Source
v3.0.23Compare Source
v3.0.22Compare Source
v3.0.20Compare Source
v3.0.19Compare Source
v3.0.18Compare Source
v3.0.17Compare Source
v3.0.16Compare Source
v3.0.15Compare Source
v3.0.14Compare Source
v3.0.12Compare Source
v3.0.11Compare Source
v3.0.10Compare Source
v3.0.9Compare Source
v3.0.8Compare Source
v3.0.7Compare Source
v3.0.6Compare Source
v3.0.5Compare Source
v3.0.4Compare Source
v3.0.3Compare Source
v3.0.2Compare Source
v3.0.1Compare Source
v3.0.0Compare Source
New components
New
loadingcomponent.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-infinityYou can change the color using
text-*utility class.https://daisyui.com/components/loading/
New accordion.
It's
collapsebut 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
joinclassIt's a replacement for
button-groupandinput-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.joinalso 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
lightanddarkthemes are active by default.You can enable all themes by adding
themes: trueto 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
darktheme 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,synthwaveOf course you can still customize the colors as you wish or even add your own themes.
New features on components
drawerno 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
draweris hidden by default.Instead of using uncustomizable
drawer-mobile, we can use a responsive class likelg:drawer-opento show drawer on specific screen sizes.Previously it wasn't customizable and
drawer-mobilewas only showing the drawer onlg:screen size.Update your drawer class:
https://daisyui.com/components/drawer/
modalnow supports the new native HTML element<dialog>as well.<dialog>provides accessibility features without needing JS:Add new
modal-backdropclass. The backdrop that covers the back of modal so we can close the modal by clicking outside.Add new
modal-topmodifier if you want to align themodalto the top of the screen (modal-middleandmodal-bottomare also available)https://daisyui.com/components/modal/
tooltipnow gets visible with keyboard navigation as well.tooltipclass is now responsive.You can use responsive prefixes like
sm:,md:etc to showtooltiponly on specific screen sizes.All
tooltipposition 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-neutralmodifier class for button.The default
btnis now usingbg-base-200background 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-ghostorbtn-outlinewhich are not always the best option.Now when we need a dark button we can use
btn-neutralmodifier class.btnclick animation now has slightly less bounce effect.The default
btnfocus ring color is nowneutralinstead ofneutral-focusbtnnow has agap-2by default. Useful for having text and icons inside a button, next to each other.https://daisyui.com/components/button/
New
badge-neutralmodifier class for badge.The default
badgeis now usingbg-base-200background 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
menuAll 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-compactclass now we have the standard sizing utilities like other elements:menu-xsmenu-smmenu-mdmenu-lghttps://daisyui.com/components/menu/#menu-sizes
<li>withactiveclass now has aneutralbackground 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-togglefor the parent item if you want to control it using JSnew class name
menu-dropdownfor the collapsed submenu if you want to control it using JSnew modifier class name
menu-dropdown-showfor to reveal the collapsed submenu if you want to control it using JShttps://daisyui.com/components/menu/#collapsible-submenu-that-works-with-class-names
badgeinside the menu item now justifies to the end by default.New
.focusclass 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.dropdownnow 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/
carouselis nowinline-flexby default (instead offlex)This makes it easier to use carousel aside other elements.
btnclass 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-labelvalue 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
.tableStarting with daisyUI 3.0,
.tablehas 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.
tablenow has 4 sizes:table-xs,table-sm,table-md,table-lgwhich provides different font sizes and paddings to fit well on different screen sizes.New modifier class names
table-pin-rowsandtable-pin-colsfortableThese 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-rowsmakes the row inside<thead>sticky to top and the row inside<tfoot>sticky to bottom.table-pin-colsmakes the<th>columns sticky to left and right automatically.https://daisyui.com/components/table/
Improve
collapsetransition. No more jumps.collapsenow 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.
collapsenow 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
:hoverstyles 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
:disabledbuttons and form elements have a disabled style as well. Previously the style was only applied to the elements withdisabledattribute or*-disabledclass name.This is useful when you want to disable the whole form using a fieldset.
Breaking changes
Removed
drawer-mobileclass. If you want to have a fixed drawer on desktop but you want to hide it on mobile uselg:drawer-openinstead (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
alertstructure and remove that extra div inside<div class="alert">:tablenow 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-fullclass 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-autoor another width class to the table to make it smaller.tabledoesn't have aactivemodifier 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-200or any other color.tabledoesn't have ahovermodifier class anymoreNow you can use
hover:bg-base-200or any other color instead. It's more flexible and you don't have to style each table cell separately.tabledoesn't have atable-compactmodifier class anymore.Use one of these new size modifiers instead:
table-xs,table-sm,table-md,table-lgbtndefault color isbase-200now.This creates consistency for all our solid button variants while providing access to the whole color palette.
You can use the new modifier
btn-neutralif you prefer to keep the former color (neutral) for your button:dropdowndoesn't have az-indexby default now.Using z-index for
dropdownas 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.badgeinsidebtnnow doesn't inherit thebtncolor automatically anymore. This was a bad design decision and it was limiting us to customizebadgecolors when it's inside abtnloadingis no longer a modifier class forbtn. Instead you can use the newloadingcomponent class inside the button. This allows us to put the loading whereever we need it.borderedandhover-borderedmodifier class names formenuitems 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:
stepconnectors not being visible on RTL mode.radioanimation on Safari.dropdown-hovernot working when focused using keyboard.tooltiparrow using pixel formats and causing inaccurate positioning with different browser zoom levels.toastwhitespace issueDeveloper experience improvements
/src/colorsis renamed to/src/themingbecause 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
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.