You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx
import Battery, { BatterySeverity } from '@patternfly/react-component-groups/dist/dynamic/Battery';
17
+
import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity';
18
18
19
19
The **battery** component generates a battery, which corresponds to a level `low`, `medium`, `high` or `critical`. Each level corresponds with a severity level and respective color:
20
20
@@ -27,46 +27,53 @@ The **battery** component generates a battery, which corresponds to a level `low
27
27
28
28
To specify the severity of the battery's risk level, you can pass a predefined enum or text value into the `severity` property that corresponds to the appropriate severity level.
29
29
30
-
To add an optional label to a battery, add the `label` property to the `<Battery>` component.
30
+
To add an optional label to a battery, add the `label` property to the `<Severity>` component.
31
31
32
32
## Examples
33
33
34
-
### Default variant
34
+
### Undefined variant
35
35
36
-
The default style of a battery (4 black lines) appears when any value besides "low", "medium", "high", or "critical" is passed to `severity`.
36
+
The default style for the severity component appears when any value besides "none", "low", "medium", "high", or "critical" is passed to `Severity`.
37
37
38
-
```js file="./BatteryDefaultExample.tsx"
38
+
```js file="./SeverityUndefinedExample.tsx"
39
39
40
40
```
41
+
### None severity
41
42
42
-
### Low severity
43
+
To style no severity, pass "none" or `SeverityType.none` to `severity`.
43
44
44
-
To style a battery as low severity, pass "low" or `BatterySeverity.low` to `severity`.
45
+
```js file="./SeverityNoneExample.tsx"
45
46
46
-
```js file="./BatteryLowExample.tsx"
47
+
```
48
+
49
+
### Minor severity
50
+
51
+
To style a minor severity, pass "minor" or `SeverityType.minor` to `severity`.
52
+
53
+
```js file="./SeverityMinorExample.tsx"
47
54
48
55
```
49
56
50
-
### Medium severity
57
+
### Moderate severity
51
58
52
-
To style a battery as medium severity, pass "medium", or `BatterySeverity.medium` to `severity`.
59
+
To style a moderate severity, pass "moderate", or `SeverityType.moderate` to `severity`.
53
60
54
-
```js file="./BatteryMediumExample.tsx"
61
+
```js file="./SeverityModerateExample.tsx"
55
62
56
63
```
57
64
58
-
### High severity
65
+
### Important severity
59
66
60
-
To style a battery as high severity, pass "high", or `BatterySeverity.high` to `severity`.
67
+
To style an important severity, pass "important", or `SeverityType.important` to `severity`.
61
68
62
-
```js file="./BatteryHighExample.tsx"
69
+
```js file="./SeverityImportantExample.tsx"
63
70
64
71
```
65
72
66
73
### Critical severity
67
74
68
-
To style a battery as critical severity, pass "critical" or `BatterySeverity.critical` to `severity`.
75
+
To style a critical severity, pass "critical" or `SeverityType.critical` to `severity`.
0 commit comments