@patternfly/patternfly 4.216.3 → 4.217.0

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.
@@ -4720,83 +4720,97 @@ section: components
4720
4720
  class="pf-c-drawer__content"
4721
4721
  id="jump-links-drawer-drawer-scrollable-container"
4722
4722
  >
4723
- <div class="pf-c-drawer__body pf-m-padding">
4723
+ <div class="pf-c-drawer__body">
4724
4724
  <div class="pf-c-sidebar">
4725
4725
  <div class="pf-c-sidebar__main">
4726
4726
  <div class="pf-c-sidebar__panel pf-m-sticky pf-m-gutter">
4727
- <nav
4728
- class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
4729
- >
4730
- <div class="pf-c-jump-links__label">Jump to section</div>
4731
- <ul class="pf-c-jump-links__list">
4732
- <li class="pf-c-jump-links__item pf-m-current">
4733
- <a
4734
- class="pf-c-jump-links__link"
4735
- href="#jump-links-drawer-jump-links-first"
4736
- >
4737
- <span class="pf-c-jump-links__link-text">First section</span>
4738
- </a>
4739
- </li>
4740
- <li class="pf-c-jump-links__item">
4741
- <a
4742
- class="pf-c-jump-links__link"
4743
- href="#jump-links-drawer-jump-links-second"
4744
- >
4745
- <span
4746
- class="pf-c-jump-links__link-text"
4747
- >Second section</span>
4748
- </a>
4749
- </li>
4750
- <li class="pf-c-jump-links__item">
4751
- <a
4752
- class="pf-c-jump-links__link"
4753
- href="#jump-links-drawer-jump-links-third"
4754
- >
4755
- <span class="pf-c-jump-links__link-text">Third section</span>
4756
- </a>
4757
- </li>
4758
- <li class="pf-c-jump-links__item">
4759
- <a
4760
- class="pf-c-jump-links__link"
4761
- href="#jump-links-drawer-jump-links-fourth"
4762
- >
4763
- <span
4764
- class="pf-c-jump-links__link-text"
4765
- >Fourth section</span>
4766
- </a>
4767
- </li>
4768
- <li class="pf-c-jump-links__item">
4769
- <a
4770
- class="pf-c-jump-links__link"
4771
- href="#jump-links-drawer-jump-links-fifth"
4772
- >
4773
- <span class="pf-c-jump-links__link-text">Fifth section</span>
4774
- </a>
4775
- </li>
4776
- </ul>
4777
- </nav>
4727
+ <section class="pf-c-page__main-section pf-m-light">
4728
+ <nav
4729
+ class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
4730
+ >
4731
+ <div class="pf-c-jump-links__label">Jump to section</div>
4732
+ <ul class="pf-c-jump-links__list">
4733
+ <li class="pf-c-jump-links__item pf-m-current">
4734
+ <a
4735
+ class="pf-c-jump-links__link"
4736
+ href="#jump-links-drawer-jump-links-first"
4737
+ >
4738
+ <span
4739
+ class="pf-c-jump-links__link-text"
4740
+ >First section</span>
4741
+ </a>
4742
+ </li>
4743
+ <li class="pf-c-jump-links__item">
4744
+ <a
4745
+ class="pf-c-jump-links__link"
4746
+ href="#jump-links-drawer-jump-links-second"
4747
+ >
4748
+ <span
4749
+ class="pf-c-jump-links__link-text"
4750
+ >Second section</span>
4751
+ </a>
4752
+ </li>
4753
+ <li class="pf-c-jump-links__item">
4754
+ <a
4755
+ class="pf-c-jump-links__link"
4756
+ href="#jump-links-drawer-jump-links-third"
4757
+ >
4758
+ <span
4759
+ class="pf-c-jump-links__link-text"
4760
+ >Third section</span>
4761
+ </a>
4762
+ </li>
4763
+ <li class="pf-c-jump-links__item">
4764
+ <a
4765
+ class="pf-c-jump-links__link"
4766
+ href="#jump-links-drawer-jump-links-fourth"
4767
+ >
4768
+ <span
4769
+ class="pf-c-jump-links__link-text"
4770
+ >Fourth section</span>
4771
+ </a>
4772
+ </li>
4773
+ <li class="pf-c-jump-links__item">
4774
+ <a
4775
+ class="pf-c-jump-links__link"
4776
+ href="#jump-links-drawer-jump-links-fifth"
4777
+ >
4778
+ <span
4779
+ class="pf-c-jump-links__link-text"
4780
+ >Fifth section</span>
4781
+ </a>
4782
+ </li>
4783
+ </ul>
4784
+ </nav>
4785
+ </section>
4778
4786
  </div>
4779
4787
  <div class="pf-c-sidebar__content">
4780
- <div class="pf-c-content">
4781
- <p>
4782
- <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
4783
- </p>
4788
+ <section class="pf-c-page__main-section pf-m-light">
4789
+ <div class="pf-c-content">
4790
+ <p>
4791
+ <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
4792
+ </p>
4784
4793
 
4785
- <h2 id="jump-links-drawer-jump-links-first">First section</h2>
4786
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4794
+ <h2 id="jump-links-drawer-jump-links-first">First section</h2>
4795
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4787
4796
 
4788
- <h2 id="jump-links-drawer-jump-links-second">Second section</h2>
4789
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4797
+ <h2
4798
+ id="jump-links-drawer-jump-links-second"
4799
+ >Second section</h2>
4800
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4790
4801
 
4791
- <h2 id="jump-links-drawer-jump-links-third">Third section</h2>
4792
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4802
+ <h2 id="jump-links-drawer-jump-links-third">Third section</h2>
4803
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4793
4804
 
4794
- <h2 id="jump-links-drawer-jump-links-fourth">Fourth section</h2>
4795
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4805
+ <h2
4806
+ id="jump-links-drawer-jump-links-fourth"
4807
+ >Fourth section</h2>
4808
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4796
4809
 
4797
- <h2 id="jump-links-drawer-jump-links-fifth">Fifth section</h2>
4798
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4799
- </div>
4810
+ <h2 id="jump-links-drawer-jump-links-fifth">Fifth section</h2>
4811
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
4812
+ </div>
4813
+ </section>
4800
4814
  </div>
4801
4815
  </div>
4802
4816
  </div>
@@ -5659,93 +5673,103 @@ section: components
5659
5673
  class="pf-c-drawer__content"
5660
5674
  id="jump-links-drawer-expanded-drawer-scrollable-container"
5661
5675
  >
5662
- <div class="pf-c-drawer__body pf-m-padding">
5676
+ <div class="pf-c-drawer__body">
5663
5677
  <div class="pf-c-sidebar">
5664
5678
  <div class="pf-c-sidebar__main">
5665
5679
  <div class="pf-c-sidebar__panel pf-m-sticky pf-m-gutter">
5666
- <nav
5667
- class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
5668
- >
5669
- <div class="pf-c-jump-links__label">Jump to section</div>
5670
- <ul class="pf-c-jump-links__list">
5671
- <li class="pf-c-jump-links__item pf-m-current">
5672
- <a
5673
- class="pf-c-jump-links__link"
5674
- href="#jump-links-drawer-expanded-jump-links-first"
5675
- >
5676
- <span class="pf-c-jump-links__link-text">First section</span>
5677
- </a>
5678
- </li>
5679
- <li class="pf-c-jump-links__item">
5680
- <a
5681
- class="pf-c-jump-links__link"
5682
- href="#jump-links-drawer-expanded-jump-links-second"
5683
- >
5684
- <span
5685
- class="pf-c-jump-links__link-text"
5686
- >Second section</span>
5687
- </a>
5688
- </li>
5689
- <li class="pf-c-jump-links__item">
5690
- <a
5691
- class="pf-c-jump-links__link"
5692
- href="#jump-links-drawer-expanded-jump-links-third"
5693
- >
5694
- <span class="pf-c-jump-links__link-text">Third section</span>
5695
- </a>
5696
- </li>
5697
- <li class="pf-c-jump-links__item">
5698
- <a
5699
- class="pf-c-jump-links__link"
5700
- href="#jump-links-drawer-expanded-jump-links-fourth"
5701
- >
5702
- <span
5703
- class="pf-c-jump-links__link-text"
5704
- >Fourth section</span>
5705
- </a>
5706
- </li>
5707
- <li class="pf-c-jump-links__item">
5708
- <a
5709
- class="pf-c-jump-links__link"
5710
- href="#jump-links-drawer-expanded-jump-links-fifth"
5711
- >
5712
- <span class="pf-c-jump-links__link-text">Fifth section</span>
5713
- </a>
5714
- </li>
5715
- </ul>
5716
- </nav>
5680
+ <section class="pf-c-page__main-section pf-m-light">
5681
+ <nav
5682
+ class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
5683
+ >
5684
+ <div class="pf-c-jump-links__label">Jump to section</div>
5685
+ <ul class="pf-c-jump-links__list">
5686
+ <li class="pf-c-jump-links__item pf-m-current">
5687
+ <a
5688
+ class="pf-c-jump-links__link"
5689
+ href="#jump-links-drawer-expanded-jump-links-first"
5690
+ >
5691
+ <span
5692
+ class="pf-c-jump-links__link-text"
5693
+ >First section</span>
5694
+ </a>
5695
+ </li>
5696
+ <li class="pf-c-jump-links__item">
5697
+ <a
5698
+ class="pf-c-jump-links__link"
5699
+ href="#jump-links-drawer-expanded-jump-links-second"
5700
+ >
5701
+ <span
5702
+ class="pf-c-jump-links__link-text"
5703
+ >Second section</span>
5704
+ </a>
5705
+ </li>
5706
+ <li class="pf-c-jump-links__item">
5707
+ <a
5708
+ class="pf-c-jump-links__link"
5709
+ href="#jump-links-drawer-expanded-jump-links-third"
5710
+ >
5711
+ <span
5712
+ class="pf-c-jump-links__link-text"
5713
+ >Third section</span>
5714
+ </a>
5715
+ </li>
5716
+ <li class="pf-c-jump-links__item">
5717
+ <a
5718
+ class="pf-c-jump-links__link"
5719
+ href="#jump-links-drawer-expanded-jump-links-fourth"
5720
+ >
5721
+ <span
5722
+ class="pf-c-jump-links__link-text"
5723
+ >Fourth section</span>
5724
+ </a>
5725
+ </li>
5726
+ <li class="pf-c-jump-links__item">
5727
+ <a
5728
+ class="pf-c-jump-links__link"
5729
+ href="#jump-links-drawer-expanded-jump-links-fifth"
5730
+ >
5731
+ <span
5732
+ class="pf-c-jump-links__link-text"
5733
+ >Fifth section</span>
5734
+ </a>
5735
+ </li>
5736
+ </ul>
5737
+ </nav>
5738
+ </section>
5717
5739
  </div>
5718
5740
  <div class="pf-c-sidebar__content">
5719
- <div class="pf-c-content">
5720
- <p>
5721
- <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
5722
- </p>
5741
+ <section class="pf-c-page__main-section pf-m-light">
5742
+ <div class="pf-c-content">
5743
+ <p>
5744
+ <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
5745
+ </p>
5723
5746
 
5724
- <h2
5725
- id="jump-links-drawer-expanded-jump-links-first"
5726
- >First section</h2>
5727
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5747
+ <h2
5748
+ id="jump-links-drawer-expanded-jump-links-first"
5749
+ >First section</h2>
5750
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5728
5751
 
5729
- <h2
5730
- id="jump-links-drawer-expanded-jump-links-second"
5731
- >Second section</h2>
5732
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5752
+ <h2
5753
+ id="jump-links-drawer-expanded-jump-links-second"
5754
+ >Second section</h2>
5755
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5733
5756
 
5734
- <h2
5735
- id="jump-links-drawer-expanded-jump-links-third"
5736
- >Third section</h2>
5737
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5757
+ <h2
5758
+ id="jump-links-drawer-expanded-jump-links-third"
5759
+ >Third section</h2>
5760
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5738
5761
 
5739
- <h2
5740
- id="jump-links-drawer-expanded-jump-links-fourth"
5741
- >Fourth section</h2>
5742
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5762
+ <h2
5763
+ id="jump-links-drawer-expanded-jump-links-fourth"
5764
+ >Fourth section</h2>
5765
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5743
5766
 
5744
- <h2
5745
- id="jump-links-drawer-expanded-jump-links-fifth"
5746
- >Fifth section</h2>
5747
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5748
- </div>
5767
+ <h2
5768
+ id="jump-links-drawer-expanded-jump-links-fifth"
5769
+ >Fifth section</h2>
5770
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
5771
+ </div>
5772
+ </section>
5749
5773
  </div>
5750
5774
  </div>
5751
5775
  </div>
@@ -761,17 +761,18 @@ wrapperTag: div
761
761
  </li>
762
762
  </ul>
763
763
  </div>
764
- <div class="pf-c-search-input">
765
- <div class="pf-c-search-input__bar">
766
- <span class="pf-c-search-input__text">
767
- <span class="pf-c-search-input__icon">
768
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
764
+ <div class="pf-c-text-input-group">
765
+ <div class="pf-c-text-input-group__main pf-m-icon">
766
+ <span class="pf-c-text-input-group__text">
767
+ <span class="pf-c-text-input-group__icon">
768
+ <i class="fas fa-fw fa-search"></i>
769
769
  </span>
770
770
  <input
771
- class="pf-c-search-input__text-input"
771
+ class="pf-c-text-input-group__text-input"
772
772
  type="text"
773
+ value
773
774
  placeholder="Filter by name"
774
- aria-label="Filter by name"
775
+ aria-label="Type to filter"
775
776
  />
776
777
  </span>
777
778
  </div>
@@ -1093,17 +1094,18 @@ wrapperTag: div
1093
1094
  </li>
1094
1095
  </ul>
1095
1096
  </div>
1096
- <div class="pf-c-search-input">
1097
- <div class="pf-c-search-input__bar">
1098
- <span class="pf-c-search-input__text">
1099
- <span class="pf-c-search-input__icon">
1100
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1097
+ <div class="pf-c-text-input-group">
1098
+ <div class="pf-c-text-input-group__main pf-m-icon">
1099
+ <span class="pf-c-text-input-group__text">
1100
+ <span class="pf-c-text-input-group__icon">
1101
+ <i class="fas fa-fw fa-search"></i>
1101
1102
  </span>
1102
1103
  <input
1103
- class="pf-c-search-input__text-input"
1104
+ class="pf-c-text-input-group__text-input"
1104
1105
  type="text"
1106
+ value
1105
1107
  placeholder="Filter by name"
1106
- aria-label="Filter by name"
1108
+ aria-label="Type to filter"
1107
1109
  />
1108
1110
  </span>
1109
1111
  </div>
@@ -3696,17 +3698,18 @@ wrapperTag: div
3696
3698
  </li>
3697
3699
  </ul>
3698
3700
  </div>
3699
- <div class="pf-c-search-input">
3700
- <div class="pf-c-search-input__bar">
3701
- <span class="pf-c-search-input__text">
3702
- <span class="pf-c-search-input__icon">
3703
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3701
+ <div class="pf-c-text-input-group">
3702
+ <div class="pf-c-text-input-group__main pf-m-icon">
3703
+ <span class="pf-c-text-input-group__text">
3704
+ <span class="pf-c-text-input-group__icon">
3705
+ <i class="fas fa-fw fa-search"></i>
3704
3706
  </span>
3705
3707
  <input
3706
- class="pf-c-search-input__text-input"
3708
+ class="pf-c-text-input-group__text-input"
3707
3709
  type="text"
3710
+ value
3708
3711
  placeholder="Filter by name"
3709
- aria-label="Filter by name"
3712
+ aria-label="Type to filter"
3710
3713
  />
3711
3714
  </span>
3712
3715
  </div>
@@ -982,20 +982,18 @@ wrapperTag: div
982
982
  </li>
983
983
  </ul>
984
984
  </div>
985
- <div class="pf-c-search-input">
986
- <div class="pf-c-search-input__bar">
987
- <span class="pf-c-search-input__text">
988
- <span class="pf-c-search-input__icon">
989
- <i
990
- class="fas fa-search fa-fw"
991
- aria-hidden="true"
992
- ></i>
985
+ <div class="pf-c-text-input-group">
986
+ <div class="pf-c-text-input-group__main pf-m-icon">
987
+ <span class="pf-c-text-input-group__text">
988
+ <span class="pf-c-text-input-group__icon">
989
+ <i class="fas fa-fw fa-search"></i>
993
990
  </span>
994
991
  <input
995
- class="pf-c-search-input__text-input"
992
+ class="pf-c-text-input-group__text-input"
996
993
  type="text"
994
+ value
997
995
  placeholder="Filter by name"
998
- aria-label="Filter by name"
996
+ aria-label="Type to filter"
999
997
  />
1000
998
  </span>
1001
999
  </div>
@@ -2859,20 +2857,18 @@ wrapperTag: div
2859
2857
  </li>
2860
2858
  </ul>
2861
2859
  </div>
2862
- <div class="pf-c-search-input">
2863
- <div class="pf-c-search-input__bar">
2864
- <span class="pf-c-search-input__text">
2865
- <span class="pf-c-search-input__icon">
2866
- <i
2867
- class="fas fa-search fa-fw"
2868
- aria-hidden="true"
2869
- ></i>
2860
+ <div class="pf-c-text-input-group">
2861
+ <div class="pf-c-text-input-group__main pf-m-icon">
2862
+ <span class="pf-c-text-input-group__text">
2863
+ <span class="pf-c-text-input-group__icon">
2864
+ <i class="fas fa-fw fa-search"></i>
2870
2865
  </span>
2871
2866
  <input
2872
- class="pf-c-search-input__text-input"
2867
+ class="pf-c-text-input-group__text-input"
2873
2868
  type="text"
2869
+ value
2874
2870
  placeholder="Filter by name"
2875
- aria-label="Filter by name"
2871
+ aria-label="Type to filter"
2876
2872
  />
2877
2873
  </span>
2878
2874
  </div>
@@ -6413,17 +6409,18 @@ wrapperTag: div
6413
6409
  </li>
6414
6410
  </ul>
6415
6411
  </div>
6416
- <div class="pf-c-search-input">
6417
- <div class="pf-c-search-input__bar">
6418
- <span class="pf-c-search-input__text">
6419
- <span class="pf-c-search-input__icon">
6420
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
6412
+ <div class="pf-c-text-input-group">
6413
+ <div class="pf-c-text-input-group__main pf-m-icon">
6414
+ <span class="pf-c-text-input-group__text">
6415
+ <span class="pf-c-text-input-group__icon">
6416
+ <i class="fas fa-fw fa-search"></i>
6421
6417
  </span>
6422
6418
  <input
6423
- class="pf-c-search-input__text-input"
6419
+ class="pf-c-text-input-group__text-input"
6424
6420
  type="text"
6421
+ value
6425
6422
  placeholder="Filter by name"
6426
- aria-label="Filter by name"
6423
+ aria-label="Type to filter"
6427
6424
  />
6428
6425
  </span>
6429
6426
  </div>