From 01e725a225a1047e6b59519cefe75aaa404cb674 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 7 May 2024 09:20:30 -0400
Subject: [PATCH] DEV: Remove default button classes from sidebar buttons
 (#26893)

---
 .../components/sidebar/more-section-links.hbs | 18 ++++++++-----
 .../components/sidebar/more-section-links.js  |  9 +++++--
 .../sidebar/section-link-button.hbs           |  2 +-
 .../discourse/app/widgets/header.js           |  2 --
 .../discourse/app/widgets/sidebar-toggle.js   |  1 +
 .../sidebar-user-community-section-test.js    |  4 +--
 .../base/sidebar-more-section-links.scss      | 27 -------------------
 .../common/base/sidebar-section-link.scss     | 21 +++------------
 spec/system/homepage_spec.rb                  |  2 +-
 .../components/navigation_menu/sidebar.rb     |  2 +-
 10 files changed, 28 insertions(+), 60 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs
index 51219441b82..f3a74b5787d 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs
@@ -3,13 +3,18 @@
 {{/if}}
 
 <li class="sidebar-section-link-wrapper">
-  <DButton
-    @icon="ellipsis-v"
-    @action={{this.toggleSectionLinks}}
-    @label="sidebar.more"
-    class="btn-flat sidebar-more-section-links-details-summary"
+  <button
+    class="sidebar-section-link sidebar-row sidebar-more-section-links-details-summary --link-button"
     aria-expanded={{if this.open "true" "false"}}
-  />
+    {{on "click" this.toggleSectionLinks}}
+  >
+    <span class="sidebar-section-link-prefix icon">
+      {{d-icon "ellipsis-v"}}
+    </span>
+    <span class="sidebar-section-link-content-text">
+      {{i18n "sidebar.more"}}
+    </span>
+  </button>
 </li>
 
 {{#if this.open}}
@@ -33,6 +38,7 @@
               @action={{@moreButtonAction}}
               @icon={{@moreButtonIcon}}
               @text={{@moreButtonText}}
+              @name="customize"
             />
           </div>
         {{/if}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js
index 3ef41d9ce61..7836d57e704 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js
@@ -47,10 +47,14 @@ export default class SidebarMoreSectionLinks extends Component {
 
   @bind
   closeDetails(event) {
+    if (event.target.closest(".sidebar-more-section-links-details-summary")) {
+      return;
+    }
+
     if (this.open) {
       const isLinkClick =
         event.target.className.includes("sidebar-section-link") ||
-        event.target.className.includes("sidebar-section-link-button");
+        event.target.className.includes("--link-button");
 
       if (isLinkClick || this.#isOutsideDetailsClick(event)) {
         this.open = false;
@@ -69,7 +73,8 @@ export default class SidebarMoreSectionLinks extends Component {
   }
 
   @action
-  toggleSectionLinks() {
+  toggleSectionLinks(event) {
+    event.stopPropagation();
     this.open = !this.open;
   }
 
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs
index 852bcc1d381..97aa732b850 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs
@@ -1,7 +1,7 @@
 <div class="sidebar-section-link-wrapper">
   <button
     type="button"
-    class="btn btn-flat sidebar-section-link-button sidebar-row"
+    class="sidebar-section-link sidebar-row --link-button"
     {{on "click" @action}}
   >
     <span class="sidebar-section-link-prefix icon">
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index 3f309954f02..2bde3e8d883 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -357,7 +357,6 @@ createWidget("hamburger-dropdown-wrapper", {
   click(event) {
     if (
       event.target.closest(".sidebar-section-header-button") ||
-      event.target.closest(".sidebar-section-link-button") ||
       event.target.closest(".sidebar-section-link")
     ) {
       this.sendWidgetAction("toggleHamburger");
@@ -649,7 +648,6 @@ export default createWidget("header", {
     } else {
       this.state.hamburgerVisible = !this.state.hamburgerVisible;
       this.toggleBodyScrolling(this.state.hamburgerVisible);
-
       schedule("afterRender", () => {
         // Remove focus from hamburger toggle button
         document.querySelector("#toggle-hamburger-menu")?.blur();
diff --git a/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js b/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js
index eb5a3f21a00..2555300db39 100644
--- a/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js
+++ b/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js
@@ -6,6 +6,7 @@ export default createWidget("sidebar-toggle", {
 
   html() {
     const attrs = this.attrs;
+
     return [
       this.attach("button", {
         title: "sidebar.title",
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js
index 6d0ebc4fbac..1be2f20721c 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js
@@ -295,7 +295,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
 
     assert.strictEqual(
       query(
-        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary .sidebar-section-link-content-text"
       ).textContent.trim(),
       I18n.t("sidebar.more"),
       "displays the right count as users link is currently active"
@@ -404,7 +404,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
 
     assert.strictEqual(
       query(
-        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
+        ".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary .sidebar-section-link-content-text"
       ).textContent.trim(),
       I18n.t("sidebar.more"),
       "displays the right count as groups link is currently active"
diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
index 3957b5a5e10..b8cc212cfb2 100644
--- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
+++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
@@ -1,30 +1,3 @@
-.btn-flat.sidebar-more-section-links-details-summary {
-  &:focus-within,
-  &:active,
-  &:hover {
-    background: var(--d-sidebar-highlight-background);
-    svg.d-icon {
-      color: var(--d-sidebar-highlight-color);
-    }
-  }
-
-  height: var(--d-sidebar-row-height);
-  color: var(--d-sidebar-link-color);
-  display: flex;
-  list-style: none;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 0 var(--d-sidebar-row-horizontal-padding);
-  justify-content: left;
-
-  .d-icon {
-    width: var(--d-sidebar-section-link-prefix-width);
-    margin-right: var(--d-sidebar-section-link-prefix-margin-right);
-    color: var(--d-sidebar-link-icon-color);
-    font-size: var(--font-down-1);
-  }
-}
-
 .sidebar-more-section-links-details-content {
   background-color: var(--d-sidebar-background);
   transition: background-color 0.25s;
diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss
index 6322b4043c2..dc8f50499b6 100644
--- a/app/assets/stylesheets/common/base/sidebar-section-link.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss
@@ -83,24 +83,9 @@
     }
   }
 
-  .sidebar-section-link-button {
-    color: var(--d-sidebar-link-color);
-    background-color: var(--secondary);
-    width: 100%;
-    justify-content: flex-start;
-
-    &:hover {
-      color: var(--d-sidebar-link-color);
-      background-color: var(--primary-low);
-
-      .d-icon {
-        color: var(--d-sidebar-link-icon-color);
-      }
-    }
-
-    .d-icon {
-      color: var(--d-sidebar-link-icon-color);
-    }
+  .--link-button {
+    border: none;
+    background: inherit;
   }
 
   .sidebar-section-link[data-link-name="personal-messages-sent"],
diff --git a/spec/system/homepage_spec.rb b/spec/system/homepage_spec.rb
index f38d3dc3626..cd9004021f4 100644
--- a/spec/system/homepage_spec.rb
+++ b/spec/system/homepage_spec.rb
@@ -83,7 +83,7 @@ describe "Homepage", type: :system do
         expect(page).to have_css(".new-home", text: "Hi friends!")
         expect(page).to have_no_css(".list-container")
 
-        find("#sidebar-section-content-community .sidebar-section-link:first-child").click
+        find("#sidebar-section-content-community li:first-child").click
         expect(page).to have_css(".list-container")
 
         find("#site-logo").click
diff --git a/spec/system/page_objects/components/navigation_menu/sidebar.rb b/spec/system/page_objects/components/navigation_menu/sidebar.rb
index 7a512ccfcd0..5e74c1843da 100644
--- a/spec/system/page_objects/components/navigation_menu/sidebar.rb
+++ b/spec/system/page_objects/components/navigation_menu/sidebar.rb
@@ -18,7 +18,7 @@ module PageObjects
         end
 
         def has_no_customize_community_section_button?
-          community_section.has_no_button?(class: "sidebar-section-link-button")
+          community_section.has_no_button?('[data-list-item-name="customize"]')
         end
 
         def click_customize_community_section_button