Revert the addition of spacing between icon and label in actionButton() (#4248)

* Revert the addition of spacing between icon and label in actionButton()

* `yarn build` (GitHub Actions)

---------

Co-authored-by: cpsievert <cpsievert@users.noreply.github.com>

R/input-action.R

@@ -93,10 +93,7 @@ get_action_children <- function(label, icon) {
     # minimize the chance of breaking existing code.
     tagList(
       icon,
-      tags$span(
+      tags$span(class = "shiny-icon-separator"),
-        class = "shiny-icon-separator",
-        class = if (length(label) > 0) "shiny-icon-spacer"
-      ),
       label
     )
   } else {

inst/www/shared/shiny.js

@@ -1137,7 +1137,8 @@
 
   // srcts/src/bindings/input/actionbutton.ts
   var import_jquery7 = __toESM(require_jquery());
-  var iconSeparatorClasses = ["shiny-icon-separator", "shiny-icon-spacer"];
+  var iconSeparatorClass = "shiny-icon-separator";
+  var iconSeparatorHTML = `<span class='${iconSeparatorClass}'></span>`;
   var ActionButtonInputBinding = class extends InputBinding {
     find(scope) {
       return (0, import_jquery7.default)(scope).find(".action-button");
@@ -1180,8 +1181,7 @@
           deps.push(...data.icon.deps);
         }
         if (icon.trim()) {
-          const separatorClasses = label.trim() ? iconSeparatorClasses.join(" ") : iconSeparatorClasses[0];
+          icon = icon + iconSeparatorHTML;
-          icon += `<span class='${separatorClasses}'></span>`;
         }
         await renderContent(el, { html: icon + label, deps });
       }
@@ -1201,7 +1201,7 @@
       const nodeContents = nodes.map(
         (node) => node instanceof Element ? node.outerHTML : node.textContent
       );
-      const separator = el.querySelector(`.${iconSeparatorClasses[0]}`);
+      const separator = el.querySelector(`.${iconSeparatorClass}`);
       if (!separator) {
         return { icon: "", label: nodeContents.join("") };
       }

inst/www/shared/shiny_scss/shiny.scss

@@ -463,10 +463,6 @@ textarea.textarea-autoresize.form-control {
   }
 }
 
-button.action-button > .shiny-icon-spacer {
-  padding-right: 0.5ch;
-}
-
 /* Overrides bootstrap-datepicker3.css styling for invalid date ranges.
    See https://github.com/rstudio/shiny/issues/2042 for details. */
 .datepicker table tbody tr td.disabled,

srcts/src/bindings/input/actionbutton.ts

@@ -10,8 +10,9 @@ type ActionButtonReceiveMessageData = {
   disabled?: boolean;
 };
 
-// Mirror the classes in the CSS/R markup generation for action buttons.
+// Needs to mirror shiny:::icon_separator()'s markup.
-const iconSeparatorClasses = ["shiny-icon-separator", "shiny-icon-spacer"];
+const iconSeparatorClass = "shiny-icon-separator";
+const iconSeparatorHTML = `<span class='${iconSeparatorClass}'></span>`;
 
 class ActionButtonInputBinding extends InputBinding {
   find(scope: HTMLElement): JQuery<HTMLElement> {
@@ -64,13 +65,8 @@ class ActionButtonInputBinding extends InputBinding {
         deps.push(...data.icon.deps);
       }
 
-      // Always add the separator when icon is present, but spacing is only needed
-      // when both icon and label are present.
       if (icon.trim()) {
-        const separatorClasses = label.trim()
+        icon = icon + iconSeparatorHTML;
-          ? iconSeparatorClasses.join(" ")
-          : iconSeparatorClasses[0];
-        icon += `<span class='${separatorClasses}'></span>`;
       }
 
       await renderContent(el, { html: icon + label, deps });
@@ -97,7 +93,7 @@ class ActionButtonInputBinding extends InputBinding {
     );
 
     // Query the separator element
-    const separator = el.querySelector(`.${iconSeparatorClasses[0]}`);
+    const separator = el.querySelector(`.${iconSeparatorClass}`);
 
     // No separator found, so the entire contents are the label.
     if (!separator) {

tests/testthat/_snaps/actionButton.md

@@ -12,7 +12,7 @@
     Output
       <button id="foo" type="button" class="btn btn-default action-button">
         <i class="far fa-star" role="presentation" aria-label="star icon"></i>
-        <span class="shiny-icon-separator shiny-icon-spacer"></span>
+        <span class="shiny-icon-separator"></span>
         Click me
       </button>