Replace blockquotes with custom callouts

pkgdown/extra.scss

@@ -222,6 +222,41 @@ a[href='#main'] {
   }
 }
 
+// Custom callouts
+.callout {
+  margin: 1rem 0;
+  padding: 0.625rem 1.25rem;
+  border-left: 0.25rem solid #e9ecef;
+
+  &-box {
+    @extend .callout;
+    margin: 1.25rem 0;
+    padding: 1rem 1.25rem;
+    border: 1px solid #e9ecef;
+    border-left-width: 0.25rem;
+    border-radius: 0.25rem;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+
+  &-note {
+    @extend .callout-box;
+    border-left-color: #5bc0de;
+  }
+
+  &-tip {
+    @extend .callout-box;
+    border-left-color: #3fb618;
+  }
+
+  &-warning {
+    @extend .callout-box;
+    border-left-color: #f0ad4e;
+  }
+}
+
 .reactable {
   font-size: 0.875rem;
 }

vignettes/building-twitter-followers.Rmd

@@ -218,10 +218,12 @@ Since we're taking over cell rendering with custom render functions, we'll also
 have to manually format the numbers and percentages now. Custom cell renderers
 override column formatters, but this may change in the future.
 
-> If you're ever curious to see how an HTML table was made, you can open
-> your [browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)
-> and inspect the HTML and CSS behind the table. This is how we figured out
-> how the bar charts were made, which colors and fonts were used, and so on.
+::: {.callout-tip}
+**Tip:** If you're ever curious to see how an HTML table was made, you can open
+your [browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)
+and inspect the HTML and CSS behind the table. This is how we figured out
+how the bar charts were made, which colors and fonts were used, and so on.
+:::
 
 ```{r}
 library(htmltools)
@@ -276,11 +278,13 @@ One way to do this would be to format the labels as fixed-width strings, and use
 a monospaced font so that each character takes up the same width. (An alternate
 method is shown in the [Demo Cookbook](cookbook/cookbook.html#units-on-first-row-only).)
 
-> Some fonts have numerals that are all equal in width, but others do not.
-> In tables with numeric columns, using a font with tabular or monospaced
-> figures can make the numbers easier to align and read. You can learn more
-> about the different types of fonts in this article,
-> [Proportional vs. Tabular Figures](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures).
+::: {.callout-note}
+**Note:** Some fonts have numerals that are all equal in width, but others do not.
+In tables with numeric columns, using a font with tabular or monospaced
+figures can make the numbers easier to align and read. You can learn more
+about the different types of fonts in this article,
+[Proportional vs. Tabular Figures](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures).
+:::
 
 ```{r}
 reactable(

vignettes/conditional-styling.Rmd

@@ -178,7 +178,9 @@ colDef(
 )
 ```
 
-> NOTE: R functions cannot apply styles to aggregated cells.
+::: {.callout-note}
+**Note:** R functions cannot apply styles to aggregated cells.
+:::
 
 ### JavaScript functions {#cell-js-functions}
 
@@ -296,7 +298,9 @@ reactable(
 )
 ```
 
-> NOTE: R functions cannot apply styles to aggregated rows.
+::: {.callout-note}
+**Note:** R functions cannot apply styles to aggregated rows.
+:::
 
 ### JavaScript functions {#row-js-functions}
 

vignettes/cookbook/cookbook.Rmd

@@ -16,7 +16,7 @@ knitr::opts_chunk$set(echo = TRUE)
 library(reactable)
 ```
 
-> A collection of recipes used to create the reactable demos
+A collection of recipes used to create the reactable demos.
 
 ## Insert links
 
@@ -463,7 +463,9 @@ reactable(ratings, columns = list(
 
 ## Show data from other columns
 
-> This example requires reactable v0.3.0 or above.
+::: {.callout}
+This example requires reactable v0.3.0 or above.
+:::
 
 To access data from another column, get the current row data using the
 row index argument in an R render function, or `cellInfo.row` in a
@@ -551,7 +553,9 @@ reactable(
 
 ### Dynamic totals
 
-> This example requires reactable v0.3.0 or above.
+::: {.callout}
+This example requires reactable v0.3.0 or above.
+:::
 
 To update the total when filtering the table, calculate the total in a
 JavaScript render function:
@@ -833,7 +837,9 @@ reactable(
 
 ## Borders between groups of data
 
-> This example requires reactable v0.3.0 or above.
+::: {.callout}
+This example requires reactable v0.3.0 or above.
+:::
 
 To add borders between groups, use an R or JavaScript function to style rows
 based on the previous or next row's data. If the table can be sorted, use a
@@ -874,7 +880,9 @@ reactable(
 
 ## Merge cells
 
-> This example requires reactable v0.3.0 or above.
+::: {.callout}
+This example requires reactable v0.3.0 or above.
+:::
 
 You can give the appearance of merged cells by hiding cells based on the
 previous row's data. Just like with the example above, you'll need a JavaScript
@@ -973,13 +981,19 @@ htmltools::tags$link(href = "https://fonts.googleapis.com/css?family=Work+Sans:4
                      rel = "stylesheet")
 ```
 
-> As a side note, the reactable package documentation uses the default system fonts
-> installed on your operating system (also known as a
-> [system font stack](https://css-tricks.com/snippets/css/system-font-stack)):
->
-> ```css
-> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-> ```
+::: {.callout-tip}
+**Tip:** The reactable package documentation uses the default system fonts
+installed on your operating system (also known as a
+[system font stack](https://css-tricks.com/snippets/css/system-font-stack)), which
+load fast and look familiar:
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+```
+
+[Bootstrap 5 also uses a system font stack](https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack)
+by default.
+:::
 
 ## Custom sort indicators
 

vignettes/custom-filtering-extra.Rmd

@@ -13,8 +13,8 @@ knitr::opts_chunk$set(echo = TRUE)
 library(reactable)
 ```
 
-> More examples of [custom filtering](./custom-filtering.html). Note that the
-> examples on this page do not support IE 11.
+More examples of [custom filtering](./custom-filtering.html). Note that the
+examples on this page do not support IE 11.
 
 ## Material UI Range Filter
 

vignettes/custom-filtering.Rmd

@@ -38,7 +38,9 @@ propsTable <- function(props) {
 }
 ```
 
-> New in v0.3.0
+::: {.callout}
+New in v0.3.0
+:::
 
 Custom filter methods and custom filter inputs let you change how filtering is done
 in reactable. By default, all filter inputs are text inputs that filter data using
@@ -191,10 +193,12 @@ For more information on React or using React from R, see the
 [React documentation](https://reactjs.org/) and
 [reactR package documentation](https://react-r.github.io/reactR/index.html).
 
-> **TIP:** Many column filter inputs do not have a visible text label, including
-> the default text inputs. If your custom filter does not have a visible text label,
-> be sure to give it an accessible name using the
-> [`aria-label` attribute or similar technique](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
+::: {.callout-tip}
+**Tip:** Many column filter inputs do not have a visible text label, including
+the default text inputs. If your custom filter does not have a visible text label,
+be sure to give it an accessible name using the
+[`aria-label` attribute or similar technique](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
+:::
 
 ### R render function {#filter-r-render-function}
 

vignettes/custom-rendering.Rmd

@@ -95,7 +95,9 @@ dynamic behavior (e.g., render based on filtered state) or have a very large tab
 
 #### Example: column total with filtering
 
-> This example requires reactable v0.3.0 or above.
+::: {.callout}
+This example requires reactable v0.3.0 or above.
+:::
 
 For example, you can easily add a column total using an R render function: