@patternfly/patternfly 6.3.0-prerelease.77 → 6.3.0-prerelease.79
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/CodeEditor/code-editor.css +17 -2
- package/components/CodeEditor/code-editor.scss +20 -2
- package/components/FormControl/form-control.css +0 -6
- package/components/FormControl/form-control.scss +0 -7
- package/components/Label/label.css +3 -3
- package/components/Label/label.scss +3 -3
- package/components/Panel/panel.css +2 -2
- package/components/Panel/panel.scss +2 -2
- package/components/Progress/progress.css +1 -1
- package/components/Progress/progress.scss +1 -1
- package/components/ToggleGroup/toggle-group.css +18 -9
- package/components/ToggleGroup/toggle-group.scss +24 -17
- package/components/_index.css +41 -23
- package/docs/components/CodeEditor/examples/CodeEditor.md +17 -3
- package/docs/demos/Form/examples/BasicForms.md +89 -37
- package/package.json +2 -2
- package/patternfly-no-globals.css +41 -23
- package/patternfly.css +41 -23
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/patternfly.css
CHANGED
|
@@ -12091,6 +12091,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12091
12091
|
--pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
12092
12092
|
--pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
12093
12093
|
--pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
12094
|
+
--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
|
|
12094
12095
|
--pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
|
|
12095
12096
|
--pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
12096
12097
|
--pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
|
|
@@ -12110,6 +12111,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12110
12111
|
flex-direction: column;
|
|
12111
12112
|
}
|
|
12112
12113
|
.pf-v6-c-code-editor.pf-m-read-only {
|
|
12114
|
+
--pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor);
|
|
12113
12115
|
--pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
|
|
12114
12116
|
}
|
|
12115
12117
|
.pf-v6-c-code-editor.pf-m-full-height {
|
|
@@ -12126,17 +12128,29 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12126
12128
|
position: relative;
|
|
12127
12129
|
display: flex;
|
|
12128
12130
|
}
|
|
12129
|
-
.pf-v6-c-code-editor__header::before {
|
|
12131
|
+
.pf-v6-c-code-editor__header::before, .pf-v6-c-code-editor__header::after {
|
|
12132
|
+
position: absolute;
|
|
12133
|
+
pointer-events: none;
|
|
12134
|
+
content: "";
|
|
12135
|
+
}
|
|
12136
|
+
.pf-v6-c-code-editor__header::after {
|
|
12130
12137
|
position: absolute;
|
|
12131
12138
|
inset: 0;
|
|
12132
12139
|
pointer-events: none;
|
|
12133
12140
|
content: "";
|
|
12134
12141
|
border: var(--pf-v6-c-code-editor__header--BorderWidth) solid var(--pf-v6-c-code-editor__header--BorderColor);
|
|
12135
|
-
border-block-end:
|
|
12142
|
+
border-block-end-width: 0;
|
|
12136
12143
|
border-start-start-radius: var(--pf-v6-c-code-editor__header--BorderStartStartRadius);
|
|
12137
12144
|
border-start-end-radius: var(--pf-v6-c-code-editor__header--BorderStartEndRadius);
|
|
12138
12145
|
}
|
|
12146
|
+
.pf-v6-c-code-editor__header::before {
|
|
12147
|
+
inset-block-end: 0;
|
|
12148
|
+
inset-inline-start: 0;
|
|
12149
|
+
inset-inline-end: 0;
|
|
12150
|
+
border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
|
|
12151
|
+
}
|
|
12139
12152
|
.pf-v6-c-code-editor__header.pf-m-plain {
|
|
12153
|
+
--pf-v6-c-code-editor__header--BorderWidth: 0;
|
|
12140
12154
|
--pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
|
|
12141
12155
|
}
|
|
12142
12156
|
|
|
@@ -12233,6 +12247,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12233
12247
|
padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
|
|
12234
12248
|
padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
|
|
12235
12249
|
padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
|
|
12250
|
+
margin-inline-start: auto;
|
|
12236
12251
|
color: var(--pf-v6-c-code-editor__tab--Color);
|
|
12237
12252
|
background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
|
|
12238
12253
|
border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
|
|
@@ -16574,12 +16589,6 @@ ul) {
|
|
|
16574
16589
|
.pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
|
|
16575
16590
|
padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|
|
16576
16591
|
}
|
|
16577
|
-
@-moz-document url-prefix() {
|
|
16578
|
-
.pf-v6-c-form-control:has(select) {
|
|
16579
|
-
--pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
|
|
16580
|
-
--pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
|
|
16581
|
-
}
|
|
16582
|
-
}
|
|
16583
16592
|
.pf-v6-c-form-control.pf-m-placeholder > select {
|
|
16584
16593
|
--pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
|
|
16585
16594
|
}
|
|
@@ -17544,7 +17553,7 @@ label.pf-v6-c-input-group__text {
|
|
|
17544
17553
|
--pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
17545
17554
|
--pf-v6-c-label--MaxWidth: 100%;
|
|
17546
17555
|
--pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
|
|
17547
|
-
--pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
17556
|
+
--pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
17548
17557
|
--pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
17549
17558
|
--pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
17550
17559
|
--pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
@@ -17685,10 +17694,10 @@ label.pf-v6-c-input-group__text {
|
|
|
17685
17694
|
--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
|
|
17686
17695
|
--pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
|
|
17687
17696
|
--pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
17688
|
-
--pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
|
|
17697
|
+
--pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
|
|
17689
17698
|
--pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
|
|
17690
17699
|
--pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
17691
|
-
--pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
|
|
17700
|
+
--pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
|
|
17692
17701
|
--pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
|
|
17693
17702
|
--pf-v6-c-label--m-add--BackgroundColor: transparent;
|
|
17694
17703
|
--pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
|
|
@@ -22437,12 +22446,12 @@ ul.pf-v6-c-list {
|
|
|
22437
22446
|
--pf-v6-c-panel--before--BorderWidth: 0;
|
|
22438
22447
|
--pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
22439
22448
|
--pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
22440
|
-
--pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--
|
|
22449
|
+
--pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
22441
22450
|
--pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
22442
22451
|
--pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
22443
22452
|
--pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
22444
22453
|
--pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
22445
|
-
--pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--
|
|
22454
|
+
--pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
22446
22455
|
--pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
22447
22456
|
--pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
22448
22457
|
--pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
@@ -22751,7 +22760,7 @@ ul.pf-v6-c-list {
|
|
|
22751
22760
|
--pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
22752
22761
|
--pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
22753
22762
|
--pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
22754
|
-
--pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
22763
|
+
--pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
22755
22764
|
--pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
|
|
22756
22765
|
--pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
|
|
22757
22766
|
--pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
@@ -29669,6 +29678,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
29669
29678
|
--pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
29670
29679
|
--pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
|
|
29671
29680
|
--pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
29681
|
+
--pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
29672
29682
|
--pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
|
|
29673
29683
|
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
|
|
29674
29684
|
--pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
|
|
@@ -29680,12 +29690,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
29680
29690
|
--pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
29681
29691
|
--pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
|
|
29682
29692
|
--pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
29683
|
-
--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--
|
|
29693
|
+
--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
|
|
29684
29694
|
--pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
|
|
29695
|
+
--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
|
|
29685
29696
|
--pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
|
29686
29697
|
--pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
29687
29698
|
--pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
|
|
29688
|
-
--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--
|
|
29699
|
+
--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
|
|
29689
29700
|
--pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
|
|
29690
29701
|
--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
|
|
29691
29702
|
--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -29708,11 +29719,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
29708
29719
|
.pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
|
|
29709
29720
|
margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
|
|
29710
29721
|
}
|
|
29711
|
-
.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button
|
|
29722
|
+
.pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button {
|
|
29712
29723
|
border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
|
|
29713
29724
|
border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
|
|
29714
29725
|
}
|
|
29715
|
-
.pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button
|
|
29726
|
+
.pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button {
|
|
29716
29727
|
border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
|
|
29717
29728
|
border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
|
|
29718
29729
|
}
|
|
@@ -29731,25 +29742,31 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
29731
29742
|
background-color: var(--pf-v6-c-toggle-group__button--BackgroundColor);
|
|
29732
29743
|
border: 0;
|
|
29733
29744
|
}
|
|
29734
|
-
.pf-v6-c-toggle-group__button::before {
|
|
29745
|
+
.pf-v6-c-toggle-group__button::before, .pf-v6-c-toggle-group__button::after {
|
|
29735
29746
|
position: absolute;
|
|
29736
|
-
inset
|
|
29737
|
-
inset-block-end: 0;
|
|
29738
|
-
inset-inline-start: 0;
|
|
29739
|
-
inset-inline-end: 0;
|
|
29747
|
+
inset: 0;
|
|
29740
29748
|
pointer-events: none;
|
|
29741
29749
|
content: "";
|
|
29742
29750
|
border-style: solid;
|
|
29751
|
+
border-radius: inherit;
|
|
29752
|
+
}
|
|
29753
|
+
.pf-v6-c-toggle-group__button::before {
|
|
29743
29754
|
border-width: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
|
|
29744
29755
|
border-block-start-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
|
|
29745
29756
|
border-block-end-color: var(--pf-v6-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
|
|
29746
29757
|
border-inline-start-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
|
|
29747
29758
|
border-inline-end-color: var(--pf-v6-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v6-c-toggle-group__button--before--BorderColor));
|
|
29748
29759
|
}
|
|
29760
|
+
.pf-v6-c-toggle-group__button::after {
|
|
29761
|
+
inset: var(--pf-v6-c-toggle-group__button--before--BorderWidth);
|
|
29762
|
+
border-color: var(--pf-v6-c-toggle-group__button--after--BorderColor, transparent);
|
|
29763
|
+
border-width: var(--pf-v6-c-toggle-group__button--after--BorderWidth, 0);
|
|
29764
|
+
}
|
|
29749
29765
|
.pf-v6-c-toggle-group__button:is(:hover, :focus) {
|
|
29750
29766
|
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
|
|
29751
29767
|
--pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
|
|
29752
29768
|
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
|
|
29769
|
+
--pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
|
|
29753
29770
|
text-decoration-line: none;
|
|
29754
29771
|
}
|
|
29755
29772
|
.pf-v6-c-toggle-group__button.pf-m-selected {
|
|
@@ -29757,6 +29774,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
29757
29774
|
--pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
|
|
29758
29775
|
--pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
|
|
29759
29776
|
--pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
|
|
29777
|
+
--pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
|
|
29760
29778
|
}
|
|
29761
29779
|
.pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
|
|
29762
29780
|
--pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
|