@patternfly/react-core 4.273.1 → 4.273.2
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
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.273.2 (2023-01-18)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [4.273.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.273.0...@patternfly/react-core@4.273.1) (2023-01-18)
|
|
7
15
|
|
|
8
16
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-core",
|
|
3
|
-
"version": "4.273.
|
|
3
|
+
"version": "4.273.2",
|
|
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",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"react": "^16.8 || ^17 || ^18",
|
|
72
72
|
"react-dom": "^16.8 || ^17 || ^18"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "f4d6511036d4a2a16d2ddae15a23fa80188dfc22"
|
|
75
75
|
}
|
|
@@ -10,22 +10,36 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
|
|
|
10
10
|
|
|
11
11
|
## Examples
|
|
12
12
|
|
|
13
|
-
### Basic
|
|
13
|
+
### Basic dropdowns
|
|
14
|
+
Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.
|
|
15
|
+
|
|
16
|
+
A `<Dropdown>` uses a [menu toggle](/components/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback.
|
|
17
|
+
|
|
18
|
+
The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
|
|
19
|
+
- Use the `isDisabled` property to disable an item.
|
|
20
|
+
- Use the `onClick` property to trigger a callback for an action.
|
|
21
|
+
|
|
22
|
+
This example also uses a `<Divider>` which passes in `key=”separator”` to split the menu into 2 sections with a horizontal line.
|
|
14
23
|
|
|
15
24
|
```ts file="./DropdownBasic.tsx"
|
|
16
25
|
```
|
|
17
26
|
|
|
18
27
|
### With kebab toggle
|
|
19
28
|
|
|
29
|
+
To style a dropdown menu's toggle with a kebab icon, pass a "plain" `<MenuToggle>` to the `toggle` property. When there isn't enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.
|
|
30
|
+
|
|
20
31
|
```ts file="./DropdownWithKebabToggle.tsx"
|
|
21
32
|
```
|
|
22
33
|
|
|
23
|
-
### With groups
|
|
34
|
+
### With groups of items
|
|
35
|
+
To group sets of related dropdown items together, use a `<DropdownGroup>`. When more than 1 `<DropdownGroup>` is created in a menu, use the `label` and `labelHeadingLevel` properties to assign a name and heading level to each group.
|
|
24
36
|
|
|
25
37
|
```ts file="./DropdownWithGroups.tsx"
|
|
26
38
|
```
|
|
27
39
|
|
|
28
|
-
### With descriptions
|
|
40
|
+
### With item descriptions
|
|
41
|
+
|
|
42
|
+
To provide users with more context about a `<DropdownItem>`, pass a short message to `description` property. As shown in the example below, an item's description will appear below its label.
|
|
29
43
|
|
|
30
44
|
```ts file="./DropdownWithDescriptions.tsx"
|
|
31
|
-
```
|
|
45
|
+
```
|