Make error console sizing constant across base and bslib apps (#3947)

* Add more encapsulated sizes using css variables instead of `rem` units so console is consistantly sized across apps that set the body font size. * `yarn build` (GitHub Actions) * `yarn build` (GitHub Actions) * `devtools::document()` (GitHub Actions) * `yarn build` (GitHub Actions) --------- Co-authored-by: nstrayer <[email protected]> Co-authored-by: jcheng5 <[email protected]> Co-authored-by: Winston Chang <[email protected]> Co-authored-by: wch <[email protected]>
rstudio · Jan 22, 2024 · 370ba1f · 370ba1f
1 parent 54988c1
commit 370ba1f
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 27 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -204,7 +204,7 @@ Collate:
     'version_selectize.R'
     'version_strftime.R'
     'viewer.R'
-RoxygenNote: 7.2.3
+RoxygenNote: 7.3.0
 Encoding: UTF-8
 Roxygen: list(markdown = TRUE)
 RdMacros: lifecycle

diff --git a/inst/www/shared/shiny.js b/inst/www/shared/shiny.js
diff --git a/inst/www/shared/shiny.js.map b/inst/www/shared/shiny.js.map
diff --git a/inst/www/shared/shiny.min.js b/inst/www/shared/shiny.min.js
diff --git a/inst/www/shared/shiny.min.js.map b/inst/www/shared/shiny.min.js.map
diff --git a/man/shiny-package.Rd b/man/shiny-package.Rd
diff --git a/srcts/src/components/errorConsole.ts b/srcts/src/components/errorConsole.ts
@@ -10,7 +10,7 @@ const buttonStyles = css`
     border-style: none;
     padding: var(--space-3);
     border-radius: var(--space-1);
-    font-size: 1.5rem;
+    font-size: var(--font-lg);
     background-color: inherit;
     display: block;
   }
@@ -23,11 +23,19 @@ class ShinyErrorConsole extends LitElement {
   static styles = [
     css`
       :host {
+        /* We declare hard pixel values here to avoid body font size changes
+        messing up the size of the console. This was an issue with bslib setting
+        the body font-size at 16px relative to base shiny's 14px. */
+        --font-md: 14px;
+        --font-lg: 16px;
+        --font-xl: 18px;
+
         /* These are all taken from open-props */
-        --space-1: 0.5rem;
+        --space-1: 6px;
         --space-2: calc(var(--space-1) * 2);
         --space-3: calc(var(--space-1) * 3);
         --space-4: calc(var(--space-1) * 4);
+        --space-8: calc(var(--space-1) * 8);
 
         --red-2: #ffc9c9;
         --red-6: #fa5252;
@@ -114,7 +122,7 @@ class ShinyErrorConsole extends LitElement {
       }
 
       .title {
-        font-size: 1.6rem;
+        font-size: var(--font-xl);
         margin-right: auto;
         padding: var(--space-3);
         line-height: 1;
@@ -163,8 +171,9 @@ class ShinyErrorConsole extends LitElement {
 
       .content {
         display: block;
-        padding: var(--space-4);
-        padding-top: var(--space-2);
+        padding-inline: var(--space-4);
+        padding-block-start: 0;
+        padding-block-end: var(--space-4);
         max-height: 100%;
         overflow: auto;
       }
@@ -256,13 +265,10 @@ export class ShinyErrorMessage extends LitElement {
       :host {
         color: var(--red-11);
         display: block;
-        font-size: 1.4rem;
+        font-size: var(--font-md);
 
         position: relative;
-        --icon-size: 1.5rem;
-
-        --padding-top: var(--space-1);
-        --padding-bottom: var(--space-3);
+        --icon-size: var(--font-lg)
 
         /* Reset box sizing */
         box-sizing: border-box;
@@ -278,13 +284,14 @@ export class ShinyErrorMessage extends LitElement {
         display: flex;
         flex-direction: column;
         gap: var(--space-1);
-        padding-bottom: var(--padding-bottom);
-        padding-top: var(--padding-top);
+        padding-block-start: 0;
+        padding-block-end: var(--space-3);
         overflow: auto;
       }
 
       :host(:last-of-type) .contents {
-        --padding-bottom: var(--space-1);
+
+        padding-block-end: var(--space-1);
       }
 
       .contents > h3 {
@@ -303,11 +310,10 @@ export class ShinyErrorMessage extends LitElement {
 
       .decoration-container {
         flex-shrink: 0;
-        padding-inline: var(0.375rem);
         position: relative;
 
         --line-w: 2px;
-        --dot-size: 1rem;
+        --dot-size: 11px;
       }
 
       :host(:hover) .decoration-container {
@@ -331,7 +337,7 @@ export class ShinyErrorMessage extends LitElement {
         position: absolute;
         width: var(--dot-size);
         height: var(--dot-size);
-        top: var(--dot-size);
+        top: calc(-1px +  var(--dot-size) / 2);
         left: calc(50% - var(--dot-size) / 2);
         border-radius: 100%;
         transform: scale(var(--scale, 1));
@@ -362,8 +368,8 @@ export class ShinyErrorMessage extends LitElement {
 
       .copy-button {
         padding: 0;
-        width: 4rem;
-        height: 4rem;
+        width: var(--space-8);
+        height: var(--space-8);
         position: relative;
         --pad: var(--space-2);
       }