@patternfly/react-core 4.222.5 → 4.222.6

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 (26) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-core.css +69 -1
  3. package/dist/umd/react-core.min.css +69 -1
  4. package/package.json +6 -6
  5. package/src/components/JumpLinks/examples/JumpLinks.md +6 -69
  6. package/src/components/JumpLinks/examples/JumpLinksBasic.tsx +10 -0
  7. package/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx +18 -0
  8. package/src/components/JumpLinks/examples/JumpLinksVertical.tsx +10 -0
  9. package/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx +10 -0
  10. package/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx +10 -0
  11. package/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx +17 -0
  12. package/src/components/LabelGroup/examples/LabelGroup.md +6 -172
  13. package/src/components/LabelGroup/examples/LabelGroupBasic.tsx +15 -0
  14. package/src/components/LabelGroup/examples/LabelGroupCategory.tsx +15 -0
  15. package/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx +24 -0
  16. package/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx +53 -0
  17. package/src/components/LabelGroup/examples/LabelGroupOverflow.tsx +24 -0
  18. package/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx +24 -0
  19. package/src/components/List/examples/List.md +10 -72
  20. package/src/components/List/examples/ListBasic.tsx +10 -0
  21. package/src/components/List/examples/ListHorizontalRules.tsx +10 -0
  22. package/src/components/List/examples/ListIcons.tsx +13 -0
  23. package/src/components/List/examples/ListInline.tsx +10 -0
  24. package/src/components/List/examples/ListLargeIcons.tsx +13 -0
  25. package/src/components/List/examples/ListOrdered.tsx +10 -0
  26. package/src/components/List/examples/ListPlain.tsx +10 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.222.6 (2022-06-16)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-core
9
+
10
+
11
+
12
+
13
+
6
14
  ## 4.222.5 (2022-06-15)
7
15
 
8
16
  **Note:** Version bump only for package @patternfly/react-core
package/dist/umd/react-core.css CHANGED
@@ -7226,7 +7226,8 @@ label.pf-c-check, .pf-c-check__label,
7226
7226
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
7227
7227
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
7228
7228
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
7229
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
7229
+ --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
7230
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7230
7231
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
7231
7232
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
7232
7233
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -7234,6 +7235,18 @@ label.pf-c-check, .pf-c-check__label,
7234
7235
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
7235
7236
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
7236
7237
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
7238
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
7239
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
7240
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
7241
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
7242
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
7243
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
7244
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
7245
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
7246
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
7247
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
7248
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
7249
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
7237
7250
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
7238
7251
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
7239
7252
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -7338,6 +7351,7 @@ label.pf-c-check, .pf-c-check__label,
7338
7351
 
7339
7352
  .pf-c-dropdown.pf-m-expanded {
7340
7353
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
7354
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
7341
7355
  }
7342
7356
 
7343
7357
  .pf-c-dropdown__toggle {
@@ -7589,6 +7603,60 @@ label.pf-c-check, .pf-c-check__label,
7589
7603
  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
7590
7604
  }
7591
7605
 
7606
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
7607
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
7608
+ }
7609
+
7610
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
7611
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
7612
+ }
7613
+
7614
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
7615
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
7616
+ }
7617
+
7618
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
7619
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
7620
+ }
7621
+
7622
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
7623
+ border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
7624
+ }
7625
+
7626
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
7627
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
7628
+ }
7629
+
7630
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
7631
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
7632
+ }
7633
+
7634
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
7635
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
7636
+ }
7637
+
7638
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
7639
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7640
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7641
+ }
7642
+
7643
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
7644
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7645
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7646
+ }
7647
+
7648
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
7649
+ border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
7650
+ }
7651
+
7652
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
7653
+ border-right: 0;
7654
+ }
7655
+
7656
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
7657
+ border: 0;
7658
+ }
7659
+
7592
7660
  .pf-c-dropdown__toggle > .pf-c-badge {
7593
7661
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
7594
7662
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
package/dist/umd/react-core.min.css CHANGED
@@ -7226,7 +7226,8 @@ label.pf-c-check, .pf-c-check__label,
7226
7226
  --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
7227
7227
  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
7228
7228
  --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
7229
- --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
7229
+ --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
7230
+ --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7230
7231
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
7231
7232
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
7232
7233
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -7234,6 +7235,18 @@ label.pf-c-check, .pf-c-check__label,
7234
7235
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
7235
7236
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
7236
7237
  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
7238
+ --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
7239
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
7240
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
7241
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
7242
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
7243
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
7244
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
7245
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
7246
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
7247
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
7248
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
7249
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
7237
7250
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
7238
7251
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
7239
7252
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -7338,6 +7351,7 @@ label.pf-c-check, .pf-c-check__label,
7338
7351
 
7339
7352
  .pf-c-dropdown.pf-m-expanded {
7340
7353
  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
7354
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
7341
7355
  }
7342
7356
 
7343
7357
  .pf-c-dropdown__toggle {
@@ -7589,6 +7603,60 @@ label.pf-c-check, .pf-c-check__label,
7589
7603
  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
7590
7604
  }
7591
7605
 
7606
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
7607
+ --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
7608
+ }
7609
+
7610
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
7611
+ --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
7612
+ }
7613
+
7614
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
7615
+ --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
7616
+ }
7617
+
7618
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
7619
+ --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
7620
+ }
7621
+
7622
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
7623
+ border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
7624
+ }
7625
+
7626
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
7627
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
7628
+ }
7629
+
7630
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
7631
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
7632
+ }
7633
+
7634
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
7635
+ --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
7636
+ }
7637
+
7638
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
7639
+ border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7640
+ border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7641
+ }
7642
+
7643
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
7644
+ border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7645
+ border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
7646
+ }
7647
+
7648
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
7649
+ border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
7650
+ }
7651
+
7652
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
7653
+ border-right: 0;
7654
+ }
7655
+
7656
+ .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
7657
+ border: 0;
7658
+ }
7659
+
7592
7660
  .pf-c-dropdown__toggle > .pf-c-badge {
7593
7661
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
7594
7662
  --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-core",
3
- "version": "4.222.5",
3
+ "version": "4.222.6",
4
4
  "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
5
5
  "main": "dist/js/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -34,16 +34,16 @@
34
34
  "generate": "node scripts/copyStyles.js"
35
35
  },
36
36
  "dependencies": {
37
- "@patternfly/react-icons": "^4.73.5",
38
- "@patternfly/react-styles": "^4.72.5",
39
- "@patternfly/react-tokens": "^4.74.5",
37
+ "@patternfly/react-icons": "^4.73.6",
38
+ "@patternfly/react-styles": "^4.72.6",
39
+ "@patternfly/react-tokens": "^4.74.6",
40
40
  "focus-trap": "6.9.2",
41
41
  "react-dropzone": "9.0.0",
42
42
  "tippy.js": "5.1.2",
43
43
  "tslib": "^2.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@patternfly/patternfly": "4.196.8",
46
+ "@patternfly/patternfly": "4.197.0",
47
47
  "@rollup/plugin-commonjs": "^21.0.0",
48
48
  "@rollup/plugin-node-resolve": "^13.0.0",
49
49
  "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
60
60
  "react": "^16.8.0 || ^17.0.0",
61
61
  "react-dom": "^16.8.0 || ^17.0.0"
62
62
  },
63
- "gitHead": "5e748b4b49ef95edbf3bf15eb0684724f416f6c3"
63
+ "gitHead": "0868d0b8861099a69df12165a69587cb0a8f5762"
64
64
  }
package/src/components/JumpLinks/examples/JumpLinks.md CHANGED
@@ -9,89 +9,26 @@ propComponents: ['JumpLinks', 'JumpLinksItem']
9
9
  These examples are static because they have no element to scroll spy on that makes sense. Check out the [React demos](./react-demos) to see scroll spying in action!
10
10
 
11
11
  ### Basic
12
- ```js
13
- import React from 'react';
14
- import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
15
-
16
- <JumpLinks>
17
- <JumpLinksItem>Inactive section</JumpLinksItem>
18
- <JumpLinksItem isActive>Active section</JumpLinksItem>
19
- <JumpLinksItem>Inactive section</JumpLinksItem>
20
- </JumpLinks>
12
+ ```ts file='./JumpLinksBasic.tsx'
21
13
  ```
22
14
 
23
15
  ### With centered list
24
- ```js
25
- import React from 'react';
26
- import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
27
-
28
- <JumpLinks isCentered>
29
- <JumpLinksItem>Inactive section</JumpLinksItem>
30
- <JumpLinksItem isActive>Active section</JumpLinksItem>
31
- <JumpLinksItem>Inactive section</JumpLinksItem>
32
- </JumpLinks>
16
+ ```ts file='./JumpLinksWithCenteredList.tsx'
33
17
  ```
34
18
 
35
19
  ### With label
36
- ```js
37
- import React from 'react';
38
- import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
39
-
40
- <React.Fragment>
41
- <JumpLinks label="Jump to section">
42
- <JumpLinksItem>Inactive section</JumpLinksItem>
43
- <JumpLinksItem isActive>Active section</JumpLinksItem>
44
- <JumpLinksItem>Inactive section</JumpLinksItem>
45
- </JumpLinks>
46
- <JumpLinks isCentered label="Jump to section">
47
- <JumpLinksItem>Inactive section</JumpLinksItem>
48
- <JumpLinksItem isActive>Active section</JumpLinksItem>
49
- <JumpLinksItem>Inactive section</JumpLinksItem>
50
- </JumpLinks>
51
- </React.Fragment>
20
+ ```ts file='./JumpLinksWithLabel.tsx'
52
21
  ```
53
22
 
54
23
  ### Vertical
55
- ```js
56
- import React from 'react';
57
- import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
58
-
59
- <JumpLinks isVertical>
60
- <JumpLinksItem>Inactive section</JumpLinksItem>
61
- <JumpLinksItem isActive>Active section</JumpLinksItem>
62
- <JumpLinksItem>Inactive section</JumpLinksItem>
63
- </JumpLinks>
24
+ ```ts file='./JumpLinksVertical.tsx'
64
25
  ```
65
26
 
66
27
  ### Vertical with label
67
- ```js
68
- import React from 'react';
69
- import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
70
-
71
- <JumpLinks isVertical label="Jump to section">
72
- <JumpLinksItem>Inactive section</JumpLinksItem>
73
- <JumpLinksItem isActive>Active section</JumpLinksItem>
74
- <JumpLinksItem>Inactive section</JumpLinksItem>
75
- </JumpLinks>
28
+ ```ts file='./JumpLinksVerticalWithLabel.tsx'
76
29
  ```
77
30
 
78
31
  ### Expandable vertical with subsection
79
- ```js
80
- import React from 'react';
81
- import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
82
-
83
- <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
84
- <JumpLinksItem>Inactive section</JumpLinksItem>
85
- <JumpLinksItem>
86
- Section with active subsection
87
- <JumpLinksList>
88
- <JumpLinksItem isActive>Active subsection</JumpLinksItem>
89
- <JumpLinksItem>Inactive subsection</JumpLinksItem>
90
- <JumpLinksItem>Inactive subsection</JumpLinksItem>
91
- </JumpLinksList>
92
- </JumpLinksItem>
93
- <JumpLinksItem>Inactive section</JumpLinksItem>
94
- <JumpLinksItem>Inactive section</JumpLinksItem>
95
- </JumpLinks>
32
+ ```ts file='./JumpLinksExpandableVerticalWithSubsection.tsx'
96
33
  ```
97
34
 
package/src/components/JumpLinks/examples/JumpLinksBasic.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
3
+
4
+ export const JumpLinksBasic: React.FunctionComponent = () => (
5
+ <JumpLinks>
6
+ <JumpLinksItem>Inactive section</JumpLinksItem>
7
+ <JumpLinksItem isActive>Active section</JumpLinksItem>
8
+ <JumpLinksItem>Inactive section</JumpLinksItem>
9
+ </JumpLinks>
10
+ );
package/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
3
+
4
+ export const JumpLinksExpandableVerticalWithSubsection: React.FunctionComponent = () => (
5
+ <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
6
+ <JumpLinksItem>Inactive section</JumpLinksItem>
7
+ <JumpLinksItem>
8
+ Section with active subsection
9
+ <JumpLinksList>
10
+ <JumpLinksItem isActive>Active subsection</JumpLinksItem>
11
+ <JumpLinksItem>Inactive subsection</JumpLinksItem>
12
+ <JumpLinksItem>Inactive subsection</JumpLinksItem>
13
+ </JumpLinksList>
14
+ </JumpLinksItem>
15
+ <JumpLinksItem>Inactive section</JumpLinksItem>
16
+ <JumpLinksItem>Inactive section</JumpLinksItem>
17
+ </JumpLinks>
18
+ );
package/src/components/JumpLinks/examples/JumpLinksVertical.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
3
+
4
+ export const JumpLinksVertical: React.FunctionComponent = () => (
5
+ <JumpLinks isVertical>
6
+ <JumpLinksItem>Inactive section</JumpLinksItem>
7
+ <JumpLinksItem isActive>Active section</JumpLinksItem>
8
+ <JumpLinksItem>Inactive section</JumpLinksItem>
9
+ </JumpLinks>
10
+ );
package/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
3
+
4
+ export const JumpLinksVerticalWithLabel: React.FunctionComponent = () => (
5
+ <JumpLinks isVertical label="Jump to section">
6
+ <JumpLinksItem>Inactive section</JumpLinksItem>
7
+ <JumpLinksItem isActive>Active section</JumpLinksItem>
8
+ <JumpLinksItem>Inactive section</JumpLinksItem>
9
+ </JumpLinks>
10
+ );
package/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
3
+
4
+ export const JumpLinksWithCenteredList: React.FunctionComponent = () => (
5
+ <JumpLinks isCentered>
6
+ <JumpLinksItem>Inactive section</JumpLinksItem>
7
+ <JumpLinksItem isActive>Active section</JumpLinksItem>
8
+ <JumpLinksItem>Inactive section</JumpLinksItem>
9
+ </JumpLinks>
10
+ );
package/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
3
+
4
+ export const JumpLinksWithLabel: React.FunctionComponent = () => (
5
+ <>
6
+ <JumpLinks label="Jump to section">
7
+ <JumpLinksItem>Inactive section</JumpLinksItem>
8
+ <JumpLinksItem isActive>Active section</JumpLinksItem>
9
+ <JumpLinksItem>Inactive section</JumpLinksItem>
10
+ </JumpLinks>
11
+ <JumpLinks isCentered label="Jump to section">
12
+ <JumpLinksItem>Inactive section</JumpLinksItem>
13
+ <JumpLinksItem isActive>Active section</JumpLinksItem>
14
+ <JumpLinksItem>Inactive section</JumpLinksItem>
15
+ </JumpLinks>
16
+ </>
17
+ );
package/src/components/LabelGroup/examples/LabelGroup.md CHANGED
@@ -13,196 +13,30 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
13
13
 
14
14
  ### Basic
15
15
 
16
- ```js
17
- import React from 'react';
18
- import { Label, LabelGroup } from '@patternfly/react-core';
19
- import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
20
-
21
- <LabelGroup>
22
- <Label icon={<InfoCircleIcon />}>Label 1</Label>
23
- <Label icon={<InfoCircleIcon />} color="blue">
24
- Label 2
25
- </Label>
26
- <Label icon={<InfoCircleIcon />} color="green">
27
- Label 3
28
- </Label>
29
- </LabelGroup>;
16
+ ```ts file="LabelGroupBasic.tsx"
30
17
  ```
31
18
 
32
19
  ### Overflow
33
20
 
34
- ```js
35
- import React from 'react';
36
- import { Label, LabelGroup } from '@patternfly/react-core';
37
- import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
38
-
39
- <LabelGroup>
40
- <Label icon={<InfoCircleIcon />}>Label 1</Label>
41
- <Label icon={<InfoCircleIcon />} color="blue">
42
- Label 2
43
- </Label>
44
- <Label icon={<InfoCircleIcon />} color="green">
45
- Label 3
46
- </Label>
47
- <Label icon={<InfoCircleIcon />} color="orange">
48
- Label 4
49
- </Label>
50
- <Label icon={<InfoCircleIcon />} color="red">
51
- Label 5
52
- </Label>
53
- <Label icon={<InfoCircleIcon />} color="purple">
54
- Label 6
55
- </Label>
56
- </LabelGroup>;
21
+ ```ts file="LabelGroupOverflow.tsx"
57
22
  ```
58
23
 
59
24
  ### Category
60
25
 
61
- ```js
62
- import React from 'react';
63
- import { Label, LabelGroup } from '@patternfly/react-core';
64
- import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
65
-
66
- <LabelGroup categoryName="Group label">
67
- <Label icon={<InfoCircleIcon />}>Label 1</Label>
68
- <Label icon={<InfoCircleIcon />} color="blue">
69
- Label 2
70
- </Label>
71
- <Label icon={<InfoCircleIcon />} color="green">
72
- Label 3
73
- </Label>
74
- </LabelGroup>;
26
+ ```ts file="LabelGroupCategory.tsx"
75
27
  ```
76
28
 
77
29
  ### Category removable
78
30
 
79
- ```js
80
- import React from 'react';
81
- import { Label, LabelGroup } from '@patternfly/react-core';
82
- import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
83
-
84
- CategoryLabelGroupRemovable = () => {
85
- const [labels, setLabels] = React.useState([
86
- ['Label 1', 'grey'],
87
- ['Label 2', 'blue'],
88
- ['Label 3', 'green'],
89
- ['Label 4', 'orange'],
90
- ['Label 5', 'red']
91
- ]);
92
- const deleteCategory = () => setLabels([]);
93
-
94
- return (
95
- <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
96
- {labels.map(([labelText, labelColor]) => (
97
- <Label icon={<InfoCircleIcon />} color={labelColor} key={labelText}>
98
- {labelText}
99
- </Label>
100
- ))}
101
- </LabelGroup>
102
- );
103
- };
31
+ ```ts file="LabelGroupCategoryRemovable.tsx"
104
32
  ```
105
33
 
106
34
  ### Vertical category overflow removable
107
35
 
108
- ```js
109
- import React from 'react';
110
- import { Label, LabelGroup } from '@patternfly/react-core';
111
- import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
112
-
113
- VerticalCategoryLabelGroupOverflowRemovable = () => {
114
- const [labels, setLabels] = React.useState([
115
- ['Label 1', 'grey'],
116
- ['Label 2', 'blue'],
117
- ['Label 3', 'green'],
118
- ['Label 4', 'orange'],
119
- ['Label 5', 'red']
120
- ]);
121
- const deleteCategory = () => setLabels([]);
122
-
123
- return (
124
- <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
125
- {labels.map(([labelText, labelColor]) => (
126
- <Label icon={<InfoCircleIcon />} color={labelColor} key={labelText}>
127
- {labelText}
128
- </Label>
129
- ))}
130
- </LabelGroup>
131
- );
132
- };
36
+ ```ts file="LabelGroupVerticalCategoryOverflowRemovable.tsx"
133
37
  ```
134
38
 
135
39
  ### Editable labels
136
40
 
137
- ```js isBeta
138
- import React from 'react';
139
- import { LabelGroup, Label, TextArea } from '@patternfly/react-core';
140
-
141
- class EditableLabelGroup extends React.Component {
142
- constructor(props) {
143
- super(props);
144
- this.state = {
145
- label1: 'Editable label',
146
- label2: 'Editable label 2',
147
- label3: 'Editable label 3'
148
- };
149
- this.onEditCancel = (prevText, label) => {
150
- this.setState({
151
- [label]: prevText
152
- });
153
- };
154
- this.onEditComplete = (newText, label) => {
155
- this.setState({
156
- [label]: newText
157
- });
158
- };
159
- }
160
-
161
- render() {
162
- return (
163
- <LabelGroup numLabels={5} isEditable>
164
- <Label
165
- color="blue"
166
- onClose={Function.prototype}
167
- onEditCancel={prevText => this.onEditCancel(prevText, 'label1')}
168
- onEditComplete={newText => this.onEditComplete(newText, 'label1')}
169
- isEditable
170
- editableProps={{
171
- 'aria-label': 'Editable text',
172
- id: 'editable-label-1'
173
- }}
174
- >
175
- {this.state.label1}
176
- </Label>
177
- <Label color="green">Static label</Label>
178
- <Label
179
- color="blue"
180
- onClose={Function.prototype}
181
- onEditCancel={prevText => this.onEditCancel(prevText, 'label2')}
182
- onEditComplete={newText => this.onEditComplete(newText, 'label2')}
183
- isEditable
184
- editableProps={{
185
- 'aria-label': 'Editable text 2',
186
- id: 'editable-label-2'
187
- }}
188
- >
189
- {this.state.label2}
190
- </Label>
191
- <Label
192
- color="blue"
193
- onClose={Function.prototype}
194
- onEditCancel={prevText => this.onEditCancel(prevText, 'label3')}
195
- onEditComplete={newText => this.onEditComplete(newText, 'label3')}
196
- isEditable
197
- editableProps={{
198
- 'aria-label': 'Editable text 3',
199
- id: 'editable-label-3'
200
- }}
201
- >
202
- {this.state.label3}
203
- </Label>
204
- </LabelGroup>
205
- );
206
- }
207
- }
41
+ ```ts file="LabelGroupEditableLabels.tsx" isBeta
208
42
  ```
package/src/components/LabelGroup/examples/LabelGroupBasic.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { Label, LabelGroup } from '@patternfly/react-core';
3
+ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
4
+
5
+ export const LabelGroupBasic: React.FunctionComponent = () => (
6
+ <LabelGroup>
7
+ <Label icon={<InfoCircleIcon />}>Label 1</Label>
8
+ <Label icon={<InfoCircleIcon />} color="blue">
9
+ Label 2
10
+ </Label>
11
+ <Label icon={<InfoCircleIcon />} color="green">
12
+ Label 3
13
+ </Label>
14
+ </LabelGroup>
15
+ );
package/src/components/LabelGroup/examples/LabelGroupCategory.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { Label, LabelGroup } from '@patternfly/react-core';
3
+ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
4
+
5
+ export const LabelGroupCategory: React.FunctionComponent = () => (
6
+ <LabelGroup categoryName="Group label">
7
+ <Label icon={<InfoCircleIcon />}>Label 1</Label>
8
+ <Label icon={<InfoCircleIcon />} color="blue">
9
+ Label 2
10
+ </Label>
11
+ <Label icon={<InfoCircleIcon />} color="green">
12
+ Label 3
13
+ </Label>
14
+ </LabelGroup>
15
+ );
package/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
3
+ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
4
+
5
+ export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
6
+ const [labels, setLabels] = React.useState([
7
+ ['Label 1', 'grey'],
8
+ ['Label 2', 'blue'],
9
+ ['Label 3', 'green'],
10
+ ['Label 4', 'orange'],
11
+ ['Label 5', 'red']
12
+ ]);
13
+ const deleteCategory = () => setLabels([]);
14
+
15
+ return (
16
+ <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
17
+ {labels.map(([labelText, labelColor]) => (
18
+ <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
19
+ {labelText}
20
+ </Label>
21
+ ))}
22
+ </LabelGroup>
23
+ );
24
+ };
package/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx ADDED
@@ -0,0 +1,53 @@
1
+ import React from 'react';
2
+ import { LabelGroup, Label } from '@patternfly/react-core';
3
+
4
+ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
5
+ const [label1, setLabel1] = React.useState('Editable label');
6
+ const [label2, setLabel2] = React.useState('Editable label 2');
7
+ const [label3, setLabel3] = React.useState('Editable label 3');
8
+
9
+ return (
10
+ <LabelGroup numLabels={5} isEditable>
11
+ <Label
12
+ color="blue"
13
+ onClose={() => Function.prototype}
14
+ onEditCancel={prevText => setLabel1(prevText)}
15
+ onEditComplete={newText => setLabel1(newText)}
16
+ isEditable
17
+ editableProps={{
18
+ 'aria-label': 'Editable text',
19
+ id: 'editable-label-1'
20
+ }}
21
+ >
22
+ {label1}
23
+ </Label>
24
+ <Label color="green">Static label</Label>
25
+ <Label
26
+ color="blue"
27
+ onClose={() => Function.prototype}
28
+ onEditCancel={prevText => setLabel2(prevText)}
29
+ onEditComplete={newText => setLabel2(newText)}
30
+ isEditable
31
+ editableProps={{
32
+ 'aria-label': 'Editable text 2',
33
+ id: 'editable-label-2'
34
+ }}
35
+ >
36
+ {label2}
37
+ </Label>
38
+ <Label
39
+ color="blue"
40
+ onClose={() => Function.prototype}
41
+ onEditCancel={prevText => setLabel3(prevText)}
42
+ onEditComplete={newText => setLabel3(newText)}
43
+ isEditable
44
+ editableProps={{
45
+ 'aria-label': 'Editable text 3',
46
+ id: 'editable-label-3'
47
+ }}
48
+ >
49
+ {label3}
50
+ </Label>
51
+ </LabelGroup>
52
+ );
53
+ };
package/src/components/LabelGroup/examples/LabelGroupOverflow.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { Label, LabelGroup } from '@patternfly/react-core';
3
+ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
4
+
5
+ export const LabelGroupOverflow: React.FunctionComponent = () => (
6
+ <LabelGroup>
7
+ <Label icon={<InfoCircleIcon />}>Label 1</Label>
8
+ <Label icon={<InfoCircleIcon />} color="blue">
9
+ Label 2
10
+ </Label>
11
+ <Label icon={<InfoCircleIcon />} color="green">
12
+ Label 3
13
+ </Label>
14
+ <Label icon={<InfoCircleIcon />} color="orange">
15
+ Label 4
16
+ </Label>
17
+ <Label icon={<InfoCircleIcon />} color="red">
18
+ Label 5
19
+ </Label>
20
+ <Label icon={<InfoCircleIcon />} color="purple">
21
+ Label 6
22
+ </Label>
23
+ </LabelGroup>
24
+ );
package/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
3
+ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
4
+
5
+ export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
6
+ const [labels, setLabels] = React.useState([
7
+ ['Label 1', 'grey'],
8
+ ['Label 2', 'blue'],
9
+ ['Label 3', 'green'],
10
+ ['Label 4', 'orange'],
11
+ ['Label 5', 'red']
12
+ ]);
13
+ const deleteCategory = () => setLabels([]);
14
+
15
+ return (
16
+ <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
17
+ {labels.map(([labelText, labelColor]) => (
18
+ <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
19
+ {labelText}
20
+ </Label>
21
+ ))}
22
+ </LabelGroup>
23
+ );
24
+ };
package/src/components/List/examples/List.md CHANGED
@@ -5,97 +5,35 @@ cssPrefix: pf-c-list
5
5
  propComponents: ['List', 'ListItem']
6
6
  ---
7
7
 
8
- import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
9
- import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
10
- import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
8
+ import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
9
+ import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
10
+ import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
11
11
 
12
12
  ## Examples
13
13
  ### Basic
14
- ```js
15
- import React from 'react';
16
- import { List, ListItem } from '@patternfly/react-core';
17
-
18
- <List>
19
- <ListItem>First</ListItem>
20
- <ListItem>Second</ListItem>
21
- <ListItem>Third</ListItem>
22
- </List>
14
+ ```ts file="./ListBasic.tsx"
23
15
  ```
24
16
 
25
17
  ### Inline
26
- ```js
27
- import React from 'react';
28
- import { List, ListItem, ListVariant } from '@patternfly/react-core';
29
-
30
- <List variant={ListVariant.inline}>
31
- <ListItem>First</ListItem>
32
- <ListItem>Second</ListItem>
33
- <ListItem>Third</ListItem>
34
- </List>
18
+ ```ts file="./ListInline.tsx"
35
19
  ```
36
20
 
37
21
  ### Ordered
38
- ```js
39
- import React from 'react';
40
- import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
41
-
42
- <List component={ListComponent.ol} type={OrderType.number}>
43
- <ListItem>First</ListItem>
44
- <ListItem>Second</ListItem>
45
- <ListItem>Third</ListItem>
46
- </List>
22
+ ```ts file="./ListOrdered.tsx"
47
23
  ```
48
24
 
49
25
  ### Plain
50
- ```js
51
- import React from 'react';
52
- import { List, ListItem } from '@patternfly/react-core';
53
-
54
- <List isPlain>
55
- <ListItem>First</ListItem>
56
- <ListItem>Second</ListItem>
57
- <ListItem>Third</ListItem>
58
- </List>
26
+ ```ts file="./ListPlain.tsx"
59
27
  ```
60
28
 
61
29
  ### With horizontal rules
62
- ```js
63
- import React from 'react';
64
- import { List, ListItem } from '@patternfly/react-core';
65
-
66
- <List isPlain isBordered>
67
- <ListItem>First</ListItem>
68
- <ListItem>Second</ListItem>
69
- <ListItem>Third</ListItem>
70
- </List>
30
+ ```ts file="./ListHorizontalRules.tsx"
71
31
  ```
72
32
 
73
33
  ### With icons
74
- ```js
75
- import React from 'react';
76
- import { List, ListItem } from '@patternfly/react-core';
77
- import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
78
- import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
79
- import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
80
-
81
- <List isPlain>
82
- <ListItem icon={<BookOpen />}>First</ListItem>
83
- <ListItem icon={<Key />}>Second</ListItem>
84
- <ListItem icon={<Desktop />}>Third</ListItem>
85
- </List>
34
+ ```ts file="./ListIcons.tsx"
86
35
  ```
87
36
 
88
37
  ### With large icons
89
- ```js
90
- import React from 'react';
91
- import { List, ListItem } from '@patternfly/react-core';
92
- import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
93
- import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
94
- import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
95
-
96
- <List isPlain iconSize="large">
97
- <ListItem icon={<BookOpen />}>First</ListItem>
98
- <ListItem icon={<Key />}>Second</ListItem>
99
- <ListItem icon={<Desktop />}>Third</ListItem>
100
- </List>
38
+ ```ts file="./ListLargeIcons.tsx"
101
39
  ```
package/src/components/List/examples/ListBasic.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { List, ListItem } from '@patternfly/react-core';
3
+
4
+ export const ListBasic: React.FunctionComponent = () => (
5
+ <List>
6
+ <ListItem>First</ListItem>
7
+ <ListItem>Second</ListItem>
8
+ <ListItem>Third</ListItem>
9
+ </List>
10
+ );
package/src/components/List/examples/ListHorizontalRules.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { List, ListItem } from '@patternfly/react-core';
3
+
4
+ export const ListHorizontalRules: React.FunctionComponent = () => (
5
+ <List isPlain isBordered>
6
+ <ListItem>First</ListItem>
7
+ <ListItem>Second</ListItem>
8
+ <ListItem>Third</ListItem>
9
+ </List>
10
+ );
package/src/components/List/examples/ListIcons.tsx ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { List, ListItem } from '@patternfly/react-core';
3
+ import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
4
+ import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
5
+ import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
6
+
7
+ export const ListIcons: React.FunctionComponent = () => (
8
+ <List isPlain>
9
+ <ListItem icon={<BookOpenIcon />}>First</ListItem>
10
+ <ListItem icon={<KeyIcon />}>Second</ListItem>
11
+ <ListItem icon={<DesktopIcon />}>Third</ListItem>
12
+ </List>
13
+ );
package/src/components/List/examples/ListInline.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { List, ListItem, ListVariant } from '@patternfly/react-core';
3
+
4
+ export const ListInline: React.FunctionComponent = () => (
5
+ <List variant={ListVariant.inline}>
6
+ <ListItem>First</ListItem>
7
+ <ListItem>Second</ListItem>
8
+ <ListItem>Third</ListItem>
9
+ </List>
10
+ );
package/src/components/List/examples/ListLargeIcons.tsx ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { List, ListItem } from '@patternfly/react-core';
3
+ import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
4
+ import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
5
+ import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
6
+
7
+ export const ListLargeIcons: React.FunctionComponent = () => (
8
+ <List isPlain iconSize="large">
9
+ <ListItem icon={<BookOpenIcon />}>First</ListItem>
10
+ <ListItem icon={<KeyIcon />}>Second</ListItem>
11
+ <ListItem icon={<DesktopIcon />}>Third</ListItem>
12
+ </List>
13
+ );
package/src/components/List/examples/ListOrdered.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
3
+
4
+ export const ListOrdered: React.FunctionComponent = () => (
5
+ <List component={ListComponent.ol} type={OrderType.number}>
6
+ <ListItem>First</ListItem>
7
+ <ListItem>Second</ListItem>
8
+ <ListItem>Third</ListItem>
9
+ </List>
10
+ );
package/src/components/List/examples/ListPlain.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { List, ListItem } from '@patternfly/react-core';
3
+
4
+ export const ListPlain: React.FunctionComponent = () => (
5
+ <List isPlain>
6
+ <ListItem>First</ListItem>
7
+ <ListItem>Second</ListItem>
8
+ <ListItem>Third</ListItem>
9
+ </List>
10
+ );