feat(css): use CSS vars for small alerts and backport alerts docs pre…

…cisions from v4 (#1165) * Remove margin when stacked * Add specific Boosted message about the icons from v4 * Add specific Boosted message about the div in "Additional content" * Remove CSS for alerts in docs Co-authored-by: Julien Déramond <[email protected]>
Orange-OpenSource · Jun 10, 2022 · c1d5dae · c1d5dae
1 parent 2217e1d
commit c1d5dae
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -113,10 +113,15 @@
 
 //// Small alerts
 .alert-sm {
- padding: $alert-padding-sm 0;
+ // scss-docs-start alert-sm-css-vars
+ --#{$prefix}alert-padding-x: 0;
+ --#{$prefix}alert-padding-y: #{$alert-padding-sm};
+ --#{$prefix}alert-margin-bottom: 0;
+ --#{$prefix}alert-border: 0;
+ // scss-docs-end alert-sm-css-vars
+
  font-size: $font-size-sm;
  line-height: $line-height-sm;
- border: 0;
 
  .alert-icon {
  width: $alert-icon-size * .5;

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -47,7 +47,6 @@
  }
 
  > .nav + .nav,
- > .alert + .alert,
  > .navbar + .navbar,
  > .progress + .progress {
  margin-top: $spacer;

diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
@@ -10,6 +10,12 @@ toc: true
 
 Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
 
+Boosted also adds a dedicated icon for each contextual class using `.alert-icon`, matching [functional colors in palette]({{<docsref "customize/color#functional-colors">}}):
+- success,
+- info,
+- warning,
+- danger.
+
 {{< example >}}
 <div class="alert alert-success" role="alert">
  <span class="alert-icon"><span class="visually-hidden">Success</span></span>
@@ -107,6 +113,8 @@ Alerts come with a smaller variant: `.alert-sm`.
 
 Alerts can also contain additional HTML elements like headings, links and paragraphs.
 
+As of Boosted, it's recommended to wrap your additional content in a `<div>` to ensure proper alignment and, for headings, to always use the .alert-heading class.
+
 {{< example >}}
 <div class="alert alert-success" role="alert">
  <span class="alert-icon"><span class="visually-hidden">Success</span></span>
@@ -167,12 +175,18 @@ Add `.bg-dark` to the `.alert` for a dark variant. Close button can be inverted
 
 ## CSS
 
+### Variables
+
 {{< added-in "5.2.0" >}}
 
 As part of Boosted's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 {{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}}
 
+Customization through CSS variables can be seen on the `.alert-sm` class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="alert-sm-css-vars" file="scss/_alert.scss" >}}
+
 ### Sass variables
 
 {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}