npm - @patternfly/patternfly - Versions diffs - 6.0.0-alpha.173 → 6.0.0-alpha.175 - Mend

@patternfly/patternfly 6.0.0-alpha.173 → 6.0.0-alpha.175

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/components/Button/button.css +5 -1
package/components/Button/button.scss +5 -1
package/components/Card/card.css +2 -2
package/components/Card/card.scss +1 -1
package/components/ClipboardCopy/clipboard-copy.css +2 -2
package/components/ClipboardCopy/clipboard-copy.scss +2 -2
package/components/Content/content.css +19 -43
package/components/Content/content.scss +17 -60
package/components/JumpLinks/jump-links.css +0 -7
package/components/JumpLinks/jump-links.scss +0 -9
package/components/Label/label.css +2 -2
package/components/Label/label.scss +2 -2
package/components/List/list.css +33 -40
package/components/List/list.scss +39 -48
package/components/NumberInput/number-input.css +0 -1
package/components/NumberInput/number-input.scss +0 -1
package/components/Tabs/tabs.css +1 -18
package/components/Tabs/tabs.scss +1 -18
package/components/_index.css +64 -116
package/docs/components/AboutModalBox/examples/AboutModalBox.md +1 -1
package/docs/components/ActionList/examples/ActionList.md +7 -7
package/docs/components/Alert/examples/Alert.md +44 -46
package/docs/components/BackToTop/examples/BackToTop.md +3 -5
package/docs/components/Banner/examples/Banner.md +1 -1
package/docs/components/Button/examples/Button.md +35 -35
package/docs/components/CalendarMonth/examples/CalendarMonth.md +8 -8
package/docs/components/Card/examples/Card.md +36 -20
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +32 -29
package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
package/docs/components/CodeEditor/examples/CodeEditor.md +18 -21
package/docs/components/DataList/examples/DataList.md +17 -17
package/docs/components/DatePicker/examples/DatePicker.md +6 -6
package/docs/components/DescriptionList/examples/DescriptionList.md +100 -150
package/docs/components/Drawer/examples/Drawer.md +19 -19
package/docs/components/DualListSelector/examples/DualListSelector.md +84 -84
package/docs/components/EmptyState/examples/EmptyState.md +6 -6
package/docs/components/Form/examples/Form.md +18 -19
package/docs/components/Hint/examples/Hint.md +2 -2
package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
package/docs/components/InputGroup/examples/InputGroup.md +2 -2
package/docs/components/JumpLinks/examples/JumpLinks.md +8 -8
package/docs/components/Label/examples/Label.md +217 -217
package/docs/components/LogViewer/examples/LogViewer.md +77 -97
package/docs/components/Login/examples/Login.md +37 -32
package/docs/components/Masthead/examples/masthead.md +6 -6
package/docs/components/Menu/examples/Menu.md +10 -10
package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
package/docs/components/ModalBox/examples/ModalBox.md +17 -17
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
package/docs/components/Nav/examples/Navigation.md +4 -4
package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +2 -2
package/docs/components/NumberInput/examples/NumberInput.md +24 -24
package/docs/components/OverflowMenu/examples/overflow-menu.md +6 -6
package/docs/components/Page/examples/Page.md +7 -7
package/docs/components/Pagination/examples/Pagination.md +53 -44
package/docs/components/Popover/examples/Popover.md +30 -15
package/docs/components/Slider/examples/Slider.md +8 -8
package/docs/components/Table/examples/Table.md +433 -203
package/docs/components/Tabs/examples/Tabs.md +364 -358
package/docs/components/TextInputGroup/examples/TextInputGroup.md +364 -404
package/docs/components/Toolbar/examples/Toolbar.md +59 -59
package/docs/components/TreeView/examples/TreeView.md +4 -4
package/docs/components/Wizard/examples/Wizard.md +10 -10
package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
package/docs/demos/Alert/examples/Alert.md +6 -6
package/docs/demos/BackToTop/examples/BackToTop.md +4 -6
package/docs/demos/Banner/examples/Banner.md +2 -2
package/docs/demos/Button/examples/Button.md +1 -1
package/docs/demos/Card/examples/Card.md +54 -79
package/docs/demos/CardView/examples/CardView.md +8 -7
package/docs/demos/Dashboard/examples/Dashboard.md +25 -37
package/docs/demos/DataList/examples/DataList.md +38 -34
package/docs/demos/DescriptionList/examples/DescriptionList.md +4 -4
package/docs/demos/Drawer/examples/Drawer.md +8 -8
package/docs/demos/Form/examples/BasicForms.md +69 -86
package/docs/demos/JumpLinks/examples/JumpLinks.md +14 -20
package/docs/demos/Masthead/examples/Masthead.md +13 -13
package/docs/demos/Modal/examples/Modal.md +15 -15
package/docs/demos/Nav/examples/Nav.md +9 -9
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
package/docs/demos/Page/examples/Page.md +9 -9
package/docs/demos/Page/examples/Penta.md +2 -2
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
package/docs/demos/Table/examples/Table.md +132 -115
package/docs/demos/Tabs/examples/Tabs.md +11 -11
package/docs/demos/Toolbar/examples/Toolbar.md +37 -36
package/docs/demos/Wizard/examples/Wizard.md +22 -23
package/package.json +1 -1
package/patternfly-no-globals.css +64 -116
package/patternfly.css +64 -116
package/patternfly.min.css +1 -1
package/patternfly.min.css.map +1 -1

package/docs/demos/Form/examples/BasicForms.md CHANGED Viewed

@@ -58,7 +58,7 @@ subsection: forms
           aria-label="More information for phone number field"
           aria-describedby="-phone"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <i class="fas fa-question-circle" aria-hidden="true"></i>
           </span>
         </span></span>
@@ -258,7 +258,7 @@ subsection: forms
           aria-label="More information for contact field"
           aria-describedby="form-demo-horizontal-contact-legend"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <i class="fas fa-question-circle" aria-hidden="true"></i>
           </span>
         </span></span>
@@ -537,7 +537,7 @@ subsection: forms
             aria-label="More information for client id field"
             aria-describedby="form-demo-sections-repeatable-fields-clientid"
           >
-            <span class="pf-v6-c-button__text">
+            <span class="pf-v6-c-button__icon">
               <i class="fas fa-question-circle" aria-hidden="true"></i>
             </span>
           </span></span>
@@ -567,7 +567,7 @@ subsection: forms
             aria-label="More information for full name field"
             aria-describedby="form-demo-sections-repeatable-fields-name"
           >
-            <span class="pf-v6-c-button__text">
+            <span class="pf-v6-c-button__icon">
               <i class="fas fa-question-circle" aria-hidden="true"></i>
             </span>
           </span></span>
@@ -597,7 +597,7 @@ subsection: forms
             aria-label="More information for description field"
             aria-describedby="form-demo-sections-repeatable-fields-description"
           >
-            <span class="pf-v6-c-button__text">
+            <span class="pf-v6-c-button__icon">
               <i class="fas fa-question-circle" aria-hidden="true"></i>
             </span>
           </span></span>
@@ -638,7 +638,7 @@ subsection: forms
             aria-label="More information for root URL field"
             aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
           >
-            <span class="pf-v6-c-button__text">
+            <span class="pf-v6-c-button__icon">
               <i class="fas fa-question-circle" aria-hidden="true"></i>
             </span>
           </span></span>
@@ -668,7 +668,7 @@ subsection: forms
             aria-label="More information for valid redirect URIs field"
             aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
           >
-            <span class="pf-v6-c-button__text">
+            <span class="pf-v6-c-button__icon">
               <i class="fas fa-question-circle" aria-hidden="true"></i>
             </span>
           </span></span>
@@ -692,7 +692,7 @@ subsection: forms
               type="button"
               aria-label="Remove"
             >
-              <span class="pf-v6-c-button__text">
+              <span class="pf-v6-c-button__icon">
                 <i class="fas fa-minus-circle" aria-hidden="true"></i>
               </span>
             </button>
@@ -716,7 +716,7 @@ subsection: forms
               type="button"
               aria-label="Remove"
             >
-              <span class="pf-v6-c-button__text">
+              <span class="pf-v6-c-button__icon">
                 <i class="fas fa-minus-circle" aria-hidden="true"></i>
               </span>
             </button>
@@ -740,19 +740,17 @@ subsection: forms
               type="button"
               aria-label="Remove"
             >
-              <span class="pf-v6-c-button__text">
+              <span class="pf-v6-c-button__icon">
                 <i class="fas fa-minus-circle" aria-hidden="true"></i>
               </span>
             </button>
           </div>
         </div>
-        <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
-          <span class="pf-v6-c-button__text">
-            <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
-              <i class="fas fa-plus-circle" aria-hidden="true"></i>
-            </span>
-            Add valid redirect URI
+        <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+          <span class="pf-v6-c-button__icon pf-m-start">
+            <i class="fas fa-plus-circle" aria-hidden="true"></i>
           </span>
+          <span class="pf-v6-c-button__text">Add valid redirect URI</span>
         </button>
       </div>
     </div>
@@ -770,7 +768,7 @@ subsection: forms
             aria-label="More information for home URL field"
             aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
           >
-            <span class="pf-v6-c-button__text">
+            <span class="pf-v6-c-button__icon">
               <i class="fas fa-question-circle" aria-hidden="true"></i>
             </span>
           </span></span>
@@ -809,7 +807,7 @@ subsection: forms
           aria-label="More information for name field"
           aria-describedby="form-demo-sections-complex-form-name"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <i class="fas fa-question-circle" aria-hidden="true"></i>
           </span>
         </span></span>
@@ -840,7 +838,7 @@ subsection: forms
           aria-label="More information for labels field"
           aria-describedby="form-demo-sections-complex-form-labels"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <i class="fas fa-question-circle" aria-hidden="true"></i>
           </span>
         </span></span>
@@ -877,7 +875,7 @@ subsection: forms
                         aria-label="Remove"
                         aria-labelledby="-label-1-button -label-1-text"
                       >
-                        <span class="pf-v6-c-button__text">
+                        <span class="pf-v6-c-button__icon">
                           <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                         </span>
                       </button>
@@ -900,7 +898,7 @@ subsection: forms
                         aria-label="Remove"
                         aria-labelledby="-label-2-button -label-2-text"
                       >
-                        <span class="pf-v6-c-button__text">
+                        <span class="pf-v6-c-button__icon">
                           <i class="fas fa-times fa-fw" aria-hidden="true"></i>
                         </span>
                       </button>
@@ -939,13 +937,12 @@ subsection: forms
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
           class="pf-v6-c-button pf-m-plain"
+          id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-alerting-toggle&#x26;quot;
           type="button"
-          aria-expanded="false"
-          aria-label="Details"
-          id="form-demo-sections-complex-form-alerting-toggle"
           aria-labelledby="form-demo-sections-complex-form-alerting-title form-demo-sections-complex-form-alerting-toggle"
+          aria-label="Details"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>
@@ -977,13 +974,12 @@ subsection: forms
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
           class="pf-v6-c-button pf-m-plain"
+          id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-query-toggle&#x26;quot;
           type="button"
-          aria-expanded="false"
-          aria-label="Details"
-          id="form-demo-sections-complex-form-query-toggle"
           aria-labelledby="form-demo-sections-complex-form-query-title form-demo-sections-complex-form-query-toggle"
+          aria-label="Details"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>
@@ -1015,13 +1011,12 @@ subsection: forms
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
           class="pf-v6-c-button pf-m-plain"
+          id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-affinity-toggle&#x26;quot;
           type="button"
-          aria-expanded="false"
-          aria-label="Details"
-          id="form-demo-sections-complex-form-affinity-toggle"
           aria-labelledby="form-demo-sections-complex-form-affinity-title form-demo-sections-complex-form-affinity-toggle"
+          aria-label="Details"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>
@@ -1051,14 +1046,14 @@ subsection: forms
         <div class="pf-v6-c-form__field-group-toggle">
           <div class="pf-v6-c-form__field-group-toggle-button">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-expanded pf-m-plain"
+              id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-node-affinity-toggle&#x26;quot;
               type="button"
               aria-expanded="true"
-              aria-label="Details"
-              id="form-demo-sections-complex-form-node-affinity-toggle"
               aria-labelledby="form-demo-sections-complex-form-node-affinity-title form-demo-sections-complex-form-node-affinity-toggle"
+              aria-label="Details"
             >
-              <span class="pf-v6-c-button__text">
+              <span class="pf-v6-c-button__icon">
                 <span class="pf-v6-c-form__field-group-toggle-icon">
                   <i class="fas fa-angle-right" aria-hidden="true"></i>
                 </span>
@@ -1089,13 +1084,12 @@ subsection: forms
               <div class="pf-v6-c-form__field-group-toggle-button">
                 <button
                   class="pf-v6-c-button pf-m-plain"
+                  id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-node-affinity-required-toggle&#x26;quot;
                   type="button"
-                  aria-expanded="false"
-                  aria-label="Details"
-                  id="form-demo-sections-complex-form-node-affinity-required-toggle"
                   aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title form-demo-sections-complex-form-node-affinity-required-toggle"
+                  aria-label="Details"
                 >
-                  <span class="pf-v6-c-button__text">
+                  <span class="pf-v6-c-button__icon">
                     <span class="pf-v6-c-form__field-group-toggle-icon">
                       <i class="fas fa-angle-right" aria-hidden="true"></i>
                     </span>
@@ -1126,14 +1120,14 @@ subsection: forms
             <div class="pf-v6-c-form__field-group-toggle">
               <div class="pf-v6-c-form__field-group-toggle-button">
                 <button
-                  class="pf-v6-c-button pf-m-plain"
+                  class="pf-v6-c-button pf-m-expanded pf-m-plain"
+                  id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-node-affinity-required-2-toggle&#x26;quot;
                   type="button"
                   aria-expanded="true"
-                  aria-label="Details"
-                  id="form-demo-sections-complex-form-node-affinity-required-2-toggle"
                   aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title form-demo-sections-complex-form-node-affinity-required-2-toggle"
+                  aria-label="Details"
                 >
-                  <span class="pf-v6-c-button__text">
+                  <span class="pf-v6-c-button__icon">
                     <span class="pf-v6-c-form__field-group-toggle-icon">
                       <i class="fas fa-angle-right" aria-hidden="true"></i>
                     </span>
@@ -1189,24 +1183,20 @@ subsection: forms
                           type="button"
                           aria-label="Remove"
                         >
-                          <span class="pf-v6-c-button__text">
+                          <span class="pf-v6-c-button__icon">
                             <i class="fas fa-minus-circle" aria-hidden="true"></i>
                           </span>
                         </button>
                       </div>
                     </div>
                     <button
-                      class="pf-v6-c-button pf-m-link pf-m-inline"
+                      class="pf-v6-c-button pf-m-inline pf-m-link"
                       type="button"
                     >
-                      <span class="pf-v6-c-button__text">
-                        <span
-                          class="pf-v6-c-button__icon pf-m-start pf-m-start"
-                        >
-                          <i class="fas fa-plus-circle" aria-hidden="true"></i>
-                        </span>
-                        Add valid redirect URI
+                      <span class="pf-v6-c-button__icon pf-m-start">
+                        <i class="fas fa-plus-circle" aria-hidden="true"></i>
                       </span>
+                      <span class="pf-v6-c-button__text">Add valid redirect URI</span>
                     </button>
                   </div>
                 </div>
@@ -1225,13 +1215,12 @@ subsection: forms
           <div class="pf-v6-c-form__field-group-toggle-button">
             <button
               class="pf-v6-c-button pf-m-plain"
+              id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-pod-affinity-toggle&#x26;quot;
               type="button"
-              aria-expanded="false"
-              aria-label="Details"
-              id="form-demo-sections-complex-form-pod-affinity-toggle"
               aria-labelledby="form-demo-sections-complex-form-pod-affinity-title form-demo-sections-complex-form-pod-affinity-toggle"
+              aria-label="Details"
             >
-              <span class="pf-v6-c-button__text">
+              <span class="pf-v6-c-button__icon">
                 <span class="pf-v6-c-form__field-group-toggle-icon">
                   <i class="fas fa-angle-right" aria-hidden="true"></i>
                 </span>
@@ -1264,14 +1253,14 @@ subsection: forms
     <div class="pf-v6-c-form__field-group-toggle">
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-expanded pf-m-plain"
+          id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-routing-toggle&#x26;quot;
           type="button"
           aria-expanded="true"
-          aria-label="Details"
-          id="form-demo-sections-complex-form-routing-toggle"
           aria-labelledby="form-demo-sections-complex-form-routing-title form-demo-sections-complex-form-routing-toggle"
+          aria-label="Details"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>
@@ -1450,14 +1439,14 @@ subsection: forms
     <div class="pf-v6-c-form__field-group-toggle">
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-expanded pf-m-plain"
+          id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-health-checks-toggle&#x26;quot;
           type="button"
           aria-expanded="true"
-          aria-label="Details"
-          id="form-demo-sections-complex-form-health-checks-toggle"
           aria-labelledby="form-demo-sections-complex-form-health-checks-title form-demo-sections-complex-form-health-checks-toggle"
+          aria-label="Details"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>
@@ -1498,15 +1487,13 @@ subsection: forms
           <div class="pf-v6-c-form__group">
             <div class="pf-v6-c-form__group-control">
               <button
-                class="pf-v6-c-button pf-m-link pf-m-inline"
+                class="pf-v6-c-button pf-m-inline pf-m-link"
                 type="button"
               >
-                <span class="pf-v6-c-button__text">
-                  <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
-                    <i class="fas fa-plus-circle" aria-hidden="true"></i>
-                  </span>
-                  Add liveness probe
+                <span class="pf-v6-c-button__icon pf-m-start">
+                  <i class="fas fa-plus-circle" aria-hidden="true"></i>
                 </span>
+                <span class="pf-v6-c-button__text">Add liveness probe</span>
               </button>
             </div>
           </div>
@@ -1534,15 +1521,13 @@ subsection: forms
           <div class="pf-v6-c-form__group">
             <div class="pf-v6-c-form__group-control">
               <button
-                class="pf-v6-c-button pf-m-link pf-m-inline"
+                class="pf-v6-c-button pf-m-inline pf-m-link"
                 type="button"
               >
-                <span class="pf-v6-c-button__text">
-                  <span class="pf-v6-c-button__icon pf-m-start pf-m-start">
-                    <i class="fas fa-plus-circle" aria-hidden="true"></i>
-                  </span>
-                  Add startup probe
+                <span class="pf-v6-c-button__icon pf-m-start">
+                  <i class="fas fa-plus-circle" aria-hidden="true"></i>
                 </span>
+                <span class="pf-v6-c-button__text">Add startup probe</span>
               </button>
             </div>
           </div>
@@ -1560,13 +1545,12 @@ subsection: forms
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
           class="pf-v6-c-button pf-m-plain"
+          id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-build-configuration-toggle&#x26;quot;
           type="button"
-          aria-expanded="false"
-          aria-label="Details"
-          id="form-demo-sections-complex-form-build-configuration-toggle"
           aria-labelledby="form-demo-sections-complex-form-build-configuration-title form-demo-sections-complex-form-build-configuration-toggle"
+          aria-label="Details"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>
@@ -1600,13 +1584,12 @@ subsection: forms
       <div class="pf-v6-c-form__field-group-toggle-button">
         <button
           class="pf-v6-c-button pf-m-plain"
+          id&#x26;#x3D;&#x26;quot;form-demo-sections-complex-form-deployment-toggle&#x26;quot;
           type="button"
-          aria-expanded="false"
-          aria-label="Details"
-          id="form-demo-sections-complex-form-deployment-toggle"
           aria-labelledby="form-demo-sections-complex-form-deployment-title form-demo-sections-complex-form-deployment-toggle"
+          aria-label="Details"
         >
-          <span class="pf-v6-c-button__text">
+          <span class="pf-v6-c-button__icon">
             <span class="pf-v6-c-form__field-group-toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
             </span>

package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED Viewed

@@ -25,7 +25,7 @@ section: components
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -311,17 +311,15 @@ section: components
                             aria-label="Toggle jump links"
                             aria-expanded="false"
                           >
-                            <span class="pf-v6-c-button__text">
+                            <span class="pf-v6-c-button__icon pf-m-start">
                               <span class="pf-v6-c-jump-links__toggle-icon">
                                 <i
                                   class="fas fa-angle-right"
                                   aria-hidden="true"
                                 ></i>
                               </span>
-                              <span
-                                class="pf-v6-c-jump-links__toggle-text"
-                              >Jump to section</span>
                             </span>
+                            <span class="pf-v6-c-button__text">Jump to section</span>
                           </button>
                         </div>
                         <div class="pf-v6-c-jump-links__label">Jump to section</div>
@@ -470,7 +468,7 @@ section: components
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -756,17 +754,15 @@ section: components
                             aria-label="Toggle jump links"
                             aria-expanded="false"
                           >
-                            <span class="pf-v6-c-button__text">
+                            <span class="pf-v6-c-button__icon pf-m-start">
                               <span class="pf-v6-c-jump-links__toggle-icon">
                                 <i
                                   class="fas fa-angle-right"
                                   aria-hidden="true"
                                 ></i>
                               </span>
-                              <span
-                                class="pf-v6-c-jump-links__toggle-text"
-                              >Jump to section</span>
                             </span>
+                            <span class="pf-v6-c-button__text">Jump to section</span>
                           </button>
                         </div>
                         <div class="pf-v6-c-jump-links__label">Jump to section</div>
@@ -915,7 +911,7 @@ section: components
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -1201,17 +1197,15 @@ section: components
                             aria-label="Toggle jump links"
                             aria-expanded="false"
                           >
-                            <span class="pf-v6-c-button__text">
+                            <span class="pf-v6-c-button__icon pf-m-start">
                               <span class="pf-v6-c-jump-links__toggle-icon">
                                 <i
                                   class="fas fa-angle-right"
                                   aria-hidden="true"
                                 ></i>
                               </span>
-                              <span
-                                class="pf-v6-c-jump-links__toggle-text"
-                              >Jump to section</span>
                             </span>
+                            <span class="pf-v6-c-button__text">Jump to section</span>
                           </button>
                         </div>
                         <div class="pf-v6-c-jump-links__label">Jump to section</div>
@@ -1357,7 +1351,7 @@ section: components
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -1742,7 +1736,7 @@ section: components
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -2108,7 +2102,7 @@ section: components
                     type="button"
                     aria-label="Close drawer panel"
                   >
-                    <span class="pf-v6-c-button__text">
+                    <span class="pf-v6-c-button__icon">
                       <i class="fas fa-times" aria-hidden="true"></i>
                     </span>
                   </button>
@@ -2147,7 +2141,7 @@ section: components
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -2513,7 +2507,7 @@ section: components
                     type="button"
                     aria-label="Close drawer panel"
                   >
-                    <span class="pf-v6-c-button__text">
+                    <span class="pf-v6-c-button__icon">
                       <i class="fas fa-times" aria-hidden="true"></i>
                     </span>
                   </button>

package/docs/demos/Masthead/examples/Masthead.md CHANGED Viewed

@@ -23,7 +23,7 @@ wrapperTag: div
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -283,7 +283,7 @@ wrapperTag: div
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -571,7 +571,7 @@ wrapperTag: div
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -895,7 +895,7 @@ wrapperTag: div
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -1219,7 +1219,7 @@ wrapperTag: div
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -1314,8 +1314,8 @@ wrapperTag: div
                       type="button"
                       aria-label="Open search"
                     >
-                      <span class="pf-v6-c-button__text">
-                        <i class="fas fa-fw fa-search" aria-hidden="true"></i>
+                      <span class="pf-v6-c-button__icon">
+                        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
                       </span>
                     </button>
                   </div>
@@ -1482,7 +1482,7 @@ wrapperTag: div
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -1595,7 +1595,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Close"
                     >
-                      <span class="pf-v6-c-button__text">
+                      <span class="pf-v6-c-button__icon">
                         <i class="fas fa-times" aria-hidden="true"></i>
                       </span>
                     </button>
@@ -1763,7 +1763,7 @@ wrapperTag: div
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>
@@ -2212,7 +2212,7 @@ wrapperTag: div
                     type="button"
                     aria-label="Scroll start"
                   >
-                    <span class="pf-v6-c-button__text">
+                    <span class="pf-v6-c-button__icon">
                       <i class="fas fa-angle-left" aria-hidden="true"></i>
                     </span>
                   </button>
@@ -2254,7 +2254,7 @@ wrapperTag: div
                     type="button"
                     aria-label="Scroll end"
                   >
-                    <span class="pf-v6-c-button__text">
+                    <span class="pf-v6-c-button__icon">
                       <i class="fas fa-angle-right" aria-hidden="true"></i>
                     </span>
                   </button>
@@ -2441,7 +2441,7 @@ wrapperTag: div
         type="button"
         aria-label="Global navigation"
       >
-        <span class="pf-v6-c-button__text">
+        <span class="pf-v6-c-button__icon">
           <i class="fas fa-bars" aria-hidden="true"></i>
         </span>
       </button>