@patternfly/patternfly 6.3.0-prerelease.46 → 6.3.0-prerelease.47

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 (9) hide show
  1. package/components/Table/table.css +12 -1
  2. package/components/Table/table.scss +15 -2
  3. package/components/_index.css +12 -1
  4. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +12 -1
  7. package/patternfly.css +12 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Table/table.css CHANGED
@@ -10,7 +10,8 @@
10
10
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
11
11
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
12
12
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
13
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
14
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
14
15
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
15
16
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
16
17
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -613,6 +614,12 @@
613
614
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
614
615
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
615
616
  }
617
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
618
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
619
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
620
+ line-height: 1lh;
621
+ }
622
+
616
623
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
617
624
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
618
625
  }
@@ -735,6 +742,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
735
742
  align-self: last baseline;
736
743
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
737
744
  }
745
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
746
+ line-height: 1lh;
747
+ }
738
748
 
739
749
  .pf-v6-c-table__sort {
740
750
  vertical-align: bottom;
@@ -845,6 +855,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
845
855
 
846
856
  .pf-v6-c-table__thead {
847
857
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
858
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
848
859
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
849
860
  vertical-align: bottom;
850
861
  }
package/components/Table/table.scss CHANGED
@@ -21,7 +21,8 @@
21
21
  --#{$table}__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
22
22
 
23
23
  // * Table thead toggle
24
- --#{$table}__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
24
+ --#{$table}__thead__toggle--PaddingBlockStart: var(--#{$table}--cell--Padding--base); // TODO - remove thead toggle custom padding in breaking change
25
+ --#{$table}__thead__toggle--PaddingBlockEnd: var(--#{$table}--cell--Padding--base); // TODO - remove thead toggle custom padding in breaking change
25
26
 
26
27
  // * Table body cell
27
28
  --#{$table}__tbody--cell--PaddingBlockStart: var(--#{$table}--cell--Padding--base);
@@ -835,13 +836,20 @@
835
836
  --#{$table}--cell--PaddingInlineStart: var(--#{$table}__toggle--PaddingInlineStart);
836
837
  --#{$table}--cell--PaddingInlineEnd: var(--#{$table}__toggle--PaddingInlineEnd);
837
838
 
839
+ @at-root .#{$table}__thead & {
840
+ .#{$button} {
841
+ margin-block-start: calc(var(--#{$button}--PaddingBlockStart) * -1);
842
+ margin-block-end: calc(var(--#{$button}--PaddingBlockEnd) * -1);
843
+ line-height: 1lh; // set line-height instead of --LineHeight to avoid breaking the min-width calc for plain buttons
844
+ }
845
+ }
846
+
838
847
  .#{$button} {
839
848
  &.pf-m-expanded .#{$table}__toggle-icon {
840
849
  transform: rotate(var(--#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate));
841
850
  }
842
851
  }
843
852
 
844
-
845
853
  .#{$table}__toggle-icon {
846
854
  @include pf-v6-mirror-inline-on-rtl;
847
855
 
@@ -997,6 +1005,10 @@
997
1005
  .#{$table}__column-help-action {
998
1006
  align-self: last baseline;
999
1007
  margin-inline-start: var(--#{$table}__column-help--MarginInlineStart);
1008
+
1009
+ .#{$button} {
1010
+ line-height: 1lh; // set line-height instead of --LineHeight to avoid breaking the min-width calc for plain buttons
1011
+ }
1000
1012
  }
1001
1013
 
1002
1014
  // - Table sort
@@ -1157,6 +1169,7 @@
1157
1169
  // - Table thead
1158
1170
  .#{$table}__thead {
1159
1171
  --#{$table}__tr--BorderBlockEndWidth: 0;
1172
+ --#{$table}__toggle--PaddingBlockStart: var(--#{$table}__thead__toggle--PaddingBlockStart);
1160
1173
  --#{$table}__toggle--PaddingBlockEnd: var(--#{$table}__thead__toggle--PaddingBlockEnd);
1161
1174
 
1162
1175
  vertical-align: bottom;
package/components/_index.css CHANGED
@@ -17276,7 +17276,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17276
17276
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
17277
17277
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
17278
17278
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
17279
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17279
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
17280
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
17280
17281
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
17281
17282
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
17282
17283
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -17879,6 +17880,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17879
17880
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
17880
17881
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
17881
17882
  }
17883
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
17884
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
17885
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
17886
+ line-height: 1lh;
17887
+ }
17888
+
17882
17889
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
17883
17890
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
17884
17891
  }
@@ -18001,6 +18008,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18001
18008
  align-self: last baseline;
18002
18009
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
18003
18010
  }
18011
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
18012
+ line-height: 1lh;
18013
+ }
18004
18014
 
18005
18015
  .pf-v6-c-table__sort {
18006
18016
  vertical-align: bottom;
@@ -18111,6 +18121,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18111
18121
 
18112
18122
  .pf-v6-c-table__thead {
18113
18123
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
18124
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
18114
18125
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
18115
18126
  vertical-align: bottom;
18116
18127
  }
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-code-block
14
14
  <button
15
15
  class="pf-v6-c-button pf-m-plain"
16
16
  type="button"
17
- aria-label="Copy to clipboard"
17
+ aria-label="Copy to clipboard basic example code content"
18
18
  >
19
19
  <span class="pf-v6-c-button__icon">
20
20
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -25,7 +25,7 @@ cssPrefix: pf-v6-c-code-block
25
25
  <button
26
26
  class="pf-v6-c-button pf-m-plain"
27
27
  type="button"
28
- aria-label="Run in Web Terminal"
28
+ aria-label="Run basic example code in Web Terminal"
29
29
  >
30
30
  <span class="pf-v6-c-button__icon">
31
31
  <i class="fas fa-play" aria-hidden="true"></i>
@@ -58,7 +58,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
58
58
  <button
59
59
  class="pf-v6-c-button pf-m-plain"
60
60
  type="button"
61
- aria-label="Copy to clipboard"
61
+ aria-label="Copy to clipboard expandable example code content"
62
62
  >
63
63
  <span class="pf-v6-c-button__icon">
64
64
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -69,7 +69,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
69
69
  <button
70
70
  class="pf-v6-c-button pf-m-plain"
71
71
  type="button"
72
- aria-label="Run in Web Terminal"
72
+ aria-label="Run expandable example code in Web Terminal"
73
73
  >
74
74
  <span class="pf-v6-c-button__icon">
75
75
  <i class="fas fa-play" aria-hidden="true"></i>
@@ -128,7 +128,7 @@ name: azure-sample-repo<div
128
128
  <button
129
129
  class="pf-v6-c-button pf-m-plain"
130
130
  type="button"
131
- aria-label="Copy to clipboard"
131
+ aria-label="Copy to clipboard expandable expanded example code content"
132
132
  >
133
133
  <span class="pf-v6-c-button__icon">
134
134
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -139,7 +139,7 @@ name: azure-sample-repo<div
139
139
  <button
140
140
  class="pf-v6-c-button pf-m-plain"
141
141
  type="button"
142
- aria-label="Run in Web Terminal"
142
+ aria-label="Run expandable expanded example code in Web Terminal"
143
143
  >
144
144
  <span class="pf-v6-c-button__icon">
145
145
  <i class="fas fa-play" aria-hidden="true"></i>
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.46",
4
+ "version": "6.3.0-prerelease.47",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -24772,7 +24772,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24772
24772
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
24773
24773
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
24774
24774
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
24775
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
24775
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
24776
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
24776
24777
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
24777
24778
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
24778
24779
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -25375,6 +25376,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
25375
25376
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
25376
25377
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
25377
25378
  }
25379
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
25380
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
25381
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
25382
+ line-height: 1lh;
25383
+ }
25384
+
25378
25385
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
25379
25386
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
25380
25387
  }
@@ -25497,6 +25504,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25497
25504
  align-self: last baseline;
25498
25505
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
25499
25506
  }
25507
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
25508
+ line-height: 1lh;
25509
+ }
25500
25510
 
25501
25511
  .pf-v6-c-table__sort {
25502
25512
  vertical-align: bottom;
@@ -25607,6 +25617,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25607
25617
 
25608
25618
  .pf-v6-c-table__thead {
25609
25619
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
25620
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
25610
25621
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
25611
25622
  vertical-align: bottom;
25612
25623
  }
package/patternfly.css CHANGED
@@ -24908,7 +24908,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24908
24908
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
24909
24909
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
24910
24910
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
24911
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
24911
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
24912
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
24912
24913
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
24913
24914
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
24914
24915
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -25511,6 +25512,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
25511
25512
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
25512
25513
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
25513
25514
  }
25515
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
25516
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
25517
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
25518
+ line-height: 1lh;
25519
+ }
25520
+
25514
25521
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
25515
25522
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
25516
25523
  }
@@ -25633,6 +25640,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25633
25640
  align-self: last baseline;
25634
25641
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
25635
25642
  }
25643
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
25644
+ line-height: 1lh;
25645
+ }
25636
25646
 
25637
25647
  .pf-v6-c-table__sort {
25638
25648
  vertical-align: bottom;
@@ -25743,6 +25753,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25743
25753
 
25744
25754
  .pf-v6-c-table__thead {
25745
25755
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
25756
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
25746
25757
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
25747
25758
  vertical-align: bottom;
25748
25759
  }