@patternfly/patternfly 6.3.0-prerelease.17 → 6.3.0-prerelease.19

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 (19) hide show
  1. package/components/ProgressStepper/progress-stepper.scss +1 -0
  2. package/components/Spinner/spinner.css +5 -0
  3. package/components/Spinner/spinner.scss +6 -0
  4. package/components/Tabs/tabs.css +25 -15
  5. package/components/Tabs/tabs.scss +26 -13
  6. package/components/_index.css +30 -15
  7. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  8. package/docs/components/Spinner/examples/Spinner.md +10 -0
  9. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  10. package/docs/demos/Card/examples/Card.md +0 -57
  11. package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -38
  12. package/docs/demos/Drawer/examples/Drawer.md +0 -38
  13. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -76
  14. package/docs/demos/Tabs/examples/Tabs.md +0 -570
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +30 -15
  17. package/patternfly.css +30 -15
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/docs/demos/Card/examples/Card.md CHANGED
@@ -723,25 +723,6 @@ wrapperTag: div
723
723
  <button
724
724
  type="button"
725
725
  class="pf-v6-c-tabs__link"
726
- onclick="
727
- event.preventDefault();
728
- ((e) => {
729
- const el = this,
730
- li = this.closest('li'),
731
- ul = this.closest('ul'),
732
- tabs = this.closest('.pf-v6-c-tabs'),
733
- left = Math.round(li.offsetLeft),
734
- top = Math.round(li.offsetTop),
735
- width = Math.round(li.offsetWidth),
736
- height = Math.round(li.offsetHeight);
737
-
738
- ul.querySelectorAll('li').forEach(function(el) {
739
- el.classList.remove('pf-m-current')});
740
- li.classList.add('pf-m-current');
741
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
742
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
743
- }
744
- )()"
745
726
  role="tab"
746
727
  id="status-tabs-object-1-link"
747
728
  >
@@ -752,25 +733,6 @@ wrapperTag: div
752
733
  <button
753
734
  type="button"
754
735
  class="pf-v6-c-tabs__link"
755
- onclick="
756
- event.preventDefault();
757
- ((e) => {
758
- const el = this,
759
- li = this.closest('li'),
760
- ul = this.closest('ul'),
761
- tabs = this.closest('.pf-v6-c-tabs'),
762
- left = Math.round(li.offsetLeft),
763
- top = Math.round(li.offsetTop),
764
- width = Math.round(li.offsetWidth),
765
- height = Math.round(li.offsetHeight);
766
-
767
- ul.querySelectorAll('li').forEach(function(el) {
768
- el.classList.remove('pf-m-current')});
769
- li.classList.add('pf-m-current');
770
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
771
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
772
- }
773
- )()"
774
736
  role="tab"
775
737
  id="status-tabs-object-2-link"
776
738
  >
@@ -781,25 +743,6 @@ wrapperTag: div
781
743
  <button
782
744
  type="button"
783
745
  class="pf-v6-c-tabs__link"
784
- onclick="
785
- event.preventDefault();
786
- ((e) => {
787
- const el = this,
788
- li = this.closest('li'),
789
- ul = this.closest('ul'),
790
- tabs = this.closest('.pf-v6-c-tabs'),
791
- left = Math.round(li.offsetLeft),
792
- top = Math.round(li.offsetTop),
793
- width = Math.round(li.offsetWidth),
794
- height = Math.round(li.offsetHeight);
795
-
796
- ul.querySelectorAll('li').forEach(function(el) {
797
- el.classList.remove('pf-m-current')});
798
- li.classList.add('pf-m-current');
799
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
800
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
801
- }
802
- )()"
803
746
  role="tab"
804
747
  id="status-tabs-object-3-link"
805
748
  >
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -736,25 +736,6 @@ cssPrefix: pf-d-description-list
736
736
  <button
737
737
  type="button"
738
738
  class="pf-v6-c-tabs__link"
739
- onclick="
740
- event.preventDefault();
741
- ((e) => {
742
- const el = this,
743
- li = this.closest('li'),
744
- ul = this.closest('ul'),
745
- tabs = this.closest('.pf-v6-c-tabs'),
746
- left = Math.round(li.offsetLeft),
747
- top = Math.round(li.offsetTop),
748
- width = Math.round(li.offsetWidth),
749
- height = Math.round(li.offsetHeight);
750
-
751
- ul.querySelectorAll('li').forEach(function(el) {
752
- el.classList.remove('pf-m-current')});
753
- li.classList.add('pf-m-current');
754
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
755
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
756
- }
757
- )()"
758
739
  role="tab"
759
740
  id="description-list-in-drawer-example-panel-tabs-tab1-link"
760
741
  >
@@ -765,25 +746,6 @@ cssPrefix: pf-d-description-list
765
746
  <button
766
747
  type="button"
767
748
  class="pf-v6-c-tabs__link"
768
- onclick="
769
- event.preventDefault();
770
- ((e) => {
771
- const el = this,
772
- li = this.closest('li'),
773
- ul = this.closest('ul'),
774
- tabs = this.closest('.pf-v6-c-tabs'),
775
- left = Math.round(li.offsetLeft),
776
- top = Math.round(li.offsetTop),
777
- width = Math.round(li.offsetWidth),
778
- height = Math.round(li.offsetHeight);
779
-
780
- ul.querySelectorAll('li').forEach(function(el) {
781
- el.classList.remove('pf-m-current')});
782
- li.classList.add('pf-m-current');
783
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
784
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
785
- }
786
- )()"
787
749
  role="tab"
788
750
  id="description-list-in-drawer-example-panel-tabs-tab2-link"
789
751
  >
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -369,25 +369,6 @@ wrapperTag: div
369
369
  <button
370
370
  type="button"
371
371
  class="pf-v6-c-tabs__link"
372
- onclick="
373
- event.preventDefault();
374
- ((e) => {
375
- const el = this,
376
- li = this.closest('li'),
377
- ul = this.closest('ul'),
378
- tabs = this.closest('.pf-v6-c-tabs'),
379
- left = Math.round(li.offsetLeft),
380
- top = Math.round(li.offsetTop),
381
- width = Math.round(li.offsetWidth),
382
- height = Math.round(li.offsetHeight);
383
-
384
- ul.querySelectorAll('li').forEach(function(el) {
385
- el.classList.remove('pf-m-current')});
386
- li.classList.add('pf-m-current');
387
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
388
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
389
- }
390
- )()"
391
372
  role="tab"
392
373
  id="drawer-collapsed-example-panel-tabs-tab1-link"
393
374
  >
@@ -398,25 +379,6 @@ wrapperTag: div
398
379
  <button
399
380
  type="button"
400
381
  class="pf-v6-c-tabs__link"
401
- onclick="
402
- event.preventDefault();
403
- ((e) => {
404
- const el = this,
405
- li = this.closest('li'),
406
- ul = this.closest('ul'),
407
- tabs = this.closest('.pf-v6-c-tabs'),
408
- left = Math.round(li.offsetLeft),
409
- top = Math.round(li.offsetTop),
410
- width = Math.round(li.offsetWidth),
411
- height = Math.round(li.offsetHeight);
412
-
413
- ul.querySelectorAll('li').forEach(function(el) {
414
- el.classList.remove('pf-m-current')});
415
- li.classList.add('pf-m-current');
416
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
417
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
418
- }
419
- )()"
420
382
  role="tab"
421
383
  id="drawer-collapsed-example-panel-tabs-tab2-link"
422
384
  >
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -1001,25 +1001,6 @@ wrapperTag: div
1001
1001
  <button
1002
1002
  type="button"
1003
1003
  class="pf-v6-c-tabs__link"
1004
- onclick="
1005
- event.preventDefault();
1006
- ((e) => {
1007
- const el = this,
1008
- li = this.closest('li'),
1009
- ul = this.closest('ul'),
1010
- tabs = this.closest('.pf-v6-c-tabs'),
1011
- left = Math.round(li.offsetLeft),
1012
- top = Math.round(li.offsetTop),
1013
- width = Math.round(li.offsetWidth),
1014
- height = Math.round(li.offsetHeight);
1015
-
1016
- ul.querySelectorAll('li').forEach(function(el) {
1017
- el.classList.remove('pf-m-current')});
1018
- li.classList.add('pf-m-current');
1019
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1020
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1021
- }
1022
- )()"
1023
1004
  role="tab"
1024
1005
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
1025
1006
  id="primary-detail-expanded-example-drawer-tabs-tab1-link"
@@ -1031,25 +1012,6 @@ wrapperTag: div
1031
1012
  <button
1032
1013
  type="button"
1033
1014
  class="pf-v6-c-tabs__link"
1034
- onclick="
1035
- event.preventDefault();
1036
- ((e) => {
1037
- const el = this,
1038
- li = this.closest('li'),
1039
- ul = this.closest('ul'),
1040
- tabs = this.closest('.pf-v6-c-tabs'),
1041
- left = Math.round(li.offsetLeft),
1042
- top = Math.round(li.offsetTop),
1043
- width = Math.round(li.offsetWidth),
1044
- height = Math.round(li.offsetHeight);
1045
-
1046
- ul.querySelectorAll('li').forEach(function(el) {
1047
- el.classList.remove('pf-m-current')});
1048
- li.classList.add('pf-m-current');
1049
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1050
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1051
- }
1052
- )()"
1053
1015
  role="tab"
1054
1016
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
1055
1017
  id="primary-detail-expanded-example-drawer-tabs-tab2-link"
@@ -6276,25 +6238,6 @@ wrapperTag: div
6276
6238
  <button
6277
6239
  type="button"
6278
6240
  class="pf-v6-c-tabs__link"
6279
- onclick="
6280
- event.preventDefault();
6281
- ((e) => {
6282
- const el = this,
6283
- li = this.closest('li'),
6284
- ul = this.closest('ul'),
6285
- tabs = this.closest('.pf-v6-c-tabs'),
6286
- left = Math.round(li.offsetLeft),
6287
- top = Math.round(li.offsetTop),
6288
- width = Math.round(li.offsetWidth),
6289
- height = Math.round(li.offsetHeight);
6290
-
6291
- ul.querySelectorAll('li').forEach(function(el) {
6292
- el.classList.remove('pf-m-current')});
6293
- li.classList.add('pf-m-current');
6294
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
6295
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
6296
- }
6297
- )()"
6298
6241
  role="tab"
6299
6242
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
6300
6243
  id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
@@ -6306,25 +6249,6 @@ wrapperTag: div
6306
6249
  <button
6307
6250
  type="button"
6308
6251
  class="pf-v6-c-tabs__link"
6309
- onclick="
6310
- event.preventDefault();
6311
- ((e) => {
6312
- const el = this,
6313
- li = this.closest('li'),
6314
- ul = this.closest('ul'),
6315
- tabs = this.closest('.pf-v6-c-tabs'),
6316
- left = Math.round(li.offsetLeft),
6317
- top = Math.round(li.offsetTop),
6318
- width = Math.round(li.offsetWidth),
6319
- height = Math.round(li.offsetHeight);
6320
-
6321
- ul.querySelectorAll('li').forEach(function(el) {
6322
- el.classList.remove('pf-m-current')});
6323
- li.classList.add('pf-m-current');
6324
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
6325
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
6326
- }
6327
- )()"
6328
6252
  role="tab"
6329
6253
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
6330
6254
  id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"