@patternfly/patternfly 6.0.0-alpha.157 → 6.0.0-alpha.159

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 (20) hide show
  1. package/components/Pagination/pagination.css +6 -3
  2. package/components/Pagination/pagination.scss +6 -3
  3. package/components/TextInputGroup/text-input-group.css +20 -18
  4. package/components/TextInputGroup/text-input-group.scss +23 -22
  5. package/components/_index.css +26 -21
  6. package/docs/components/Pagination/examples/Pagination.md +196 -713
  7. package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  8. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -0
  9. package/docs/components/Toolbar/examples/Toolbar.md +34 -98
  10. package/docs/demos/CardView/examples/CardView.md +32 -98
  11. package/docs/demos/DataList/examples/DataList.md +128 -392
  12. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +96 -320
  13. package/docs/demos/Table/examples/Table.md +369 -1132
  14. package/docs/demos/Toolbar/examples/Toolbar.md +128 -392
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +26 -21
  17. package/patternfly.css +26 -21
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
  20. package/docs/components/Pagination/examples/Pagination.css +0 -3
package/patternfly-no-globals.css CHANGED
@@ -18275,14 +18275,17 @@ ul.pf-v6-c-list {
18275
18275
  --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18276
18276
  --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18277
18277
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
18278
+ --pf-v6-c-pagination__page-menu--Display--base: block;
18278
18279
  --pf-v6-c-pagination__page-menu--Display: none;
18279
18280
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
18280
- --pf-v6-c-pagination--m-display-full__page-menu--Display: inline-flex;
18281
+ --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
18282
+ --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
18283
+ --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
18281
18284
  }
18282
18285
  @media screen and (min-width: 768px) {
18283
18286
  :where(:root, .pf-v6-c-pagination) {
18284
18287
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
18285
- --pf-v6-c-pagination__page-menu--Display: inline-flex;
18288
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
18286
18289
  --pf-v6-c-pagination__nav--Display: inline-flex;
18287
18290
  --pf-v6-c-pagination__total-items--Display: none;
18288
18291
  }
@@ -18329,7 +18332,7 @@ ul.pf-v6-c-list {
18329
18332
  }
18330
18333
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
18331
18334
  position: absolute;
18332
- display: block;
18335
+ display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
18333
18336
  }
18334
18337
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
18335
18338
  display: flex;
@@ -25035,15 +25038,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25035
25038
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
25036
25039
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
25037
25040
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
25038
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
25039
25041
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
25040
25042
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
25041
25043
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
25042
25044
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
25043
25045
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25044
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25045
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25046
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25046
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
25047
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25048
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25049
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25050
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25051
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25052
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25053
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25047
25054
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25048
25055
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25049
25056
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -25069,15 +25076,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25069
25076
  width: 100%;
25070
25077
  color: var(--pf-v6-c-text-input-group--Color, inherit);
25071
25078
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
25072
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25073
- }
25074
- .pf-v6-c-text-input-group::before {
25075
- position: absolute;
25076
- inset: 0;
25077
- pointer-events: none;
25078
- content: "";
25079
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25080
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25081
25079
  }
25082
25080
  .pf-v6-c-text-input-group:hover {
25083
25081
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -25091,7 +25089,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25091
25089
  .pf-v6-c-text-input-group.pf-m-plain {
25092
25090
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
25093
25091
  }
25094
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
25092
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
25095
25093
  border: 0;
25096
25094
  }
25097
25095
 
@@ -25106,12 +25104,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25106
25104
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
25107
25105
  }
25108
25106
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
25107
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
25108
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
25109
25109
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
25110
25110
  }
25111
25111
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
25112
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
25113
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
25114
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
25112
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
25113
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
25114
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
25115
25115
  }
25116
25116
 
25117
25117
  .pf-v6-c-text-input-group__text {
@@ -25120,11 +25120,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25120
25120
  grid-template-areas: "text-input";
25121
25121
  grid-template-columns: 1fr;
25122
25122
  }
25123
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
25123
+ .pf-v6-c-text-input-group__text::before {
25124
25124
  position: absolute;
25125
25125
  inset: 0;
25126
25126
  pointer-events: none;
25127
25127
  content: "";
25128
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25129
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
25130
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
25131
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
25132
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
25128
25133
  }
25129
25134
 
25130
25135
  .pf-v6-c-text-input-group__icon {
package/patternfly.css CHANGED
@@ -18396,14 +18396,17 @@ ul.pf-v6-c-list {
18396
18396
  --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18397
18397
  --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18398
18398
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
18399
+ --pf-v6-c-pagination__page-menu--Display--base: block;
18399
18400
  --pf-v6-c-pagination__page-menu--Display: none;
18400
18401
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
18401
- --pf-v6-c-pagination--m-display-full__page-menu--Display: inline-flex;
18402
+ --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
18403
+ --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
18404
+ --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
18402
18405
  }
18403
18406
  @media screen and (min-width: 768px) {
18404
18407
  :where(:root, .pf-v6-c-pagination) {
18405
18408
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
18406
- --pf-v6-c-pagination__page-menu--Display: inline-flex;
18409
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
18407
18410
  --pf-v6-c-pagination__nav--Display: inline-flex;
18408
18411
  --pf-v6-c-pagination__total-items--Display: none;
18409
18412
  }
@@ -18450,7 +18453,7 @@ ul.pf-v6-c-list {
18450
18453
  }
18451
18454
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
18452
18455
  position: absolute;
18453
- display: block;
18456
+ display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
18454
18457
  }
18455
18458
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
18456
18459
  display: flex;
@@ -25156,15 +25159,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25156
25159
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
25157
25160
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
25158
25161
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
25159
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
25160
25162
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
25161
25163
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
25162
25164
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
25163
25165
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
25164
25166
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25165
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25166
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25167
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25167
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
25168
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25169
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25170
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25171
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
25172
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25173
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
25174
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
25168
25175
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25169
25176
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25170
25177
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -25190,15 +25197,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25190
25197
  width: 100%;
25191
25198
  color: var(--pf-v6-c-text-input-group--Color, inherit);
25192
25199
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
25193
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25194
- }
25195
- .pf-v6-c-text-input-group::before {
25196
- position: absolute;
25197
- inset: 0;
25198
- pointer-events: none;
25199
- content: "";
25200
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25201
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
25202
25200
  }
25203
25201
  .pf-v6-c-text-input-group:hover {
25204
25202
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -25212,7 +25210,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25212
25210
  .pf-v6-c-text-input-group.pf-m-plain {
25213
25211
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
25214
25212
  }
25215
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
25213
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
25216
25214
  border: 0;
25217
25215
  }
25218
25216
 
@@ -25227,12 +25225,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25227
25225
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
25228
25226
  }
25229
25227
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
25228
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
25229
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
25230
25230
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
25231
25231
  }
25232
25232
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
25233
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
25234
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
25235
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
25233
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
25234
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
25235
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
25236
25236
  }
25237
25237
 
25238
25238
  .pf-v6-c-text-input-group__text {
@@ -25241,11 +25241,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25241
25241
  grid-template-areas: "text-input";
25242
25242
  grid-template-columns: 1fr;
25243
25243
  }
25244
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
25244
+ .pf-v6-c-text-input-group__text::before {
25245
25245
  position: absolute;
25246
25246
  inset: 0;
25247
25247
  pointer-events: none;
25248
25248
  content: "";
25249
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
25250
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
25251
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
25252
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
25253
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
25249
25254
  }
25250
25255
 
25251
25256
  .pf-v6-c-text-input-group__icon {