@patternfly/patternfly 6.6.0-prerelease.24 → 6.6.0-prerelease.26

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/Form/form.scss +1 -0
  2. package/components/FormControl/form-control.css +12 -2
  3. package/components/FormControl/form-control.scss +14 -2
  4. package/components/Tabs/tabs.css +19 -5
  5. package/components/Tabs/tabs.scss +22 -5
  6. package/components/_index.css +31 -7
  7. package/docs/components/Button/examples/Button.md +2 -2
  8. package/docs/components/Form/examples/Form.md +36 -8
  9. package/docs/components/Tabs/examples/Tabs.md +18 -998
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +46 -34
  11. package/docs/demos/Alert/examples/Alert.md +32 -14
  12. package/docs/demos/Button/examples/Button.md +57 -45
  13. package/docs/demos/Compass/examples/Compass.md +0 -404
  14. package/docs/demos/Form/examples/BasicForms.md +56 -28
  15. package/package.json +2 -2
  16. package/patternfly-no-globals.css +31 -7
  17. package/patternfly.css +31 -7
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -17755,6 +17755,10 @@ ul) {
17755
17755
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
17756
17756
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17757
17757
  --pf-v6-c-form-control--Width: 100%;
17758
+ --pf-v6-c-form-control--TransitionDelay: 0s;
17759
+ --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
17760
+ --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17761
+ --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
17758
17762
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
17759
17763
  --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
17760
17764
  --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -17860,12 +17864,17 @@ ul) {
17860
17864
  resize: var(--pf-v6-c-form-control--Resize);
17861
17865
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
17862
17866
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
17867
+ transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
17868
+ transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
17869
+ transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
17870
+ transition-property: var(--pf-v6-c-form-control--TransitionProperty);
17863
17871
  }
17864
17872
  .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
17865
17873
  position: absolute;
17866
17874
  inset: 0;
17867
17875
  pointer-events: none;
17868
17876
  content: "";
17877
+ transition: inherit;
17869
17878
  }
17870
17879
  .pf-v6-c-form-control::before {
17871
17880
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -17961,10 +17970,11 @@ ul) {
17961
17970
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
17962
17971
  --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
17963
17972
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
17964
- --pf-v6-c-form-control--before--BorderStyle: none;
17965
- --pf-v6-c-form-control--after--BorderStyle: none;
17966
17973
  cursor: not-allowed;
17967
17974
  }
17975
+ .pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
17976
+ border-color: transparent;
17977
+ }
17968
17978
  .pf-v6-c-form-control.pf-m-error {
17969
17979
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
17970
17980
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
@@ -30752,10 +30762,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30752
30762
  --pf-v6-c-tabs__link--BorderColor: transparent;
30753
30763
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
30754
30764
  --pf-v6-c-tabs__link--disabled--BorderColor: transparent;
30755
- --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
30756
- --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
30757
- --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
30758
- --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
30765
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
30766
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
30767
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
30768
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
30759
30769
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
30760
30770
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
30761
30771
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
@@ -30774,9 +30784,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30774
30784
  --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
30775
30785
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
30776
30786
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
30777
- --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
30778
30787
  --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
30779
30788
  --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
30789
+ --pf-v6-c-tabs--m-subtab__link--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
30790
+ --pf-v6-c-tabs--m-subtab__link--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
30791
+ --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--body--sm);
30792
+ --pf-v6-c-tabs--m-subtab__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
30793
+ --pf-v6-c-tabs--m-subtab__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
30794
+ --pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
30795
+ --pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
30780
30796
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
30781
30797
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
30782
30798
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -31143,9 +31159,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31143
31159
  }
31144
31160
  .pf-v6-c-tabs.pf-m-subtab {
31145
31161
  --pf-v6-c-tabs__link--FontSize: var(--pf-v6-c-tabs--m-subtab__link--FontSize);
31162
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockStart);
31163
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd);
31164
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineStart);
31165
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd);
31146
31166
  --pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize);
31147
31167
  --pf-v6-c-tabs__add--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__add--c-button--FontSize);
31148
31168
  }
31169
+ .pf-v6-c-tabs.pf-m-subtab .pf-v6-c-tabs__link {
31170
+ margin-block-start: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockStart);
31171
+ margin-block-end: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockEnd);
31172
+ }
31149
31173
  .pf-v6-c-tabs.pf-m-page-insets {
31150
31174
  --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-page-insets--inset);
31151
31175
  }
package/patternfly.css CHANGED
@@ -17910,6 +17910,10 @@ ul) {
17910
17910
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
17911
17911
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17912
17912
  --pf-v6-c-form-control--Width: 100%;
17913
+ --pf-v6-c-form-control--TransitionDelay: 0s;
17914
+ --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
17915
+ --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17916
+ --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
17913
17917
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
17914
17918
  --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
17915
17919
  --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -18015,12 +18019,17 @@ ul) {
18015
18019
  resize: var(--pf-v6-c-form-control--Resize);
18016
18020
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
18017
18021
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
18022
+ transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
18023
+ transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
18024
+ transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
18025
+ transition-property: var(--pf-v6-c-form-control--TransitionProperty);
18018
18026
  }
18019
18027
  .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
18020
18028
  position: absolute;
18021
18029
  inset: 0;
18022
18030
  pointer-events: none;
18023
18031
  content: "";
18032
+ transition: inherit;
18024
18033
  }
18025
18034
  .pf-v6-c-form-control::before {
18026
18035
  border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -18116,10 +18125,11 @@ ul) {
18116
18125
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
18117
18126
  --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
18118
18127
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
18119
- --pf-v6-c-form-control--before--BorderStyle: none;
18120
- --pf-v6-c-form-control--after--BorderStyle: none;
18121
18128
  cursor: not-allowed;
18122
18129
  }
18130
+ .pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
18131
+ border-color: transparent;
18132
+ }
18123
18133
  .pf-v6-c-form-control.pf-m-error {
18124
18134
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
18125
18135
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
@@ -30907,10 +30917,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30907
30917
  --pf-v6-c-tabs__link--BorderColor: transparent;
30908
30918
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
30909
30919
  --pf-v6-c-tabs__link--disabled--BorderColor: transparent;
30910
- --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
30911
- --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
30912
- --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
30913
- --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
30920
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
30921
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
30922
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
30923
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
30914
30924
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
30915
30925
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
30916
30926
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
@@ -30929,9 +30939,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30929
30939
  --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
30930
30940
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
30931
30941
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
30932
- --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
30933
30942
  --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
30934
30943
  --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
30944
+ --pf-v6-c-tabs--m-subtab__link--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
30945
+ --pf-v6-c-tabs--m-subtab__link--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
30946
+ --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--body--sm);
30947
+ --pf-v6-c-tabs--m-subtab__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
30948
+ --pf-v6-c-tabs--m-subtab__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
30949
+ --pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
30950
+ --pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
30935
30951
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
30936
30952
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
30937
30953
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -31298,9 +31314,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31298
31314
  }
31299
31315
  .pf-v6-c-tabs.pf-m-subtab {
31300
31316
  --pf-v6-c-tabs__link--FontSize: var(--pf-v6-c-tabs--m-subtab__link--FontSize);
31317
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockStart);
31318
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd);
31319
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineStart);
31320
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd);
31301
31321
  --pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize);
31302
31322
  --pf-v6-c-tabs__add--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__add--c-button--FontSize);
31303
31323
  }
31324
+ .pf-v6-c-tabs.pf-m-subtab .pf-v6-c-tabs__link {
31325
+ margin-block-start: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockStart);
31326
+ margin-block-end: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockEnd);
31327
+ }
31304
31328
  .pf-v6-c-tabs.pf-m-page-insets {
31305
31329
  --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-page-insets--inset);
31306
31330
  }