@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.2

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 (14) hide show
  1. package/components/Tabs/tabs.css +65 -0
  2. package/components/Tabs/tabs.scss +77 -0
  3. package/components/_index.css +64 -0
  4. package/docs/components/Tabs/examples/Tabs.md +6741 -12
  5. package/docs/demos/Card/examples/Card.md +57 -0
  6. package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
  7. package/docs/demos/Drawer/examples/Drawer.md +38 -0
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
  9. package/docs/demos/Tabs/examples/Tabs.md +570 -0
  10. package/package.json +5 -5
  11. package/patternfly-no-globals.css +64 -0
  12. package/patternfly.css +64 -0
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.3.0-prerelease.1",
4
+ "version": "6.3.0-prerelease.2",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,11 +47,11 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.8.0",
50
+ "@patternfly/documentation-framework": "6.8.3",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
- "@patternfly/react-code-editor": "6.1.0",
53
- "@patternfly/react-core": "6.1.0",
54
- "@patternfly/react-table": "6.1.0",
52
+ "@patternfly/react-code-editor": "6.2.0",
53
+ "@patternfly/react-core": "6.2.0",
54
+ "@patternfly/react-table": "6.2.0",
55
55
  "@starptech/prettyhtml": "^0.10.0",
56
56
  "backstopjs": "^6.3.23",
57
57
  "cheerio": "^1.0.0-rc.12",
package/patternfly-no-globals.css CHANGED
@@ -25779,6 +25779,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25779
25779
  }
25780
25780
  }
25781
25781
 
25782
+ @property --pf-v6-c-tabs--link-accent--length {
25783
+ syntax: "<length>";
25784
+ inherits: true;
25785
+ initial-value: 0px;
25786
+ }
25787
+ @property --pf-v6-c-tabs--link-accent--start {
25788
+ syntax: "<length>";
25789
+ inherits: true;
25790
+ initial-value: 0px;
25791
+ }
25782
25792
  .pf-v6-c-tabs {
25783
25793
  --pf-v6-c-tabs--inset: 0;
25784
25794
  --pf-v6-c-tabs--Width: auto;
@@ -25840,6 +25850,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25840
25850
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25841
25851
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25842
25852
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
25853
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
25854
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
25843
25855
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
25844
25856
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
25845
25857
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -25864,6 +25876,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25864
25876
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
25865
25877
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
25866
25878
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
25879
+ --pf-v6-c-tabs--link-accent--start: 0;
25880
+ --pf-v6-c-tabs--link-accent--length: auto;
25881
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
25882
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
25883
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
25884
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
25885
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
25886
+ --pf-v6-c-tabs--link-accent--Width: initial;
25887
+ --pf-v6-c-tabs--link-accent--Height: 0;
25888
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
25889
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
25890
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
25891
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
25892
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
25893
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
25894
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
25895
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
25896
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
25897
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
25898
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
25867
25899
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25868
25900
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25869
25901
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26021,6 +26053,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26021
26053
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
26022
26054
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
26023
26055
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26056
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26057
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26058
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26059
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26060
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26061
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26062
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26024
26063
  display: inline-flex;
26025
26064
  flex-direction: column;
26026
26065
  height: 100%;
@@ -26283,6 +26322,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26283
26322
  text-decoration-line: none;
26284
26323
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
26285
26324
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
26325
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
26286
26326
  }
26287
26327
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
26288
26328
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -26595,6 +26635,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26595
26635
  }
26596
26636
  }
26597
26637
 
26638
+ @media (prefers-reduced-motion: no-preference) {
26639
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26640
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26641
+ content: revert;
26642
+ }
26643
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26644
+ position: absolute;
26645
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
26646
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26647
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
26648
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26649
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26650
+ content: "";
26651
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
26652
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
26653
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26654
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26655
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26656
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
26657
+ }
26658
+ .pf-v6-c-tabs.pf-m-initializing-accent {
26659
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
26660
+ }
26661
+ }
26598
26662
  .pf-v6-c-text-input-group {
26599
26663
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
26600
26664
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
package/patternfly.css CHANGED
@@ -25915,6 +25915,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25915
25915
  }
25916
25916
  }
25917
25917
 
25918
+ @property --pf-v6-c-tabs--link-accent--length {
25919
+ syntax: "<length>";
25920
+ inherits: true;
25921
+ initial-value: 0px;
25922
+ }
25923
+ @property --pf-v6-c-tabs--link-accent--start {
25924
+ syntax: "<length>";
25925
+ inherits: true;
25926
+ initial-value: 0px;
25927
+ }
25918
25928
  .pf-v6-c-tabs {
25919
25929
  --pf-v6-c-tabs--inset: 0;
25920
25930
  --pf-v6-c-tabs--Width: auto;
@@ -25976,6 +25986,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25976
25986
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25977
25987
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25978
25988
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
25989
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
25990
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
25979
25991
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
25980
25992
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
25981
25993
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -26000,6 +26012,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26000
26012
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
26001
26013
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
26002
26014
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
26015
+ --pf-v6-c-tabs--link-accent--start: 0;
26016
+ --pf-v6-c-tabs--link-accent--length: auto;
26017
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
26018
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
26019
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
26020
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
26021
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
26022
+ --pf-v6-c-tabs--link-accent--Width: initial;
26023
+ --pf-v6-c-tabs--link-accent--Height: 0;
26024
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26025
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
26026
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
26027
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
26028
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
26029
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
26030
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
26031
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
26032
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
26033
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
26034
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26003
26035
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
26004
26036
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
26005
26037
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -26157,6 +26189,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26157
26189
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
26158
26190
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
26159
26191
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
26192
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
26193
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
26194
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
26195
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
26196
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
26197
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
26198
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
26160
26199
  display: inline-flex;
26161
26200
  flex-direction: column;
26162
26201
  height: 100%;
@@ -26419,6 +26458,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26419
26458
  text-decoration-line: none;
26420
26459
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
26421
26460
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
26461
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
26422
26462
  }
26423
26463
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
26424
26464
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -26731,6 +26771,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
26731
26771
  }
26732
26772
  }
26733
26773
 
26774
+ @media (prefers-reduced-motion: no-preference) {
26775
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
26776
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
26777
+ content: revert;
26778
+ }
26779
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
26780
+ position: absolute;
26781
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
26782
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
26783
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
26784
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
26785
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
26786
+ content: "";
26787
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
26788
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
26789
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
26790
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
26791
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
26792
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
26793
+ }
26794
+ .pf-v6-c-tabs.pf-m-initializing-accent {
26795
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
26796
+ }
26797
+ }
26734
26798
  .pf-v6-c-text-input-group {
26735
26799
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
26736
26800
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);