@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.91
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/base/patternfly-common.css +10 -10
- package/base/patternfly-globals.css +3 -3
- package/base/patternfly-icons.css +1 -1
- package/base/patternfly-themes.css +53 -53
- package/base/patternfly-variables.css +236 -245
- package/base/tokens/_tokens-font.scss +0 -11
- package/components/AboutModalBox/about-modal-box.css +102 -102
- package/components/Accordion/accordion.css +118 -118
- package/components/ActionList/action-list.css +16 -16
- package/components/Alert/alert-group.css +50 -50
- package/components/Alert/alert.css +161 -161
- package/components/AppLauncher/app-launcher.css +167 -167
- package/components/Avatar/avatar.css +116 -116
- package/components/BackToTop/back-to-top.css +21 -21
- package/components/Backdrop/backdrop.css +9 -9
- package/components/BackgroundImage/background-image.css +15 -15
- package/components/Badge/badge.css +35 -35
- package/components/Banner/banner.css +114 -114
- package/components/Brand/brand.css +28 -28
- package/components/Breadcrumb/breadcrumb.css +62 -62
- package/components/Button/button.css +514 -514
- package/components/CalendarMonth/calendar-month.css +144 -144
- package/components/Card/card.css +230 -230
- package/components/Check/check.css +43 -43
- package/components/Chip/chip-group.css +60 -60
- package/components/Chip/chip.css +83 -83
- package/components/ClipboardCopy/clipboard-copy.css +71 -71
- package/components/CodeBlock/code-block.css +35 -35
- package/components/CodeEditor/code-editor.css +121 -121
- package/components/Content/content.css +216 -216
- package/components/ContextSelector/context-selector.css +251 -251
- package/components/DataList/data-list-grid.css +182 -182
- package/components/DataList/data-list.css +468 -468
- package/components/DatePicker/date-picker.css +35 -35
- package/components/DescriptionList/description-list-order.css +90 -90
- package/components/DescriptionList/description-list.css +193 -193
- package/components/Divider/divider.css +143 -143
- package/components/DragDrop/drag-drop.css +46 -46
- package/components/Drawer/drawer.css +474 -474
- package/components/Dropdown/dropdown.css +457 -457
- package/components/DualListSelector/dual-list-selector.css +199 -199
- package/components/EmptyState/empty-state.css +104 -104
- package/components/ExpandableSection/expandable-section.css +113 -113
- package/components/FileUpload/file-upload.css +32 -32
- package/components/Form/form.css +281 -281
- package/components/FormControl/form-control.css +197 -197
- package/components/HelperText/helper-text.css +51 -51
- package/components/Hint/hint.css +46 -46
- package/components/Icon/icon.css +218 -218
- package/components/InlineEdit/inline-edit.css +43 -43
- package/components/InputGroup/input-group.css +52 -52
- package/components/JumpLinks/jump-links.css +183 -183
- package/components/Label/label-group.css +86 -86
- package/components/Label/label.css +438 -438
- package/components/List/list.css +53 -53
- package/components/LogViewer/log-viewer.css +138 -138
- package/components/Login/login.css +139 -139
- package/components/Masthead/masthead.css +319 -319
- package/components/Menu/menu.css +415 -415
- package/components/MenuToggle/menu-toggle.css +275 -275
- package/components/ModalBox/modal-box.css +121 -121
- package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
- package/components/Nav/nav.css +225 -225
- package/components/NotificationBadge/notification-badge.css +66 -66
- package/components/NotificationDrawer/notification-drawer.css +179 -179
- package/components/NumberInput/number-input.css +20 -20
- package/components/OptionsMenu/options-menu.css +190 -190
- package/components/OverflowMenu/overflow-menu.css +19 -19
- package/components/Page/page.css +598 -598
- package/components/Pagination/pagination.css +220 -220
- package/components/Panel/panel.css +72 -72
- package/components/Popover/popover.css +148 -148
- package/components/Progress/progress.css +80 -80
- package/components/ProgressStepper/progress-stepper.css +514 -514
- package/components/Radio/radio.css +44 -44
- package/components/Select/select.css +423 -423
- package/components/Sidebar/sidebar.css +166 -166
- package/components/SimpleList/simple-list.css +53 -53
- package/components/Skeleton/skeleton.css +112 -112
- package/components/SkipToContent/skip-to-content.css +8 -8
- package/components/Slider/slider.css +144 -144
- package/components/Spinner/spinner.css +36 -36
- package/components/Switch/switch.css +89 -89
- package/components/TabContent/tab-content.css +34 -34
- package/components/Table/table-grid.css +911 -911
- package/components/Table/table-scrollable.css +38 -38
- package/components/Table/table-tree-view.css +497 -497
- package/components/Table/table.css +660 -660
- package/components/Tabs/tabs.css +616 -616
- package/components/TextInputGroup/text-input-group.css +88 -88
- package/components/Tile/tile.css +68 -68
- package/components/Timestamp/timestamp.css +29 -29
- package/components/Title/title.css +87 -87
- package/components/ToggleGroup/toggle-group.css +86 -86
- package/components/Toolbar/toolbar.css +2279 -2279
- package/components/Tooltip/tooltip.css +85 -85
- package/components/TreeView/tree-view.css +363 -363
- package/components/Truncate/truncate.css +15 -15
- package/components/Wizard/wizard.css +272 -272
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
- package/docs/components/Accordion/examples/Accordion.md +188 -188
- package/docs/components/ActionList/examples/ActionList.md +55 -55
- package/docs/components/Alert/examples/Alert.md +222 -222
- package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
- package/docs/components/Avatar/examples/Avatar.md +6 -6
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
- package/docs/components/Badge/examples/Badge.md +17 -17
- package/docs/components/Banner/examples/Banner.md +42 -42
- package/docs/components/Brand/examples/Brand.md +4 -4
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
- package/docs/components/Button/examples/Button.md +364 -364
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
- package/docs/components/Card/examples/Card.md +515 -515
- package/docs/components/Check/examples/Check.md +37 -37
- package/docs/components/Chip/examples/Chip.md +216 -216
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
- package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
- package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
- package/docs/components/DataList/examples/DataList.md +666 -666
- package/docs/components/DatePicker/examples/DatePicker.md +54 -54
- package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
- package/docs/components/Divider/examples/Divider.md +18 -18
- package/docs/components/DragDrop/examples/DragDrop.md +27 -27
- package/docs/components/Drawer/examples/Drawer.md +225 -225
- package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
- package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
- package/docs/components/EmptyState/examples/EmptyState.md +100 -100
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
- package/docs/components/FileUpload/examples/FileUpload.md +94 -94
- package/docs/components/Form/examples/Form.md +226 -226
- package/docs/components/FormControl/examples/FormControl.md +65 -65
- package/docs/components/HelperText/examples/HelperText.md +72 -72
- package/docs/components/Hint/examples/Hint.md +44 -44
- package/docs/components/Icon/examples/Icon.md +85 -85
- package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
- package/docs/components/InputGroup/examples/InputGroup.md +73 -73
- package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
- package/docs/components/Label/examples/Label.md +1717 -1717
- package/docs/components/List/examples/List.md +30 -30
- package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
- package/docs/components/Login/examples/Login.md +287 -287
- package/docs/components/Masthead/examples/masthead.md +39 -39
- package/docs/components/Menu/examples/Menu.md +2377 -2377
- package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
- package/docs/components/ModalBox/examples/ModalBox.md +119 -119
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
- package/docs/components/Nav/examples/Navigation.md +856 -856
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
- package/docs/components/NumberInput/examples/NumberInput.md +127 -127
- package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
- package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
- package/docs/components/Page/deprecated/PageHeader.md +85 -85
- package/docs/components/Page/examples/Page.md +90 -90
- package/docs/components/Pagination/examples/Pagination.md +285 -285
- package/docs/components/Panel/examples/Panel.md +38 -38
- package/docs/components/Popover/examples/Popover.md +169 -169
- package/docs/components/Progress/examples/Progress.md +145 -145
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
- package/docs/components/Radio/examples/Radio.md +33 -33
- package/docs/components/Select/deprecated/Select.md +736 -736
- package/docs/components/Sidebar/examples/Sidebar.md +65 -65
- package/docs/components/SimpleList/examples/SimpleList.md +39 -39
- package/docs/components/Skeleton/examples/Skeleton.md +29 -29
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
- package/docs/components/Slider/examples/Slider.md +213 -213
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +58 -58
- package/docs/components/TabContent/examples/TabContent.md +24 -24
- package/docs/components/Table/examples/Table.md +6982 -6982
- package/docs/components/Tabs/examples/Tabs.md +2114 -2114
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
- package/docs/components/Tile/examples/Tile.md +131 -131
- package/docs/components/Timestamp/examples/Timestamp.md +10 -10
- package/docs/components/Title/examples/Title.md +12 -12
- package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
- package/docs/components/Toolbar/examples/Toolbar.md +611 -611
- package/docs/components/Tooltip/examples/Tooltip.md +27 -27
- package/docs/components/TreeView/examples/TreeView.md +1166 -1166
- package/docs/components/Truncate/examples/Truncate.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +522 -522
- package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
- package/docs/demos/Alert/examples/Alert.md +391 -391
- package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
- package/docs/demos/Banner/examples/Banner.md +364 -364
- package/docs/demos/Button/examples/Button.md +50 -50
- package/docs/demos/Card/examples/Card.md +1054 -1054
- package/docs/demos/CardView/examples/CardView.md +378 -378
- package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
- package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
- package/docs/demos/DataList/examples/DataList.md +1148 -1148
- package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
- package/docs/demos/Drawer/examples/Drawer.md +531 -531
- package/docs/demos/Form/examples/BasicForms.md +444 -444
- package/docs/demos/HelperText/examples/HelperText.md +51 -51
- package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
- package/docs/demos/Masthead/examples/Masthead.md +763 -763
- package/docs/demos/Modal/examples/Modal.md +645 -645
- package/docs/demos/Nav/examples/Nav.md +649 -649
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
- package/docs/demos/Page/examples/Page.md +1330 -1330
- package/docs/demos/Page/examples/Penta.md +217 -217
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
- package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
- package/docs/demos/Table/examples/Table.md +4580 -4580
- package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
- package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
- package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +290 -290
- package/docs/layouts/Gallery/examples/Gallery.md +48 -48
- package/docs/layouts/Grid/examples/Grid.md +121 -121
- package/docs/layouts/Level/examples/Level.md +11 -11
- package/docs/layouts/Split/examples/Split.md +23 -23
- package/docs/layouts/Stack/examples/Stack.md +8 -8
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/Display/examples/Display.md +16 -16
- package/docs/utilities/Flex/examples/Flex.md +53 -53
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +16 -16
- package/layouts/Bullseye/bullseye.css +3 -3
- package/layouts/Flex/flex.css +1276 -1276
- package/layouts/Gallery/gallery.css +34 -34
- package/layouts/Grid/grid.css +531 -531
- package/layouts/Level/level.css +4 -4
- package/layouts/Split/split.css +6 -6
- package/layouts/Stack/stack.css +5 -5
- package/package.json +1 -1
- package/patternfly-addons.css +2989 -2989
- package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
- package/patternfly-base-no-globals.css +284 -293
- package/patternfly-base-theme-dark-unversioned.css +271 -280
- package/patternfly-base.css +286 -295
- package/patternfly-charts-theme-dark-unversioned.css +66 -66
- package/patternfly-charts-theme-dark.css +66 -66
- package/patternfly-charts.css +320 -320
- package/patternfly-no-globals.css +20217 -20226
- package/patternfly-theme-dark-unversioned.css +20209 -20218
- package/patternfly.css +20219 -20228
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +1 -1
- package/utilities/Accessibility/accessibility.css +18 -18
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/utilities/BoxShadow/box-shadow.css +42 -42
- package/utilities/Display/display.css +54 -54
- package/utilities/Flex/flex.css +228 -228
- package/utilities/Float/float.css +12 -12
- package/utilities/Sizing/sizing.css +216 -216
- package/utilities/Spacing/spacing.css +1512 -1512
- package/utilities/Text/text.css +631 -631
|
@@ -6,16 +6,16 @@ section: components
|
|
|
6
6
|
### Provide a generated password
|
|
7
7
|
|
|
8
8
|
```html
|
|
9
|
-
<form class="pf-
|
|
10
|
-
<div class="pf-
|
|
11
|
-
<div class="pf-
|
|
12
|
-
<div class="pf-
|
|
13
|
-
class="pf-
|
|
9
|
+
<form class="pf-v6-c-form" novalidate>
|
|
10
|
+
<div class="pf-v6-c-form__group">
|
|
11
|
+
<div class="pf-v6-c-form__group-label pf-m-info">
|
|
12
|
+
<div class="pf-v6-c-form__group-label-main"><label
|
|
13
|
+
class="pf-v6-c-form__label"
|
|
14
14
|
for="password-generator-demo--initial-password"
|
|
15
15
|
>
|
|
16
|
-
<span class="pf-
|
|
16
|
+
<span class="pf-v6-c-form__label-text">Password</span> <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v6-c-form__group-label-help">
|
|
17
17
|
<span
|
|
18
|
-
class="pf-
|
|
18
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
19
19
|
type="button"
|
|
20
20
|
role="button"
|
|
21
21
|
tabindex="0"
|
|
@@ -25,12 +25,12 @@ section: components
|
|
|
25
25
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
26
26
|
</span></span>
|
|
27
27
|
</div>
|
|
28
|
-
<div class="pf-
|
|
28
|
+
<div class="pf-v6-c-form__group-label-info"></div>
|
|
29
29
|
</div>
|
|
30
|
-
<div class="pf-
|
|
31
|
-
<div class="pf-
|
|
32
|
-
<div class="pf-
|
|
33
|
-
<span class="pf-
|
|
30
|
+
<div class="pf-v6-c-form__group-control">
|
|
31
|
+
<div class="pf-v6-c-input-group">
|
|
32
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
33
|
+
<span class="pf-v6-c-form-control pf-m-required">
|
|
34
34
|
<input
|
|
35
35
|
required
|
|
36
36
|
type="password"
|
|
@@ -42,9 +42,9 @@ section: components
|
|
|
42
42
|
/>
|
|
43
43
|
</span>
|
|
44
44
|
</div>
|
|
45
|
-
<div class="pf-
|
|
45
|
+
<div class="pf-v6-c-input-group__item">
|
|
46
46
|
<button
|
|
47
|
-
class="pf-
|
|
47
|
+
class="pf-v6-c-button pf-m-control"
|
|
48
48
|
type="button"
|
|
49
49
|
aria-label="Show password"
|
|
50
50
|
>
|
|
@@ -52,20 +52,20 @@ section: components
|
|
|
52
52
|
</button>
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
|
-
<div class="pf-
|
|
56
|
-
<div class="pf-
|
|
57
|
-
<ul class="pf-
|
|
58
|
-
<li class="pf-
|
|
59
|
-
<button class="pf-
|
|
60
|
-
<span class="pf-
|
|
55
|
+
<div class="pf-v6-c-menu">
|
|
56
|
+
<div class="pf-v6-c-menu__content">
|
|
57
|
+
<ul class="pf-v6-c-menu__list" role="menu">
|
|
58
|
+
<li class="pf-v6-c-menu__list-item" role="none">
|
|
59
|
+
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
|
|
60
|
+
<span class="pf-v6-c-menu__item-main">
|
|
61
61
|
<span
|
|
62
|
-
class="pf-
|
|
62
|
+
class="pf-v6-c-menu__item-text"
|
|
63
63
|
>Use suggested password: fqu9kKe676JmKt2</span>
|
|
64
64
|
</span>
|
|
65
65
|
</button>
|
|
66
|
-
<div class="pf-
|
|
66
|
+
<div class="pf-v6-c-menu__item-action">
|
|
67
67
|
<button
|
|
68
|
-
class="pf-
|
|
68
|
+
class="pf-v6-c-button pf-m-plain"
|
|
69
69
|
type="button"
|
|
70
70
|
role="menuitem"
|
|
71
71
|
aria-label="Generate a new suggested password"
|
|
@@ -6,16 +6,16 @@ section: components
|
|
|
6
6
|
### Initial state
|
|
7
7
|
|
|
8
8
|
```html
|
|
9
|
-
<form class="pf-
|
|
10
|
-
<div class="pf-
|
|
11
|
-
<div class="pf-
|
|
12
|
-
<div class="pf-
|
|
13
|
-
class="pf-
|
|
9
|
+
<form class="pf-v6-c-form" novalidate>
|
|
10
|
+
<div class="pf-v6-c-form__group">
|
|
11
|
+
<div class="pf-v6-c-form__group-label pf-m-info">
|
|
12
|
+
<div class="pf-v6-c-form__group-label-main"><label
|
|
13
|
+
class="pf-v6-c-form__label"
|
|
14
14
|
for="password-strength-demo--initial-password"
|
|
15
15
|
>
|
|
16
|
-
<span class="pf-
|
|
16
|
+
<span class="pf-v6-c-form__label-text">Password</span> <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v6-c-form__group-label-help">
|
|
17
17
|
<span
|
|
18
|
-
class="pf-
|
|
18
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
19
19
|
type="button"
|
|
20
20
|
role="button"
|
|
21
21
|
tabindex="0"
|
|
@@ -25,12 +25,12 @@ section: components
|
|
|
25
25
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
26
26
|
</span></span>
|
|
27
27
|
</div>
|
|
28
|
-
<div class="pf-
|
|
28
|
+
<div class="pf-v6-c-form__group-label-info"></div>
|
|
29
29
|
</div>
|
|
30
|
-
<div class="pf-
|
|
31
|
-
<div class="pf-
|
|
32
|
-
<div class="pf-
|
|
33
|
-
<span class="pf-
|
|
30
|
+
<div class="pf-v6-c-form__group-control">
|
|
31
|
+
<div class="pf-v6-c-input-group">
|
|
32
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
33
|
+
<span class="pf-v6-c-form-control pf-m-required">
|
|
34
34
|
<input
|
|
35
35
|
required
|
|
36
36
|
type="text"
|
|
@@ -42,9 +42,9 @@ section: components
|
|
|
42
42
|
/>
|
|
43
43
|
</span>
|
|
44
44
|
</div>
|
|
45
|
-
<div class="pf-
|
|
45
|
+
<div class="pf-v6-c-input-group__item">
|
|
46
46
|
<button
|
|
47
|
-
class="pf-
|
|
47
|
+
class="pf-v6-c-button pf-m-control"
|
|
48
48
|
type="button"
|
|
49
49
|
aria-label="Show password"
|
|
50
50
|
>
|
|
@@ -52,36 +52,36 @@ section: components
|
|
|
52
52
|
</button>
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
|
-
<div class="pf-
|
|
56
|
-
<div class="pf-
|
|
55
|
+
<div class="pf-v6-c-form__helper-text" aria-live="polite">
|
|
56
|
+
<div class="pf-v6-c-helper-text">
|
|
57
57
|
<div
|
|
58
|
-
class="pf-
|
|
58
|
+
class="pf-v6-c-helper-text__item pf-m-indeterminate pf-m-dynamic"
|
|
59
59
|
>
|
|
60
|
-
<span class="pf-
|
|
60
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
61
61
|
<i class="fas fa-fw fa-minus" aria-hidden="true"></i>
|
|
62
62
|
</span>
|
|
63
63
|
<span
|
|
64
|
-
class="pf-
|
|
64
|
+
class="pf-v6-c-helper-text__item-text"
|
|
65
65
|
>Must be at least 14 characters</span>
|
|
66
66
|
</div>
|
|
67
67
|
<div
|
|
68
|
-
class="pf-
|
|
68
|
+
class="pf-v6-c-helper-text__item pf-m-indeterminate pf-m-dynamic"
|
|
69
69
|
>
|
|
70
|
-
<span class="pf-
|
|
70
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
71
71
|
<i class="fas fa-fw fa-minus" aria-hidden="true"></i>
|
|
72
72
|
</span>
|
|
73
73
|
<span
|
|
74
|
-
class="pf-
|
|
74
|
+
class="pf-v6-c-helper-text__item-text"
|
|
75
75
|
>Cannot contain the word "redhat"</span>
|
|
76
76
|
</div>
|
|
77
77
|
<div
|
|
78
|
-
class="pf-
|
|
78
|
+
class="pf-v6-c-helper-text__item pf-m-indeterminate pf-m-dynamic"
|
|
79
79
|
>
|
|
80
|
-
<span class="pf-
|
|
80
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
81
81
|
<i class="fas fa-fw fa-minus" aria-hidden="true"></i>
|
|
82
82
|
</span>
|
|
83
83
|
<span
|
|
84
|
-
class="pf-
|
|
84
|
+
class="pf-v6-c-helper-text__item-text"
|
|
85
85
|
>Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
|
|
86
86
|
</div>
|
|
87
87
|
</div>
|
|
@@ -95,16 +95,16 @@ section: components
|
|
|
95
95
|
### Invalid password
|
|
96
96
|
|
|
97
97
|
```html
|
|
98
|
-
<form class="pf-
|
|
99
|
-
<div class="pf-
|
|
100
|
-
<div class="pf-
|
|
101
|
-
<div class="pf-
|
|
102
|
-
class="pf-
|
|
98
|
+
<form class="pf-v6-c-form" novalidate>
|
|
99
|
+
<div class="pf-v6-c-form__group">
|
|
100
|
+
<div class="pf-v6-c-form__group-label pf-m-info">
|
|
101
|
+
<div class="pf-v6-c-form__group-label-main"><label
|
|
102
|
+
class="pf-v6-c-form__label"
|
|
103
103
|
for="password-strength-demo--invalid-password"
|
|
104
104
|
>
|
|
105
|
-
<span class="pf-
|
|
105
|
+
<span class="pf-v6-c-form__label-text">Password</span> <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v6-c-form__group-label-help">
|
|
106
106
|
<span
|
|
107
|
-
class="pf-
|
|
107
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
108
108
|
type="button"
|
|
109
109
|
role="button"
|
|
110
110
|
tabindex="0"
|
|
@@ -114,12 +114,12 @@ section: components
|
|
|
114
114
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
115
115
|
</span></span>
|
|
116
116
|
</div>
|
|
117
|
-
<div class="pf-
|
|
117
|
+
<div class="pf-v6-c-form__group-label-info"></div>
|
|
118
118
|
</div>
|
|
119
|
-
<div class="pf-
|
|
120
|
-
<div class="pf-
|
|
121
|
-
<div class="pf-
|
|
122
|
-
<span class="pf-
|
|
119
|
+
<div class="pf-v6-c-form__group-control">
|
|
120
|
+
<div class="pf-v6-c-input-group">
|
|
121
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
122
|
+
<span class="pf-v6-c-form-control pf-m-required">
|
|
123
123
|
<input
|
|
124
124
|
required
|
|
125
125
|
type="text"
|
|
@@ -131,9 +131,9 @@ section: components
|
|
|
131
131
|
/>
|
|
132
132
|
</span>
|
|
133
133
|
</div>
|
|
134
|
-
<div class="pf-
|
|
134
|
+
<div class="pf-v6-c-input-group__item">
|
|
135
135
|
<button
|
|
136
|
-
class="pf-
|
|
136
|
+
class="pf-v6-c-button pf-m-control"
|
|
137
137
|
type="button"
|
|
138
138
|
aria-label="Show password"
|
|
139
139
|
>
|
|
@@ -141,30 +141,30 @@ section: components
|
|
|
141
141
|
</button>
|
|
142
142
|
</div>
|
|
143
143
|
</div>
|
|
144
|
-
<div class="pf-
|
|
145
|
-
<div class="pf-
|
|
146
|
-
<div class="pf-
|
|
147
|
-
<span class="pf-
|
|
144
|
+
<div class="pf-v6-c-form__helper-text" aria-live="polite">
|
|
145
|
+
<div class="pf-v6-c-helper-text">
|
|
146
|
+
<div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
147
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
148
148
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
149
149
|
</span>
|
|
150
150
|
<span
|
|
151
|
-
class="pf-
|
|
151
|
+
class="pf-v6-c-helper-text__item-text"
|
|
152
152
|
>Must be at least 14 characters</span>
|
|
153
153
|
</div>
|
|
154
|
-
<div class="pf-
|
|
155
|
-
<span class="pf-
|
|
154
|
+
<div class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
|
|
155
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
156
156
|
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
157
157
|
</span>
|
|
158
158
|
<span
|
|
159
|
-
class="pf-
|
|
159
|
+
class="pf-v6-c-helper-text__item-text"
|
|
160
160
|
>Cannot contain the word "redhat"</span>
|
|
161
161
|
</div>
|
|
162
|
-
<div class="pf-
|
|
163
|
-
<span class="pf-
|
|
162
|
+
<div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
163
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
164
164
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
165
165
|
</span>
|
|
166
166
|
<span
|
|
167
|
-
class="pf-
|
|
167
|
+
class="pf-v6-c-helper-text__item-text"
|
|
168
168
|
>Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
|
|
169
169
|
</div>
|
|
170
170
|
</div>
|
|
@@ -178,16 +178,16 @@ section: components
|
|
|
178
178
|
### Valid, weak password
|
|
179
179
|
|
|
180
180
|
```html
|
|
181
|
-
<form class="pf-
|
|
182
|
-
<div class="pf-
|
|
183
|
-
<div class="pf-
|
|
184
|
-
<div class="pf-
|
|
185
|
-
class="pf-
|
|
181
|
+
<form class="pf-v6-c-form" novalidate>
|
|
182
|
+
<div class="pf-v6-c-form__group">
|
|
183
|
+
<div class="pf-v6-c-form__group-label pf-m-info">
|
|
184
|
+
<div class="pf-v6-c-form__group-label-main"><label
|
|
185
|
+
class="pf-v6-c-form__label"
|
|
186
186
|
for="password-strength-demo--weak-password"
|
|
187
187
|
>
|
|
188
|
-
<span class="pf-
|
|
188
|
+
<span class="pf-v6-c-form__label-text">Password</span> <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v6-c-form__group-label-help">
|
|
189
189
|
<span
|
|
190
|
-
class="pf-
|
|
190
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
191
191
|
type="button"
|
|
192
192
|
role="button"
|
|
193
193
|
tabindex="0"
|
|
@@ -197,21 +197,21 @@ section: components
|
|
|
197
197
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
198
198
|
</span></span>
|
|
199
199
|
</div>
|
|
200
|
-
<div class="pf-
|
|
201
|
-
<div class="pf-
|
|
202
|
-
<div class="pf-
|
|
203
|
-
<span class="pf-
|
|
200
|
+
<div class="pf-v6-c-form__group-label-info">
|
|
201
|
+
<div class="pf-v6-c-helper-text">
|
|
202
|
+
<div class="pf-v6-c-helper-text__item pf-m-error">
|
|
203
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
204
204
|
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
205
205
|
</span>
|
|
206
|
-
<span class="pf-
|
|
206
|
+
<span class="pf-v6-c-helper-text__item-text">Weak</span>
|
|
207
207
|
</div>
|
|
208
208
|
</div>
|
|
209
209
|
</div>
|
|
210
210
|
</div>
|
|
211
|
-
<div class="pf-
|
|
212
|
-
<div class="pf-
|
|
213
|
-
<div class="pf-
|
|
214
|
-
<span class="pf-
|
|
211
|
+
<div class="pf-v6-c-form__group-control">
|
|
212
|
+
<div class="pf-v6-c-input-group">
|
|
213
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
214
|
+
<span class="pf-v6-c-form-control pf-m-required">
|
|
215
215
|
<input
|
|
216
216
|
required
|
|
217
217
|
type="text"
|
|
@@ -223,9 +223,9 @@ section: components
|
|
|
223
223
|
/>
|
|
224
224
|
</span>
|
|
225
225
|
</div>
|
|
226
|
-
<div class="pf-
|
|
226
|
+
<div class="pf-v6-c-input-group__item">
|
|
227
227
|
<button
|
|
228
|
-
class="pf-
|
|
228
|
+
class="pf-v6-c-button pf-m-control"
|
|
229
229
|
type="button"
|
|
230
230
|
aria-label="Show password"
|
|
231
231
|
>
|
|
@@ -233,30 +233,30 @@ section: components
|
|
|
233
233
|
</button>
|
|
234
234
|
</div>
|
|
235
235
|
</div>
|
|
236
|
-
<div class="pf-
|
|
237
|
-
<div class="pf-
|
|
238
|
-
<div class="pf-
|
|
239
|
-
<span class="pf-
|
|
236
|
+
<div class="pf-v6-c-form__helper-text" aria-live="polite">
|
|
237
|
+
<div class="pf-v6-c-helper-text">
|
|
238
|
+
<div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
239
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
240
240
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
241
241
|
</span>
|
|
242
242
|
<span
|
|
243
|
-
class="pf-
|
|
243
|
+
class="pf-v6-c-helper-text__item-text"
|
|
244
244
|
>Must be at least 14 characters</span>
|
|
245
245
|
</div>
|
|
246
|
-
<div class="pf-
|
|
247
|
-
<span class="pf-
|
|
246
|
+
<div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
247
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
248
248
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
249
249
|
</span>
|
|
250
250
|
<span
|
|
251
|
-
class="pf-
|
|
251
|
+
class="pf-v6-c-helper-text__item-text"
|
|
252
252
|
>Cannot contain the word "redhat"</span>
|
|
253
253
|
</div>
|
|
254
|
-
<div class="pf-
|
|
255
|
-
<span class="pf-
|
|
254
|
+
<div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
255
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
256
256
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
257
257
|
</span>
|
|
258
258
|
<span
|
|
259
|
-
class="pf-
|
|
259
|
+
class="pf-v6-c-helper-text__item-text"
|
|
260
260
|
>Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
|
|
261
261
|
</div>
|
|
262
262
|
</div>
|
|
@@ -270,16 +270,16 @@ section: components
|
|
|
270
270
|
### Valid, strong password
|
|
271
271
|
|
|
272
272
|
```html
|
|
273
|
-
<form class="pf-
|
|
274
|
-
<div class="pf-
|
|
275
|
-
<div class="pf-
|
|
276
|
-
<div class="pf-
|
|
277
|
-
class="pf-
|
|
273
|
+
<form class="pf-v6-c-form" novalidate>
|
|
274
|
+
<div class="pf-v6-c-form__group">
|
|
275
|
+
<div class="pf-v6-c-form__group-label pf-m-info">
|
|
276
|
+
<div class="pf-v6-c-form__group-label-main"><label
|
|
277
|
+
class="pf-v6-c-form__label"
|
|
278
278
|
for="password-strength-demo--strong-password"
|
|
279
279
|
>
|
|
280
|
-
<span class="pf-
|
|
280
|
+
<span class="pf-v6-c-form__label-text">Password</span> <span class="pf-v6-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v6-c-form__group-label-help">
|
|
281
281
|
<span
|
|
282
|
-
class="pf-
|
|
282
|
+
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
283
283
|
type="button"
|
|
284
284
|
role="button"
|
|
285
285
|
tabindex="0"
|
|
@@ -289,21 +289,21 @@ section: components
|
|
|
289
289
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
290
290
|
</span></span>
|
|
291
291
|
</div>
|
|
292
|
-
<div class="pf-
|
|
293
|
-
<div class="pf-
|
|
294
|
-
<div class="pf-
|
|
295
|
-
<span class="pf-
|
|
292
|
+
<div class="pf-v6-c-form__group-label-info">
|
|
293
|
+
<div class="pf-v6-c-helper-text">
|
|
294
|
+
<div class="pf-v6-c-helper-text__item pf-m-success">
|
|
295
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
296
296
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
297
297
|
</span>
|
|
298
|
-
<span class="pf-
|
|
298
|
+
<span class="pf-v6-c-helper-text__item-text">Strong</span>
|
|
299
299
|
</div>
|
|
300
300
|
</div>
|
|
301
301
|
</div>
|
|
302
302
|
</div>
|
|
303
|
-
<div class="pf-
|
|
304
|
-
<div class="pf-
|
|
305
|
-
<div class="pf-
|
|
306
|
-
<span class="pf-
|
|
303
|
+
<div class="pf-v6-c-form__group-control">
|
|
304
|
+
<div class="pf-v6-c-input-group">
|
|
305
|
+
<div class="pf-v6-c-input-group__item pf-m-fill">
|
|
306
|
+
<span class="pf-v6-c-form-control pf-m-required">
|
|
307
307
|
<input
|
|
308
308
|
required
|
|
309
309
|
type="text"
|
|
@@ -315,9 +315,9 @@ section: components
|
|
|
315
315
|
/>
|
|
316
316
|
</span>
|
|
317
317
|
</div>
|
|
318
|
-
<div class="pf-
|
|
318
|
+
<div class="pf-v6-c-input-group__item">
|
|
319
319
|
<button
|
|
320
|
-
class="pf-
|
|
320
|
+
class="pf-v6-c-button pf-m-control"
|
|
321
321
|
type="button"
|
|
322
322
|
aria-label="Show password"
|
|
323
323
|
>
|
|
@@ -325,30 +325,30 @@ section: components
|
|
|
325
325
|
</button>
|
|
326
326
|
</div>
|
|
327
327
|
</div>
|
|
328
|
-
<div class="pf-
|
|
329
|
-
<div class="pf-
|
|
330
|
-
<div class="pf-
|
|
331
|
-
<span class="pf-
|
|
328
|
+
<div class="pf-v6-c-form__helper-text" aria-live="polite">
|
|
329
|
+
<div class="pf-v6-c-helper-text">
|
|
330
|
+
<div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
331
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
332
332
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
333
333
|
</span>
|
|
334
334
|
<span
|
|
335
|
-
class="pf-
|
|
335
|
+
class="pf-v6-c-helper-text__item-text"
|
|
336
336
|
>Must be at least 14 characters</span>
|
|
337
337
|
</div>
|
|
338
|
-
<div class="pf-
|
|
339
|
-
<span class="pf-
|
|
338
|
+
<div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
339
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
340
340
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
341
341
|
</span>
|
|
342
342
|
<span
|
|
343
|
-
class="pf-
|
|
343
|
+
class="pf-v6-c-helper-text__item-text"
|
|
344
344
|
>Cannot contain the word "redhat"</span>
|
|
345
345
|
</div>
|
|
346
|
-
<div class="pf-
|
|
347
|
-
<span class="pf-
|
|
346
|
+
<div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
347
|
+
<span class="pf-v6-c-helper-text__item-icon">
|
|
348
348
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
349
349
|
</span>
|
|
350
350
|
<span
|
|
351
|
-
class="pf-
|
|
351
|
+
class="pf-v6-c-helper-text__item-text"
|
|
352
352
|
>Must include at least 3 of the following: lowercase letters, uppercase letters, numbers, symbols</span>
|
|
353
353
|
</div>
|
|
354
354
|
</div>
|