fix(alert): Add alert-dismissible class

AmadeusITGroup · Nov 27, 2023 · 16d8c1f · 16d8c1f
1 parent a081136
commit 16d8c1f
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 15 deletions.
diff --git a/angular/lib/src/lib/alert/alert.component.ts b/angular/lib/src/lib/alert/alert.component.ts
@@ -50,7 +50,7 @@ export class AlertStructureDirective {
 			<ng-template [auSlot]="state.slotDefault" [auSlotProps]="{state, widget}"></ng-template>
 		</div>
 		@if (state.dismissible) {
-			<button type="button" class="btn-close ms-auto" (click)="widget.api.close()" [attr.aria-label]="state.ariaCloseButtonLabel"></button>
+			<button type="button" class="btn-close" (click)="widget.api.close()" [attr.aria-label]="state.ariaCloseButtonLabel"></button>
 		}
 	</ng-template>`,
 })
@@ -74,7 +74,11 @@ const defaultConfig: Partial<AlertProps> = {
 		</ng-template>
 
 		@if (!state().hidden) {
-			<div [auUse]="widget.directives.transitionDirective" class="au-alert alert alert-{{ state().type }} {{ state().className }}" role="alert">
+			<div
+				[auUse]="widget.directives.transitionDirective"
+				class="au-alert alert alert-{{ state().type }} {{ state().className }} {{ state().dismissible ? 'alert-dismissible' : '' }}"
+				role="alert"
+			>
 				<ng-template [auSlot]="state().slotStructure" [auSlotProps]="{state: state(), widget}"></ng-template>
 			</div>
 		}`,

diff --git a/e2e/alert/alert.e2e-spec.ts b/e2e/alert/alert.e2e-spec.ts
@@ -12,6 +12,7 @@ test.describe(`Alert tests`, () => {
 		await alertDemoPO.locatorRoot.waitFor();
 
 		await expect(alertPO.locatorRoot).toHaveClass(/alert-success/);
+		await expect(alertPO.locatorRoot).toHaveClass(/alert-dismissible/);
 
 		await alertPO.locatorCloseButton.click();
 
@@ -22,6 +23,7 @@ test.describe(`Alert tests`, () => {
 		await alertDemoPO.locatorShowAlertButton.click();
 
 		await expect(alertPO.locatorRoot).toHaveClass(/alert-danger/);
+		await expect(alertPO.locatorRoot).not.toHaveClass(/alert-dismissible/);
 		await expect(alertPO.locatorCloseButton).toHaveCount(0);
 	});
 

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-config.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-config.html
@@ -99,7 +99,7 @@
 			<br />
 			<br />
 			<div
-			 class="alert alert-success au-alert show"
+			 class="alert alert-dismissible alert-success au-alert show"
 			 role="alert"
 			>
 				<div
@@ -122,7 +122,7 @@
 				</div>
 				<button
 				 aria-label="Close"
-				 class="btn-close ms-auto"
+				 class="btn-close"
 				 type="button"
 				/>
 			</div>

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-playground.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/alert-playground.html
@@ -6,15 +6,15 @@
 		 class="container p-3"
 		>
 			<div
-			 class="alert alert-primary au-alert show"
+			 class="alert alert-dismissible alert-primary au-alert show"
 			 role="alert"
 			>
 				<div
 				 class="alert-body"
 				/>
 				<button
 				 aria-label="Close"
-				 class="btn-close ms-auto"
+				 class="btn-close"
 				 type="button"
 				/>
 			</div>

diff --git a/react/lib/Alert.tsx b/react/lib/Alert.tsx
@@ -9,12 +9,7 @@ const DefaultSlotStructure = (slotContext: AlertContext) => (
 			<Slot slotContent={slotContext.state.slotDefault} props={slotContext}></Slot>
 		</div>
 		{slotContext.state.dismissible ? (
-			<button
-				type="button"
-				className="btn-close ms-auto"
-				onClick={slotContext.widget.api.close}
-				aria-label={slotContext.state.ariaCloseButtonLabel}
-			></button>
+			<button type="button" className="btn-close" onClick={slotContext.widget.api.close} aria-label={slotContext.state.ariaCloseButtonLabel}></button>
 		) : null}
 	</>
 );
@@ -35,7 +30,11 @@ export const Alert = forwardRef(function Alert(props: PropsWithChildren<Partial<
 	return (
 		<>
 			{state.hidden ? null : (
-				<div className={`au-alert alert alert-${state.type} ${state.className}`} role="alert" ref={refTransition}>
+				<div
+					className={`au-alert alert alert-${state.type} ${state.className} ${state.dismissible ? 'alert-dismissible' : ''}`}
+					role="alert"
+					ref={refTransition}
+				>
 					<Slot slotContent={state.slotStructure} props={slotContext}></Slot>
 				</div>
 			)}

diff --git a/svelte/lib/alert/Alert.svelte b/svelte/lib/alert/Alert.svelte
@@ -42,7 +42,11 @@
 </script>
 
 {#if !$hidden$}
-	<div class="au-alert alert alert-{$state$.type} {$state$.className}" role="alert" use:transitionDirective>
+	<div
+		class="au-alert alert alert-{$state$.type} {$state$.className} {$state$.dismissible ? 'alert-dismissible' : ''}"
+		role="alert"
+		use:transitionDirective
+	>
 		<Slot slotContent={$slotStructure$} props={slotContext} let:component let:props>
 			<slot slot="slot" name="structure" let:props {...props} />
 			<svelte:component this={component} {...props}>

diff --git a/svelte/lib/alert/AlertDefaultStructure.svelte b/svelte/lib/alert/AlertDefaultStructure.svelte
@@ -23,5 +23,5 @@
 	</Slot>
 </div>
 {#if state.dismissible}
-	<button type="button" class="btn-close ms-auto" on:click={() => widget.api.close()} aria-label={state.ariaCloseButtonLabel} />
+	<button type="button" class="btn-close" on:click={() => widget.api.close()} aria-label={state.ariaCloseButtonLabel} />
 {/if}