Update button selectors and class usage (#42149)

* Fix a ton of btn classes

* Update buttons class list, no need for .btn on any variants now, update classes across docs and examples

* fix

Author: mdo

config.yml

@@ -50,4 +50,4 @@ anchors:
 
 toc:
   min:                  2
-  max:                  6
+  max:                  3

js/tests/integration/index.html

@@ -15,7 +15,7 @@
       <h1>Hello, world!</h1>
 
       <div class="mt-5">
-        <button type="button" class="btn btn-secondary mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+        <button type="button" class="btn-outline theme-secondary mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
           Tooltip on top
         </button>
 

js/tests/visual/alert.html

@@ -21,8 +21,8 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
         </p>
         <p>
-          <button type="button" class="btn btn-danger">Danger</button>
-          <button type="button" class="btn btn-secondary">Secondary</button>
+          <button type="button" class="btn-solid theme-danger">Danger</button>
+          <button type="button" class="btn-solid theme-secondary">Secondary</button>
         </p>
       </div>
 
@@ -32,8 +32,8 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
         </p>
         <p>
-          <button type="button" class="btn btn-danger">Take this action</button>
-          <button type="button" class="btn btn-primary">Or do this</button>
+          <button type="button" class="btn-solid theme-danger">Take this action</button>
+          <button type="button" class="btn-solid theme-primary">Or do this</button>
         </p>
       </div>
 

js/tests/visual/button.html

@@ -10,35 +10,35 @@
     <div class="container">
       <h1>Button <small>Bootstrap Visual Test</small></h1>
 
-      <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
+      <button type="button" class="btn-solid theme-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
         Single toggle
       </button>
 
       <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>
       <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>), and ensure that <kbd>Space</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>Space</kbd> toggles the checkbox again.</p>
 
       <div class="btn-group" data-bs-toggle="buttons">
-        <label class="btn btn-primary active">
+        <label class="btn-solid theme-primary active">
           <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
         </label>
-        <label class="btn btn-primary">
+        <label class="btn-solid theme-primary">
           <input type="checkbox" autocomplete="off"> Checkbox 2
         </label>
-        <label class="btn btn-primary">
+        <label class="btn-solid theme-primary">
           <input type="checkbox" autocomplete="off"> Checkbox 3
         </label>
       </div>
 
       <p>Navigate to the radio button group with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>Tab</kbd> or "backwards" using <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time.  Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse,  ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>
 
       <div class="btn-group" data-bs-toggle="buttons">
-        <label class="btn btn-primary active">
+        <label class="btn-solid theme-primary active">
           <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
         </label>
-        <label class="btn btn-primary">
+        <label class="btn-solid theme-primary">
           <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
         </label>
-        <label class="btn btn-primary">
+        <label class="btn-solid theme-primary">
           <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
         </label>
       </div>

js/tests/visual/datepicker.html

@@ -90,9 +90,9 @@ <h2>JavaScript Initialization</h2>
           <label for="jsDatepicker" class="form-label">Initialized via JavaScript</label>
           <input type="text" class="form-control" id="jsDatepicker" placeholder="Click to select">
           <div class="mt-2">
-            <button type="button" class="btn btn-primary btn-sm" id="showBtn">Show</button>
-            <button type="button" class="btn btn-secondary btn-sm" id="hideBtn">Hide</button>
-            <button type="button" class="btn btn-info btn-sm" id="getDatesBtn">Get Dates</button>
+            <button type="button" class="btn-solid theme-primary btn-sm" id="showBtn">Show</button>
+            <button type="button" class="btn-solid theme-secondary btn-sm" id="hideBtn">Hide</button>
+            <button type="button" class="btn-solid theme-info btn-sm" id="getDatesBtn">Get Dates</button>
           </div>
           <div id="selectedDatesOutput" class="mt-2 text-body-secondary"></div>
         </div>

js/tests/visual/dialog.html

@@ -26,7 +26,7 @@ <h4>Text in a dialog</h4>
           <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
 
           <h4>Popover in a dialog</h4>
-          <p>This <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p>
+          <p>This <button type="button" class="btn-solid theme-primary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p>
 
           <h4>Tooltips in a dialog</h4>
           <p><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p>
@@ -39,8 +39,8 @@ <h4>Overflowing text to show scroll behavior</h4>
           <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
         </div>
         <div class="dialog-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
-          <button type="button" class="btn btn-primary">Save changes</button>
+          <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+          <button type="button" class="btn-solid theme-primary">Save changes</button>
         </div>
       </dialog>
 
@@ -54,7 +54,7 @@ <h1 class="dialog-title">Static Backdrop Dialog</h1>
           <p>Press Escape or click the close button to dismiss.</p>
         </div>
         <div class="dialog-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
+          <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
         </div>
       </dialog>
 
@@ -68,7 +68,7 @@ <h1 class="dialog-title">No Keyboard Dismiss</h1>
           <p>You must use the close button.</p>
         </div>
         <div class="dialog-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
+          <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
         </div>
       </dialog>
 
@@ -82,8 +82,8 @@ <h1 class="dialog-title">First Dialog</h1>
           <p>Notice how the backdrop stays visible during the swap.</p>
         </div>
         <div class="dialog-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
-          <button type="button" class="btn btn-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog2">Go to Second Dialog</button>
+          <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+          <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog2">Go to Second Dialog</button>
         </div>
       </dialog>
 
@@ -97,8 +97,8 @@ <h1 class="dialog-title">Second Dialog</h1>
           <p>You can swap back to the first dialog or close this one.</p>
         </div>
         <div class="dialog-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
-          <button type="button" class="btn btn-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">Back to First Dialog</button>
+          <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+          <button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#swapDialog1">Back to First Dialog</button>
         </div>
       </dialog>
 
@@ -118,50 +118,50 @@ <h1 class="dialog-title">Non-Modal Dialog</h1>
           <p>Try clicking the buttons on the page behind this dialog!</p>
         </div>
         <div class="dialog-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="dialog">Close</button>
+          <button type="button" class="btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
         </div>
       </dialog>
 
       <div class="d-flex flex-column gap-3">
         <div>
-          <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="dialog" data-bs-target="#myDialog">
+          <button type="button" class="btn-solid theme-primary btn-lg" data-bs-toggle="dialog" data-bs-target="#myDialog">
             Launch demo dialog
           </button>
         </div>
 
         <div>
-          <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static">
+          <button type="button" class="btn-solid theme-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static">
             Launch static backdrop dialog
           </button>
         </div>
 
         <div>
-          <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#noKeyboardDialog" data-bs-keyboard="false">
+          <button type="button" class="btn-solid theme-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#noKeyboardDialog" data-bs-keyboard="false">
             Launch no-keyboard dialog
           </button>
         </div>
 
         <div>
-          <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#swapDialog1">
+          <button type="button" class="btn-solid theme-secondary btn-lg" data-bs-toggle="dialog" data-bs-target="#swapDialog1">
             Launch swap dialog demo
           </button>
         </div>
 
         <div>
-          <button type="button" class="btn btn-info btn-lg" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false">
+          <button type="button" class="btn-solid theme-info btn-lg" data-bs-toggle="dialog" data-bs-target="#nonModalDialog" data-bs-modal="false">
             Launch non-modal dialog
           </button>
           <small class="text-muted">(uses <code>show()</code> instead of <code>showModal()</code>)</small>
         </div>
 
         <div>
-          <button type="button" class="btn btn-secondary btn-lg" id="tall-toggle">
+          <button type="button" class="btn-solid theme-secondary btn-lg" id="tall-toggle">
             Toggle tall &lt;body&gt; content
           </button>
         </div>
 
         <div>
-          <button type="button" class="btn btn-secondary btn-lg" id="jsOpen">
+          <button type="button" class="btn-solid theme-secondary btn-lg" id="jsOpen">
             Open via JavaScript
           </button>
         </div>

js/tests/visual/dropdown-submenu.html

@@ -63,7 +63,7 @@ <h2>Basic Submenu</h2>
 
         <div class="demo-box">
           <div class="dropdown">
-            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn-solid theme-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown with Submenu
             </button>
             <ul class="dropdown-menu">
@@ -93,7 +93,7 @@ <h2>Nested Submenus (Multi-level)</h2>
 
         <div class="demo-box">
           <div class="dropdown">
-            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn-solid theme-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Multi-level Menu
             </button>
             <ul class="dropdown-menu">
@@ -130,7 +130,7 @@ <h2>Multiple Submenus at Same Level</h2>
 
         <div class="demo-box">
           <div class="dropdown">
-            <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn-solid theme-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Multiple Submenus
             </button>
             <ul class="dropdown-menu">
@@ -179,7 +179,7 @@ <h2>Viewport Detection (Flipping)</h2>
 
         <div class="demo-box" style="justify-content: space-between;">
           <div class="dropdown">
-            <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn-solid theme-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Left Side (opens right)
             </button>
             <ul class="dropdown-menu">
@@ -197,7 +197,7 @@ <h2>Viewport Detection (Flipping)</h2>
           </div>
 
           <div class="dropdown">
-            <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn-solid theme-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Right Side (flips left)
             </button>
             <ul class="dropdown-menu">
@@ -278,7 +278,7 @@ <h2>Dropup with Submenus</h2>
 
         <div class="demo-box demo-box-center" style="min-height: 200px;">
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn-solid theme-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               Dropup Menu
             </button>
             <ul class="dropdown-menu">
@@ -305,7 +305,7 @@ <h2>With Icons</h2>
 
         <div class="demo-box">
           <div class="dropdown">
-            <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn-solid theme-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Menu with Icons
             </button>
             <ul class="dropdown-menu">
@@ -356,7 +356,7 @@ <h2>Mobile Mode</h2>
 
         <div class="demo-box">
           <div class="dropdown">
-            <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn-solid theme-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Test on Mobile
             </button>
             <ul class="dropdown-menu">
@@ -392,7 +392,7 @@ <h2>With Disabled Items</h2>
 
         <div class="demo-box">
           <div class="dropdown">
-            <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn-solid theme-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Menu with Disabled
             </button>
             <ul class="dropdown-menu">