@patternfly/patternfly 4.211.0 → 4.213.0

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.
@@ -562,7 +562,7 @@ cssPrefix: pf-c-log-viewer
562
562
  ```html
563
563
  <div
564
564
  class="pf-c-log-viewer pf-m-line-numbers"
565
- style="--pf-c-log-viewer__index--Width: 75px"
565
+ style
566
566
  tabindex="0"
567
567
  role="region"
568
568
  aria-label="Log viewer with line numbers"
@@ -1107,6 +1107,556 @@ cssPrefix: pf-c-log-viewer
1107
1107
 
1108
1108
  ```
1109
1109
 
1110
+ ### With line number chars specified
1111
+
1112
+ ```html
1113
+ <div
1114
+ class="pf-c-log-viewer pf-m-line-numbers pf-m-line-number-chars"
1115
+ style="--pf-c-log-viewer--line-number-chars: 6"
1116
+ tabindex="0"
1117
+ role="region"
1118
+ aria-label="Log viewer with line numbers"
1119
+ >
1120
+ <div class="pf-c-log-viewer__header">
1121
+ <div
1122
+ class="pf-c-toolbar"
1123
+ id="log-viewer-line-number-chars-example-toolbar"
1124
+ role="toolbar"
1125
+ >
1126
+ <div class="pf-c-toolbar__content">
1127
+ <div class="pf-c-toolbar__content-section pf-m-nowrap">
1128
+ <div class="pf-c-toolbar__item pf-m-search-filter">
1129
+ <div class="pf-c-select">
1130
+ <span
1131
+ id="log-viewer-line-number-chars-example-select-menu-label"
1132
+ hidden
1133
+ >Choose one</span>
1134
+
1135
+ <button
1136
+ class="pf-c-select__toggle"
1137
+ type="button"
1138
+ id="log-viewer-line-number-chars-example-select-menu-toggle"
1139
+ aria-haspopup="true"
1140
+ aria-expanded="false"
1141
+ aria-labelledby="log-viewer-line-number-chars-example-select-menu-label log-viewer-line-number-chars-example-select-menu-toggle"
1142
+ >
1143
+ <div class="pf-c-select__toggle-wrapper">
1144
+ <span class="pf-c-select__toggle-text">System log</span>
1145
+ </div>
1146
+ <span class="pf-c-select__toggle-arrow">
1147
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1148
+ </span>
1149
+ </button>
1150
+ <ul
1151
+ class="pf-c-select__menu"
1152
+ role="listbox"
1153
+ aria-labelledby="log-viewer-line-number-chars-example-select-menu-label"
1154
+ hidden
1155
+ >
1156
+ <li role="presentation">
1157
+ <button class="pf-c-select__menu-item" role="option">Dataset 1</button>
1158
+ </li>
1159
+ <li role="presentation">
1160
+ <button
1161
+ class="pf-c-select__menu-item pf-m-selected"
1162
+ role="option"
1163
+ aria-selected="true"
1164
+ >
1165
+ System log
1166
+ <span class="pf-c-select__menu-item-icon">
1167
+ <i class="fas fa-check" aria-hidden="true"></i>
1168
+ </span>
1169
+ </button>
1170
+ </li>
1171
+ <li role="presentation">
1172
+ <button class="pf-c-select__menu-item" role="option">Dataset 3</button>
1173
+ </li>
1174
+ </ul>
1175
+ </div>
1176
+ </div>
1177
+ <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg">
1178
+ <div class="pf-c-toolbar__toggle">
1179
+ <button
1180
+ class="pf-c-button pf-m-plain"
1181
+ type="button"
1182
+ aria-label="Show filters"
1183
+ aria-expanded="false"
1184
+ aria-controls="log-viewer-line-number-chars-example-toolbar-expandable-content"
1185
+ >
1186
+ <i class="fas fa-search" aria-hidden="true"></i>
1187
+ </button>
1188
+ </div>
1189
+ <div
1190
+ class="pf-c-toolbar__item pf-m-search-filter"
1191
+ style="--pf-c-toolbar__item--Width: 268px"
1192
+ >
1193
+ <div class="pf-c-search-input">
1194
+ <div class="pf-c-search-input__bar">
1195
+ <span class="pf-c-search-input__text">
1196
+ <span class="pf-c-search-input__icon">
1197
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1198
+ </span>
1199
+ <input
1200
+ class="pf-c-search-input__text-input"
1201
+ type="text"
1202
+ placeholder="Find"
1203
+ aria-label="Find"
1204
+ />
1205
+ </span>
1206
+ </div>
1207
+ </div>
1208
+ </div>
1209
+ </div>
1210
+ <div class="pf-c-toolbar__item pf-m-spacer-none">
1211
+ <button class="pf-c-button pf-m-link" type="button">
1212
+ <span class="pf-c-button__icon pf-m-start">
1213
+ <i class="fas fa-pause" aria-hidden="true"></i>
1214
+ </span>
1215
+ Pause
1216
+ </button>
1217
+ </div>
1218
+ <div
1219
+ class="pf-c-toolbar__item pf-m-align-right pf-m-hidden-on-lg pf-m-spacer-none"
1220
+ >
1221
+ <div class="pf-c-dropdown">
1222
+ <button
1223
+ class="pf-c-dropdown__toggle pf-m-plain"
1224
+ id="log-viewer-line-number-chars-example-dropdown-button"
1225
+ aria-expanded="false"
1226
+ type="button"
1227
+ aria-label="Actions"
1228
+ >
1229
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1230
+ </button>
1231
+ <div
1232
+ class="pf-c-menu pf-m-drilldown pf-m-align-right"
1233
+ style="--pf-c-menu--Width: 200px;"
1234
+ hidden
1235
+ >
1236
+ <div class="pf-c-menu__content">
1237
+ <ul class="pf-c-menu__list" role="menu">
1238
+ <li class="pf-c-menu__list-item" role="none">
1239
+ <button
1240
+ class="pf-c-menu__item"
1241
+ type="button"
1242
+ role="menuitem"
1243
+ >
1244
+ <span class="pf-c-menu__item-main">
1245
+ <span class="pf-c-menu__item-text">Clear log</span>
1246
+ </span>
1247
+ </button>
1248
+ </li>
1249
+ <hr class="pf-c-divider" />
1250
+ <li class="pf-c-menu__list-item" role="none">
1251
+ <div
1252
+ class="pf-c-menu__item"
1253
+ type="button"
1254
+ role="menuitem"
1255
+ >
1256
+ <span class="pf-c-menu__item-main">
1257
+ <div class="pf-c-check">
1258
+ <input
1259
+ class="pf-c-check__input"
1260
+ type="checkbox"
1261
+ id="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
1262
+ name="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
1263
+ />
1264
+
1265
+ <label
1266
+ class="pf-c-check__label"
1267
+ for="log-viewer-line-number-chars-example-desktop-check-wrap-lines"
1268
+ >Wrap lines</label>
1269
+ </div>
1270
+ </span>
1271
+ </div>
1272
+ </li>
1273
+ <li class="pf-c-menu__list-item" role="none">
1274
+ <div
1275
+ class="pf-c-menu__item"
1276
+ type="button"
1277
+ role="menuitem"
1278
+ >
1279
+ <span class="pf-c-menu__item-main">
1280
+ <div class="pf-c-check">
1281
+ <input
1282
+ class="pf-c-check__input"
1283
+ type="checkbox"
1284
+ id="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
1285
+ name="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
1286
+ />
1287
+
1288
+ <label
1289
+ class="pf-c-check__label"
1290
+ for="log-viewer-line-number-chars-example-desktop-check-show-timestamps"
1291
+ >Show timestamps</label>
1292
+ </div>
1293
+ </span>
1294
+ </div>
1295
+ </li>
1296
+ <li class="pf-c-menu__list-item" role="none">
1297
+ <div
1298
+ class="pf-c-menu__item"
1299
+ type="button"
1300
+ role="menuitem"
1301
+ >
1302
+ <span class="pf-c-menu__item-main">
1303
+ <div class="pf-c-check">
1304
+ <input
1305
+ class="pf-c-check__input"
1306
+ type="checkbox"
1307
+ id="log-viewer-line-number-chars-example-desktop-check-line-number"
1308
+ name="log-viewer-line-number-chars-example-desktop-check-line-number"
1309
+ />
1310
+
1311
+ <label
1312
+ class="pf-c-check__label"
1313
+ for="log-viewer-line-number-chars-example-desktop-check-line-number"
1314
+ >Display line number</label>
1315
+ </div>
1316
+ </span>
1317
+ </div>
1318
+ </li>
1319
+ <hr class="pf-c-divider" />
1320
+ <li class="pf-c-menu__list-item" role="none">
1321
+ <button
1322
+ class="pf-c-menu__item"
1323
+ type="button"
1324
+ role="menuitem"
1325
+ aria-expanded="false"
1326
+ >
1327
+ <span class="pf-c-menu__item-main">
1328
+ <span class="pf-c-menu__item-text">Launch</span>
1329
+ <span class="pf-c-menu__item-toggle-icon">
1330
+ <i class="fas fa-angle-right"></i>
1331
+ </span>
1332
+ </span>
1333
+ </button>
1334
+ <div class="pf-c-menu" hidden>
1335
+ <div class="pf-c-menu__content">
1336
+ <ul class="pf-c-menu__list" role="menu">
1337
+ <li
1338
+ class="pf-c-menu__list-item pf-m-drill-up"
1339
+ role="none"
1340
+ >
1341
+ <button
1342
+ class="pf-c-menu__item"
1343
+ type="button"
1344
+ role="menuitem"
1345
+ tabindex="0"
1346
+ >
1347
+ <span class="pf-c-menu__item-main">
1348
+ <span class="pf-c-menu__item-toggle-icon">
1349
+ <i class="fas fa-angle-left"></i>
1350
+ </span>
1351
+ <span class="pf-c-menu__item-text">Launch</span>
1352
+ </span>
1353
+ </button>
1354
+ </li>
1355
+ <li class="pf-c-divider" role="separator"></li>
1356
+ <li class="pf-c-menu__list-item" role="none">
1357
+ <button
1358
+ class="pf-c-menu__item"
1359
+ type="button"
1360
+ role="menuitem"
1361
+ >
1362
+ <span class="pf-c-menu__item-main">
1363
+ <span
1364
+ class="pf-c-menu__item-text"
1365
+ >Launch option 1</span>
1366
+ </span>
1367
+ </button>
1368
+ </li>
1369
+ <li class="pf-c-menu__list-item" role="none">
1370
+ <button
1371
+ class="pf-c-menu__item"
1372
+ type="button"
1373
+ role="menuitem"
1374
+ >
1375
+ <span class="pf-c-menu__item-main">
1376
+ <span
1377
+ class="pf-c-menu__item-text"
1378
+ >Launch option 2</span>
1379
+ </span>
1380
+ </button>
1381
+ </li>
1382
+ <li class="pf-c-menu__list-item" role="none">
1383
+ <button
1384
+ class="pf-c-menu__item"
1385
+ type="button"
1386
+ role="menuitem"
1387
+ >
1388
+ <span class="pf-c-menu__item-main">
1389
+ <span
1390
+ class="pf-c-menu__item-text"
1391
+ >Launch option 3</span>
1392
+ </span>
1393
+ </button>
1394
+ </li>
1395
+ </ul>
1396
+ </div>
1397
+ </div>
1398
+ </li>
1399
+ <li class="pf-c-menu__list-item" role="none">
1400
+ <button
1401
+ class="pf-c-menu__item"
1402
+ type="button"
1403
+ role="menuitem"
1404
+ >
1405
+ <span class="pf-c-menu__item-main">
1406
+ <span class="pf-c-menu__item-text">Download</span>
1407
+ </span>
1408
+ </button>
1409
+ </li>
1410
+ <li class="pf-c-menu__list-item" role="none">
1411
+ <button
1412
+ class="pf-c-menu__item"
1413
+ type="button"
1414
+ role="menuitem"
1415
+ >
1416
+ <span class="pf-c-menu__item-main">
1417
+ <span class="pf-c-menu__item-text">Full screen</span>
1418
+ </span>
1419
+ </button>
1420
+ </li>
1421
+ </ul>
1422
+ </div>
1423
+ </div>
1424
+ </div>
1425
+ </div>
1426
+ <div
1427
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-hidden pf-m-visible-on-lg"
1428
+ >
1429
+ <div class="pf-c-toolbar__item">
1430
+ <button class="pf-c-button pf-m-link" type="button">Clear log</button>
1431
+ </div>
1432
+ <div class="pf-c-toolbar__item">
1433
+ <div class="pf-c-dropdown">
1434
+ <button
1435
+ class="pf-c-dropdown__toggle pf-m-plain"
1436
+ id="log-viewer-line-number-chars-example-settings-dropdown-button"
1437
+ aria-expanded="false"
1438
+ type="button"
1439
+ aria-label="Settings"
1440
+ >
1441
+ <i class="fas fa-cog" aria-hidden="true"></i>
1442
+ </button>
1443
+ <ul
1444
+ class="pf-c-dropdown__menu pf-m-align-right"
1445
+ aria-labelledby="log-viewer-line-number-chars-example-settings-dropdown-button"
1446
+ hidden
1447
+ >
1448
+ <li>
1449
+ <div class="pf-c-dropdown__menu-item">
1450
+ <label
1451
+ class="pf-c-check"
1452
+ for="log-viewer-line-number-chars-example-check-wrap-lines"
1453
+ >
1454
+ <input
1455
+ class="pf-c-check__input"
1456
+ type="checkbox"
1457
+ id="log-viewer-line-number-chars-example-check-wrap-lines"
1458
+ name="log-viewer-line-number-chars-example-check-wrap-lines"
1459
+ />
1460
+
1461
+ <span class="pf-c-check__label">Wrap lines</span>
1462
+ </label>
1463
+ </div>
1464
+ </li>
1465
+ <li>
1466
+ <div class="pf-c-dropdown__menu-item">
1467
+ <label
1468
+ class="pf-c-check"
1469
+ for="log-viewer-line-number-chars-example-check-show-timestamps"
1470
+ >
1471
+ <input
1472
+ class="pf-c-check__input"
1473
+ type="checkbox"
1474
+ id="log-viewer-line-number-chars-example-check-show-timestamps"
1475
+ name="log-viewer-line-number-chars-example-check-show-timestamps"
1476
+ />
1477
+
1478
+ <span class="pf-c-check__label">Show timestamps</span>
1479
+ </label>
1480
+ </div>
1481
+ </li>
1482
+ <li>
1483
+ <div class="pf-c-dropdown__menu-item">
1484
+ <label
1485
+ class="pf-c-check"
1486
+ for="log-viewer-line-number-chars-example-check-line-number"
1487
+ >
1488
+ <input
1489
+ class="pf-c-check__input"
1490
+ type="checkbox"
1491
+ id="log-viewer-line-number-chars-example-check-line-number"
1492
+ name="log-viewer-line-number-chars-example-check-line-number"
1493
+ />
1494
+
1495
+ <span class="pf-c-check__label">Display line number</span>
1496
+ </label>
1497
+ </div>
1498
+ </li>
1499
+ </ul>
1500
+ </div>
1501
+ </div>
1502
+ <div class="pf-c-toolbar__item">
1503
+ <button
1504
+ class="pf-c-button pf-m-plain"
1505
+ type="button"
1506
+ aria-label="Open external link"
1507
+ >
1508
+ <i class="fas fa-external-link-alt" aria-hidden="true"></i>
1509
+ </button>
1510
+ </div>
1511
+ <div class="pf-c-toolbar__item">
1512
+ <button
1513
+ class="pf-c-button pf-m-plain"
1514
+ type="button"
1515
+ aria-label="Download"
1516
+ >
1517
+ <i class="fas fa-download" aria-hidden="true"></i>
1518
+ </button>
1519
+ </div>
1520
+ <div class="pf-c-toolbar__item">
1521
+ <button
1522
+ class="pf-c-button pf-m-plain"
1523
+ type="button"
1524
+ aria-label="Full screen"
1525
+ >
1526
+ <i class="fas fa-expand" aria-hidden="true"></i>
1527
+ </button>
1528
+ </div>
1529
+ </div>
1530
+ </div>
1531
+ <div
1532
+ class="pf-c-toolbar__expandable-content pf-m-hidden"
1533
+ id="log-viewer-line-number-chars-example-toolbar-expandable-content"
1534
+ hidden
1535
+ >
1536
+ <div
1537
+ class="pf-c-toolbar__item pf-m-search-filter"
1538
+ style="--pf-c-toolbar__item--Width: 24ch"
1539
+ >
1540
+ <div class="pf-c-search-input">
1541
+ <div class="pf-c-search-input__bar">
1542
+ <span class="pf-c-search-input__text">
1543
+ <span class="pf-c-search-input__icon">
1544
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1545
+ </span>
1546
+ <input
1547
+ class="pf-c-search-input__text-input"
1548
+ type="text"
1549
+ placeholder="Find"
1550
+ aria-label="Find"
1551
+ />
1552
+ </span>
1553
+ </div>
1554
+ </div>
1555
+ </div>
1556
+ </div>
1557
+ </div>
1558
+ </div>
1559
+ </div>
1560
+ <div class="pf-c-log-viewer__main" role="log">
1561
+ <div class="pf-c-log-viewer__scroll-container" tabindex="0">
1562
+ <!--prettyhtml-ignore-start-->
1563
+ <div class="pf-c-log-viewer__list" style="--pf-c-log-viewer__list--Height: 301080px;">
1564
+ <div class="pf-c-log-viewer__list-item" style="top: 0px;">
1565
+ <span class="pf-c-log-viewer__index">1</span>
1566
+ <span class="pf-c-log-viewer__text">Copying system trust bundle</span>
1567
+ </div>
1568
+ <div class="pf-c-log-viewer__list-item" style="top: 21px;">
1569
+ <span class="pf-c-log-viewer__index">2</span>
1570
+ <span
1571
+ class="pf-c-log-viewer__text"
1572
+ >Waiting for port :6443 to be released.</span>
1573
+ </div>
1574
+ <div class="pf-c-log-viewer__list-item" style="top: 42px;">
1575
+ <span class="pf-c-log-viewer__index">3</span>
1576
+ <span
1577
+ class="pf-c-log-viewer__text"
1578
+ >I0223 20:04:25.084507 1 loader.go:379] Config loaded from file: /etc/kubernetes/static-pod-resources/configmaps/kube-apiserver-cert-syncer-kubeconfig/kubeconfig</span>
1579
+ </div>
1580
+ <div class="pf-c-log-viewer__list-item" style="top: 84px;">
1581
+ <span class="pf-c-log-viewer__index">4</span>
1582
+ <span
1583
+ class="pf-c-log-viewer__text"
1584
+ >Copying termination logs to "/var/log/kube-apiserver/termination.log"</span>
1585
+ </div>
1586
+ <div class="pf-c-log-viewer__list-item" style="top: 105px;">
1587
+ <span class="pf-c-log-viewer__index">5</span>
1588
+ <span
1589
+ class="pf-c-log-viewer__text"
1590
+ >I0223 20:04:25.087543 1 main.go:124] Touching termination lock file "/var/log/kube-apiserver/.terminating"</span>
1591
+ </div>
1592
+ <div class="pf-c-log-viewer__list-item" style="top: 147px;">
1593
+ <span class="pf-c-log-viewer__index">6</span>
1594
+ <span
1595
+ class="pf-c-log-viewer__text"
1596
+ >I0223 20:04:25.088797 1 main.go:182] Launching sub-process "/usr/bin/hyperkube kube-apiserver --openshift-config=/etc/kubernetes/static-pod-resources/configmaps/config/config.yaml --advertise-address=10.0.171.12 -v=2"</span>
1597
+ </div>
1598
+ <div class="pf-c-log-viewer__list-item" style="top: 210px;">
1599
+ <span class="pf-c-log-viewer__index">7</span>
1600
+ <span
1601
+ class="pf-c-log-viewer__text"
1602
+ >Flag --openshift-config has been deprecated, to be removed</span>
1603
+ </div>
1604
+ <div class="pf-c-log-viewer__list-item" style="top: 231px;">
1605
+ <span class="pf-c-log-viewer__index">8</span>
1606
+ <span
1607
+ class="pf-c-log-viewer__text"
1608
+ >I0223 20:04:25.238681 17 plugins.go:84] Registered admission plugin "authorization.openshift.io/RestrictSubjectBindings"</span>
1609
+ </div>
1610
+ <div class="pf-c-log-viewer__list-item" style="top: 273px;">
1611
+ <span class="pf-c-log-viewer__index">9</span>
1612
+ <span
1613
+ class="pf-c-log-viewer__text"
1614
+ >I0223 20:04:25.238763 17 plugins.go:84] Registered admission plugin "image.openshift.io/ImagePolicy"</span>
1615
+ </div>
1616
+ <div class="pf-c-log-viewer__list-item" style="top: 315px;">
1617
+ <span class="pf-c-log-viewer__index">10</span>
1618
+ <span
1619
+ class="pf-c-log-viewer__text"
1620
+ >I0223 20:04:25.238775 17 plugins.go:84] Registered admission plugin "route.openshift.io/IngressAdmission"</span>
1621
+ </div>
1622
+ <div class="pf-c-log-viewer__list-item" style="top: 357px;">
1623
+ <span class="pf-c-log-viewer__index">11</span>
1624
+ <span
1625
+ class="pf-c-log-viewer__text"
1626
+ >I0223 20:04:25.238783 17 plugins.go:84] Registered admission plugin "scheduling.openshift.io/OriginPodNodeEnvironment"</span>
1627
+ </div>
1628
+ <div class="pf-c-log-viewer__list-item" style="top: 399px;">
1629
+ <span class="pf-c-log-viewer__index">12</span>
1630
+ <span
1631
+ class="pf-c-log-viewer__text"
1632
+ >I0223 20:04:25.238792 17 plugins.go:84] Registered admission plugin "autoscaling.openshift.io/ClusterResourceOverride"</span>
1633
+ </div>
1634
+ <div class="pf-c-log-viewer__list-item" style="top: 441px;">
1635
+ <span class="pf-c-log-viewer__index">13</span>
1636
+ <span
1637
+ class="pf-c-log-viewer__text"
1638
+ >I0223 20:04:25.238801 17 plugins.go:84] Registered admission plugin "quota.openshift.io/ClusterResourceQuota"</span>
1639
+ </div>
1640
+ <div class="pf-c-log-viewer__list-item" style="top: 483px;">
1641
+ <span class="pf-c-log-viewer__index">14</span>
1642
+ <span
1643
+ class="pf-c-log-viewer__text"
1644
+ >I0223 20:04:25.238810 17 plugins.go:84] Registered admission plugin "autoscaling.openshift.io/RunOnceDuration"</span>
1645
+ </div>
1646
+ <div class="pf-c-log-viewer__list-item" style="top: 525px;">
1647
+ <span class="pf-c-log-viewer__index">15</span>
1648
+ <span
1649
+ class="pf-c-log-viewer__text"
1650
+ >I0223 20:04:25.238819 17 plugins.go:84] Registered admission plugin "scheduling.openshift.io/PodNodeConstraints"</span>
1651
+ </div>
1652
+ </div>
1653
+ <!--prettyhtml-ignore-end-->
1654
+ </div>
1655
+ </div>
1656
+ </div>
1657
+
1658
+ ```
1659
+
1110
1660
  ### With text wrapping
1111
1661
 
1112
1662
  ```html
@@ -5169,7 +5719,9 @@ cssPrefix: pf-c-log-viewer
5169
5719
  | `.pf-m-wrap-text` | `.pf-c-log-viewer` | Modifies the log viewer text to wrap. |
5170
5720
  | `.pf-m-nowrap` | `.pf-c-log-viewer` | Modifies the log viewer text to not wrap. |
5171
5721
  | `.pf-m-line-numbers` | `.pf-c-log-viewer` | Modifies the log viewer to display line numbers. |
5722
+ | `.pf-m-line-number-chars` | `.pf-c-log-viewer` | Modifies the log viewer allow for a custom line number column size. Use with `--pf-c-log-viewer--line-number-chars`. |
5172
5723
  | `.pf-m-dark` | `.pf-c-log-viewer` | Modifies the log viewer content for dark theme. |
5173
5724
  | `.pf-m-match` | `.pf-c-log-viewer__string` | Indicates a string is a search result. |
5174
5725
  | `.pf-m-current` | `.pf-c-log-viewer__string` | Indicates a string is the current search result. |
5726
+ | `--pf-c-log-viewer--line-number-chars` | `.pf-c-log-viewer` | With a number passed as the value, modifies the width of the line number column to show the specified number of characters. |
5175
5727
  | `--pf-c-log-viewer--MaxHeight{-on-[breakpoint]}: {height}` | `.pf-c-log-viewer` | Modifies the height value of a log viewer at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
@@ -7,12 +7,17 @@ cssPrefix: pf-c-tab-content
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <section class="pf-c-tab-content" id="tab1-panel" role="tabpanel" tabindex="0">
10
+ <section
11
+ class="pf-c-tab-content"
12
+ id="basic-tab1-panel"
13
+ role="tabpanel"
14
+ tabindex="0"
15
+ >
11
16
  <div class="pf-c-tab-content__body">Panel 1</div>
12
17
  </section>
13
18
  <section
14
19
  class="pf-c-tab-content"
15
- id="tab2-panel"
20
+ id="basic-tab2-panel"
16
21
  role="tabpanel"
17
22
  tabindex="0"
18
23
  hidden
@@ -21,7 +26,7 @@ cssPrefix: pf-c-tab-content
21
26
  </section>
22
27
  <section
23
28
  class="pf-c-tab-content"
24
- id="tab3-panel"
29
+ id="basic-tab3-panel"
25
30
  role="tabpanel"
26
31
  tabindex="0"
27
32
  hidden
@@ -30,7 +35,7 @@ cssPrefix: pf-c-tab-content
30
35
  </section>
31
36
  <section
32
37
  class="pf-c-tab-content"
33
- id="tab4-panel"
38
+ id="basic-tab4-panel"
34
39
  role="tabpanel"
35
40
  tabindex="0"
36
41
  hidden
@@ -43,12 +48,17 @@ cssPrefix: pf-c-tab-content
43
48
  ### Padding
44
49
 
45
50
  ```html
46
- <section class="pf-c-tab-content" id="tab1-panel" role="tabpanel" tabindex="0">
51
+ <section
52
+ class="pf-c-tab-content"
53
+ id="tab1-panel-with-padding"
54
+ role="tabpanel"
55
+ tabindex="0"
56
+ >
47
57
  <div class="pf-c-tab-content__body pf-m-padding">Panel 1</div>
48
58
  </section>
49
59
  <section
50
60
  class="pf-c-tab-content"
51
- id="tab2-panel"
61
+ id="tab2-panel-with-padding"
52
62
  role="tabpanel"
53
63
  tabindex="0"
54
64
  hidden
@@ -57,7 +67,7 @@ cssPrefix: pf-c-tab-content
57
67
  </section>
58
68
  <section
59
69
  class="pf-c-tab-content"
60
- id="tab3-panel"
70
+ id="tab3-panel-with-padding"
61
71
  role="tabpanel"
62
72
  tabindex="0"
63
73
  hidden
@@ -66,7 +76,7 @@ cssPrefix: pf-c-tab-content
66
76
  </section>
67
77
  <section
68
78
  class="pf-c-tab-content"
69
- id="tab4-panel"
79
+ id="tab4-panel-with-padding"
70
80
  role="tabpanel"
71
81
  tabindex="0"
72
82
  hidden
@@ -89,7 +99,7 @@ cssPrefix: pf-c-tab-content
89
99
  </section>
90
100
  <section
91
101
  class="pf-c-tab-content pf-m-light-300"
92
- id="tab2-panel"
102
+ id="light-300-tab2-panel"
93
103
  role="tabpanel"
94
104
  tabindex="0"
95
105
  hidden
@@ -98,7 +108,7 @@ cssPrefix: pf-c-tab-content
98
108
  </section>
99
109
  <section
100
110
  class="pf-c-tab-content pf-m-light-300"
101
- id="tab3-panel"
111
+ id="light-300-tab3-panel"
102
112
  role="tabpanel"
103
113
  tabindex="0"
104
114
  hidden
@@ -107,7 +117,7 @@ cssPrefix: pf-c-tab-content
107
117
  </section>
108
118
  <section
109
119
  class="pf-c-tab-content pf-m-light-300"
110
- id="tab4-panel"
120
+ id="light-300-tab4-panel"
111
121
  role="tabpanel"
112
122
  tabindex="0"
113
123
  hidden