btn-primary => btn-strong and btn-secondary and btn-outline-secondary…

… => btn-default

js/tests/unit/modal.spec.js

@@ -995,7 +995,7 @@ describe('Modal', () => {
     it('should open modal, having special characters in its id', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
-          '<button class="btn btn-default" data-bs-toggle="modal" data-bs-target="#j_id22:exampleModal">',
+          '<button class="btn btn-strong" data-bs-toggle="modal" data-bs-target="#j_id22:exampleModal">',
           '   Launch demo modal',
           '</button>',
           '<div class="modal fade" id="j_id22:exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">',

js/tests/visual/alert.html

@@ -22,7 +22,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
         </p>
         <p>
           <button type="button" class="btn btn-negative">Danger</button>
-          <button type="button" class="btn btn-strong">Secondary</button>
+          <button type="button" class="btn btn-default">Secondary</button>
         </p>
       </div>
 
@@ -33,7 +33,7 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
         </p>
         <p>
           <button type="button" class="btn btn-negative">Take this action</button>
-          <button type="button" class="btn btn-default">Or do this</button>
+          <button type="button" class="btn btn-strong">Or do this</button>
         </p>
       </div>
 

js/tests/visual/button.html

@@ -10,35 +10,35 @@
     <div class="container-fluid">
       <h1>Button <small>Bootstrap Visual Test</small></h1>
 
-      <button type="button" class="btn btn-default" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
+      <button type="button" class="btn btn-strong" 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-default active">
+        <label class="btn btn-strong active">
           <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
         </label>
-        <label class="btn btn-default">
+        <label class="btn btn-strong">
           <input type="checkbox" autocomplete="off"> Checkbox 2
         </label>
-        <label class="btn btn-default">
+        <label class="btn btn-strong">
           <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-default active">
+        <label class="btn btn-strong active">
           <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
         </label>
-        <label class="btn btn-default">
+        <label class="btn btn-strong">
           <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
         </label>
-        <label class="btn btn-default">
+        <label class="btn btn-strong">
           <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
         </label>
       </div>

js/tests/visual/dropdown.html

@@ -62,14 +62,14 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       <div class="row">
         <div class="col-sm-12 mt-tallest">
           <div class="dropdown">
-            <button type="button" class="btn btn-strong" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
+            <button type="button" class="btn btn-default" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
             <div class="dropdown-menu">
               <input id="textField" type="text">
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-strong">Dropup split</button>
-            <button type="button" class="btn btn-strong dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-default">Dropup split</button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Dropup split</span>
             </button>
             <ul class="dropdown-menu">
@@ -82,7 +82,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-strong dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
               <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -91,7 +91,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
 
           <div class="btn-group">
-            <button type="button" class="btn btn-strong dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               This dropdown's menu is end-aligned
             </button>
             <div class="dropdown-menu dropdown-menu-end">
@@ -104,8 +104,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropup">
-            <a href="#" class="btn btn-strong">Dropup split align end</a>
-            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-strong dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-default">Dropup split align end</a>
+            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu dropdown-menu-end">
@@ -115,7 +115,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-strong dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align end</button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align end</button>
             <div class="dropdown-menu dropdown-menu-end">
               <button class="dropdown-item" type="button">Action</button>
               <button class="dropdown-item" type="button">Another action</button>
@@ -126,8 +126,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropend">
-            <a href="#" class="btn btn-strong">Dropend split</a>
-            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-strong dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-default">Dropend split</a>
+            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -137,7 +137,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropend">
-            <button class="btn btn-strong dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropend
             </button>
             <div class="dropdown-menu">
@@ -148,8 +148,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
           <!-- dropstart -->
           <div class="btn-group dropstart">
-            <a href="#" class="btn btn-strong">Dropstart split</a>
-            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-strong dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-default">Dropstart split</a>
+            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -159,7 +159,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropstart">
-            <button class="btn btn-strong dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <button class="btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropstart
             </button>
             <div class="dropdown-menu">
@@ -174,8 +174,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       <div class="row">
         <div class="col-sm-3 mt-tallest">
           <div class="btn-group dropdown">
-            <button type="button" class="btn btn-strong">Dropdown reference</button>
-            <button type="button" class="btn btn-strong dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+            <button type="button" class="btn btn-default">Dropdown reference</button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
               <span class="visually-hidden">Dropdown split</span>
             </button>
             <ul class="dropdown-menu">
@@ -187,7 +187,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
         </div>
         <div class="col-sm-3 mt-tallest">
           <div class="dropdown">
-            <button class="btn btn-strong dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
+            <button class="btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
               Dropdown menu without Popper
             </button>
             <ul class="dropdown-menu">

js/tests/visual/modal.html

@@ -50,7 +50,7 @@ <h4>Text in a modal</h4>
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
 
               <h4>Popover in a modal</h4>
-              <p>This <button type="button" class="btn btn-default" 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 btn-strong" 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 modal</h4>
@@ -117,7 +117,7 @@ <h4>Overflowing text to show scroll behavior</h4>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
-              <button type="button" class="btn btn-default">Save changes</button>
+              <button type="button" class="btn btn-strong">Save changes</button>
             </div>
           </div>
         </div>
@@ -141,7 +141,7 @@ <h1 class="modal-title h4" id="firefoxModalLabel">Firefox Bug Test</h1>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
-              <button type="button" class="btn btn-default">Save changes</button>
+              <button type="button" class="btn btn-strong">Save changes</button>
             </div>
           </div>
         </div>
@@ -159,30 +159,30 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
-              <button type="button" class="btn btn-default">Save changes</button>
+              <button type="button" class="btn btn-strong">Save changes</button>
             </div>
           </div>
         </div>
       </div>
 
-      <button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#myModal">
+      <button type="button" class="btn btn-strong" data-bs-toggle="modal" data-bs-target="#myModal">
         Launch demo modal
       </button>
 
-      <button type="button" class="btn btn-default" id="tall-toggle">
+      <button type="button" class="btn btn-strong" id="tall-toggle">
         Toggle tall &lt;body&gt; content
       </button>
 
       <br><br>
 
-      <button type="button" class="btn btn-strong" data-bs-toggle="modal" data-bs-target="#firefoxModal">
+      <button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#firefoxModal">
         Launch Firefox bug test modal
       </button>
       (<a href="https://github.com/twbs/bootstrap/issues/18365">See Issue #18365</a>)
 
       <br><br>
 
-      <button type="button" class="btn btn-strong" data-bs-toggle="modal" data-bs-target="#slowModal">
+      <button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#slowModal">
         Launch modal with slow transition
       </button>
 
@@ -192,13 +192,13 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
         Tall body content to force the page to have a scrollbar.
       </div>
 
-      <button type="button" class="btn btn-strong" data-bs-toggle="modal" data-bs-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;btn-close&#x22; data-bs-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h1 class=&#x22;modal-title h4&#x22;&#x3E;The Bad Modal&#x3C;/h1&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-bs-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
+      <button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;btn-close&#x22; data-bs-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h1 class=&#x22;modal-title h4&#x22;&#x3E;The Bad Modal&#x3C;/h1&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-bs-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
         Modal with an XSS inside the data-bs-target
       </button>
 
       <br><br>
 
-      <button type="button" class="btn btn-strong" id="btnPreventModal">
+      <button type="button" class="btn btn-default" id="btnPreventModal">
         Launch prevented modal on hide (to see the result open your console)
       </button>
     </div>

js/tests/visual/popover.html

@@ -10,23 +10,23 @@
     <div class="container-fluid">
       <h1>Popover <small>Bootstrap Visual Test</small></h1>
 
-      <button type="button" class="btn btn-strong" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-default" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on auto
       </button>
 
-      <button type="button" class="btn btn-strong" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Default placement was on top but not enough place">
+      <button type="button" class="btn btn-default" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Default placement was on top but not enough place">
         Popover on top
       </button>
 
-      <button type="button" class="btn btn-strong" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-default" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on end
       </button>
 
-      <button type="button" class="btn btn-strong" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-default" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on bottom
       </button>
 
-      <button type="button" class="btn btn-strong" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-default" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
         Popover on start
       </button>
     </div>

js/tests/visual/toast.html

@@ -19,8 +19,8 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
       <div class="row mt-tall">
         <div class="col-md-12">
-          <button id="btnShowToast" class="btn btn-default">Show toast</button>
-          <button id="btnHideToast" class="btn btn-default">Hide toast</button>
+          <button id="btnShowToast" class="btn btn-strong">Show toast</button>
+          <button id="btnHideToast" class="btn btn-strong">Hide toast</button>
         </div>
       </div>
     </div>