Refactor alert component styles and markup, remove Bootstrap styles (#2141)

.changeset/twelve-shirts-mix.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"preview": patch
+---
+
+Refactor alert component styles and markup, remove Bootstrap styles

core/scss/_bootstrap-components.scss

@@ -17,7 +17,6 @@
 // @import "bootstrap/scss/accordion";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/pagination";
-@import "bootstrap/scss/alert";
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/list-group";
 @import "bootstrap/scss/close";

core/scss/ui/_alerts.scss

@@ -1,59 +1,90 @@
 .alert {
-  --#{$prefix}alert-color: #{var(--#{$prefix}secondary)};
-  --#{$prefix}alert-bg: #{var(--#{$prefix}bg-surface)};
-  border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
-  border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
-  box-shadow: $alert-shadow;
-
-  >:last-child {
-    margin-bottom: 0;
-  }
+  --#{$prefix}alert-bg: transparent;
+  --#{$prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$prefix}alert-padding-y: #{$alert-padding-y};
+  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+  --#{$prefix}alert-color: inherit;
+  --#{$prefix}alert-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
+  --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}alert-link-color: inherit;
+  --#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
+
+  position: relative;
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  background-color: var(--#{$prefix}alert-bg);
+  border-radius: var(--#{$prefix}alert-border-radius);
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
 }
 
-.alert-important {
-  border-color: transparent;
-  background: var(--#{$prefix}alert-color);
-  color: #fff;
+.alert-heading {
+  color: inherit;
+  margin-bottom: .25rem; // todo: use variable
+  font-weight: var(--#{$prefix}alert-heading-font-weight);
+}
 
-  .alert-icon,
-  .alert-link,
-  .alert-title {
-    color: inherit;
-  }
+.alert-description {
+  color: var(--#{$prefix}secondary);
+}
 
-  .alert-link:hover {
-    color: inherit;
-  }
+.alert-icon {
+  color: var(--#{$prefix}alert-color);
+  width: 1.25rem !important; // todo: use variable
+  height: 1.25rem !important;
+}
 
-  .btn-close {
-    filter: var(--#{$prefix}btn-close-white-filter);
+.alert-action {
+  color: var(--#{$prefix}alert-color);
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
   }
 }
 
-.alert-link, {
+.alert-list {
+  margin: 0;
+}
+
+.alert-link {
+  font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
+
   &,
   &:hover {
     color: var(--#{$prefix}alert-color);
   }
 }
 
-@each $name, $color in $theme-colors {
-  .alert-#{$name} {
-    --#{$prefix}alert-color: var(--#{$prefix}#{$name});
+
+.alert-dismissible {
+  padding-right: 3rem; //todo: use variable
+
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
 }
 
-.alert-icon {
+.alert-important {
+  border-color: var(--#{$prefix}alert-color);
   color: var(--#{$prefix}alert-color);
-  width: 1.5rem !important;
-  height: 1.5rem !important;
-  margin: -.125rem $alert-padding-x -.125rem 0;
+
+  .btn-close,
+  .alert-description {
+    color: inherit;
+  }
 }
 
-.alert-title {
-  font-size: $h4-font-size;
-  line-height: $h4-line-height;
-  font-weight: var(--#{$prefix}font-weight-bold);
-  margin-bottom: .25rem;
-  color: var(--#{$prefix}alert-color);
+@each $name, $color in $theme-colors {
+  .alert-#{$name} {
+    --#{$prefix}alert-color: var(--#{$prefix}#{$name});
+  }
 }

preview/pages/_includes/ui/alert.html

@@ -2,43 +2,44 @@
 {% unless icon %}
 	{% if include.type == 'success' %}
 		{% assign icon = 'check' %}
-		{% assign title = 'Wow! Everything worked!' %}
-		{% assign description = 'Your account has been saved!' %}
 	{% elsif include.type == 'warning' %}
 		{% assign icon = 'alert-triangle' %}
-		{% assign title = 'Uh oh, something went wrong' %}
-		{% assign description = 'Sorry! There was a problem with your request.' %}
 	{% elsif include.type == 'danger' %}
 		{% assign icon = 'alert-circle' %}
-		{% assign title = "I'm so sorry…" %}
-		{% assign description = 'Something went wrong. Please try again.' %}
 	{% elsif include.type == 'info' %}
 		{% assign icon = 'info-circle' %}
-		{% assign title = 'Did you know?' %}
-		{% assign description = 'Here is something that you might like to know.' %}
 	{% endif %}
 {% endunless %}
 
 <div class="alert{% if include.important %} alert-important{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
 
-	{% if include.show-icon or include.person-id %}
-		<div class="d-flex">
-		<div>
-			{% if include.person-id %}{% include "ui/avatar.html" person-id=include.person-id class="float-start me-3" %}{% endif %}
+	<div class="alert-icon">
+		{% include "ui/icon.html" icon=icon class="alert-icon" %}
+	</div>
 
-			{% if include.show-icon %}
-			{% include "ui/icon.html" icon=icon class="alert-icon" %}
-			{% endif %}
-		</div>
+	{% if include.description or include.list %}
 		<div>
-	{% endif %}
-
-
-	{% if include.show-description or include.description %}
-		<h4 class="alert-title">{{ include.text | default: "This is a custom alert box!" }}</h4>
-		<div class="text-secondary">{{ include.description | default: description }}</div>
+			<h4 class="alert-heading">{{ include.title | default: "This is a custom alert box!" }}</h4>
+			<div class="alert-description">
+				{{ include.description | default: description }}
+				{% if include.list %}
+				{% assign items = include.list | split: ',' %}
+				<ul class="alert-list">
+					{% for item in items %}
+					<li>{{ item }}</li>
+					{% endfor %}
+				</ul>
+				{% endif %}
+			</div>
+		</div>
 	{% else %}
-		{{ include.title | default: title }}
+		{{ include.title | default: "This is a custom alert box!" }}
+
+		{% if include.action %}
+		<a href="#" class="alert-action">
+			Link
+		</a>
+		{% endif %}
 	{% endif %}
 
 	{% if include.buttons %}
@@ -48,10 +49,6 @@
 	</div>
 	{% endif %}
 
-	{% if include.show-icon or include.person-id %}
-		</div>
-		</div>
-	{% endif %}
 
 	{% if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
 </div>

preview/pages/alerts.html

@@ -11,23 +11,21 @@ permalink: alerts.html
 		<div class="card">
 			<div class="card-body">
 				<h2 class="card-title">Basic alerts</h2>
-				<p class="text-secondary">Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
-				{% include "ui/alert.html" type="success" %}
-				{% include "ui/alert.html" type="warning" %}
-				{% include "ui/alert.html" type="danger" %}
-				{% include "ui/alert.html" type="info" %}
+				{% include "ui/alert.html" type="danger" title="An error occurred!" %}
+				{% include "ui/alert.html" type="warning" title="Some information is missing!" %}
+				{% include "ui/alert.html" type="success" title="Completed successfully!" %}
+				{% include "ui/alert.html" type="info" title="Just a quick note!" %}
 			</div>
 		</div>
 	</div>
 	<div class="col-lg-6">
 		<div class="card">
 			<div class="card-body">
-				<h2 class="card-title">Alerts with icon</h2>
-				<p class="text-secondary">Build on any alert by adding an optional icon.</p>
-				{% include "ui/alert.html" type="success" show-icon=true %}
-				{% include "ui/alert.html" type="warning" show-icon=true %}
-				{% include "ui/alert.html" type="danger" show-icon=true %}
-				{% include "ui/alert.html" type="info" show-icon=true %}
+				<h2 class="card-title">Alerts with action</h2>
+				{% include "ui/alert.html" show-close action="Link" type="danger" title="An error occurred!" %}
+				{% include "ui/alert.html" show-close action="Link" type="warning" title="Some information is missing!" %}
+				{% include "ui/alert.html" show-close action="Link" type="success" title="Completed successfully!" %}
+				{% include "ui/alert.html" show-close action="Link" type="info" title="Just a quick note!" %}
 			</div>
 		</div>
 	</div>
@@ -35,11 +33,10 @@ permalink: alerts.html
 		<div class="card">
 			<div class="card-body">
 				<h2 class="card-title">Dismissible alerts</h2>
-				<p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
-				{% include "ui/alert.html" type="success" show-icon=true show-close=true %}
-				{% include "ui/alert.html" type="warning" show-icon=true show-close=true %}
-				{% include "ui/alert.html" type="danger" show-icon=true show-close=true %}
-				{% include "ui/alert.html" type="info" show-icon=true show-close=true %}
+				{% include "ui/alert.html" show-close type="danger" title="An error occurred!" %}
+				{% include "ui/alert.html" show-close type="warning" title="Some information is missing!" %}
+				{% include "ui/alert.html" show-close type="success" title="Completed successfully!" %}
+				{% include "ui/alert.html" show-close type="info" title="Just a quick note!" %}
 			</div>
 		</div>
 	</div>
@@ -47,11 +44,10 @@ permalink: alerts.html
 		<div class="card">
 			<div class="card-body">
 				<h2 class="card-title">Alert with a description</h2>
-				<p class="text-secondary">Add a description to the alert to provide additional information.</p>
-				{% include "ui/alert.html" type="success" show-description=true show-icon=true %}
-				{% include "ui/alert.html" type="warning" show-description=true show-icon=true %}
-				{% include "ui/alert.html" type="danger" show-description=true show-icon=true %}
-				{% include "ui/alert.html" type="info" show-description=true show-icon=true %}
+				{% include "ui/alert.html" show-close type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
+				{% include "ui/alert.html" show-close type="warning" title="Some information is missing!" description="This is a custom alert box with a description." %}
+				{% include "ui/alert.html" show-close type="success" title="Completed successfully!" description="This is a custom alert box with a description." %}
+				{% include "ui/alert.html" show-close type="info" title="Just a quick note!" description="This is a custom alert box with a description." %}
 			</div>
 		</div>
 	</div>
@@ -59,10 +55,10 @@ permalink: alerts.html
 		<div class="card">
 			<div class="card-body">
 				<h2 class="card-title">Important alerts</h2>
-				{% include "ui/alert.html" important=true type="success" show-icon=true show-close=true %}
-				{% include "ui/alert.html" important=true type="warning" show-icon=true show-close=true %}
-				{% include "ui/alert.html" important=true type="danger" show-icon=true show-close=true %}
-				{% include "ui/alert.html" important=true type="info" show-icon=true show-close=true %}
+				{% include "ui/alert.html" show-close important=true type="danger" title="Password does not meet requirements:" list="Minimum 8 characters,Include a special character" %}
+				{% include "ui/alert.html" show-close important=true type="success" description="This is a custom alert box with a description." %}
+				{% include "ui/alert.html" show-close important=true type="warning" description="This is a custom alert box with a description." %}
+				{% include "ui/alert.html" show-close important=true type="info" description="This is a custom alert box with a description." %}
 			</div>
 		</div>
 	</div>