@patternfly/react-docs 5.21.41 → 5.21.45
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.
- package/CHANGELOG.md +32 -0
- package/RELEASE-NOTES.md +8 -10
- package/package.json +10 -10
- package/src/generated/components/data-list/react.js +29 -6
- package/src/generated/components/drag-and-drop/react.js +23 -0
- package/src/generated/components/navigation/react.js +1 -1
- package/src/generated/components/sidebar/react.js +81 -2
- package/src/generated/developer-resources/release-notes/react.js +16 -30
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
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
|
+
## [5.21.45](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.44...@patternfly/react-docs@5.21.45) (2021-09-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [5.21.44](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.43...@patternfly/react-docs@5.21.44) (2021-09-22)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [5.21.43](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.42...@patternfly/react-docs@5.21.43) (2021-09-20)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [5.21.42](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.41...@patternfly/react-docs@5.21.42) (2021-09-20)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @patternfly/react-docs
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [5.21.41](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@5.21.40...@patternfly/react-docs@5.21.41) (2021-09-18)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @patternfly/react-docs
|
package/RELEASE-NOTES.md
CHANGED
|
@@ -4,18 +4,18 @@ section: developer-resources
|
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
## 2021.12 release notes (2021-09-15)
|
|
7
|
-
- [@patternfly/react-catalog-view-extension@4.12.
|
|
7
|
+
- [@patternfly/react-catalog-view-extension@4.12.74](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension/v/4.12.74)
|
|
8
8
|
- [@patternfly/react-charts@6.15.23](https://www.npmjs.com/package/@patternfly/react-charts/v/6.15.23)
|
|
9
|
-
- [@patternfly/react-code-editor@4.3.
|
|
10
|
-
- [@patternfly/react-core@4.157.
|
|
9
|
+
- [@patternfly/react-code-editor@4.3.61](https://www.npmjs.com/package/@patternfly/react-code-editor/v/4.3.61)
|
|
10
|
+
- [@patternfly/react-core@4.157.3](https://www.npmjs.com/package/@patternfly/react-core/v/4.157.3)
|
|
11
11
|
- [@patternfly/react-icons@4.11.17](https://www.npmjs.com/package/@patternfly/react-icons/v/4.11.17)
|
|
12
|
-
- [@patternfly/react-inline-edit-extension@4.7.
|
|
13
|
-
- [@patternfly/react-log-viewer@4.6.
|
|
12
|
+
- [@patternfly/react-inline-edit-extension@4.7.84](https://www.npmjs.com/package/@patternfly/react-inline-edit-extension/v/4.7.84)
|
|
13
|
+
- [@patternfly/react-log-viewer@4.6.14](https://www.npmjs.com/package/@patternfly/react-log-viewer/v/4.6.14)
|
|
14
14
|
- [@patternfly/react-styles@4.11.16](https://www.npmjs.com/package/@patternfly/react-styles/v/4.11.16)
|
|
15
|
-
- [@patternfly/react-table@4.30.
|
|
15
|
+
- [@patternfly/react-table@4.30.3](https://www.npmjs.com/package/@patternfly/react-table/v/4.30.3)
|
|
16
16
|
- [@patternfly/react-tokens@4.12.18](https://www.npmjs.com/package/@patternfly/react-tokens/v/4.12.18)
|
|
17
|
-
- [@patternfly/react-topology@4.9.
|
|
18
|
-
- [@patternfly/react-virtualized-extension@4.9.
|
|
17
|
+
- [@patternfly/react-topology@4.9.80](https://www.npmjs.com/package/@patternfly/react-topology/v/4.9.80)
|
|
18
|
+
- [@patternfly/react-virtualized-extension@4.9.49](https://www.npmjs.com/package/@patternfly/react-virtualized-extension/v/4.9.49)
|
|
19
19
|
|
|
20
20
|
### Components
|
|
21
21
|
- **Alert:**
|
|
@@ -48,8 +48,6 @@ section: developer-resources
|
|
|
48
48
|
- Added component property to grid layout and subitems. ([#6270](https://github.com/patternfly/patternfly-react/pull/6270))
|
|
49
49
|
- **Menu:**
|
|
50
50
|
- Added context selector demo using menu ([#6283](https://github.com/patternfly/patternfly-react/pull/6283))
|
|
51
|
-
- **Navigation:**
|
|
52
|
-
- Added flyout support ([#6253](https://github.com/patternfly/patternfly-react/pull/6253))
|
|
53
51
|
- **Search input:**
|
|
54
52
|
- Added autocomplete search input demo ([#6305](https://github.com/patternfly/patternfly-react/pull/6305))
|
|
55
53
|
- **Select:**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-docs",
|
|
3
3
|
"description": "PatternFly React Docs",
|
|
4
|
-
"version": "5.21.
|
|
4
|
+
"version": "5.21.45",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"tag": "prerelease-v4"
|
|
@@ -23,18 +23,18 @@
|
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@patternfly/patternfly": "4.135.2",
|
|
26
|
-
"@patternfly/react-catalog-view-extension": "^4.12.
|
|
26
|
+
"@patternfly/react-catalog-view-extension": "^4.12.77",
|
|
27
27
|
"@patternfly/react-charts": "^6.15.23",
|
|
28
|
-
"@patternfly/react-code-editor": "^4.3.
|
|
29
|
-
"@patternfly/react-core": "^4.157.
|
|
28
|
+
"@patternfly/react-code-editor": "^4.3.64",
|
|
29
|
+
"@patternfly/react-core": "^4.157.6",
|
|
30
30
|
"@patternfly/react-icons": "^4.11.17",
|
|
31
|
-
"@patternfly/react-inline-edit-extension": "^4.7.
|
|
32
|
-
"@patternfly/react-log-viewer": "^4.6.
|
|
31
|
+
"@patternfly/react-inline-edit-extension": "^4.7.87",
|
|
32
|
+
"@patternfly/react-log-viewer": "^4.6.17",
|
|
33
33
|
"@patternfly/react-styles": "^4.11.16",
|
|
34
|
-
"@patternfly/react-table": "^4.30.
|
|
34
|
+
"@patternfly/react-table": "^4.30.6",
|
|
35
35
|
"@patternfly/react-tokens": "^4.12.18",
|
|
36
|
-
"@patternfly/react-topology": "^4.9.
|
|
37
|
-
"@patternfly/react-virtualized-extension": "^4.9.
|
|
36
|
+
"@patternfly/react-topology": "^4.9.83",
|
|
37
|
+
"@patternfly/react-virtualized-extension": "^4.9.52"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@patternfly/patternfly-a11y": "4.2.1",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"last 2 versions",
|
|
54
54
|
"not ie <= 11"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "d013adc9687d5873a6733b63ff6bc2d93a2b5915"
|
|
57
57
|
}
|
|
@@ -48,27 +48,32 @@ const pageData = {
|
|
|
48
48
|
{
|
|
49
49
|
"name": "itemOrder",
|
|
50
50
|
"type": "string[]",
|
|
51
|
-
"description": "Order of items in a draggable DataList"
|
|
51
|
+
"description": "Order of items in a draggable DataList",
|
|
52
|
+
"deprecated": true
|
|
52
53
|
},
|
|
53
54
|
{
|
|
54
55
|
"name": "onDragCancel",
|
|
55
56
|
"type": "() => void",
|
|
56
|
-
"description": "Optional informational callback for dragging, fired when dragging is cancelled"
|
|
57
|
+
"description": "Optional informational callback for dragging, fired when dragging is cancelled",
|
|
58
|
+
"deprecated": true
|
|
57
59
|
},
|
|
58
60
|
{
|
|
59
61
|
"name": "onDragFinish",
|
|
60
62
|
"type": "(newItemOrder: string[]) => void",
|
|
61
|
-
"description": "Optional callback to make DataList draggable, fired when dragging ends"
|
|
63
|
+
"description": "Optional callback to make DataList draggable, fired when dragging ends",
|
|
64
|
+
"deprecated": true
|
|
62
65
|
},
|
|
63
66
|
{
|
|
64
67
|
"name": "onDragMove",
|
|
65
68
|
"type": "(oldIndex: number, newIndex: number) => void",
|
|
66
|
-
"description": "Optional informational callback for dragging, fired when an item moves"
|
|
69
|
+
"description": "Optional informational callback for dragging, fired when an item moves",
|
|
70
|
+
"deprecated": true
|
|
67
71
|
},
|
|
68
72
|
{
|
|
69
73
|
"name": "onDragStart",
|
|
70
74
|
"type": "(id: string) => void",
|
|
71
|
-
"description": "Optional informational callback for dragging, fired when dragging starts"
|
|
75
|
+
"description": "Optional informational callback for dragging, fired when dragging starts",
|
|
76
|
+
"deprecated": true
|
|
72
77
|
},
|
|
73
78
|
{
|
|
74
79
|
"name": "onSelectDataListItem",
|
|
@@ -517,8 +522,26 @@ pageData.examples = {
|
|
|
517
522
|
|
|
518
523
|
</Example>,
|
|
519
524
|
'Draggable': props =>
|
|
520
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListCell,\n DataListItemRow,\n DataListCheck,\n DataListControl,\n DataListDragButton,\n DataListItemCells\n} from '@patternfly/react-core';\n\
|
|
525
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListCell,\n DataListItemRow,\n DataListCheck,\n DataListControl,\n DataListDragButton,\n DataListItemCells,\n DragDrop,\n Draggable,\n Droppable\n} from '@patternfly/react-core';\n\nconst getItems = count =>\n Array.from({ length: count }, (v, k) => k).map(k => ({\n id: `item-${k}`,\n content: `item ${k} `.repeat(k === 4 ? 20 : 1)\n }));\n\nconst reorder = (list, startIndex, endIndex) => {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n};\n\nDraggableDataList = () => {\n const [items, setItems] = React.useState(getItems(10));\n const [liveText, setLiveText] = React.useState('');\n\n function onDrag(source) {\n setLiveText(`Started dragging ${items[source.index].content}`);\n // Return true to allow drag\n return true;\n }\n\n function onDragMove(source, dest) {\n const newText = dest\n ? `Move ${items[source.index].content} to ${items[dest.index].content}`\n : 'Invalid drop zone';\n if (newText !== liveText) {\n setLiveText(newText);\n }\n }\n\n function onDrop(source, dest) {\n if (dest) {\n const newItems = reorder(\n items,\n source.index,\n dest.index\n );\n setItems(newItems);\n\n setLiveText('Dragging finished.');\n return true; // Signal that this is a valid drop and not to animate the item returning home.\n } else {\n setLiveText('Dragging cancelled. List unchanged.');\n }\n }\n\n return (\n <DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>\n <Droppable hasNoWrapper>\n <DataList aria-label=\"draggable data list example\" isCompact>\n {items.map(({id, content}) =>\n <Draggable key={id} hasNoWrapper>\n <DataListItem aria-labelledby={id} ref={React.createRef()}>\n <DataListItemRow>\n <DataListControl>\n <DataListDragButton\n aria-label=\"Reorder\"\n aria-labelledby={id}\n aria-describedby=\"Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation.\"\n aria-pressed=\"false\"\n />\n <DataListCheck aria-labelledby={id} name={id} otherControls />\n </DataListControl>\n <DataListItemCells\n dataListCells={[\n <DataListCell key={id}>\n <span id={id}>{content}</span>\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </Draggable>\n )}\n </DataList>\n </Droppable>\n <div className=\"pf-screen-reader\" aria-live=\"assertive\">\n {liveText}\n </div>\n </DragDrop>\n );\n};","title":"Draggable","lang":"js"}}>
|
|
521
526
|
|
|
527
|
+
<p {...{"className":"ws-p"}}>
|
|
528
|
+
{`Draggable data lists used to have their own HTML5-based API for drag and drop, which wasn't able to fulfill requirements such as custom styling on items being dragged. So we wrote generic `}
|
|
529
|
+
|
|
530
|
+
<code {...{"className":"ws-code"}}>
|
|
531
|
+
{`DragDrop`}
|
|
532
|
+
</code>
|
|
533
|
+
{`, `}
|
|
534
|
+
|
|
535
|
+
<code {...{"className":"ws-code"}}>
|
|
536
|
+
{`Draggable`}
|
|
537
|
+
</code>
|
|
538
|
+
{`, and `}
|
|
539
|
+
|
|
540
|
+
<code {...{"className":"ws-code"}}>
|
|
541
|
+
{`Droppable`}
|
|
542
|
+
</code>
|
|
543
|
+
{` components for this purpose. Use those new components instead of the deprecated (and buggy!) HTML5-based API.`}
|
|
544
|
+
</p>
|
|
522
545
|
</Example>,
|
|
523
546
|
'Small grid breakpoint': props =>
|
|
524
547
|
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n DataList,\n DataListItem,\n DataListItemRow,\n DataListItemCells,\n DataListCell,\n DataListGridBreakpoint\n} from '@patternfly/react-core';\n\nconst SmallGridBreakpoint = () => (\n <DataList aria-label=\"Simple data list example\" gridBreakpoint=\"sm\">\n <DataListItem aria-labelledby=\"simple-item1\">\n <DataListItemRow>\n <DataListItemCells\n dataListCells={[\n <DataListCell key=\"primary content\">\n <span id=\"simple-item1\">Primary content</span>\n </DataListCell>,\n <DataListCell key=\"secondary content\">\n Really really really really really really really really really really really really really really long\n description that should be truncated before it ends\n </DataListCell>\n ]}\n />\n </DataListItemRow>\n </DataListItem>\n </DataList>\n)","title":"Small grid breakpoint","lang":"js"}}>
|
|
@@ -23,6 +23,12 @@ const pageData = {
|
|
|
23
23
|
"description": "Callback for drag event. Return true to allow drag, false to disallow.",
|
|
24
24
|
"defaultValue": "() => true"
|
|
25
25
|
},
|
|
26
|
+
{
|
|
27
|
+
"name": "onDragMove",
|
|
28
|
+
"type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => void",
|
|
29
|
+
"description": "Callback on mouse move while dragging.",
|
|
30
|
+
"defaultValue": "() => {}"
|
|
31
|
+
},
|
|
26
32
|
{
|
|
27
33
|
"name": "onDrop",
|
|
28
34
|
"type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => boolean",
|
|
@@ -44,6 +50,17 @@ const pageData = {
|
|
|
44
50
|
"name": "className",
|
|
45
51
|
"type": "string",
|
|
46
52
|
"description": "Class to add to outer div"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "hasNoWrapper",
|
|
56
|
+
"type": "boolean",
|
|
57
|
+
"description": "Don't wrap the component in a div. Requires passing a single child.",
|
|
58
|
+
"defaultValue": "false"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "style",
|
|
62
|
+
"type": "No type info",
|
|
63
|
+
"defaultValue": "{}"
|
|
47
64
|
}
|
|
48
65
|
]
|
|
49
66
|
},
|
|
@@ -67,6 +84,12 @@ const pageData = {
|
|
|
67
84
|
"description": "Id to be passed back on drop events",
|
|
68
85
|
"defaultValue": "'defaultId'"
|
|
69
86
|
},
|
|
87
|
+
{
|
|
88
|
+
"name": "hasNoWrapper",
|
|
89
|
+
"type": "boolean",
|
|
90
|
+
"description": "Don't wrap the component in a div. Requires passing a single child.",
|
|
91
|
+
"defaultValue": "false"
|
|
92
|
+
},
|
|
70
93
|
{
|
|
71
94
|
"name": "zone",
|
|
72
95
|
"type": "string",
|
|
@@ -52,7 +52,7 @@ const pageData = {
|
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
"name": "variant",
|
|
55
|
-
"type": "'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav'
|
|
55
|
+
"type": "'default' | 'horizontal' | 'tertiary' | 'horizontal-subnav'",
|
|
56
56
|
"description": "For horizontal navs"
|
|
57
57
|
}
|
|
58
58
|
]
|
|
@@ -7,6 +7,85 @@ const pageData = {
|
|
|
7
7
|
"source": "react",
|
|
8
8
|
"slug": "/components/sidebar/react",
|
|
9
9
|
"sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Sidebar/examples/Sidebar.md",
|
|
10
|
+
"propComponents": [
|
|
11
|
+
{
|
|
12
|
+
"name": "Sidebar",
|
|
13
|
+
"description": "",
|
|
14
|
+
"props": [
|
|
15
|
+
{
|
|
16
|
+
"name": "children",
|
|
17
|
+
"type": "React.ReactNode",
|
|
18
|
+
"description": ""
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "hasGutter",
|
|
22
|
+
"type": "boolean",
|
|
23
|
+
"description": "Adds space between the panel and content."
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "hasNoBackground",
|
|
27
|
+
"type": "boolean",
|
|
28
|
+
"description": "Removes the background color."
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "isPanelRight",
|
|
32
|
+
"type": "boolean",
|
|
33
|
+
"description": "Indicates that the panel is displayed to the right of the content when the oritentation is split.",
|
|
34
|
+
"defaultValue": "false"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "orientation",
|
|
38
|
+
"type": "'stack' | 'split'",
|
|
39
|
+
"description": "Indicates the direction of the layout. Default orientation is stack on small screens, and split on medium screens and above."
|
|
40
|
+
}
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "SidebarContent",
|
|
45
|
+
"description": "",
|
|
46
|
+
"props": [
|
|
47
|
+
{
|
|
48
|
+
"name": "children",
|
|
49
|
+
"type": "React.ReactNode",
|
|
50
|
+
"description": "",
|
|
51
|
+
"required": true
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "hasNoBackground",
|
|
55
|
+
"type": "boolean",
|
|
56
|
+
"description": "Removes the background color."
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "SidebarPanel",
|
|
62
|
+
"description": "",
|
|
63
|
+
"props": [
|
|
64
|
+
{
|
|
65
|
+
"name": "children",
|
|
66
|
+
"type": "React.ReactNode",
|
|
67
|
+
"description": "",
|
|
68
|
+
"required": true
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"name": "hasNoBackground",
|
|
72
|
+
"type": "boolean",
|
|
73
|
+
"description": "Removes the background color."
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "variant",
|
|
77
|
+
"type": "'default' | 'sticky' | 'static'",
|
|
78
|
+
"description": "Indicates whether the panel is positioned statically or sticky to the top. Default is sticky on small screens when the orientation is stack, and static on medium and above screens when the orientation is split.",
|
|
79
|
+
"defaultValue": "'default'"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"name": "width",
|
|
83
|
+
"type": "{\n default?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n sm?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n md?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n lg?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n xl?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n '2xl'?: 'default' | 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n}",
|
|
84
|
+
"description": "Sets the panel width at various breakpoints. Default is 250px when the orientation is split."
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
],
|
|
10
89
|
"beta": true,
|
|
11
90
|
"cssPrefix": [
|
|
12
91
|
"pf-c-sidebar"
|
|
@@ -26,11 +105,11 @@ pageData.examples = {
|
|
|
26
105
|
|
|
27
106
|
</Example>,
|
|
28
107
|
'Stack': props =>
|
|
29
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst Stack = () => (\n <Sidebar
|
|
108
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst Stack = () => (\n <Sidebar orientation=\"stack\">\n <SidebarPanel>\n Sidebar panel stacked on top\n </SidebarPanel>\n <SidebarContent>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>\n <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>\n </SidebarContent>\n </Sidebar>\n)","title":"Stack","lang":"js"}}>
|
|
30
109
|
|
|
31
110
|
</Example>,
|
|
32
111
|
'Panel right with gutter': props =>
|
|
33
|
-
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst PanelRightWithGutter = () => (\n <Sidebar
|
|
112
|
+
<Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core';\n\nconst PanelRightWithGutter = () => (\n <Sidebar isPanelRight hasGutter>\n <SidebarPanel>\n Sidebar panel on the right\n </SidebarPanel>\n <SidebarContent>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>\n <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>\n </SidebarContent>\n </Sidebar>\n)","title":"Panel right with gutter","lang":"js"}}>
|
|
34
113
|
|
|
35
114
|
</Example>,
|
|
36
115
|
'Sticky panel': props =>
|
|
@@ -19,8 +19,8 @@ const Component = () => (
|
|
|
19
19
|
</AutoLinkHeader>
|
|
20
20
|
<ul {...{"className":"ws-ul"}}>
|
|
21
21
|
<li {...{"className":"ws-li"}}>
|
|
22
|
-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-catalog-view-extension/v/4.12.
|
|
23
|
-
{`@patternfly/react-catalog-view-extension@4.12.
|
|
22
|
+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-catalog-view-extension/v/4.12.74"}}>
|
|
23
|
+
{`@patternfly/react-catalog-view-extension@4.12.74`}
|
|
24
24
|
</PatternflyThemeLink>
|
|
25
25
|
</li>
|
|
26
26
|
<li {...{"className":"ws-li"}}>
|
|
@@ -29,13 +29,13 @@ const Component = () => (
|
|
|
29
29
|
</PatternflyThemeLink>
|
|
30
30
|
</li>
|
|
31
31
|
<li {...{"className":"ws-li"}}>
|
|
32
|
-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-code-editor/v/4.3.
|
|
33
|
-
{`@patternfly/react-code-editor@4.3.
|
|
32
|
+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-code-editor/v/4.3.61"}}>
|
|
33
|
+
{`@patternfly/react-code-editor@4.3.61`}
|
|
34
34
|
</PatternflyThemeLink>
|
|
35
35
|
</li>
|
|
36
36
|
<li {...{"className":"ws-li"}}>
|
|
37
|
-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-core/v/4.157.
|
|
38
|
-
{`@patternfly/react-core@4.157.
|
|
37
|
+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-core/v/4.157.3"}}>
|
|
38
|
+
{`@patternfly/react-core@4.157.3`}
|
|
39
39
|
</PatternflyThemeLink>
|
|
40
40
|
</li>
|
|
41
41
|
<li {...{"className":"ws-li"}}>
|
|
@@ -44,13 +44,13 @@ const Component = () => (
|
|
|
44
44
|
</PatternflyThemeLink>
|
|
45
45
|
</li>
|
|
46
46
|
<li {...{"className":"ws-li"}}>
|
|
47
|
-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-inline-edit-extension/v/4.7.
|
|
48
|
-
{`@patternfly/react-inline-edit-extension@4.7.
|
|
47
|
+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-inline-edit-extension/v/4.7.84"}}>
|
|
48
|
+
{`@patternfly/react-inline-edit-extension@4.7.84`}
|
|
49
49
|
</PatternflyThemeLink>
|
|
50
50
|
</li>
|
|
51
51
|
<li {...{"className":"ws-li"}}>
|
|
52
|
-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-log-viewer/v/4.6.
|
|
53
|
-
{`@patternfly/react-log-viewer@4.6.
|
|
52
|
+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-log-viewer/v/4.6.14"}}>
|
|
53
|
+
{`@patternfly/react-log-viewer@4.6.14`}
|
|
54
54
|
</PatternflyThemeLink>
|
|
55
55
|
</li>
|
|
56
56
|
<li {...{"className":"ws-li"}}>
|
|
@@ -59,8 +59,8 @@ const Component = () => (
|
|
|
59
59
|
</PatternflyThemeLink>
|
|
60
60
|
</li>
|
|
61
61
|
<li {...{"className":"ws-li"}}>
|
|
62
|
-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-table/v/4.30.
|
|
63
|
-
{`@patternfly/react-table@4.30.
|
|
62
|
+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-table/v/4.30.3"}}>
|
|
63
|
+
{`@patternfly/react-table@4.30.3`}
|
|
64
64
|
</PatternflyThemeLink>
|
|
65
65
|
</li>
|
|
66
66
|
<li {...{"className":"ws-li"}}>
|
|
@@ -69,13 +69,13 @@ const Component = () => (
|
|
|
69
69
|
</PatternflyThemeLink>
|
|
70
70
|
</li>
|
|
71
71
|
<li {...{"className":"ws-li"}}>
|
|
72
|
-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-topology/v/4.9.
|
|
73
|
-
{`@patternfly/react-topology@4.9.
|
|
72
|
+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-topology/v/4.9.80"}}>
|
|
73
|
+
{`@patternfly/react-topology@4.9.80`}
|
|
74
74
|
</PatternflyThemeLink>
|
|
75
75
|
</li>
|
|
76
76
|
<li {...{"className":"ws-li"}}>
|
|
77
|
-
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-virtualized-extension/v/4.9.
|
|
78
|
-
{`@patternfly/react-virtualized-extension@4.9.
|
|
77
|
+
<PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-virtualized-extension/v/4.9.49"}}>
|
|
78
|
+
{`@patternfly/react-virtualized-extension@4.9.49`}
|
|
79
79
|
</PatternflyThemeLink>
|
|
80
80
|
</li>
|
|
81
81
|
</ul>
|
|
@@ -293,20 +293,6 @@ const Component = () => (
|
|
|
293
293
|
</li>
|
|
294
294
|
</ul>
|
|
295
295
|
</li>
|
|
296
|
-
<li {...{"className":"ws-li"}}>
|
|
297
|
-
<strong>
|
|
298
|
-
{`Navigation:`}
|
|
299
|
-
</strong>
|
|
300
|
-
<ul {...{"className":"ws-ul"}}>
|
|
301
|
-
<li {...{"className":"ws-li"}}>
|
|
302
|
-
{`Added flyout support (`}
|
|
303
|
-
<PatternflyThemeLink {...{"to":"https://github.com/patternfly/patternfly-react/pull/6253"}}>
|
|
304
|
-
{`#6253`}
|
|
305
|
-
</PatternflyThemeLink>
|
|
306
|
-
{`)`}
|
|
307
|
-
</li>
|
|
308
|
-
</ul>
|
|
309
|
-
</li>
|
|
310
296
|
<li {...{"className":"ws-li"}}>
|
|
311
297
|
<strong>
|
|
312
298
|
{`Search input:`}
|