DEV: Remove default button classes from sidebar buttons (#26893)

app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs

@@ -3,13 +3,18 @@
 {{/if}}
 
 <li class="sidebar-section-link-wrapper">
-  <DButton
+  <button
-    @icon="ellipsis-v"
+    class="sidebar-section-link sidebar-row sidebar-more-section-links-details-summary --link-button"
-    @action={{this.toggleSectionLinks}}
-    @label="sidebar.more"
-    class="btn-flat sidebar-more-section-links-details-summary"
     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}}

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

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

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();

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",

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"

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;

app/assets/stylesheets/common/base/sidebar-section-link.scss

@@ -83,24 +83,9 @@
     }
   }
 
-  .sidebar-section-link-button {
+  .--link-button {
-    color: var(--d-sidebar-link-color);
+    border: none;
-    background-color: var(--secondary);
+    background: inherit;
-    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);
-    }
   }
 
   .sidebar-section-link[data-link-name="personal-messages-sent"],

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

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