@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
|
@@ -21,10 +21,10 @@ Inline edit **toggle** can be placed anywhere within `.pf-v5-c-inline-edit`. It
|
|
|
21
21
|
### Inline edit toggle
|
|
22
22
|
|
|
23
23
|
```html
|
|
24
|
-
<div class="pf-
|
|
25
|
-
<div class="pf-
|
|
24
|
+
<div class="pf-v6-c-inline-edit" id="inline-edit-toggle-example">
|
|
25
|
+
<div class="pf-v6-c-inline-edit__action pf-m-enable-editable">
|
|
26
26
|
<button
|
|
27
|
-
class="pf-
|
|
27
|
+
class="pf-v6-c-button pf-m-plain"
|
|
28
28
|
type="button"
|
|
29
29
|
id="inline-edit-toggle-example-edit-button"
|
|
30
30
|
aria-label="Edit"
|
|
@@ -42,8 +42,8 @@ Inline edit **value** can be placed anywhere within `.pf-v5-c-inline-edit`. It i
|
|
|
42
42
|
### Inline edit value
|
|
43
43
|
|
|
44
44
|
```html
|
|
45
|
-
<div class="pf-
|
|
46
|
-
<div class="pf-
|
|
45
|
+
<div class="pf-v6-c-inline-edit" id="inline-edit-value-example">
|
|
46
|
+
<div class="pf-v6-c-inline-edit__value">Static value</div>
|
|
47
47
|
</div>
|
|
48
48
|
|
|
49
49
|
```
|
|
@@ -54,15 +54,15 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
54
54
|
|
|
55
55
|
```html
|
|
56
56
|
<div
|
|
57
|
-
class="pf-
|
|
57
|
+
class="pf-v6-c-inline-edit pf-m-inline-editable"
|
|
58
58
|
id="inline-edit-action-group-example"
|
|
59
59
|
>
|
|
60
|
-
<div class="pf-
|
|
61
|
-
<div class="pf-
|
|
62
|
-
<button class="pf-
|
|
60
|
+
<div class="pf-v6-c-inline-edit__group pf-m-action-group">
|
|
61
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
62
|
+
<button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
|
|
63
63
|
</div>
|
|
64
|
-
<div class="pf-
|
|
65
|
-
<button class="pf-
|
|
64
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
65
|
+
<button class="pf-v6-c-button pf-m-secondary" type="button">Cancel</button>
|
|
66
66
|
</div>
|
|
67
67
|
</div>
|
|
68
68
|
</div>
|
|
@@ -73,22 +73,22 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
73
73
|
|
|
74
74
|
```html
|
|
75
75
|
<div
|
|
76
|
-
class="pf-
|
|
76
|
+
class="pf-v6-c-inline-edit pf-m-inline-editable"
|
|
77
77
|
id="inline-edit-action-group-icon-buttons-example"
|
|
78
78
|
>
|
|
79
|
-
<div class="pf-
|
|
80
|
-
<div class="pf-
|
|
79
|
+
<div class="pf-v6-c-inline-edit__group pf-m-action-group pf-m-icon-group">
|
|
80
|
+
<div class="pf-v6-c-inline-edit__action pf-m-valid">
|
|
81
81
|
<button
|
|
82
|
-
class="pf-
|
|
82
|
+
class="pf-v6-c-button pf-m-plain"
|
|
83
83
|
type="button"
|
|
84
84
|
aria-label="Save edits"
|
|
85
85
|
>
|
|
86
86
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
87
87
|
</button>
|
|
88
88
|
</div>
|
|
89
|
-
<div class="pf-
|
|
89
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
90
90
|
<button
|
|
91
|
-
class="pf-
|
|
91
|
+
class="pf-v6-c-button pf-m-plain"
|
|
92
92
|
type="button"
|
|
93
93
|
aria-label="Cancel edits"
|
|
94
94
|
>
|
|
@@ -103,15 +103,15 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
103
103
|
### Single inline edit (default)
|
|
104
104
|
|
|
105
105
|
```html
|
|
106
|
-
<form class="pf-
|
|
107
|
-
<div class="pf-
|
|
106
|
+
<form class="pf-v6-c-inline-edit" id="single-inline-edit-example">
|
|
107
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
108
108
|
<div
|
|
109
|
-
class="pf-
|
|
109
|
+
class="pf-v6-c-inline-edit__value"
|
|
110
110
|
id="single-inline-edit-example-label"
|
|
111
111
|
>Static value</div>
|
|
112
|
-
<div class="pf-
|
|
112
|
+
<div class="pf-v6-c-inline-edit__action pf-m-enable-editable">
|
|
113
113
|
<button
|
|
114
|
-
class="pf-
|
|
114
|
+
class="pf-v6-c-button pf-m-plain"
|
|
115
115
|
type="button"
|
|
116
116
|
id="single-inline-edit-example-edit-button"
|
|
117
117
|
aria-label="Edit"
|
|
@@ -121,9 +121,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
121
121
|
</button>
|
|
122
122
|
</div>
|
|
123
123
|
</div>
|
|
124
|
-
<div class="pf-
|
|
125
|
-
<div class="pf-
|
|
126
|
-
<span class="pf-
|
|
124
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
125
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
126
|
+
<span class="pf-v6-c-form-control">
|
|
127
127
|
<input
|
|
128
128
|
type="text"
|
|
129
129
|
value="Static value"
|
|
@@ -131,19 +131,19 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
131
131
|
/>
|
|
132
132
|
</span>
|
|
133
133
|
</div>
|
|
134
|
-
<div class="pf-
|
|
135
|
-
<div class="pf-
|
|
134
|
+
<div class="pf-v6-c-inline-edit__group pf-m-action-group pf-m-icon-group">
|
|
135
|
+
<div class="pf-v6-c-inline-edit__action pf-m-valid">
|
|
136
136
|
<button
|
|
137
|
-
class="pf-
|
|
137
|
+
class="pf-v6-c-button pf-m-plain"
|
|
138
138
|
type="button"
|
|
139
139
|
aria-label="Save edits"
|
|
140
140
|
>
|
|
141
141
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
142
142
|
</button>
|
|
143
143
|
</div>
|
|
144
|
-
<div class="pf-
|
|
144
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
145
145
|
<button
|
|
146
|
-
class="pf-
|
|
146
|
+
class="pf-v6-c-button pf-m-plain"
|
|
147
147
|
type="button"
|
|
148
148
|
aria-label="Cancel edits"
|
|
149
149
|
>
|
|
@@ -160,17 +160,17 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
160
160
|
|
|
161
161
|
```html
|
|
162
162
|
<form
|
|
163
|
-
class="pf-
|
|
163
|
+
class="pf-v6-c-inline-edit pf-m-inline-editable"
|
|
164
164
|
id="single-editable-example"
|
|
165
165
|
>
|
|
166
|
-
<div class="pf-
|
|
166
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
167
167
|
<div
|
|
168
|
-
class="pf-
|
|
168
|
+
class="pf-v6-c-inline-edit__value"
|
|
169
169
|
id="single-editable-example-label"
|
|
170
170
|
>Static value</div>
|
|
171
|
-
<div class="pf-
|
|
171
|
+
<div class="pf-v6-c-inline-edit__action pf-m-enable-editable">
|
|
172
172
|
<button
|
|
173
|
-
class="pf-
|
|
173
|
+
class="pf-v6-c-button pf-m-plain"
|
|
174
174
|
type="button"
|
|
175
175
|
id="single-editable-example-edit-button"
|
|
176
176
|
aria-label="Edit"
|
|
@@ -180,9 +180,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
180
180
|
</button>
|
|
181
181
|
</div>
|
|
182
182
|
</div>
|
|
183
|
-
<div class="pf-
|
|
184
|
-
<div class="pf-
|
|
185
|
-
<span class="pf-
|
|
183
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
184
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
185
|
+
<span class="pf-v6-c-form-control">
|
|
186
186
|
<input
|
|
187
187
|
type="text"
|
|
188
188
|
value="Static value"
|
|
@@ -190,19 +190,19 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
190
190
|
/>
|
|
191
191
|
</span>
|
|
192
192
|
</div>
|
|
193
|
-
<div class="pf-
|
|
194
|
-
<div class="pf-
|
|
193
|
+
<div class="pf-v6-c-inline-edit__group pf-m-action-group pf-m-icon-group">
|
|
194
|
+
<div class="pf-v6-c-inline-edit__action pf-m-valid">
|
|
195
195
|
<button
|
|
196
|
-
class="pf-
|
|
196
|
+
class="pf-v6-c-button pf-m-plain"
|
|
197
197
|
type="button"
|
|
198
198
|
aria-label="Save edits"
|
|
199
199
|
>
|
|
200
200
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
201
201
|
</button>
|
|
202
202
|
</div>
|
|
203
|
-
<div class="pf-
|
|
203
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
204
204
|
<button
|
|
205
|
-
class="pf-
|
|
205
|
+
class="pf-v6-c-button pf-m-plain"
|
|
206
206
|
type="button"
|
|
207
207
|
aria-label="Cancel edits"
|
|
208
208
|
>
|
|
@@ -218,9 +218,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
218
218
|
### Free form edit
|
|
219
219
|
|
|
220
220
|
```html
|
|
221
|
-
<div class="pf-
|
|
221
|
+
<div class="pf-v6-c-inline-edit" id="free-form-edit-example">
|
|
222
222
|
<div
|
|
223
|
-
class="pf-
|
|
223
|
+
class="pf-v6-c-inline-edit__editable-text"
|
|
224
224
|
role="textbox"
|
|
225
225
|
id="free-form-edit-example-text"
|
|
226
226
|
aria-label="Editable text"
|
|
@@ -232,16 +232,16 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
232
232
|
### Single inline edit with label (default)
|
|
233
233
|
|
|
234
234
|
```html
|
|
235
|
-
<form class="pf-
|
|
236
|
-
<div class="pf-
|
|
235
|
+
<form class="pf-v6-c-inline-edit" id="single-inline-edit-with-label-example">
|
|
236
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
237
237
|
<label
|
|
238
|
-
class="pf-
|
|
238
|
+
class="pf-v6-c-inline-edit__label"
|
|
239
239
|
id="single-inline-edit-with-label-example-label"
|
|
240
240
|
for="single-inline-edit-with-label-example-input"
|
|
241
241
|
>Single inline edit group</label>
|
|
242
|
-
<div class="pf-
|
|
242
|
+
<div class="pf-v6-c-inline-edit__action pf-m-enable-editable">
|
|
243
243
|
<button
|
|
244
|
-
class="pf-
|
|
244
|
+
class="pf-v6-c-button pf-m-plain"
|
|
245
245
|
type="button"
|
|
246
246
|
id="single-inline-edit-with-label-example-edit-button"
|
|
247
247
|
aria-label="Edit"
|
|
@@ -251,10 +251,10 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
251
251
|
</button>
|
|
252
252
|
</div>
|
|
253
253
|
</div>
|
|
254
|
-
<div class="pf-
|
|
255
|
-
<div class="pf-
|
|
256
|
-
<div class="pf-
|
|
257
|
-
<span class="pf-
|
|
254
|
+
<div class="pf-v6-c-inline-edit__value">Static value</div>
|
|
255
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
256
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
257
|
+
<span class="pf-v6-c-form-control">
|
|
258
258
|
<input
|
|
259
259
|
type="text"
|
|
260
260
|
id="single-inline-edit-with-label-example-input"
|
|
@@ -263,19 +263,19 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
263
263
|
/>
|
|
264
264
|
</span>
|
|
265
265
|
</div>
|
|
266
|
-
<div class="pf-
|
|
267
|
-
<div class="pf-
|
|
266
|
+
<div class="pf-v6-c-inline-edit__group pf-m-action-group pf-m-icon-group">
|
|
267
|
+
<div class="pf-v6-c-inline-edit__action pf-m-valid">
|
|
268
268
|
<button
|
|
269
|
-
class="pf-
|
|
269
|
+
class="pf-v6-c-button pf-m-plain"
|
|
270
270
|
type="button"
|
|
271
271
|
aria-label="Save edits"
|
|
272
272
|
>
|
|
273
273
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
274
274
|
</button>
|
|
275
275
|
</div>
|
|
276
|
-
<div class="pf-
|
|
276
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
277
277
|
<button
|
|
278
|
-
class="pf-
|
|
278
|
+
class="pf-v6-c-button pf-m-plain"
|
|
279
279
|
type="button"
|
|
280
280
|
aria-label="Cancel edits"
|
|
281
281
|
>
|
|
@@ -292,18 +292,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
292
292
|
|
|
293
293
|
```html
|
|
294
294
|
<div
|
|
295
|
-
class="pf-
|
|
295
|
+
class="pf-v6-c-inline-edit pf-m-inline-editable"
|
|
296
296
|
id="inline-edit-state-valid"
|
|
297
297
|
>
|
|
298
|
-
<div class="pf-
|
|
298
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
299
299
|
<label
|
|
300
|
-
class="pf-
|
|
300
|
+
class="pf-v6-c-inline-edit__label"
|
|
301
301
|
id="inline-edit-state-valid-label"
|
|
302
302
|
for="inline-edit-state-valid-input"
|
|
303
303
|
>Valid example</label>
|
|
304
|
-
<div class="pf-
|
|
304
|
+
<div class="pf-v6-c-inline-edit__action pf-m-enable-editable">
|
|
305
305
|
<button
|
|
306
|
-
class="pf-
|
|
306
|
+
class="pf-v6-c-button pf-m-plain"
|
|
307
307
|
type="button"
|
|
308
308
|
id="inline-edit-state-valid-edit-button"
|
|
309
309
|
aria-label="Edit"
|
|
@@ -313,10 +313,10 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
313
313
|
</button>
|
|
314
314
|
</div>
|
|
315
315
|
</div>
|
|
316
|
-
<div class="pf-
|
|
317
|
-
<div class="pf-
|
|
318
|
-
<div class="pf-
|
|
319
|
-
<span class="pf-
|
|
316
|
+
<div class="pf-v6-c-inline-edit__value">Static value</div>
|
|
317
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
318
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
319
|
+
<span class="pf-v6-c-form-control">
|
|
320
320
|
<input
|
|
321
321
|
type="text"
|
|
322
322
|
value="Static value"
|
|
@@ -324,19 +324,19 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
324
324
|
/>
|
|
325
325
|
</span>
|
|
326
326
|
</div>
|
|
327
|
-
<div class="pf-
|
|
328
|
-
<div class="pf-
|
|
327
|
+
<div class="pf-v6-c-inline-edit__group pf-m-action-group pf-m-icon-group">
|
|
328
|
+
<div class="pf-v6-c-inline-edit__action pf-m-valid">
|
|
329
329
|
<button
|
|
330
|
-
class="pf-
|
|
330
|
+
class="pf-v6-c-button pf-m-plain"
|
|
331
331
|
type="button"
|
|
332
332
|
aria-label="Save edits"
|
|
333
333
|
>
|
|
334
334
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
335
335
|
</button>
|
|
336
336
|
</div>
|
|
337
|
-
<div class="pf-
|
|
337
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
338
338
|
<button
|
|
339
|
-
class="pf-
|
|
339
|
+
class="pf-v6-c-button pf-m-plain"
|
|
340
340
|
type="button"
|
|
341
341
|
aria-label="Cancel edits"
|
|
342
342
|
>
|
|
@@ -353,18 +353,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
353
353
|
|
|
354
354
|
```html
|
|
355
355
|
<div
|
|
356
|
-
class="pf-
|
|
356
|
+
class="pf-v6-c-inline-edit pf-m-inline-editable"
|
|
357
357
|
id="inline-edit-state-invalid"
|
|
358
358
|
>
|
|
359
|
-
<div class="pf-
|
|
359
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
360
360
|
<label
|
|
361
|
-
class="pf-
|
|
361
|
+
class="pf-v6-c-inline-edit__label"
|
|
362
362
|
id="inline-edit-state-invalid-label"
|
|
363
363
|
for="inline-edit-state-invalid-input"
|
|
364
364
|
>Invalid example</label>
|
|
365
|
-
<div class="pf-
|
|
365
|
+
<div class="pf-v6-c-inline-edit__action pf-m-enable-editable">
|
|
366
366
|
<button
|
|
367
|
-
class="pf-
|
|
367
|
+
class="pf-v6-c-button pf-m-plain"
|
|
368
368
|
type="button"
|
|
369
369
|
id="inline-edit-state-invalid-edit-button"
|
|
370
370
|
aria-label="Edit"
|
|
@@ -374,27 +374,27 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
374
374
|
</button>
|
|
375
375
|
</div>
|
|
376
376
|
</div>
|
|
377
|
-
<div class="pf-
|
|
378
|
-
<div class="pf-
|
|
379
|
-
<div class="pf-
|
|
380
|
-
<span class="pf-
|
|
377
|
+
<div class="pf-v6-c-inline-edit__value">Static value</div>
|
|
378
|
+
<div class="pf-v6-c-inline-edit__group">
|
|
379
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
380
|
+
<span class="pf-v6-c-form-control pf-m-required pf-m-error">
|
|
381
381
|
<input
|
|
382
382
|
required
|
|
383
383
|
value="Invalid state"
|
|
384
384
|
aria-invalid="true"
|
|
385
385
|
aria-label="Error state input example"
|
|
386
386
|
/>
|
|
387
|
-
<span class="pf-
|
|
388
|
-
<span class="pf-
|
|
387
|
+
<span class="pf-v6-c-form-control__utilities">
|
|
388
|
+
<span class="pf-v6-c-form-control__icon pf-m-status">
|
|
389
389
|
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
390
390
|
</span>
|
|
391
391
|
</span>
|
|
392
392
|
</span>
|
|
393
393
|
</div>
|
|
394
|
-
<div class="pf-
|
|
395
|
-
<div class="pf-
|
|
394
|
+
<div class="pf-v6-c-inline-edit__group pf-m-action-group pf-m-icon-group">
|
|
395
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
396
396
|
<button
|
|
397
|
-
class="pf-
|
|
397
|
+
class="pf-v6-c-button pf-m-plain"
|
|
398
398
|
type="button"
|
|
399
399
|
disabled
|
|
400
400
|
aria-label="Save edits"
|
|
@@ -402,9 +402,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
402
402
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
403
403
|
</button>
|
|
404
404
|
</div>
|
|
405
|
-
<div class="pf-
|
|
405
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
406
406
|
<button
|
|
407
|
-
class="pf-
|
|
407
|
+
class="pf-v6-c-button pf-m-plain"
|
|
408
408
|
type="button"
|
|
409
409
|
aria-label="Cancel edits"
|
|
410
410
|
>
|
|
@@ -420,37 +420,37 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
420
420
|
### Inline edit table row
|
|
421
421
|
|
|
422
422
|
```html
|
|
423
|
-
<form class="pf-
|
|
423
|
+
<form class="pf-v6-c-inline-edit" id="bulk-edit-table-example">
|
|
424
424
|
<table
|
|
425
|
-
class="pf-
|
|
425
|
+
class="pf-v6-c-table pf-m-grid-lg"
|
|
426
426
|
role="grid"
|
|
427
427
|
aria-label="Inline edit table row example"
|
|
428
428
|
id="inline-edit-table-row-example"
|
|
429
429
|
>
|
|
430
|
-
<caption class="pf-
|
|
431
|
-
<thead class="pf-
|
|
432
|
-
<tr class="pf-
|
|
433
|
-
<th class="pf-
|
|
434
|
-
<th class="pf-
|
|
435
|
-
<th class="pf-
|
|
436
|
-
<th class="pf-
|
|
437
|
-
<th class="pf-
|
|
438
|
-
<td class="pf-
|
|
439
|
-
|
|
440
|
-
<td class="pf-
|
|
430
|
+
<caption class="pf-v6-c-table__caption">This is the table caption</caption>
|
|
431
|
+
<thead class="pf-v6-c-table__thead">
|
|
432
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
433
|
+
<th class="pf-v6-c-table__th" role="columnheader">Text input</th>
|
|
434
|
+
<th class="pf-v6-c-table__th" role="columnheader">Disabled text input</th>
|
|
435
|
+
<th class="pf-v6-c-table__th" role="columnheader">Checkboxes</th>
|
|
436
|
+
<th class="pf-v6-c-table__th" role="columnheader">Radios</th>
|
|
437
|
+
<th class="pf-v6-c-table__th" role="columnheader">Number</th>
|
|
438
|
+
<td class="pf-v6-c-table__td"></td>
|
|
439
|
+
|
|
440
|
+
<td class="pf-v6-c-table__td"></td>
|
|
441
441
|
</tr>
|
|
442
442
|
</thead>
|
|
443
443
|
|
|
444
|
-
<tbody class="pf-
|
|
445
|
-
<tr class="pf-
|
|
444
|
+
<tbody class="pf-v6-c-table__tbody" role="rowgroup">
|
|
445
|
+
<tr class="pf-v6-c-table__tr pf-m-inline-editable" role="row">
|
|
446
446
|
<th
|
|
447
|
-
class="pf-
|
|
447
|
+
class="pf-v6-c-table__th"
|
|
448
448
|
role="columnheader"
|
|
449
449
|
data-label="Text input"
|
|
450
450
|
>
|
|
451
|
-
<div class="pf-
|
|
452
|
-
<div class="pf-
|
|
453
|
-
<span class="pf-
|
|
451
|
+
<div class="pf-v6-c-inline-edit__value">Text input description content</div>
|
|
452
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
453
|
+
<span class="pf-v6-c-form-control">
|
|
454
454
|
<input
|
|
455
455
|
type="text"
|
|
456
456
|
value="Text input description content"
|
|
@@ -461,15 +461,15 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
461
461
|
</div>
|
|
462
462
|
</th>
|
|
463
463
|
<td
|
|
464
|
-
class="pf-
|
|
464
|
+
class="pf-v6-c-table__td"
|
|
465
465
|
role="cell"
|
|
466
466
|
data-label="Disabled text input"
|
|
467
467
|
>
|
|
468
468
|
<div
|
|
469
|
-
class="pf-
|
|
469
|
+
class="pf-v6-c-inline-edit__value"
|
|
470
470
|
>Text input disabled, description content</div>
|
|
471
|
-
<div class="pf-
|
|
472
|
-
<span class="pf-
|
|
471
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
472
|
+
<span class="pf-v6-c-form-control pf-m-disabled">
|
|
473
473
|
<input
|
|
474
474
|
disabled
|
|
475
475
|
type="text"
|
|
@@ -480,84 +480,84 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
480
480
|
</span>
|
|
481
481
|
</div>
|
|
482
482
|
</td>
|
|
483
|
-
<td class="pf-
|
|
484
|
-
<div class="pf-
|
|
485
|
-
<div class="pf-
|
|
486
|
-
<div class="pf-
|
|
487
|
-
<div class="pf-
|
|
483
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Checkboxes">
|
|
484
|
+
<div class="pf-v6-c-inline-edit__value">Check 1, Check 2</div>
|
|
485
|
+
<div class="pf-v6-c-inline-edit__group pf-m-column">
|
|
486
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
487
|
+
<div class="pf-v6-c-check">
|
|
488
488
|
<input
|
|
489
|
-
class="pf-
|
|
489
|
+
class="pf-v6-c-check__input"
|
|
490
490
|
type="checkbox"
|
|
491
491
|
id="bulk-edit-table-example-row-1-check-1"
|
|
492
492
|
name="bulk-edit-table-example-row-1-example-check"
|
|
493
493
|
/>
|
|
494
494
|
|
|
495
495
|
<label
|
|
496
|
-
class="pf-
|
|
496
|
+
class="pf-v6-c-check__label"
|
|
497
497
|
for="bulk-edit-table-example-row-1-check-1"
|
|
498
498
|
>Check 1</label>
|
|
499
499
|
</div>
|
|
500
500
|
</div>
|
|
501
|
-
<div class="pf-
|
|
502
|
-
<div class="pf-
|
|
501
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
502
|
+
<div class="pf-v6-c-check">
|
|
503
503
|
<input
|
|
504
|
-
class="pf-
|
|
504
|
+
class="pf-v6-c-check__input"
|
|
505
505
|
type="checkbox"
|
|
506
506
|
id="bulk-edit-table-example-row-1-check-2"
|
|
507
507
|
name="bulk-edit-table-example-row-1-example-check-2"
|
|
508
508
|
/>
|
|
509
509
|
|
|
510
510
|
<label
|
|
511
|
-
class="pf-
|
|
511
|
+
class="pf-v6-c-check__label"
|
|
512
512
|
for="bulk-edit-table-example-row-1-check-2"
|
|
513
513
|
>Check 2</label>
|
|
514
514
|
</div>
|
|
515
515
|
</div>
|
|
516
516
|
</div>
|
|
517
517
|
</td>
|
|
518
|
-
<td class="pf-
|
|
519
|
-
<div class="pf-
|
|
518
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Radios">
|
|
519
|
+
<div class="pf-v6-c-inline-edit__value">Radio 1, Radio 2</div>
|
|
520
520
|
<div
|
|
521
|
-
class="pf-
|
|
521
|
+
class="pf-v6-c-inline-edit__group pf-m-column"
|
|
522
522
|
role="radiogroup"
|
|
523
523
|
aria-label="Radio group example"
|
|
524
524
|
>
|
|
525
|
-
<div class="pf-
|
|
526
|
-
<div class="pf-
|
|
525
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
526
|
+
<div class="pf-v6-c-radio">
|
|
527
527
|
<input
|
|
528
|
-
class="pf-
|
|
528
|
+
class="pf-v6-c-radio__input"
|
|
529
529
|
type="radio"
|
|
530
530
|
id="bulk-edit-table-example-row-1-radio-1"
|
|
531
531
|
name="bulk-edit-table-example-row-1-example-radio"
|
|
532
532
|
/>
|
|
533
533
|
|
|
534
534
|
<label
|
|
535
|
-
class="pf-
|
|
535
|
+
class="pf-v6-c-radio__label"
|
|
536
536
|
for="bulk-edit-table-example-row-1-radio-1"
|
|
537
537
|
>Radio 1</label>
|
|
538
538
|
</div>
|
|
539
539
|
</div>
|
|
540
|
-
<div class="pf-
|
|
541
|
-
<div class="pf-
|
|
540
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
541
|
+
<div class="pf-v6-c-radio">
|
|
542
542
|
<input
|
|
543
|
-
class="pf-
|
|
543
|
+
class="pf-v6-c-radio__input"
|
|
544
544
|
type="radio"
|
|
545
545
|
id="bulk-edit-table-example-row-1-radio-2"
|
|
546
546
|
name="bulk-edit-table-example-row-1-example-radio"
|
|
547
547
|
/>
|
|
548
548
|
|
|
549
549
|
<label
|
|
550
|
-
class="pf-
|
|
550
|
+
class="pf-v6-c-radio__label"
|
|
551
551
|
for="bulk-edit-table-example-row-1-radio-2"
|
|
552
552
|
>Radio 2</label>
|
|
553
553
|
</div>
|
|
554
554
|
</div>
|
|
555
555
|
</div>
|
|
556
556
|
</td>
|
|
557
|
-
<td class="pf-
|
|
558
|
-
<div class="pf-
|
|
559
|
-
<div class="pf-
|
|
560
|
-
<span class="pf-
|
|
557
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Number">
|
|
558
|
+
<div class="pf-v6-c-inline-edit__value">2</div>
|
|
559
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
560
|
+
<span class="pf-v6-c-form-control">
|
|
561
561
|
<input
|
|
562
562
|
type="number"
|
|
563
563
|
value="2"
|
|
@@ -568,24 +568,24 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
568
568
|
</div>
|
|
569
569
|
</td>
|
|
570
570
|
<td
|
|
571
|
-
class="pf-
|
|
571
|
+
class="pf-v6-c-table__td pf-v5-c-table__inline-edit-action"
|
|
572
572
|
role="cell"
|
|
573
573
|
>
|
|
574
574
|
<div
|
|
575
|
-
class="pf-
|
|
575
|
+
class="pf-v6-c-inline-edit__group pf-m-action-group pf-m-icon-group"
|
|
576
576
|
>
|
|
577
|
-
<div class="pf-
|
|
577
|
+
<div class="pf-v6-c-inline-edit__action pf-m-valid">
|
|
578
578
|
<button
|
|
579
|
-
class="pf-
|
|
579
|
+
class="pf-v6-c-button pf-m-plain"
|
|
580
580
|
type="button"
|
|
581
581
|
aria-label="Save edits"
|
|
582
582
|
>
|
|
583
583
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
584
584
|
</button>
|
|
585
585
|
</div>
|
|
586
|
-
<div class="pf-
|
|
586
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
587
587
|
<button
|
|
588
|
-
class="pf-
|
|
588
|
+
class="pf-v6-c-button pf-m-plain"
|
|
589
589
|
type="button"
|
|
590
590
|
aria-label="Cancel edits"
|
|
591
591
|
>
|
|
@@ -593,9 +593,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
593
593
|
</button>
|
|
594
594
|
</div>
|
|
595
595
|
</div>
|
|
596
|
-
<div class="pf-
|
|
596
|
+
<div class="pf-v6-c-inline-edit__action pf-m-enable-editable">
|
|
597
597
|
<button
|
|
598
|
-
class="pf-
|
|
598
|
+
class="pf-v6-c-button pf-m-plain"
|
|
599
599
|
type="button"
|
|
600
600
|
id="bulk-edit-table-example-row-1-edit-button"
|
|
601
601
|
aria-label="Edit"
|
|
@@ -605,10 +605,10 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
605
605
|
</button>
|
|
606
606
|
</div>
|
|
607
607
|
</td>
|
|
608
|
-
<td class="pf-
|
|
609
|
-
<div class="pf-
|
|
608
|
+
<td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
|
|
609
|
+
<div class="pf-v6-c-dropdown">
|
|
610
610
|
<button
|
|
611
|
-
class="pf-
|
|
611
|
+
class="pf-v6-c-dropdown__toggle pf-m-plain"
|
|
612
612
|
id="inline-edit-table-row-example-row-1--dropdown-kebab-button"
|
|
613
613
|
aria-expanded="false"
|
|
614
614
|
type="button"
|
|
@@ -617,28 +617,28 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
617
617
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
618
618
|
</button>
|
|
619
619
|
<ul
|
|
620
|
-
class="pf-
|
|
620
|
+
class="pf-v6-c-dropdown__menu pf-m-align-right"
|
|
621
621
|
aria-labelledby="inline-edit-table-row-example-row-1--dropdown-kebab-button"
|
|
622
622
|
hidden
|
|
623
623
|
role="menu"
|
|
624
624
|
>
|
|
625
625
|
<li role="none">
|
|
626
626
|
<a
|
|
627
|
-
class="pf-
|
|
627
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
628
628
|
role="menuitem"
|
|
629
629
|
href="#"
|
|
630
630
|
>Link</a>
|
|
631
631
|
</li>
|
|
632
632
|
<li role="none">
|
|
633
633
|
<button
|
|
634
|
-
class="pf-
|
|
634
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
635
635
|
role="menuitem"
|
|
636
636
|
type="button"
|
|
637
637
|
>Action</button>
|
|
638
638
|
</li>
|
|
639
639
|
<li role="none">
|
|
640
640
|
<a
|
|
641
|
-
class="pf-
|
|
641
|
+
class="pf-v6-c-dropdown__menu-item pf-m-disabled"
|
|
642
642
|
role="menuitem"
|
|
643
643
|
href="#"
|
|
644
644
|
aria-disabled="true"
|
|
@@ -647,16 +647,16 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
647
647
|
</li>
|
|
648
648
|
<li role="none">
|
|
649
649
|
<button
|
|
650
|
-
class="pf-
|
|
650
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
651
651
|
role="menuitem"
|
|
652
652
|
type="button"
|
|
653
653
|
disabled
|
|
654
654
|
>Disabled action</button>
|
|
655
655
|
</li>
|
|
656
|
-
<li class="pf-
|
|
656
|
+
<li class="pf-v6-c-divider" role="separator"></li>
|
|
657
657
|
<li role="none">
|
|
658
658
|
<a
|
|
659
|
-
class="pf-
|
|
659
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
660
660
|
role="menuitem"
|
|
661
661
|
href="#"
|
|
662
662
|
>Separated link</a>
|
|
@@ -666,15 +666,15 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
666
666
|
</td>
|
|
667
667
|
</tr>
|
|
668
668
|
|
|
669
|
-
<tr class="pf-
|
|
669
|
+
<tr class="pf-v6-c-table__tr" role="row">
|
|
670
670
|
<th
|
|
671
|
-
class="pf-
|
|
671
|
+
class="pf-v6-c-table__th"
|
|
672
672
|
role="columnheader"
|
|
673
673
|
data-label="Text input"
|
|
674
674
|
>
|
|
675
|
-
<div class="pf-
|
|
676
|
-
<div class="pf-
|
|
677
|
-
<span class="pf-
|
|
675
|
+
<div class="pf-v6-c-inline-edit__value">Text input description content</div>
|
|
676
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
677
|
+
<span class="pf-v6-c-form-control">
|
|
678
678
|
<input
|
|
679
679
|
type="text"
|
|
680
680
|
value="Text input description content"
|
|
@@ -685,15 +685,15 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
685
685
|
</div>
|
|
686
686
|
</th>
|
|
687
687
|
<td
|
|
688
|
-
class="pf-
|
|
688
|
+
class="pf-v6-c-table__td"
|
|
689
689
|
role="cell"
|
|
690
690
|
data-label="Disabled text input"
|
|
691
691
|
>
|
|
692
692
|
<div
|
|
693
|
-
class="pf-
|
|
693
|
+
class="pf-v6-c-inline-edit__value"
|
|
694
694
|
>Text input disabled, description content</div>
|
|
695
|
-
<div class="pf-
|
|
696
|
-
<span class="pf-
|
|
695
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
696
|
+
<span class="pf-v6-c-form-control pf-m-disabled">
|
|
697
697
|
<input
|
|
698
698
|
disabled
|
|
699
699
|
type="text"
|
|
@@ -704,84 +704,84 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
704
704
|
</span>
|
|
705
705
|
</div>
|
|
706
706
|
</td>
|
|
707
|
-
<td class="pf-
|
|
708
|
-
<div class="pf-
|
|
709
|
-
<div class="pf-
|
|
710
|
-
<div class="pf-
|
|
711
|
-
<div class="pf-
|
|
707
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Checkboxes">
|
|
708
|
+
<div class="pf-v6-c-inline-edit__value">Check 1, Check 2</div>
|
|
709
|
+
<div class="pf-v6-c-inline-edit__group pf-m-column">
|
|
710
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
711
|
+
<div class="pf-v6-c-check">
|
|
712
712
|
<input
|
|
713
|
-
class="pf-
|
|
713
|
+
class="pf-v6-c-check__input"
|
|
714
714
|
type="checkbox"
|
|
715
715
|
id="bulk-edit-table-example-row-2-check-1"
|
|
716
716
|
name="bulk-edit-table-example-row-2-example-check"
|
|
717
717
|
/>
|
|
718
718
|
|
|
719
719
|
<label
|
|
720
|
-
class="pf-
|
|
720
|
+
class="pf-v6-c-check__label"
|
|
721
721
|
for="bulk-edit-table-example-row-2-check-1"
|
|
722
722
|
>Check 1</label>
|
|
723
723
|
</div>
|
|
724
724
|
</div>
|
|
725
|
-
<div class="pf-
|
|
726
|
-
<div class="pf-
|
|
725
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
726
|
+
<div class="pf-v6-c-check">
|
|
727
727
|
<input
|
|
728
|
-
class="pf-
|
|
728
|
+
class="pf-v6-c-check__input"
|
|
729
729
|
type="checkbox"
|
|
730
730
|
id="bulk-edit-table-example-row-2-check-2"
|
|
731
731
|
name="bulk-edit-table-example-row-2-example-check-2"
|
|
732
732
|
/>
|
|
733
733
|
|
|
734
734
|
<label
|
|
735
|
-
class="pf-
|
|
735
|
+
class="pf-v6-c-check__label"
|
|
736
736
|
for="bulk-edit-table-example-row-2-check-2"
|
|
737
737
|
>Check 2</label>
|
|
738
738
|
</div>
|
|
739
739
|
</div>
|
|
740
740
|
</div>
|
|
741
741
|
</td>
|
|
742
|
-
<td class="pf-
|
|
743
|
-
<div class="pf-
|
|
742
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Radios">
|
|
743
|
+
<div class="pf-v6-c-inline-edit__value">Radio 1, Radio 2</div>
|
|
744
744
|
<div
|
|
745
|
-
class="pf-
|
|
745
|
+
class="pf-v6-c-inline-edit__group pf-m-column"
|
|
746
746
|
role="radiogroup"
|
|
747
747
|
aria-label="Radio group example"
|
|
748
748
|
>
|
|
749
|
-
<div class="pf-
|
|
750
|
-
<div class="pf-
|
|
749
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
750
|
+
<div class="pf-v6-c-radio">
|
|
751
751
|
<input
|
|
752
|
-
class="pf-
|
|
752
|
+
class="pf-v6-c-radio__input"
|
|
753
753
|
type="radio"
|
|
754
754
|
id="bulk-edit-table-example-row-2-radio-1"
|
|
755
755
|
name="bulk-edit-table-example-row-2-example-radio-1"
|
|
756
756
|
/>
|
|
757
757
|
|
|
758
758
|
<label
|
|
759
|
-
class="pf-
|
|
759
|
+
class="pf-v6-c-radio__label"
|
|
760
760
|
for="bulk-edit-table-example-row-2-radio-1"
|
|
761
761
|
>Radio 1</label>
|
|
762
762
|
</div>
|
|
763
763
|
</div>
|
|
764
|
-
<div class="pf-
|
|
765
|
-
<div class="pf-
|
|
764
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
765
|
+
<div class="pf-v6-c-radio">
|
|
766
766
|
<input
|
|
767
|
-
class="pf-
|
|
767
|
+
class="pf-v6-c-radio__input"
|
|
768
768
|
type="radio"
|
|
769
769
|
id="bulk-edit-table-example-row-2-radio-2"
|
|
770
770
|
name="bulk-edit-table-example-row-2-example-radio-2"
|
|
771
771
|
/>
|
|
772
772
|
|
|
773
773
|
<label
|
|
774
|
-
class="pf-
|
|
774
|
+
class="pf-v6-c-radio__label"
|
|
775
775
|
for="bulk-edit-table-example-row-2-radio-2"
|
|
776
776
|
>Radio 2</label>
|
|
777
777
|
</div>
|
|
778
778
|
</div>
|
|
779
779
|
</div>
|
|
780
780
|
</td>
|
|
781
|
-
<td class="pf-
|
|
782
|
-
<div class="pf-
|
|
783
|
-
<div class="pf-
|
|
784
|
-
<span class="pf-
|
|
781
|
+
<td class="pf-v6-c-table__td" role="cell" data-label="Number">
|
|
782
|
+
<div class="pf-v6-c-inline-edit__value">2</div>
|
|
783
|
+
<div class="pf-v6-c-inline-edit__input">
|
|
784
|
+
<span class="pf-v6-c-form-control">
|
|
785
785
|
<input
|
|
786
786
|
type="number"
|
|
787
787
|
value="2"
|
|
@@ -792,24 +792,24 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
792
792
|
</div>
|
|
793
793
|
</td>
|
|
794
794
|
<td
|
|
795
|
-
class="pf-
|
|
795
|
+
class="pf-v6-c-table__td pf-v5-c-table__inline-edit-action"
|
|
796
796
|
role="cell"
|
|
797
797
|
>
|
|
798
798
|
<div
|
|
799
|
-
class="pf-
|
|
799
|
+
class="pf-v6-c-inline-edit__group pf-m-action-group pf-m-icon-group"
|
|
800
800
|
>
|
|
801
|
-
<div class="pf-
|
|
801
|
+
<div class="pf-v6-c-inline-edit__action pf-m-valid">
|
|
802
802
|
<button
|
|
803
|
-
class="pf-
|
|
803
|
+
class="pf-v6-c-button pf-m-plain"
|
|
804
804
|
type="button"
|
|
805
805
|
aria-label="Save edits"
|
|
806
806
|
>
|
|
807
807
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
808
808
|
</button>
|
|
809
809
|
</div>
|
|
810
|
-
<div class="pf-
|
|
810
|
+
<div class="pf-v6-c-inline-edit__action">
|
|
811
811
|
<button
|
|
812
|
-
class="pf-
|
|
812
|
+
class="pf-v6-c-button pf-m-plain"
|
|
813
813
|
type="button"
|
|
814
814
|
aria-label="Cancel edits"
|
|
815
815
|
>
|
|
@@ -817,9 +817,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
817
817
|
</button>
|
|
818
818
|
</div>
|
|
819
819
|
</div>
|
|
820
|
-
<div class="pf-
|
|
820
|
+
<div class="pf-v6-c-inline-edit__action pf-m-enable-editable">
|
|
821
821
|
<button
|
|
822
|
-
class="pf-
|
|
822
|
+
class="pf-v6-c-button pf-m-plain"
|
|
823
823
|
type="button"
|
|
824
824
|
id="bulk-edit-table-example-row-2-edit-button"
|
|
825
825
|
aria-label="Edit"
|
|
@@ -829,10 +829,10 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
829
829
|
</button>
|
|
830
830
|
</div>
|
|
831
831
|
</td>
|
|
832
|
-
<td class="pf-
|
|
833
|
-
<div class="pf-
|
|
832
|
+
<td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
|
|
833
|
+
<div class="pf-v6-c-dropdown">
|
|
834
834
|
<button
|
|
835
|
-
class="pf-
|
|
835
|
+
class="pf-v6-c-dropdown__toggle pf-m-plain"
|
|
836
836
|
id="inline-edit-table-row-example-row-2--dropdown-kebab-button"
|
|
837
837
|
aria-expanded="false"
|
|
838
838
|
type="button"
|
|
@@ -841,28 +841,28 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
841
841
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
842
842
|
</button>
|
|
843
843
|
<ul
|
|
844
|
-
class="pf-
|
|
844
|
+
class="pf-v6-c-dropdown__menu pf-m-align-right"
|
|
845
845
|
aria-labelledby="inline-edit-table-row-example-row-2--dropdown-kebab-button"
|
|
846
846
|
hidden
|
|
847
847
|
role="menu"
|
|
848
848
|
>
|
|
849
849
|
<li role="none">
|
|
850
850
|
<a
|
|
851
|
-
class="pf-
|
|
851
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
852
852
|
role="menuitem"
|
|
853
853
|
href="#"
|
|
854
854
|
>Link</a>
|
|
855
855
|
</li>
|
|
856
856
|
<li role="none">
|
|
857
857
|
<button
|
|
858
|
-
class="pf-
|
|
858
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
859
859
|
role="menuitem"
|
|
860
860
|
type="button"
|
|
861
861
|
>Action</button>
|
|
862
862
|
</li>
|
|
863
863
|
<li role="none">
|
|
864
864
|
<a
|
|
865
|
-
class="pf-
|
|
865
|
+
class="pf-v6-c-dropdown__menu-item pf-m-disabled"
|
|
866
866
|
role="menuitem"
|
|
867
867
|
href="#"
|
|
868
868
|
aria-disabled="true"
|
|
@@ -871,16 +871,16 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
871
871
|
</li>
|
|
872
872
|
<li role="none">
|
|
873
873
|
<button
|
|
874
|
-
class="pf-
|
|
874
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
875
875
|
role="menuitem"
|
|
876
876
|
type="button"
|
|
877
877
|
disabled
|
|
878
878
|
>Disabled action</button>
|
|
879
879
|
</li>
|
|
880
|
-
<li class="pf-
|
|
880
|
+
<li class="pf-v6-c-divider" role="separator"></li>
|
|
881
881
|
<li role="none">
|
|
882
882
|
<a
|
|
883
|
-
class="pf-
|
|
883
|
+
class="pf-v6-c-dropdown__menu-item"
|
|
884
884
|
role="menuitem"
|
|
885
885
|
href="#"
|
|
886
886
|
>Separated link</a>
|