Merge pull request #9841 from quarto-dev/bugfix/9832

ff-matrix: Callout features

Author: cscheid

dev-docs/feature-format-matrix/qmd-files/callout/appearance-minimal.qmd

@@ -0,0 +1,14 @@
+---
+title: Callout with minimal appearance
+format:
+  html: 
+    quality: 1
+---
+
+::: {.callout-note appearance="minimal"}
+
+## Title
+
+{{< lipsum 1 >}}
+
+:::

dev-docs/feature-format-matrix/qmd-files/callout/appearance-simple.qmd

@@ -0,0 +1,14 @@
+---
+title: Callout with simple appearance
+format:
+  html: 
+    quality: 1
+---
+
+::: {.callout-note appearance="simple"}
+
+## Title
+
+{{< lipsum 1 >}}
+
+:::

dev-docs/feature-format-matrix/qmd-files/callout/collapse.qmd

@@ -0,0 +1,29 @@
+---
+title: Callouts
+format:
+  html: 
+    quality: 2
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - 
+          - "div.callout-header.collapsed ~ div#callout-1.collapse"
+          - "div.callout-header:not(.collapsed) ~ div#callout-2.collapse.show"
+---
+
+::: {.callout-note collapse="true"}
+
+## A small note
+
+You should note that this is a note.
+
+:::
+
+::: {.callout-note collapse="false"}
+
+## A small note
+
+You should note that this is a note.
+
+:::

dev-docs/feature-format-matrix/qmd-files/callout/document.qmd

@@ -1,10 +1,10 @@
 ---
 title: Callouts
 format:
-  docusaurus-md:
-    quality: 1
   html: 
     quality: 2
+  docusaurus-md:
+    quality: 1
   dashboard:
     quality: 0
     comment: "Bug: Callout icons show on a separate line from the title."
@@ -52,4 +52,35 @@ You should note that this is a note.
 
 A callout does not need a title.
 
-:::
+:::
+
+::: {.callout-note}
+
+## A callout does not need content
+
+:::
+
+::: {.callout-note}
+
+:::
+
+::: {.callout-note collapse="true" appearance="minimal"}
+
+## A small note
+
+You should note that this is a note.
+
+:::
+
+::: {.callout}
+
+:::
+
+::: {.callout}
+
+## Title
+
+Content
+
+:::
+

dev-docs/feature-format-matrix/qmd-files/callout/no-content.qmd

@@ -0,0 +1,12 @@
+---
+title: Callout with no content
+format:
+  html: 
+    quality: 1
+---
+
+::: {.callout-note}
+
+## Title
+
+:::

dev-docs/feature-format-matrix/qmd-files/callout/no-icon.qmd

@@ -0,0 +1,15 @@
+---
+title: Callout with no icon
+format:
+  html: 
+    quality: 0
+    comment: Title is a offset a little too far down
+---
+
+::: {.callout-note icon="false"}
+
+## Title
+
+{{< lipsum 1 >}}
+
+:::

dev-docs/feature-format-matrix/qmd-files/callout/no-title.qmd

@@ -0,0 +1,12 @@
+---
+title: Callout with no title
+format:
+  html: 
+    quality: 1
+---
+
+::: {.callout-note}
+
+{{< lipsum 1 >}}
+
+:::

dev-docs/feature-format-matrix/qmd-files/callout/no-type.qmd

@@ -0,0 +1,22 @@
+---
+title: Callout with no type
+format:
+  html: 
+    quality: 2
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - "div.callout.callout-none"
+          - "div.callout.callout-style-simple"
+          - "div.callout.no-icon"
+---
+
+::: {.callout}
+
+## Title
+
+{{< lipsum 1 >}}
+
+:::

src/resources/filters/modules/callouts.lua

@@ -194,6 +194,7 @@ local function calloutDiv(node)
   -- the first heading is the title
   local div = pandoc.Div({})
   local c = quarto.utils.as_blocks(node.content)
+  local has_content = #c > 0
   if pandoc.utils.type(c) == "Blocks" then
     div.content:extend(c)
   else
@@ -254,6 +255,10 @@ local function calloutDiv(node)
   local imgPlaceholder = pandoc.Plain({pandoc.RawInline("html", "<i class='callout-icon" .. noicon .. "'></i>")});       
   local imgDiv = pandoc.Div({imgPlaceholder}, pandoc.Attr("", {"callout-icon-container"}));
 
+  if not has_content then
+    calloutDiv.attr.classes:insert("callout-empty-content")
+  end
+
   -- show a titled callout
   if title ~= nil and (pandoc.utils.type(title) == "string" or next(title) ~= nil) then
 
@@ -277,6 +282,7 @@ local function calloutDiv(node)
       local expandedAttrVal = "true"
       if collapse == "true" or collapse == true then
         expandedAttrVal = "false"
+        headerDiv.attr.classes:insert("collapsed")
       end
 
       -- create the collapse button

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -1382,6 +1382,8 @@ kbd,
 .callout.callout-style-simple .callout-body {
   font-size: 0.9rem;
   font-weight: 400;
+  margin-bottom: -0.4em;
+  margin-top: 0.5em;
 }
 
 .callout.callout-style-default .callout-body {
@@ -1398,6 +1400,15 @@ kbd,
   margin-bottom: -0.2em;
 }
 
+.callout.callout-empty-content > .callout-header {
+  margin-bottom: 0em;
+  border-bottom-right-radius: add($border-radius, -1px);
+}
+
+.callout > .callout-header.collapsed {
+  border-bottom-right-radius: add($border-radius, -1px);
+}
+
 .callout.callout-style-simple > div.callout-header {
   border-bottom: none;
   font-size: 0.9rem;
@@ -1412,6 +1423,7 @@ kbd,
   font-size: 0.9rem;
   padding-left: 0.5em;
   padding-right: 0.5em;
+  border-top-right-radius: add($border-radius, -1px);
 }
 
 .callout.callout-style-default .callout-body {