github/shiny
1
1
Fork 0
mirror of https://github.com/rstudio/shiny.git synced 2026-01-09 15:08:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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 <nstrayer@users.noreply.github.com>
Co-authored-by: jcheng5 <jcheng5@users.noreply.github.com>
Co-authored-by: Winston Chang <winston@posit.co>
Co-authored-by: wch <wch@users.noreply.github.com>
This commit is contained in:
Nick Strayer
2024-01-22 15:17:10 -05:00
committed by GitHub
parent 54988c17c8
commit 370ba1f288
7 changed files with 79 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
DESCRIPTION
View File

@@ -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

6
inst/www/shared/shiny.js
View File

@@ -22265,7 +22265,7 @@
}
return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } }));
}
var buttonStyles = i(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n button {\n background-color: transparent;\n outline: none;\n border-style: none;\n padding: var(--space-3);\n border-radius: var(--space-1);\n font-size: 1.5rem;\n background-color: inherit;\n display: block;\n }\n\n button > svg {\n display: block;\n }\n"])));
var buttonStyles = i(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n button {\n background-color: transparent;\n outline: none;\n border-style: none;\n padding: var(--space-3);\n border-radius: var(--space-1);\n font-size: var(--font-lg);\n background-color: inherit;\n display: block;\n }\n\n button > svg {\n display: block;\n }\n"])));
var ShinyErrorConsole = /* @__PURE__ */ function(_LitElement) {
_inherits25(ShinyErrorConsole2, _LitElement);
var _super = _createSuper25(ShinyErrorConsole2);
@@ -22297,7 +22297,7 @@
}]);
return ShinyErrorConsole2;
}(s3);
_defineProperty19(ShinyErrorConsole, "styles", [i(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n :host {\n /* These are all taken from open-props */\n --space-1: 0.5rem;\n --space-2: calc(var(--space-1) * 2);\n --space-3: calc(var(--space-1) * 3);\n --space-4: calc(var(--space-1) * 4);\n\n --red-2: #ffc9c9;\n --red-6: #fa5252;\n --red-7: #f03e3e;\n --red-8: #e03131;\n --red-10: #b02525;\n --red-11: #962020;\n --red-12: #7d1a1a;\n\n --gray-1: #f8f9fa;\n --gray-2: #e9ecef;\n --gray-3: #dee2e6;\n --gray-4: #ced4da;\n --gray-6: #868e96;\n --gray-8: #6c757d;\n\n --green-8: #51cf66;\n\n --shadow-color: 220 3% 15%;\n --shadow-strength: 1%;\n --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 2%)),\n 0 1px 2px -5px hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 2%)),\n 0 2px 5px -5px hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 4%)),\n 0 4px 12px -5px hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 5%)),\n 0 12px 15px -5px hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 7%));\n\n --ring-shadow: 0 0 0 1px var(--gray-2);\n\n /* How fast should the message pop in and out of the screen? */\n --animation-speed: 500ms;\n\n /* Taken from open-props */\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --animation-slide-in-left: slide-in-left var(--animation-speed)\n var(--ease-3);\n\n --animation-slide-out-left: slide-out-left var(--animation-speed)\n var(--ease-3);\n --modal-bg-color: white;\n\n position: fixed;\n top: var(--space-1);\n right: var(--space-1);\n z-index: 1000;\n\n display: flex;\n flex-direction: column;\n\n background-color: var(--modal-bg-color);\n border-radius: var(--space-1);\n\n animation: var(--animation-slide-in-left);\n box-shadow: var(--shadow-3), var(--ring-shadow);\n\n /* Dont let the error console burst out of the viewport */\n max-height: calc(100vh - 2 * var(--space-1));\n }\n\n @keyframes slide-in-left {\n from {\n transform: translateX(100%);\n }\n }\n @keyframes slide-out-left {\n to {\n transform: translateX(100%);\n }\n }\n\n :host(.leaving) {\n animation: var(--animation-slide-out-left);\n }\n\n .header {\n display: flex;\n justify-content: flex-end;\n align-items: flex-start;\n gap: var(--space-2);\n }\n\n .title {\n font-size: 1.6rem;\n margin-right: auto;\n padding: var(--space-3);\n line-height: 1;\n font-weight: 600;\n color: var(--red-12);\n }\n\n ", "\n\n button:hover {\n background-color: var(--gray-2);\n }\n\n .toggle-button {\n width: fit-content;\n border: none;\n aspect-ratio: 1;\n border-color: var(--gray-4);\n }\n\n .close-button {\n display: flex;\n align-items: center;\n color: var(--red-11);\n }\n\n .close-button > svg {\n margin-right: 3px;\n }\n\n .toggle-button:focus {\n outline: 1px solid black;\n }\n\n .toggle-icon {\n transition: transform var(--animation-speed) ease-in-out;\n }\n\n :host(.collapsed) .toggle-icon {\n transform: scaleX(-1) scaleY(-1);\n }\n\n :host(.collapsed) .close-button {\n display: none;\n }\n\n .content {\n display: block;\n padding: var(--space-4);\n padding-top: var(--space-2);\n max-height: 100%;\n overflow: auto;\n }\n\n :host(.collapsed) .content {\n display: none;\n }\n "])), buttonStyles)]);
_defineProperty19(ShinyErrorConsole, "styles", [i(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n :host {\n /* We declare hard pixel values here to avoid body font size changes\n messing up the size of the console. This was an issue with bslib setting\n the body font-size at 16px relative to base shiny's 14px. */\n --font-md: 14px;\n --font-lg: 16px;\n --font-xl: 18px;\n\n /* These are all taken from open-props */\n --space-1: 6px;\n --space-2: calc(var(--space-1) * 2);\n --space-3: calc(var(--space-1) * 3);\n --space-4: calc(var(--space-1) * 4);\n --space-8: calc(var(--space-1) * 8);\n\n --red-2: #ffc9c9;\n --red-6: #fa5252;\n --red-7: #f03e3e;\n --red-8: #e03131;\n --red-10: #b02525;\n --red-11: #962020;\n --red-12: #7d1a1a;\n\n --gray-1: #f8f9fa;\n --gray-2: #e9ecef;\n --gray-3: #dee2e6;\n --gray-4: #ced4da;\n --gray-6: #868e96;\n --gray-8: #6c757d;\n\n --green-8: #51cf66;\n\n --shadow-color: 220 3% 15%;\n --shadow-strength: 1%;\n --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 2%)),\n 0 1px 2px -5px hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 2%)),\n 0 2px 5px -5px hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 4%)),\n 0 4px 12px -5px hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 5%)),\n 0 12px 15px -5px hsl(var(--shadow-color) /\n calc(var(--shadow-strength) + 7%));\n\n --ring-shadow: 0 0 0 1px var(--gray-2);\n\n /* How fast should the message pop in and out of the screen? */\n --animation-speed: 500ms;\n\n /* Taken from open-props */\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --animation-slide-in-left: slide-in-left var(--animation-speed)\n var(--ease-3);\n\n --animation-slide-out-left: slide-out-left var(--animation-speed)\n var(--ease-3);\n --modal-bg-color: white;\n\n position: fixed;\n top: var(--space-1);\n right: var(--space-1);\n z-index: 1000;\n\n display: flex;\n flex-direction: column;\n\n background-color: var(--modal-bg-color);\n border-radius: var(--space-1);\n\n animation: var(--animation-slide-in-left);\n box-shadow: var(--shadow-3), var(--ring-shadow);\n\n /* Dont let the error console burst out of the viewport */\n max-height: calc(100vh - 2 * var(--space-1));\n }\n\n @keyframes slide-in-left {\n from {\n transform: translateX(100%);\n }\n }\n @keyframes slide-out-left {\n to {\n transform: translateX(100%);\n }\n }\n\n :host(.leaving) {\n animation: var(--animation-slide-out-left);\n }\n\n .header {\n display: flex;\n justify-content: flex-end;\n align-items: flex-start;\n gap: var(--space-2);\n }\n\n .title {\n font-size: var(--font-xl);\n margin-right: auto;\n padding: var(--space-3);\n line-height: 1;\n font-weight: 600;\n color: var(--red-12);\n }\n\n ", "\n\n button:hover {\n background-color: var(--gray-2);\n }\n\n .toggle-button {\n width: fit-content;\n border: none;\n aspect-ratio: 1;\n border-color: var(--gray-4);\n }\n\n .close-button {\n display: flex;\n align-items: center;\n color: var(--red-11);\n }\n\n .close-button > svg {\n margin-right: 3px;\n }\n\n .toggle-button:focus {\n outline: 1px solid black;\n }\n\n .toggle-icon {\n transition: transform var(--animation-speed) ease-in-out;\n }\n\n :host(.collapsed) .toggle-icon {\n transform: scaleX(-1) scaleY(-1);\n }\n\n :host(.collapsed) .close-button {\n display: none;\n }\n\n .content {\n display: block;\n padding-inline: var(--space-4);\n padding-block-start: 0;\n padding-block-end: var(--space-4);\n max-height: 100%;\n overflow: auto;\n }\n\n :host(.collapsed) .content {\n display: none;\n }\n "])), buttonStyles)]);
customElements.define("shiny-error-console", ShinyErrorConsole);
var ShinyErrorMessage = /* @__PURE__ */ function(_LitElement2) {
_inherits25(ShinyErrorMessage2, _LitElement2);
@@ -22352,7 +22352,7 @@
headline: {},
message: {}
});
_defineProperty19(ShinyErrorMessage, "styles", [i(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(['\n :host {\n color: var(--red-11);\n display: block;\n font-size: 1.4rem;\n\n position: relative;\n --icon-size: 1.5rem;\n\n --padding-top: var(--space-1);\n --padding-bottom: var(--space-3);\n\n /* Reset box sizing */\n box-sizing: border-box;\n }\n\n .container {\n display: flex;\n gap: var(--space-2);\n }\n\n .contents {\n width: 40ch;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding-bottom: var(--padding-bottom);\n padding-top: var(--padding-top);\n overflow: auto;\n }\n\n :host(:last-of-type) .contents {\n --padding-bottom: var(--space-1);\n }\n\n .contents > h3 {\n font-size: 1em;\n font-weight: 500;\n color: var(--red-12);\n }\n\n .contents > * {\n margin-block: 0;\n }\n\n .error-message {\n font-family: "Courier New", Courier, monospace;\n }\n\n .decoration-container {\n flex-shrink: 0;\n padding-inline: var(0.375rem);\n position: relative;\n\n --line-w: 2px;\n --dot-size: 1rem;\n }\n\n :host(:hover) .decoration-container {\n --scale: 1.25;\n }\n\n .vertical-line {\n margin-inline: auto;\n width: var(--line-w);\n height: 100%;\n\n background-color: var(--red-10);\n }\n\n :host(:first-of-type) .vertical-line {\n height: calc(100% - var(--dot-size));\n margin-top: var(--dot-size);\n }\n\n .dot {\n position: absolute;\n width: var(--dot-size);\n height: var(--dot-size);\n top: var(--dot-size);\n left: calc(50% - var(--dot-size) / 2);\n border-radius: 100%;\n transform: scale(var(--scale, 1));\n\n color: var(--red-6);\n background-color: var(--red-10);\n }\n\n .actions {\n transform: scaleX(0);\n transition: transform calc(var(--animation-speed) / 2) ease-in-out;\n display: flex;\n justify-content: center;\n flex-direction: column;\n }\n\n /* Delay transition on mouseout so the buttons don\'t jump away if the user\n overshoots them with their mouse */\n :host(:not(:hover)) .actions {\n transition-delay: 0.15s;\n }\n\n :host(:hover) .actions {\n transform: scaleX(1);\n }\n\n ', "\n\n .copy-button {\n padding: 0;\n width: 4rem;\n height: 4rem;\n position: relative;\n --pad: var(--space-2);\n }\n\n .copy-button-inner {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n transition: transform 0.5s;\n transform-style: preserve-3d;\n }\n\n /* Animate flipping to the other side when the .copy-success class is\n added to the host */\n :host(.copy-success) .copy-button-inner {\n transform: rotateY(180deg);\n }\n\n /* Position the front and back side */\n .copy-button .front,\n .copy-button .back {\n --side: calc(100% - 2 * var(--pad));\n position: absolute;\n inset: var(--pad);\n height: var(--side);\n width: var(--side);\n -webkit-backface-visibility: hidden; /* Safari */\n backface-visibility: hidden;\n }\n\n .copy-button:hover .copy-button-inner {\n background-color: var(--gray-2);\n }\n\n /* Style the back side */\n .copy-button .back {\n --pad: var(--space-1);\n color: var(--green-8);\n transform: rotateY(180deg);\n }\n "])), buttonStyles)]);
_defineProperty19(ShinyErrorMessage, "styles", [i(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(['\n :host {\n color: var(--red-11);\n display: block;\n font-size: var(--font-md);\n\n position: relative;\n --icon-size: var(--font-lg)\n\n /* Reset box sizing */\n box-sizing: border-box;\n }\n\n .container {\n display: flex;\n gap: var(--space-2);\n }\n\n .contents {\n width: 40ch;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding-block-start: 0;\n padding-block-end: var(--space-3);\n overflow: auto;\n }\n\n :host(:last-of-type) .contents {\n\n padding-block-end: var(--space-1);\n }\n\n .contents > h3 {\n font-size: 1em;\n font-weight: 500;\n color: var(--red-12);\n }\n\n .contents > * {\n margin-block: 0;\n }\n\n .error-message {\n font-family: "Courier New", Courier, monospace;\n }\n\n .decoration-container {\n flex-shrink: 0;\n position: relative;\n\n --line-w: 2px;\n --dot-size: 11px;\n }\n\n :host(:hover) .decoration-container {\n --scale: 1.25;\n }\n\n .vertical-line {\n margin-inline: auto;\n width: var(--line-w);\n height: 100%;\n\n background-color: var(--red-10);\n }\n\n :host(:first-of-type) .vertical-line {\n height: calc(100% - var(--dot-size));\n margin-top: var(--dot-size);\n }\n\n .dot {\n position: absolute;\n width: var(--dot-size);\n height: var(--dot-size);\n top: calc(-1px + var(--dot-size) / 2);\n left: calc(50% - var(--dot-size) / 2);\n border-radius: 100%;\n transform: scale(var(--scale, 1));\n\n color: var(--red-6);\n background-color: var(--red-10);\n }\n\n .actions {\n transform: scaleX(0);\n transition: transform calc(var(--animation-speed) / 2) ease-in-out;\n display: flex;\n justify-content: center;\n flex-direction: column;\n }\n\n /* Delay transition on mouseout so the buttons don\'t jump away if the user\n overshoots them with their mouse */\n :host(:not(:hover)) .actions {\n transition-delay: 0.15s;\n }\n\n :host(:hover) .actions {\n transform: scaleX(1);\n }\n\n ', "\n\n .copy-button {\n padding: 0;\n width: var(--space-8);\n height: var(--space-8);\n position: relative;\n --pad: var(--space-2);\n }\n\n .copy-button-inner {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n transition: transform 0.5s;\n transform-style: preserve-3d;\n }\n\n /* Animate flipping to the other side when the .copy-success class is\n added to the host */\n :host(.copy-success) .copy-button-inner {\n transform: rotateY(180deg);\n }\n\n /* Position the front and back side */\n .copy-button .front,\n .copy-button .back {\n --side: calc(100% - 2 * var(--pad));\n position: absolute;\n inset: var(--pad);\n height: var(--side);\n width: var(--side);\n -webkit-backface-visibility: hidden; /* Safari */\n backface-visibility: hidden;\n }\n\n .copy-button:hover .copy-button-inner {\n background-color: var(--gray-2);\n }\n\n /* Style the back side */\n .copy-button .back {\n --pad: var(--space-1);\n color: var(--green-8);\n transform: rotateY(180deg);\n }\n "])), buttonStyles)]);
customElements.define("shiny-error-message", ShinyErrorMessage);
function showErrorInClientConsole(e4) {
var errorMsg = null;

4
inst/www/shared/shiny.js.map
View File

File diff suppressed because one or more lines are too long

2
inst/www/shared/shiny.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
inst/www/shared/shiny.min.js.map
View File

File diff suppressed because one or more lines are too long

46
man/shiny-package.Rd
View File

@@ -19,3 +19,49 @@ includes extensive annotated examples.
\seealso{
\link{shiny-options} for documentation about global options.
}
\author{
\strong{Maintainer}: Winston Chang \email{winston@posit.co} (\href{https://orcid.org/0000-0002-1576-2126}{ORCID})
Authors:
\itemize{
\item Joe Cheng \email{joe@posit.co}
\item JJ Allaire \email{jj@posit.co}
\item Carson Sievert \email{carson@posit.co} (\href{https://orcid.org/0000-0002-4958-2844}{ORCID})
\item Barret Schloerke \email{barret@posit.co} (\href{https://orcid.org/0000-0001-9986-114X}{ORCID})
\item Yihui Xie \email{yihui@posit.co}
\item Jeff Allen
\item Jonathan McPherson \email{jonathan@posit.co}
\item Alan Dipert
\item Barbara Borges
}
Other contributors:
\itemize{
\item Posit Software, PBC [copyright holder, funder]
\item jQuery Foundation (jQuery library and jQuery UI library) [copyright holder]
\item jQuery contributors (jQuery library; authors listed in inst/www/shared/jquery-AUTHORS.txt) [contributor, copyright holder]
\item jQuery UI contributors (jQuery UI library; authors listed in inst/www/shared/jqueryui/AUTHORS.txt) [contributor, copyright holder]
\item Mark Otto (Bootstrap library) [contributor]
\item Jacob Thornton (Bootstrap library) [contributor]
\item Bootstrap contributors (Bootstrap library) [contributor]
\item Twitter, Inc (Bootstrap library) [copyright holder]
\item Prem Nawaz Khan (Bootstrap accessibility plugin) [contributor]
\item Victor Tsaran (Bootstrap accessibility plugin) [contributor]
\item Dennis Lembree (Bootstrap accessibility plugin) [contributor]
\item Srinivasu Chakravarthula (Bootstrap accessibility plugin) [contributor]
\item Cathy O'Connor (Bootstrap accessibility plugin) [contributor]
\item PayPal, Inc (Bootstrap accessibility plugin) [copyright holder]
\item Stefan Petre (Bootstrap-datepicker library) [contributor, copyright holder]
\item Andrew Rowls (Bootstrap-datepicker library) [contributor, copyright holder]
\item Brian Reavis (selectize.js library) [contributor, copyright holder]
\item Salmen Bejaoui (selectize-plugin-a11y library) [contributor, copyright holder]
\item Denis Ineshin (ion.rangeSlider library) [contributor, copyright holder]
\item Sami Samhuri (Javascript strftime library) [contributor, copyright holder]
\item SpryMedia Limited (DataTables library) [contributor, copyright holder]
\item John Fraser (showdown.js library) [contributor, copyright holder]
\item John Gruber (showdown.js library) [contributor, copyright holder]
\item Ivan Sagalaev (highlight.js library) [contributor, copyright holder]
\item R Core Team (tar implementation from R) [contributor, copyright holder]
}
}

42
srcts/src/components/errorConsole.ts
View File

@@ -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);
}