@patternfly/patternfly 4.176.3 → 4.177.0

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.
Files changed (49) hide show
  1. package/UPGRADE-GUIDE.md +3 -0
  2. package/components/Avatar/avatar.css +224 -0
  3. package/components/Avatar/avatar.scss +18 -0
  4. package/components/CodeEditor/code-editor.css +8 -0
  5. package/components/CodeEditor/code-editor.scss +11 -1
  6. package/docs/components/Avatar/examples/Avatar.md +53 -5
  7. package/docs/components/Brand/examples/Brand.md +6 -6
  8. package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
  9. package/docs/components/DataList/examples/DataList.md +11 -11
  10. package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
  11. package/docs/components/Divider/examples/Divider.md +2 -2
  12. package/docs/components/Drawer/examples/Drawer.md +27 -27
  13. package/docs/components/Dropdown/examples/Dropdown.md +2 -2
  14. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  15. package/docs/components/LogViewer/examples/LogViewer.md +19 -19
  16. package/docs/components/Masthead/examples/masthead.md +10 -10
  17. package/docs/components/Menu/examples/Menu.md +2 -2
  18. package/docs/components/Page/examples/Page.md +4 -4
  19. package/docs/components/Pagination/examples/Pagination.md +2 -2
  20. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  21. package/docs/components/Table/examples/Table.md +8 -8
  22. package/docs/components/Tabs/examples/Tabs.md +27 -27
  23. package/docs/components/Toolbar/examples/Toolbar.md +31 -31
  24. package/docs/demos/Alert/examples/Alert.md +358 -52
  25. package/docs/demos/BackToTop/examples/BackToTop.md +304 -5
  26. package/docs/demos/ContextSelector/examples/ContextSelector.md +2199 -45
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +1221 -80
  28. package/docs/demos/Nav/examples/Nav.md +293 -2
  29. package/docs/demos/Page/examples/Page.md +6098 -161
  30. package/docs/demos/Table/examples/Table.md +21223 -165
  31. package/docs/demos/Tabs/examples/Tabs.md +7304 -697
  32. package/docs/demos/Toolbar/examples/Toolbar.md +1026 -44
  33. package/docs/layouts/Flex/examples/Flex.md +1 -1
  34. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  35. package/docs/layouts/Grid/examples/Grid.md +9 -9
  36. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  37. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  38. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  39. package/docs/utilities/Display/examples/Display.md +1 -1
  40. package/docs/utilities/Flex/examples/Flex.md +1 -1
  41. package/docs/utilities/Float/examples/Float.md +1 -1
  42. package/docs/utilities/Sizing/examples/Sizing.md +12 -0
  43. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  44. package/docs/utilities/Text/examples/Text.md +1 -1
  45. package/package.json +1 -1
  46. package/patternfly-no-reset.css +232 -0
  47. package/patternfly.css +232 -0
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -26,18 +26,18 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
26
26
 
27
27
  ### Modifiers
28
28
 
29
- | Class | Applied to | Outcome |
30
- | ------------------------------------- | ------------------- | ---------------------------------------------------------------- |
31
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional breakpoint. |
32
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional breakpoint. |
33
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional breakpoint. |
34
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint. |
29
+ | Class | Applied to | Outcome |
30
+ | ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
31
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
32
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
33
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
34
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
35
35
 
36
36
  ### Special notes
37
37
 
38
38
  Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-c-select`, `.pf-c-options-menu`). Rather, `.pf-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
39
39
 
40
- **Available breakpoints are: `-on-sm, -on-md, -on-lg, -on-xl, -on-2xl`.**
40
+ **Available [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
41
41
 
42
42
  ## Examples
43
43
 
@@ -167,9 +167,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
167
167
  | Class | Applied to | Outcome |
168
168
  | ----------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
169
169
  | `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
170
- | `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing. |
171
- | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing. |
172
- | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding. |
170
+ | `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
171
+ | `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
172
+ | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
173
173
 
174
174
  ### Width control
175
175
 
@@ -195,10 +195,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
195
195
 
196
196
  ### Width control usage
197
197
 
198
- | Class | Applied to | Outcome |
199
- | ----------------------------------------------------------- | --------------------- | ----------------------------------------------- |
200
- | `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item. |
201
- | `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item. |
198
+ | Class | Applied to | Outcome |
199
+ | ----------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
200
+ | `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
201
+ | `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
202
202
 
203
203
  ### Group types
204
204
 
@@ -1041,11 +1041,11 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1041
1041
 
1042
1042
  ### Usage
1043
1043
 
1044
- | Class | Applied to | Outcome |
1045
- | ------------------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
1046
- | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at breakpoint. This selector must be applied consistently to toggle group and expandable content. |
1047
- | `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
1048
- | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
1044
+ | Class | Applied to | Outcome |
1045
+ | ------------------------------ | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1046
+ | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
1047
+ | `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
1048
+ | `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
1049
1049
 
1050
1050
  ### Selected
1051
1051
 
@@ -4094,10 +4094,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
4094
4094
  | `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
4095
4095
  | `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
4096
4096
  | `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
4097
- | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional breakpoint. |
4098
- | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional breakpoint. |
4099
- | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional breakpoint. |
4100
- | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint. |
4097
+ | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4098
+ | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4099
+ | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4100
+ | `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4101
4101
  | `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
4102
4102
  | `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
4103
4103
  | `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
@@ -4119,14 +4119,14 @@ As the toolbar component is a hybrid layout and component, some of its elements
4119
4119
 
4120
4120
  ### Toggle group usage
4121
4121
 
4122
- | Class | Applied to | Outcome |
4123
- | ------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4124
- | `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
4125
- | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at breakpoint. This selector must be applied consistently to toggle group and expandable content. |
4122
+ | Class | Applied to | Outcome |
4123
+ | ------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4124
+ | `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
4125
+ | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
4126
4126
 
4127
4127
  ### Spacer system
4128
4128
 
4129
- | Class | Applied to | Outcome |
4130
- | ------------------------------------------------------------ | --------------------------------------------- | --------------------------------------- |
4131
- | `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing. |
4132
- | `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing. |
4129
+ | Class | Applied to | Outcome |
4130
+ | ------------------------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
4131
+ | `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
4132
+ | `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -5,64 +5,370 @@ section: components
5
5
 
6
6
  ### Toast
7
7
 
8
- ```hbs isFullscreen
9
- {{> page-demo-default page-demo-default--id="alert-toast-example"}}
10
- {{#> alert-group alert-group--modifier="pf-m-toast"}}
11
- {{#> alert-item}}
12
- {{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
13
- {{#> alert-icon alert-icon--type="check-circle"}}
14
- {{/alert-icon}}
15
- {{#> alert-title}}
16
- {{#> screen-reader}}Success alert:{{/screen-reader}}
8
+ ```html isFullscreen
9
+ <div class="pf-c-page" id="alert-toast-example">
10
+ <a
11
+ class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
+ href="#main-content-alert-toast-example"
13
+ >Skip to content</a>
14
+ <header class="pf-c-page__header">
15
+ <div class="pf-c-page__header-brand">
16
+ <div class="pf-c-page__header-brand-toggle">
17
+ <button
18
+ class="pf-c-button pf-m-plain"
19
+ type="button"
20
+ id="alert-toast-example-nav-toggle"
21
+ aria-label="Global navigation"
22
+ aria-expanded="true"
23
+ aria-controls="alert-toast-example-primary-nav"
24
+ >
25
+ <i class="fas fa-bars" aria-hidden="true"></i>
26
+ </button>
27
+ </div>
28
+ <a href="#" class="pf-c-page__header-brand-link">
29
+ <img
30
+ class="pf-c-brand"
31
+ src="/assets/images/PF-Masthead-Logo.svg"
32
+ alt="PatternFly logo"
33
+ />
34
+ </a>
35
+ </div>
36
+ <div class="pf-c-page__header-tools">
37
+ <div class="pf-c-page__header-tools-group">
38
+ <div
39
+ class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
40
+ >
41
+ <button
42
+ class="pf-c-button pf-m-plain"
43
+ type="button"
44
+ aria-label="Settings"
45
+ >
46
+ <i class="fas fa-cog" aria-hidden="true"></i>
47
+ </button>
48
+ </div>
49
+ <div
50
+ class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
51
+ >
52
+ <button
53
+ class="pf-c-button pf-m-plain"
54
+ type="button"
55
+ aria-label="Help"
56
+ >
57
+ <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ <div class="pf-c-page__header-tools-group">
62
+ <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
63
+ <div class="pf-c-dropdown">
64
+ <button
65
+ class="pf-c-dropdown__toggle pf-m-plain"
66
+ id="alert-toast-example-dropdown-kebab-1-button"
67
+ aria-expanded="false"
68
+ type="button"
69
+ aria-label="Actions"
70
+ >
71
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
72
+ </button>
73
+ <ul
74
+ class="pf-c-dropdown__menu pf-m-align-right"
75
+ aria-labelledby="alert-toast-example-dropdown-kebab-1-button"
76
+ hidden
77
+ >
78
+ <li>
79
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
80
+ </li>
81
+ <li>
82
+ <button class="pf-c-dropdown__menu-item" type="button">Action</button>
83
+ </li>
84
+ <li>
85
+ <a
86
+ class="pf-c-dropdown__menu-item pf-m-disabled"
87
+ href="#"
88
+ aria-disabled="true"
89
+ tabindex="-1"
90
+ >Disabled link</a>
91
+ </li>
92
+ <li>
93
+ <button
94
+ class="pf-c-dropdown__menu-item"
95
+ type="button"
96
+ disabled
97
+ >Disabled action</button>
98
+ </li>
99
+ <li class="pf-c-divider" role="separator"></li>
100
+ <li>
101
+ <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
102
+ </li>
103
+ </ul>
104
+ </div>
105
+ </div>
106
+ <div
107
+ class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
108
+ >
109
+ <div class="pf-c-dropdown">
110
+ <button
111
+ class="pf-c-dropdown__toggle pf-m-plain"
112
+ id="alert-toast-example-dropdown-kebab-2-button"
113
+ aria-expanded="false"
114
+ type="button"
115
+ >
116
+ <span class="pf-c-dropdown__toggle-text">John Smith</span>
117
+ <span class="pf-c-dropdown__toggle-icon">
118
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
119
+ </span>
120
+ </button>
121
+ <ul
122
+ class="pf-c-dropdown__menu"
123
+ aria-labelledby="alert-toast-example-dropdown-kebab-2-button"
124
+ hidden
125
+ >
126
+ <li>
127
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
128
+ </li>
129
+ <li>
130
+ <button class="pf-c-dropdown__menu-item" type="button">Action</button>
131
+ </li>
132
+ <li>
133
+ <a
134
+ class="pf-c-dropdown__menu-item pf-m-disabled"
135
+ href="#"
136
+ aria-disabled="true"
137
+ tabindex="-1"
138
+ >Disabled link</a>
139
+ </li>
140
+ <li>
141
+ <button
142
+ class="pf-c-dropdown__menu-item"
143
+ type="button"
144
+ disabled
145
+ >Disabled action</button>
146
+ </li>
147
+ <li class="pf-c-divider" role="separator"></li>
148
+ <li>
149
+ <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
150
+ </li>
151
+ </ul>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ <img
156
+ class="pf-c-avatar"
157
+ src="/assets/images/img_avatar.svg"
158
+ alt="Avatar image"
159
+ />
160
+ </div>
161
+ </header>
162
+ <div class="pf-c-page__sidebar">
163
+ <div class="pf-c-page__sidebar-body">
164
+ <nav
165
+ class="pf-c-nav"
166
+ id="alert-toast-example-primary-nav"
167
+ aria-label="Global"
168
+ >
169
+ <ul class="pf-c-nav__list">
170
+ <li class="pf-c-nav__item">
171
+ <a href="#" class="pf-c-nav__link">System panel</a>
172
+ </li>
173
+ <li class="pf-c-nav__item">
174
+ <a
175
+ href="#"
176
+ class="pf-c-nav__link pf-m-current"
177
+ aria-current="page"
178
+ >Policy</a>
179
+ </li>
180
+ <li class="pf-c-nav__item">
181
+ <a href="#" class="pf-c-nav__link">Authentication</a>
182
+ </li>
183
+ <li class="pf-c-nav__item">
184
+ <a href="#" class="pf-c-nav__link">Network services</a>
185
+ </li>
186
+ <li class="pf-c-nav__item">
187
+ <a href="#" class="pf-c-nav__link">Server</a>
188
+ </li>
189
+ </ul>
190
+ </nav>
191
+ </div>
192
+ </div>
193
+ <main
194
+ class="pf-c-page__main"
195
+ tabindex="-1"
196
+ id="main-content-alert-toast-example"
197
+ >
198
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
199
+ <div class="pf-c-page__main-body">
200
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
201
+ <ol class="pf-c-breadcrumb__list">
202
+ <li class="pf-c-breadcrumb__item">
203
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
204
+ </li>
205
+ <li class="pf-c-breadcrumb__item">
206
+ <span class="pf-c-breadcrumb__item-divider">
207
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
208
+ </span>
209
+
210
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
211
+ </li>
212
+ <li class="pf-c-breadcrumb__item">
213
+ <span class="pf-c-breadcrumb__item-divider">
214
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
215
+ </span>
216
+
217
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
218
+ </li>
219
+ <li class="pf-c-breadcrumb__item">
220
+ <span class="pf-c-breadcrumb__item-divider">
221
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
222
+ </span>
223
+
224
+ <a
225
+ href="#"
226
+ class="pf-c-breadcrumb__link pf-m-current"
227
+ aria-current="page"
228
+ >Section landing</a>
229
+ </li>
230
+ </ol>
231
+ </nav>
232
+ </div>
233
+ </section>
234
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
235
+ <div class="pf-c-page__main-body">
236
+ <div class="pf-c-content">
237
+ <h1>Main title</h1>
238
+ <p>This is a full page demo.</p>
239
+ </div>
240
+ </div>
241
+ </section>
242
+ <section class="pf-c-page__main-section pf-m-limit-width">
243
+ <div class="pf-c-page__main-body">
244
+ <div class="pf-l-gallery pf-m-gutter">
245
+ <div class="pf-l-gallery__item">
246
+ <div class="pf-c-card">
247
+ <div class="pf-c-card__body">This is a card</div>
248
+ </div>
249
+ </div>
250
+ <div class="pf-l-gallery__item">
251
+ <div class="pf-c-card">
252
+ <div class="pf-c-card__body">This is a card</div>
253
+ </div>
254
+ </div>
255
+ <div class="pf-l-gallery__item">
256
+ <div class="pf-c-card">
257
+ <div class="pf-c-card__body">This is a card</div>
258
+ </div>
259
+ </div>
260
+ <div class="pf-l-gallery__item">
261
+ <div class="pf-c-card">
262
+ <div class="pf-c-card__body">This is a card</div>
263
+ </div>
264
+ </div>
265
+ <div class="pf-l-gallery__item">
266
+ <div class="pf-c-card">
267
+ <div class="pf-c-card__body">This is a card</div>
268
+ </div>
269
+ </div>
270
+ <div class="pf-l-gallery__item">
271
+ <div class="pf-c-card">
272
+ <div class="pf-c-card__body">This is a card</div>
273
+ </div>
274
+ </div>
275
+ <div class="pf-l-gallery__item">
276
+ <div class="pf-c-card">
277
+ <div class="pf-c-card__body">This is a card</div>
278
+ </div>
279
+ </div>
280
+ <div class="pf-l-gallery__item">
281
+ <div class="pf-c-card">
282
+ <div class="pf-c-card__body">This is a card</div>
283
+ </div>
284
+ </div>
285
+ <div class="pf-l-gallery__item">
286
+ <div class="pf-c-card">
287
+ <div class="pf-c-card__body">This is a card</div>
288
+ </div>
289
+ </div>
290
+ <div class="pf-l-gallery__item">
291
+ <div class="pf-c-card">
292
+ <div class="pf-c-card__body">This is a card</div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </section>
298
+ </main>
299
+ </div>
300
+ <ul class="pf-c-alert-group pf-m-toast">
301
+ <li class="pf-c-alert-group__item">
302
+ <div class="pf-c-alert pf-m-success" aria-label="Success alert">
303
+ <div class="pf-c-alert__icon">
304
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
305
+ </div>
306
+ <p class="pf-c-alert__title">
307
+ <span class="pf-screen-reader">Success alert:</span>
17
308
  Newest notification
18
- {{/alert-title}}
19
- {{#> alert-action}}
20
- {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close success alert: Newest notification"'}}
309
+ </p>
310
+ <div class="pf-c-alert__action">
311
+ <button
312
+ class="pf-c-button pf-m-plain"
313
+ type="button"
314
+ aria-label="Close success alert: Newest notification"
315
+ >
21
316
  <i class="fas fa-times" aria-hidden="true"></i>
22
- {{/button}}
23
- {{/alert-action}}
24
- {{#> alert-description}}
25
- This is a description of the notification content.
26
- {{/alert-description}}
27
- {{/alert}}
28
- {{/alert-item}}
29
- {{#> alert-item}}
30
- {{#> alert alert--modifier="pf-m-warning" alert--attribute='aria-label="Warning alert"'}}
31
- {{#> alert-icon alert-icon--type="exclamation-triangle"}}
32
- {{/alert-icon}}
33
- {{#> alert-title}}
34
- {{#> screen-reader}}Info alert:{{/screen-reader}}
317
+ </button>
318
+ </div>
319
+ <div class="pf-c-alert__description">
320
+ <p>This is a description of the notification content.</p>
321
+ </div>
322
+ </div>
323
+ </li>
324
+ <li class="pf-c-alert-group__item">
325
+ <div class="pf-c-alert pf-m-warning" aria-label="Warning alert">
326
+ <div class="pf-c-alert__icon">
327
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
328
+ </div>
329
+ <p class="pf-c-alert__title">
330
+ <span class="pf-screen-reader">Info alert:</span>
35
331
  Second newest notification
36
- {{/alert-title}}
37
- {{#> alert-action}}
38
- {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close warning alert: second newest notification"'}}
332
+ </p>
333
+ <div class="pf-c-alert__action">
334
+ <button
335
+ class="pf-c-button pf-m-plain"
336
+ type="button"
337
+ aria-label="Close warning alert: second newest notification"
338
+ >
39
339
  <i class="fas fa-times" aria-hidden="true"></i>
40
- {{/button}}
41
- {{/alert-action}}
42
- {{#> alert-description}}
43
- This is a description of the notification content.
44
- {{/alert-description}}
45
- {{/alert}}
46
- {{/alert-item}}
47
- {{#> alert-item}}
48
- {{#> alert alert--modifier="pf-m-danger" alert--attribute='aria-label="Danger alert"'}}
49
- {{#> alert-icon alert-icon--type="exclamation-circle"}}
50
- {{/alert-icon}}
51
- {{#> alert-title}}
52
- {{#> screen-reader}}Last notification{{/screen-reader}}
340
+ </button>
341
+ </div>
342
+ <div class="pf-c-alert__description">
343
+ <p>This is a description of the notification content.</p>
344
+ </div>
345
+ </div>
346
+ </li>
347
+ <li class="pf-c-alert-group__item">
348
+ <div class="pf-c-alert pf-m-danger" aria-label="Danger alert">
349
+ <div class="pf-c-alert__icon">
350
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
351
+ </div>
352
+ <p class="pf-c-alert__title">
353
+ <span class="pf-screen-reader">Last notification</span>
53
354
  Last notification
54
- {{/alert-title}}
55
- {{#> alert-action}}
56
- {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close danger alert: Last notification"'}}
355
+ </p>
356
+ <div class="pf-c-alert__action">
357
+ <button
358
+ class="pf-c-button pf-m-plain"
359
+ type="button"
360
+ aria-label="Close danger alert: Last notification"
361
+ >
57
362
  <i class="fas fa-times" aria-hidden="true"></i>
58
- {{/button}}
59
- {{/alert-action}}
60
- {{#> alert-description}}
61
- This is a description of the notification content.
62
- {{/alert-description}}
63
- {{/alert}}
64
- {{/alert-item}}
65
- {{/alert-group}}
363
+ </button>
364
+ </div>
365
+ <div class="pf-c-alert__description">
366
+ <p>This is a description of the notification content.</p>
367
+ </div>
368
+ </div>
369
+ </li>
370
+ </ul>
371
+
66
372
  ```
67
373
 
68
374
  ### Inline Alert in Horizontal Form