@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.3
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.
- package/components/Drawer/drawer.css +28 -14
- package/components/Drawer/drawer.scss +28 -9
- package/components/Tabs/tabs.css +65 -0
- package/components/Tabs/tabs.scss +77 -0
- package/components/_index.css +92 -14
- package/docs/components/Tabs/examples/Tabs.md +6741 -12
- package/docs/demos/Card/examples/Card.md +57 -0
- package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
- package/docs/demos/Drawer/examples/Drawer.md +38 -0
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
- package/docs/demos/Tabs/examples/Tabs.md +570 -0
- package/package.json +5 -5
- package/patternfly-no-globals.css +92 -14
- package/patternfly.css +92 -14
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -723,6 +723,25 @@ 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
|
+
)()"
|
|
726
745
|
role="tab"
|
|
727
746
|
id="status-tabs-object-1-link"
|
|
728
747
|
>
|
|
@@ -733,6 +752,25 @@ wrapperTag: div
|
|
|
733
752
|
<button
|
|
734
753
|
type="button"
|
|
735
754
|
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
|
+
)()"
|
|
736
774
|
role="tab"
|
|
737
775
|
id="status-tabs-object-2-link"
|
|
738
776
|
>
|
|
@@ -743,6 +781,25 @@ wrapperTag: div
|
|
|
743
781
|
<button
|
|
744
782
|
type="button"
|
|
745
783
|
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
|
+
)()"
|
|
746
803
|
role="tab"
|
|
747
804
|
id="status-tabs-object-3-link"
|
|
748
805
|
>
|
|
@@ -736,6 +736,25 @@ 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
|
+
)()"
|
|
739
758
|
role="tab"
|
|
740
759
|
id="description-list-in-drawer-example-panel-tabs-tab1-link"
|
|
741
760
|
>
|
|
@@ -746,6 +765,25 @@ cssPrefix: pf-d-description-list
|
|
|
746
765
|
<button
|
|
747
766
|
type="button"
|
|
748
767
|
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
|
+
)()"
|
|
749
787
|
role="tab"
|
|
750
788
|
id="description-list-in-drawer-example-panel-tabs-tab2-link"
|
|
751
789
|
>
|
|
@@ -369,6 +369,25 @@ 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
|
+
)()"
|
|
372
391
|
role="tab"
|
|
373
392
|
id="drawer-collapsed-example-panel-tabs-tab1-link"
|
|
374
393
|
>
|
|
@@ -379,6 +398,25 @@ wrapperTag: div
|
|
|
379
398
|
<button
|
|
380
399
|
type="button"
|
|
381
400
|
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
|
+
)()"
|
|
382
420
|
role="tab"
|
|
383
421
|
id="drawer-collapsed-example-panel-tabs-tab2-link"
|
|
384
422
|
>
|
|
@@ -1001,6 +1001,25 @@ 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
|
+
)()"
|
|
1004
1023
|
role="tab"
|
|
1005
1024
|
aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
|
|
1006
1025
|
id="primary-detail-expanded-example-drawer-tabs-tab1-link"
|
|
@@ -1012,6 +1031,25 @@ wrapperTag: div
|
|
|
1012
1031
|
<button
|
|
1013
1032
|
type="button"
|
|
1014
1033
|
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
|
+
)()"
|
|
1015
1053
|
role="tab"
|
|
1016
1054
|
aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
|
|
1017
1055
|
id="primary-detail-expanded-example-drawer-tabs-tab2-link"
|
|
@@ -6238,6 +6276,25 @@ wrapperTag: div
|
|
|
6238
6276
|
<button
|
|
6239
6277
|
type="button"
|
|
6240
6278
|
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
|
+
)()"
|
|
6241
6298
|
role="tab"
|
|
6242
6299
|
aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
|
|
6243
6300
|
id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
|
|
@@ -6249,6 +6306,25 @@ wrapperTag: div
|
|
|
6249
6306
|
<button
|
|
6250
6307
|
type="button"
|
|
6251
6308
|
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
|
+
)()"
|
|
6252
6328
|
role="tab"
|
|
6253
6329
|
aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
|
|
6254
6330
|
id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"
|