@patternfly/patternfly 6.0.0-alpha.79 → 6.0.0-alpha.80

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 (16) hide show
  1. package/components/CalendarMonth/calendar-month.css +61 -92
  2. package/components/CalendarMonth/calendar-month.scss +68 -63
  3. package/components/CodeEditor/code-editor.css +4 -0
  4. package/components/CodeEditor/code-editor.scss +5 -0
  5. package/components/DatePicker/date-picker.css +13 -14
  6. package/components/DatePicker/date-picker.scss +12 -16
  7. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  8. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +80 -104
  11. package/patternfly-theme-dark-unversioned.css +80 -104
  12. package/patternfly.css +80 -104
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
  15. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  16. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -22,63 +22,19 @@ cssPrefix: pf-v5-c-calendar-month
22
22
  <div class="pf-v5-c-input-group">
23
23
  <div class="pf-v5-c-input-group__item pf-m-fill">
24
24
  <div class="pf-v5-c-calendar-month__header-month">
25
- <div class="pf-v5-c-select">
26
- <span
27
- id="calendar-month-date-selected-month-select-label"
28
- hidden
29
- >Month</span>
30
-
31
- <button
32
- class="pf-v5-c-select__toggle"
33
- type="button"
34
- id="calendar-month-date-selected-month-select-toggle"
35
- aria-haspopup="true"
36
- aria-expanded="false"
37
- aria-labelledby="calendar-month-date-selected-month-select-label calendar-month-date-selected-month-select-toggle"
38
- >
39
- <div class="pf-v5-c-select__toggle-wrapper">
40
- <span class="pf-v5-c-select__toggle-text">October</span>
41
- </div>
42
- <span class="pf-v5-c-select__toggle-arrow">
43
- <i class="fas fa-caret-down" aria-hidden="true"></i>
25
+ <button
26
+ class="pf-v5-c-menu-toggle"
27
+ type="button"
28
+ aria-expanded="false"
29
+ id="calendar-month-date-selected-month-select"
30
+ >
31
+ <span class="pf-v5-c-menu-toggle__text">October</span>
32
+ <span class="pf-v5-c-menu-toggle__controls">
33
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
34
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
44
35
  </span>
45
- </button>
46
-
47
- <ul
48
- class="pf-v5-c-select__menu"
49
- role="listbox"
50
- aria-labelledby="calendar-month-date-selected-month-select-label"
51
- hidden
52
- >
53
- <li role="presentation">
54
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
55
- </li>
56
- <li role="presentation">
57
- <button
58
- class="pf-v5-c-select__menu-item pf-m-selected"
59
- role="option"
60
- aria-selected="true"
61
- >
62
- Stopped
63
- <span class="pf-v5-c-select__menu-item-icon">
64
- <i class="fas fa-check" aria-hidden="true"></i>
65
- </span>
66
- </button>
67
- </li>
68
- <li role="presentation">
69
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
70
- </li>
71
- <li role="presentation">
72
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
73
- </li>
74
- <li role="presentation">
75
- <button
76
- class="pf-v5-c-select__menu-item"
77
- role="option"
78
- >Needs maintenance</button>
79
- </li>
80
- </ul>
81
- </div>
36
+ </span>
37
+ </button>
82
38
  </div>
83
39
  </div>
84
40
  <div class="pf-v5-c-input-group__item">
@@ -416,63 +372,19 @@ cssPrefix: pf-v5-c-calendar-month
416
372
  <div class="pf-v5-c-input-group">
417
373
  <div class="pf-v5-c-input-group__item pf-m-fill">
418
374
  <div class="pf-v5-c-calendar-month__header-month">
419
- <div class="pf-v5-c-select">
420
- <span
421
- id="calendar-month-range-start-date-selected-month-select-label"
422
- hidden
423
- >Month</span>
424
-
425
- <button
426
- class="pf-v5-c-select__toggle"
427
- type="button"
428
- id="calendar-month-range-start-date-selected-month-select-toggle"
429
- aria-haspopup="true"
430
- aria-expanded="false"
431
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label calendar-month-range-start-date-selected-month-select-toggle"
432
- >
433
- <div class="pf-v5-c-select__toggle-wrapper">
434
- <span class="pf-v5-c-select__toggle-text">October</span>
435
- </div>
436
- <span class="pf-v5-c-select__toggle-arrow">
437
- <i class="fas fa-caret-down" aria-hidden="true"></i>
375
+ <button
376
+ class="pf-v5-c-menu-toggle"
377
+ type="button"
378
+ aria-expanded="false"
379
+ id="calendar-month-range-start-date-selected-month-select"
380
+ >
381
+ <span class="pf-v5-c-menu-toggle__text">October</span>
382
+ <span class="pf-v5-c-menu-toggle__controls">
383
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
384
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
438
385
  </span>
439
- </button>
440
-
441
- <ul
442
- class="pf-v5-c-select__menu"
443
- role="listbox"
444
- aria-labelledby="calendar-month-range-start-date-selected-month-select-label"
445
- hidden
446
- >
447
- <li role="presentation">
448
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
449
- </li>
450
- <li role="presentation">
451
- <button
452
- class="pf-v5-c-select__menu-item pf-m-selected"
453
- role="option"
454
- aria-selected="true"
455
- >
456
- Stopped
457
- <span class="pf-v5-c-select__menu-item-icon">
458
- <i class="fas fa-check" aria-hidden="true"></i>
459
- </span>
460
- </button>
461
- </li>
462
- <li role="presentation">
463
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
464
- </li>
465
- <li role="presentation">
466
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
467
- </li>
468
- <li role="presentation">
469
- <button
470
- class="pf-v5-c-select__menu-item"
471
- role="option"
472
- >Needs maintenance</button>
473
- </li>
474
- </ul>
475
- </div>
386
+ </span>
387
+ </button>
476
388
  </div>
477
389
  </div>
478
390
  <div class="pf-v5-c-input-group__item">
@@ -835,63 +747,19 @@ cssPrefix: pf-v5-c-calendar-month
835
747
  <div class="pf-v5-c-input-group">
836
748
  <div class="pf-v5-c-input-group__item pf-m-fill">
837
749
  <div class="pf-v5-c-calendar-month__header-month">
838
- <div class="pf-v5-c-select">
839
- <span
840
- id="calendar-month-range-end-date-selected-month-select-label"
841
- hidden
842
- >Month</span>
843
-
844
- <button
845
- class="pf-v5-c-select__toggle"
846
- type="button"
847
- id="calendar-month-range-end-date-selected-month-select-toggle"
848
- aria-haspopup="true"
849
- aria-expanded="false"
850
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label calendar-month-range-end-date-selected-month-select-toggle"
851
- >
852
- <div class="pf-v5-c-select__toggle-wrapper">
853
- <span class="pf-v5-c-select__toggle-text">October</span>
854
- </div>
855
- <span class="pf-v5-c-select__toggle-arrow">
856
- <i class="fas fa-caret-down" aria-hidden="true"></i>
750
+ <button
751
+ class="pf-v5-c-menu-toggle"
752
+ type="button"
753
+ aria-expanded="false"
754
+ id="calendar-month-range-end-date-selected-month-select"
755
+ >
756
+ <span class="pf-v5-c-menu-toggle__text">October</span>
757
+ <span class="pf-v5-c-menu-toggle__controls">
758
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
759
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
857
760
  </span>
858
- </button>
859
-
860
- <ul
861
- class="pf-v5-c-select__menu"
862
- role="listbox"
863
- aria-labelledby="calendar-month-range-end-date-selected-month-select-label"
864
- hidden
865
- >
866
- <li role="presentation">
867
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
868
- </li>
869
- <li role="presentation">
870
- <button
871
- class="pf-v5-c-select__menu-item pf-m-selected"
872
- role="option"
873
- aria-selected="true"
874
- >
875
- Stopped
876
- <span class="pf-v5-c-select__menu-item-icon">
877
- <i class="fas fa-check" aria-hidden="true"></i>
878
- </span>
879
- </button>
880
- </li>
881
- <li role="presentation">
882
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
883
- </li>
884
- <li role="presentation">
885
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
886
- </li>
887
- <li role="presentation">
888
- <button
889
- class="pf-v5-c-select__menu-item"
890
- role="option"
891
- >Needs maintenance</button>
892
- </li>
893
- </ul>
894
- </div>
761
+ </span>
762
+ </button>
895
763
  </div>
896
764
  </div>
897
765
  <div class="pf-v5-c-input-group__item">
@@ -1254,63 +1122,19 @@ cssPrefix: pf-v5-c-calendar-month
1254
1122
  <div class="pf-v5-c-input-group">
1255
1123
  <div class="pf-v5-c-input-group__item pf-m-fill">
1256
1124
  <div class="pf-v5-c-calendar-month__header-month">
1257
- <div class="pf-v5-c-select">
1258
- <span
1259
- id="calendar-month-range-start-and-end-dates-selected-month-select-label"
1260
- hidden
1261
- >Month</span>
1262
-
1263
- <button
1264
- class="pf-v5-c-select__toggle"
1265
- type="button"
1266
- id="calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1267
- aria-haspopup="true"
1268
- aria-expanded="false"
1269
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label calendar-month-range-start-and-end-dates-selected-month-select-toggle"
1270
- >
1271
- <div class="pf-v5-c-select__toggle-wrapper">
1272
- <span class="pf-v5-c-select__toggle-text">October</span>
1273
- </div>
1274
- <span class="pf-v5-c-select__toggle-arrow">
1275
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1125
+ <button
1126
+ class="pf-v5-c-menu-toggle"
1127
+ type="button"
1128
+ aria-expanded="false"
1129
+ id="calendar-month-range-start-and-end-dates-selected-month-select"
1130
+ >
1131
+ <span class="pf-v5-c-menu-toggle__text">October</span>
1132
+ <span class="pf-v5-c-menu-toggle__controls">
1133
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1134
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1276
1135
  </span>
1277
- </button>
1278
-
1279
- <ul
1280
- class="pf-v5-c-select__menu"
1281
- role="listbox"
1282
- aria-labelledby="calendar-month-range-start-and-end-dates-selected-month-select-label"
1283
- hidden
1284
- >
1285
- <li role="presentation">
1286
- <button class="pf-v5-c-select__menu-item" role="option">Running</button>
1287
- </li>
1288
- <li role="presentation">
1289
- <button
1290
- class="pf-v5-c-select__menu-item pf-m-selected"
1291
- role="option"
1292
- aria-selected="true"
1293
- >
1294
- Stopped
1295
- <span class="pf-v5-c-select__menu-item-icon">
1296
- <i class="fas fa-check" aria-hidden="true"></i>
1297
- </span>
1298
- </button>
1299
- </li>
1300
- <li role="presentation">
1301
- <button class="pf-v5-c-select__menu-item" role="option">Down</button>
1302
- </li>
1303
- <li role="presentation">
1304
- <button class="pf-v5-c-select__menu-item" role="option">Degraded</button>
1305
- </li>
1306
- <li role="presentation">
1307
- <button
1308
- class="pf-v5-c-select__menu-item"
1309
- role="option"
1310
- >Needs maintenance</button>
1311
- </li>
1312
- </ul>
1313
- </div>
1136
+ </span>
1137
+ </button>
1314
1138
  </div>
1315
1139
  </div>
1316
1140
  <div class="pf-v5-c-input-group__item">
package/docs/components/DatePicker/examples/DatePicker.md CHANGED
@@ -70,7 +70,7 @@ cssPrefix: pf-v5-c-date-picker
70
70
  <div class="pf-v5-c-date-picker__helper-text">
71
71
  <div class="pf-v5-c-helper-text">
72
72
  <div class="pf-v5-c-helper-text__item">
73
- <span class="pf-v5-c-helper-text__item-text">Select a date.</span>
73
+ <span class="pf-v5-c-helper-text__item-text">Select a date</span>
74
74
  </div>
75
75
  </div>
76
76
  </div>
@@ -115,6 +115,9 @@ cssPrefix: pf-v5-c-date-picker
115
115
  <div class="pf-v5-c-date-picker__helper-text">
116
116
  <div class="pf-v5-c-helper-text">
117
117
  <div class="pf-v5-c-helper-text__item pf-m-error">
118
+ <span class="pf-v5-c-helper-text__item-icon">
119
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
120
+ </span>
118
121
  <span class="pf-v5-c-helper-text__item-text">Invalid date</span>
119
122
  </div>
120
123
  </div>
@@ -196,7 +199,7 @@ cssPrefix: pf-v5-c-date-picker
196
199
  ```html
197
200
  <div
198
201
  class="pf-v5-c-date-picker"
199
- style="--pf-v5-c-date-picker__input--c-form-control--width-chars: 17;"
202
+ style="--pf-v5-c-date-picker__input--c-form-control--width-chars: 18;"
200
203
  >
201
204
  <div class="pf-v5-c-date-picker__input">
202
205
  <div class="pf-v5-c-input-group">
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.0.0-alpha.79",
4
+ "version": "6.0.0-alpha.80",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {