Merge pull request #94 from posit-dev/refactor-tabsets

Refactor/consolidate tabset styling, use shiny-mode-tabset more generally

components/_partials/components.css

@@ -161,15 +161,6 @@ a.component-list-header-text:hover
   }
 }
 
-/* detail page styling */
-.tab-content {
-  margin-top: 0px;
-  border: 0px;
-  margin-left: 0;
-  padding: 1em 0px;
-  margin-bottom: 1em;
-}
-
 .component-hr:last-of-type {
   display: none;
 }
@@ -190,19 +181,6 @@ a.component-list-header-text:hover
     0px 12px 30px rgba(0, 0, 0, 0.08);
 }
 
-/* Tab styling */
-
-.panel-tabset .nav-tabs {
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  border-bottom: 1px solid #ffffff;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  color: #48505f;
-}
-
 main a.nav-link {
   color: #343a46;
 }
@@ -211,37 +189,6 @@ main a.nav-link:hover {
   color: #1d1f21;
 }
 
-.panel-tabset .nav-tabs .nav-link:hover,
-.panel-tabset .nav-tabs .nav-link:focus {
-  border-bottom: 1px solid #ffffff !important;
-}
-
-.panel-tabset .nav-tabs .nav-link.active,
-.panel-tabset .nav-tabs .nav-item.show .nav-link,
-.panel-tabset a.nav-link.active:hover {
-  color: #202020;
-  background-color: #fff;
-  border-bottom: 3px solid #202020 !important;
-  margin-bottom: 0px;
-  border-left: 0px solid rgba(0, 0, 0, 0);
-  border-right: 0px solid rgba(0, 0, 0, 0);
-  border-top: 0px solid rgba(0, 0, 0, 0);
-}
-
-.panel-tabset .nav-tabs .nav-link:hover,
-.panel-tabset .nav-tabs .nav-link:focus {
-  border-bottom: 1px solid #cdd4da;
-  border-left: 1px solid rgba(0, 0, 0, 0);
-  border-right: 1px solid rgba(0, 0, 0, 0);
-  border-top: 1px solid rgba(0, 0, 0, 0);
-  border-radius: 0px;
-}
-
-.panel-tabset .nav-tabs .nav-link {
-  padding: 0.45rem 1.25rem;
-  margin-bottom: 2px;
-}
-
 .iframe-border {
   border: 1px solid #e9ecef;
   border-radius: 10px;

docs/comp-r-shiny.qmd

@@ -29,7 +29,7 @@ To get started you can do the following (or see the [installation instructions](
 1.  In your terminal, create a new directory with `mkdir <my_directory>` and navigate into it with `cd <my_directory>`
 2.  Install Shiny. We strongly recommend using a virtual environment for this as it will eliminate dependency resolution headaches and make deployment easier.
 
-::: panel-tabset
+::: {.panel-tabset .panel-pills}
 ### Install with pip
 
 ``` bash

docs/custom-component-one-off.qmd

@@ -284,11 +284,11 @@ This returned value is then what gets sent to the client side and is available i
 
 Now we have all the components neccesary to use our tabulator output component. Here's an app that uses it to render some number of rows of the indomitable `mtcars` dataset.
 
-::: {.panel-tabset .panel-pills .border-0 .justify-content-center}
+::: {.panel-tabset .shiny-mode-tabset group="shiny-app-mode"}
 
 ### Express
 
-```{.python filename="app.py"}
+```{.python}
 from pathlib import Path
 import pandas as pd
 from shiny.express import input, ui

docs/custom-components-pkg.qmd

@@ -342,7 +342,7 @@ This file is used to configure typescript, which we are using to write our compo
 
 ### `example-app/app.py`
 
-::: {.panel-tabset .panel-pills .border-0 .justify-content-center}
+::: {.panel-tabset .shiny-mode-tabset group="shiny-app-mode"}
 
 #### Express
 
@@ -391,7 +391,7 @@ This is a simple example app that can be used to test the component while develo
 
 In our output binding example we defined an output that conveniently _displays_ colors. If we were packaging up two components like this we could/should modify the example app to showcase both of them.
 
-::: {.panel-tabset .panel-pills .border-0 .justify-content-center}
+::: {.panel-tabset .shiny-mode-tabset group="shiny-app-mode"}
 
 #### Express
 

docs/express-to-core.qmd

@@ -19,7 +19,7 @@ To dig into more specifics, consider the following app that just displays a slid
 
 [^express-implicit]: In Express, page layout options can be controlled via `ui.page_opts()` and (at least some, for now) output containers can be controlled through their respective `@render.*()` decorators.
 
-::: {.panel-tabset .panel-pills .border-0 .p-0 .justify-content-center}
+::: {.panel-tabset .shiny-mode-tabset group="shiny-app-mode"}
 
 ### Core
 
@@ -67,7 +67,7 @@ Now, suppose we add a UI component that takes other components as children, like
 In Core, this is done by nesting [pure function](https://en.wikipedia.org/wiki/Pure_function) calls.
 However, in Express, UI components that take other UI components as children are context managers, so we use `with` statements instead.
 
-::: {.panel-tabset .panel-pills .border-0 .p-0 .justify-content-center}
+::: {.panel-tabset .shiny-mode-tabset group="shiny-app-mode"}
 
 ### Core
 

docs/express-vs-core.qmd

@@ -76,7 +76,7 @@ You can think of the UI section as a template, with `ui.output_xx()` calls as pl
 #| components: [editor, viewer]
 #| layout: vertical
 # Core
-from shiny import ui, render, reactive, App
+from shiny import App, reactive, render, ui
 from datetime import datetime
 
 app_ui = ui.page_fixed(
@@ -85,7 +85,7 @@ app_ui = ui.page_fixed(
 )
 
 def server(input, output, session):
-    @reactive.Calc
+    @reactive.calc
     def time():
         reactive.invalidate_later(1)
         return datetime.now()
@@ -109,13 +109,12 @@ You can use multiple UI objects, and they will be combined together by the frame
 #| components: [editor, viewer]
 #| layout: vertical
 # Express
-from shiny import ui, render, reactive, App
-import shiny.express
+from shiny.express import reactive, render
 from datetime import datetime
 
 ui.h1("Title")
 
-@reactive.Calc
+@reactive.calc
 def time():
     reactive.invalidate_later(1)
     return datetime.now()
@@ -211,8 +210,7 @@ Their child components go within the `with` block.
 #| components: [editor, viewer]
 #| layout: vertical
 # Express
-from shiny import render, App
-from shiny.express import input, ui
+from shiny.express import input, render, ui
 
 with ui.sidebar():
     ui.input_text("txt_in", "Type something here:")

docs/install-create-run.qmd

@@ -6,7 +6,7 @@ title: Install, create, & run
 
 `shiny` can be installed via `pip` or `conda`.
 
-::: {.panel-tabset .border-0 .p-0 .justify-content-center}
+::: {.panel-tabset .panel-pills}
 
 #### pip
 

docs/jupyter-widgets.qmd

@@ -44,7 +44,7 @@ To render an ipywidget you first define a reactive function that returns the wid
 
 <!-- Note: this is copy/pasted from overview.qmd -->
 
-::: {.panel-tabset .panel-pills .border-0 .p-0 .justify-content-center}
+::: {.panel-tabset .panel-pills}
 
 ##### Altair
 

docs/overview.qmd

@@ -62,7 +62,7 @@ Shiny makes it easy to create dynamic plots, tables, and other interactive widge
 All you need to do is apply a `@render` decorator to a function that returns a suitable object.
 Shiny includes a wide variety of these decorators in its `render` module, but Shiny [extensions](custom-component-one-off.qmd) like `shinywidgets` provide additional decorators for rendering other kinds of outputs, like [Jupyter Widgets](jupyter-widgets.qmd).
 
-::: {.panel-tabset .panel-pills .border-0 .p-0 .justify-content-center}
+::: {.panel-tabset .panel-pills}
 
 ##### Plots
 
@@ -129,7 +129,7 @@ palmerpenguins
 
 See the [Jupyter Widgets article](jupyter-widgets.qmd) for more information on rendering Jupyter Widgets in Shiny.
 
-::: {.panel-tabset .panel-pills .border-0 .p-0 .justify-content-center}
+::: {.panel-tabset .panel-pills}
 
 ##### Altair
 
@@ -303,7 +303,7 @@ def widget():
 
 Shiny provides a full suite of [layout components](/layouts) which help with arranging multiple inputs and outputs in a variety of ways. As seen below, with `shiny.express`, layout components (e.g., `ui.sidebar()`) can be used as context managers to help with nesting and readability.
 
-::: {.panel-tabset .panel-pills .border-0 .p-0 .justify-content-center}
+::: {.panel-tabset .panel-pills}
 
 #### Sidebar
 

docs/reactive-patterns.qmd

@@ -28,7 +28,7 @@ We might want it to re-execute it only when the user presses a button.
 In other words, we want to ignore changes in the slider until the button is pressed.
 The more idiomatic way to do this is with `@reactive.event()`:
 
-::: {.panel-tabset .panel-pills .border-0 .p-0 .justify-content-center}
+::: {.panel-tabset .panel-pills}
 
 ### reactive.event
 

docs/ui-overview.qmd

@@ -206,7 +206,7 @@ A special type of layout is the page layout, which is used to start a new UI.
 In [Shiny Express](express-vs-core.qmd), the page layout is implicit, and automatically inferred from the top-level UI components.
 In [Shiny Core](express-vs-core.qmd), the page layout is explicit, meaning that the UI starts with a page layout component (e.g. `ui.page_fluid()`, `ui.page_sidebar()`, etc).
 
-::: {.column-body-outset-right .panel-tabset .panel-pills .border-0 .justify-content-center}
+::: {.column-body-outset-right .panel-tabset .panel-pills}
 
 #### Sidebar
 
@@ -429,4 +429,3 @@ See [this section of the component gallery](/components/#display-messages) for a
 ### Next steps
 
 Next up, we'll learn all about Shiny's [Jupyter Widgets](jupyter-widgets.qmd) integration.
-

include-in-header.html

@@ -84,7 +84,7 @@
       const tooltipDisplay = `<i class="bi bi-question-circle-fill d-inline d-sm-none"></i><span class="d-none d-sm-inline">What's the difference?</span>`;
 
       document
-        .querySelectorAll('.panel-tabset[data-group="shiny-app-mode"]')
+        .querySelectorAll(".panel-tabset.shiny-mode-tabset")
         .forEach(function (tabset) {
           const trigger = document.createElement("div");
           trigger.classList.add("what-shiny-express", "text-white");
@@ -107,18 +107,25 @@
         });
     }
 
-    function addPanelPillsNav() {
+    function handlePanelVariants() {
       document.querySelectorAll(".panel-pills > .nav").forEach((x) => {
         x.classList.remove("nav-tabs");
         x.classList.add("nav-pills");
-        x.classList.add("justify-content-center");
+      });
+      document.querySelectorAll(".panel-underline > .nav").forEach((x) => {
+        x.classList.remove("nav-tabs");
+        x.classList.add("nav-underline");
+      });
+      document.querySelectorAll(".shiny-mode-tabset > .nav").forEach((x) => {
+        x.classList.remove("nav-tabs");
+        x.classList.add("nav-underline");
       });
     }
 
     function onLoad() {
       addShinyliveEditLinks();
       addWhatsShinyExpressTooltip();
-      addPanelPillsNav();
+      handlePanelVariants();
     }
 
     document.readyState === "loading"

layouts/_partials/layouts.css

@@ -167,16 +167,6 @@ a.component-list-header-text:hover
   }
 }
 
-/* detail page styling */
-
-.tab-content {
-  margin-top: 0px;
-  border: 0px;
-  margin-left: 0;
-  padding: 1em 0px;
-  margin-bottom: 1em;
-}
-
 code.sourceCode,
 pre.console code {
   padding: 0.25rem 1rem 0.25rem 0.25rem;
@@ -190,15 +180,6 @@ pre.console code {
   border-top-right-radius: 0%;
 }
 
-.tab-pane div.sourceCode {
-  margin-top: 0px;
-}
-
-.tab-content div.sourceCode,
-.tab-content pre.console {
-  margin-bottom: 0px;
-}
-
 .component-hr:last-of-type {
   display: none;
 }
@@ -219,19 +200,6 @@ pre.console code {
     0px 12px 30px rgba(0, 0, 0, 0.08);
 }
 
-/* Tab styling */
-
-.panel-tabset:not(.shiny-mode-tabset) .nav-tabs {
-  display: flex !important;
-  align-items: flex-end !important;
-  justify-content: flex-end !important;
-  border-bottom: 1px solid #e9ecef;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  color: #48505f;
-}
-
 main a.nav-link {
   color: #343a46;
 }
@@ -240,42 +208,6 @@ main a.nav-link:hover {
   color: #1d1f21;
 }
 
-.panel-tabset .nav-tabs .nav-link:hover,
-.panel-tabset .nav-tabs .nav-link:focus {
-  border-bottom: 1px solid #ffffff !important;
-}
-
-.panel-tabset .nav-tabs .nav-link.active,
-.panel-tabset .nav-tabs .nav-item.show .nav-link,
-.panel-tabset a.nav-link.active:hover {
-  color: #202020;
-  background-color: #fff;
-  border-bottom: 3px solid #202020 !important;
-  margin-bottom: -2px;
-  border-left: 1px solid rgba(0, 0, 0, 0);
-  border-right: 1px solid rgba(0, 0, 0, 0);
-  border-top: 1px solid rgba(0, 0, 0, 0);
-  border-radius: 0px;
-}
-
-.panel-tabset .nav-tabs .nav-link:hover,
-.panel-tabset .nav-tabs .nav-link:focus {
-  border-bottom: 1px solid #cdd4da;
-  border-left: 1px solid rgba(0, 0, 0, 0);
-  border-right: 1px solid rgba(0, 0, 0, 0);
-  border-top: 1px solid rgba(0, 0, 0, 0);
-  border-radius: 0px;
-}
-
-.panel-tabset .nav-tabs .nav-link {
-  padding: 0.35rem 1.25rem;
-  margin-bottom: 0px;
-}
-
-.panel-tabset .tab-content {
-  padding-bottom: 0px;
-}
-
 .iframe-border {
   border: 1px solid #e9ecef;
   border-radius: 10px;