fix: new daisyui 5 looks

AmadeusITGroup · Feb 18, 2025 · 664fd47 · 664fd47
1 parent 8a53c5d
commit 664fd47
Show file tree

Hide file tree

Showing 33 changed files with 119 additions and 134 deletions.
diff --git a/angular/demo/daisyui/src/app/samples/accordion/accordion-item.component.ts b/angular/demo/daisyui/src/app/samples/accordion/accordion-item.component.ts
@@ -14,17 +14,20 @@ import {AccordionComponent} from './accordion.component';
 	selector: 'app-accordion-item',
 	imports: [UseDirective, UseMultiDirective],
 	template: `
-		<div class="collapse collapse-arrow bg-base-200" [auUseMulti]="[directives.itemDirective, directives.transitionDirective]">
+		<div
+			class="collapse collapse-arrow bg-base-100 border border-base-300 has-[:focus-visible]:ring"
+			[auUseMulti]="[directives.itemDirective, directives.transitionDirective]"
+		>
 			<div
 				role="button"
 				tabindex="0"
-				class="collapse-title text-xl font-medium focus-visible:outline-hidden"
+				class="collapse-title font-semibold focus-visible:outline-hidden"
 				[auUse]="directives.toggleDirective"
 				(keydown.enter)="api.toggle()"
 			>
 				<ng-content select="[header]" />
 			</div>
-			<div class="collapse-content" [auUse]="directives.bodyContainerAttrsDirective">
+			<div class="collapse-content text-sm" [auUse]="directives.bodyContainerAttrsDirective">
 				@if (state.shouldBeInDOM()) {
 					<ng-content />
 				}

diff --git a/angular/demo/daisyui/src/app/samples/alert/alert.component.ts b/angular/demo/daisyui/src/app/samples/alert/alert.component.ts
@@ -17,11 +17,11 @@ import {DomSanitizer} from '@angular/platform-browser';
 	imports: [UseDirective],
 	template: `
 		@if (!state.hidden()) {
-			<div role="alert" class="flex alert {{ state.className() }}" [auUse]="directives.transitionDirective">
+			<div role="alert" class="alert {{ state.className() }}" [auUse]="directives.transitionDirective">
 				<ng-content />
 				@if (state.dismissible()) {
 					<button
-						class="btn btn-sm btn-circle btn-ghost ms-auto"
+						class="btn btn-xs btn-circle btn-ghost"
 						(click)="api.close()"
 						[attr.aria-label]="state.ariaCloseButtonLabel()"
 						[innerHTML]="closeIcon"

diff --git a/angular/demo/daisyui/src/app/samples/collapse/collapse.component.ts b/angular/demo/daisyui/src/app/samples/collapse/collapse.component.ts
@@ -13,12 +13,12 @@ import {ChangeDetectionStrategy, Component, input, output} from '@angular/core';
 	template: `
 		<div
 			tabindex="0"
-			class="collapse bg-base-200"
+			class="collapse collapse-arrow bg-base-100 border border-base-300"
 			[auUse]="transition.directives.directive"
 			(blur)="transition.api.hide()"
 			(focus)="transition.api.show()"
 		>
-			<div class="collapse-title font-medium text-xl">{{ title() }}</div>
+			<div class="collapse-title font-semibold">{{ title() }}</div>
 			<div class="collapse-content"><ng-content /></div>
 		</div>
 	`,

diff --git a/angular/demo/daisyui/src/app/samples/pagination/pagination.component.html b/angular/demo/daisyui/src/app/samples/pagination/pagination.component.html
@@ -2,7 +2,7 @@
 	<div class="join" [class]="state.className()">
 		@if (state.boundaryLinks()) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[attr.aria-label]="state.ariaFirstLabel()"
 				(click)="api.first()"
 				[disabled]="state.previousDisabled()"
@@ -14,7 +14,7 @@
 		}
 		@if (state.directionLinks()) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[attr.aria-label]="state.ariaPreviousLabel()"
 				(click)="api.previous()"
 				[disabled]="state.previousDisabled()"
@@ -26,7 +26,7 @@
 		}
 		@for (page of state.pages(); track page; let i = $index) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[class.btn-active]="page === state.page()"
 				[attr.aria-current]="page === state.page() ? 'page' : null"
 				[attr.tabindex]="state.disabled() ? -1 : undefined"
@@ -41,7 +41,7 @@
 		}
 		@if (state.directionLinks()) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[attr.aria-label]="state.ariaNextLabel()"
 				(click)="api.next()"
 				[disabled]="state.nextDisabled()"
@@ -53,7 +53,7 @@
 		}
 		@if (state.boundaryLinks()) {
 			<button
-				class="join-item btn btn-outline"
+				class="join-item btn"
 				[attr.aria-label]="state.ariaLastLabel()"
 				(click)="api.last()"
 				[disabled]="state.nextDisabled()"

diff --git a/angular/demo/daisyui/src/app/samples/rating/rating.component.html b/angular/demo/daisyui/src/app/samples/rating/rating.component.html
@@ -7,7 +7,7 @@
 			(click)="api.setRating(index + 1)"
 			type="radio"
 			name="rating-1"
-			class="mask mask-star"
+			class="mask mask-star-2 bg-orange-400"
 			[attr.aria-label]="getAriaLabel(index)"
 			[checked]="index + 1 === state.visibleRating()"
 		/>

diff --git a/angular/demo/daisyui/src/app/samples/rating/rating.component.ts b/angular/demo/daisyui/src/app/samples/rating/rating.component.ts
@@ -6,7 +6,6 @@ import {NG_VALUE_ACCESSOR} from '@angular/forms';
 
 @Component({
 	selector: 'app-rating',
-
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	templateUrl: './rating.component.html',
 	providers: [{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true}],

diff --git a/angular/demo/daisyui/src/app/samples/slider/default.route.ts b/angular/demo/daisyui/src/app/samples/slider/default.route.ts
@@ -1,19 +1,13 @@
 import {SliderComponent} from './slider.component';
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 
 @Component({
 	imports: [SliderComponent],
 	template: `
-		<h2 class="text-lg mb-2">DaisyUI Example</h2>
-
-		<app-slider min="0" max="100" stepSize="1" [values]="values" (valuesChange)="valuesChange($event)" />
-		Value: {{ values }}
+		<app-slider min="0" max="100" stepSize="1" [(values)]="values" className="w-full" />
+		Value: {{ values() }}
 	`,
 })
 export default class DefaultSliderComponent {
-	values = [20];
-
-	valuesChange(event: number[]) {
-		this.values = event;
-	}
+	readonly values = signal([20]);
 }
diff --git a/angular/demo/daisyui/src/app/samples/toast/toast.component.ts b/angular/demo/daisyui/src/app/samples/toast/toast.component.ts
@@ -7,11 +7,11 @@ import {DomSanitizer} from '@angular/platform-browser';
 	selector: 'app-toast',
 	template: `
 		@if (!state.hidden()) {
-			<div class="alert {{ state.className() }} flex">
+			<div class="alert {{ state.className() }}">
 				<ng-content />
 				@if (state.dismissible()) {
 					<button
-						class="btn btn-sm btn-circle btn-ghost"
+						class="btn btn-xs btn-circle btn-ghost"
 						(click)="api.close()"
 						[attr.aria-label]="state.ariaCloseButtonLabel()"
 						[innerHTML]="closeIcon"

diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-accordion-default.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-accordion-default.html
@@ -7,14 +7,14 @@
 		 class="au-accordion flex flex-col gap-2"
 		>
 			<div
-			 class="bg-base-200 collapse collapse-arrow collapse-open"
+			 class="bg-base-100 border border-base-300 collapse collapse-arrow collapse-open has-[:focus-visible]:ring"
 			 id="rewritten-id-1"
 			>
 				<div
 				 aria-controls="rewritten-id-2"
 				 aria-disabled="false"
 				 aria-expanded="true"
-				 class="collapse-title focus-visible:outline-hidden font-medium text-xl"
+				 class="collapse-title focus-visible:outline-hidden font-semibold"
 				 id="rewritten-id-3"
 				 role="button"
 				 tabindex="0"
@@ -23,21 +23,21 @@
 				</div>
 				<div
 				 aria-labelledby="rewritten-id-3"
-				 class="collapse-content"
+				 class="collapse-content text-sm"
 				 id="rewritten-id-2"
 				>
 					"First content"
 				</div>
 			</div>
 			<div
-			 class="bg-base-200 collapse collapse-arrow"
+			 class="bg-base-100 border border-base-300 collapse collapse-arrow has-[:focus-visible]:ring"
 			 id="rewritten-id-4"
 			>
 				<div
 				 aria-controls="rewritten-id-5"
 				 aria-disabled="false"
 				 aria-expanded="false"
-				 class="collapse-title collapsed focus-visible:outline-hidden font-medium text-xl"
+				 class="collapse-title collapsed focus-visible:outline-hidden font-semibold"
 				 id="rewritten-id-6"
 				 role="button"
 				 tabindex="0"
@@ -46,19 +46,19 @@
 				</div>
 				<div
 				 aria-labelledby="rewritten-id-6"
-				 class="collapse-content"
+				 class="collapse-content text-sm"
 				 id="rewritten-id-5"
 				/>
 			</div>
 			<div
-			 class="bg-base-200 collapse collapse-arrow"
+			 class="bg-base-100 border border-base-300 collapse collapse-arrow has-[:focus-visible]:ring"
 			 id="rewritten-id-7"
 			>
 				<div
 				 aria-controls="rewritten-id-8"
 				 aria-disabled="false"
 				 aria-expanded="false"
-				 class="collapse-title collapsed focus-visible:outline-hidden font-medium text-xl"
+				 class="collapse-title collapsed focus-visible:outline-hidden font-semibold"
 				 id="rewritten-id-9"
 				 role="button"
 				 tabindex="0"
@@ -67,7 +67,7 @@
 				</div>
 				<div
 				 aria-labelledby="rewritten-id-9"
-				 class="collapse-content"
+				 class="collapse-content text-sm"
 				 id="rewritten-id-8"
 				/>
 			</div>

diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-alert-default.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-alert-default.html
@@ -12,7 +12,7 @@
 		 class="flex flex-col gap-3 mt-3"
 		>
 			<div
-			 class="alert alert-success flex transition-opacity"
+			 class="alert alert-success transition-opacity"
 			 role="alert"
 			>
 				<svg
@@ -33,7 +33,7 @@
 				</span>
 				<button
 				 aria-label="Close"
-				 class="btn btn-circle btn-ghost btn-sm ms-auto"
+				 class="btn btn-circle btn-ghost btn-xs"
 				>
 					<svg
 					 class="h-6 w-6"
@@ -52,7 +52,7 @@
 				</button>
 			</div>
 			<div
-			 class="alert alert-error flex transition-opacity"
+			 class="alert alert-error transition-opacity"
 			 role="alert"
 			>
 				<svg

diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-collapse-default.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-collapse-default.html
@@ -4,11 +4,11 @@
 	 id="root"
 	>
 		<div
-		 class="bg-base-200 collapse"
+		 class="bg-base-100 border border-base-300 collapse collapse-arrow"
 		 tabindex="0"
 		>
 			<div
-			 class="collapse-title font-medium text-xl"
+			 class="collapse-title font-semibold"
 			>
 				"Focus me to see content"
 			</div>

diff --git a/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-pagination-default.html b/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-pagination-default.html
@@ -12,7 +12,7 @@
 				<button
 				 aria-disabled="true"
 				 aria-label="Action link for first page"
-				 class="btn btn-outline join-item"
+				 class="btn join-item"
 				 disabled="disabled"
 				 tabindex="-1"
 				>
@@ -25,7 +25,7 @@
 				<button
 				 aria-disabled="true"
 				 aria-label="Action link for previous page"
-				 class="btn btn-outline join-item"
+				 class="btn join-item"
 				 disabled="disabled"
 				 tabindex="-1"
 				>
@@ -37,7 +37,7 @@
 				</button>
 				<button
 				 aria-current="page"
-				 class="btn btn-active btn-outline join-item"
+				 class="btn btn-active join-item"
 				>
 					"1"
 					<span
@@ -47,23 +47,23 @@
 					</span>
 				</button>
 				<button
-				 class="btn btn-outline join-item"
+				 class="btn join-item"
 				>
 					"2"
 				</button>
 				<button
-				 class="btn btn-outline join-item"
+				 class="btn join-item"
 				>
 					"3"
 				</button>
 				<button
-				 class="btn btn-outline join-item"
+				 class="btn join-item"
 				>
 					"4"
 				</button>
 				<button
 				 aria-label="Action link for next page"
-				 class="btn btn-outline join-item"
+				 class="btn join-item"
 				>
 					<span
 					 aria-hidden="true"
@@ -73,7 +73,7 @@
 				</button>
 				<button
 				 aria-label="Action link for last page"
-				 class="btn btn-outline join-item"
+				 class="btn join-item"
 				>
 					<span
 					 aria-hidden="true"