@patternfly/patternfly 4.156.2 → 4.158.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.
- package/components/Dropdown/dropdown.css +89 -12
- package/components/Dropdown/dropdown.scss +122 -12
- package/components/DualListSelector/dual-list-selector.css +3 -5
- package/components/DualListSelector/dual-list-selector.scss +4 -6
- package/components/Menu/menu.css +21 -19
- package/components/Menu/menu.scss +29 -24
- package/components/MenuToggle/menu-toggle.css +48 -1
- package/components/MenuToggle/menu-toggle.scss +62 -1
- package/components/Nav/nav.css +129 -41
- package/components/Nav/nav.scss +164 -51
- package/docs/components/Dropdown/examples/Dropdown.css +4 -1
- package/docs/components/Dropdown/examples/Dropdown.md +251 -2
- package/docs/components/DualListSelector/examples/DualListSelector.md +359 -182
- package/docs/components/Menu/examples/Menu.css +2 -1
- package/docs/components/Menu/examples/Menu.md +123 -0
- package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
- package/docs/components/Nav/examples/Navigation.css +7 -6
- package/docs/components/Nav/examples/Navigation.md +1368 -12
- package/package.json +1 -1
- package/patternfly-no-reset.css +290 -78
- package/patternfly.css +290 -78
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -771,6 +771,128 @@ cssPrefix: pf-c-menu
|
|
|
771
771
|
|
|
772
772
|
```
|
|
773
773
|
|
|
774
|
+
### Standard menu, flyout child
|
|
775
|
+
|
|
776
|
+
```html
|
|
777
|
+
<div class="pf-c-menu">
|
|
778
|
+
<div class="pf-c-menu__content">
|
|
779
|
+
<ul class="pf-c-menu__list">
|
|
780
|
+
<li class="pf-c-menu__list-item">
|
|
781
|
+
<button class="pf-c-menu__item" type="button">
|
|
782
|
+
<span class="pf-c-menu__item-main">
|
|
783
|
+
<span class="pf-c-menu__item-text">Start rollout</span>
|
|
784
|
+
</span>
|
|
785
|
+
</button>
|
|
786
|
+
</li>
|
|
787
|
+
<li class="pf-c-menu__list-item">
|
|
788
|
+
<button class="pf-c-menu__item" type="button">
|
|
789
|
+
<span class="pf-c-menu__item-main">
|
|
790
|
+
<span class="pf-c-menu__item-text">Pause rollouts</span>
|
|
791
|
+
</span>
|
|
792
|
+
</button>
|
|
793
|
+
</li>
|
|
794
|
+
<li class="pf-c-menu__list-item">
|
|
795
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="false">
|
|
796
|
+
<span class="pf-c-menu__item-main">
|
|
797
|
+
<span class="pf-c-menu__item-text">Add storage</span>
|
|
798
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
799
|
+
<i class="fas fa-angle-right"></i>
|
|
800
|
+
</span>
|
|
801
|
+
</span>
|
|
802
|
+
</button>
|
|
803
|
+
<div class="pf-c-menu pf-m-flyout" hidden>
|
|
804
|
+
<div class="pf-c-menu__content">
|
|
805
|
+
<ul class="pf-c-menu__list">
|
|
806
|
+
<li class="pf-c-menu__list-item">
|
|
807
|
+
<button class="pf-c-menu__item" type="button">
|
|
808
|
+
<span class="pf-c-menu__item-main">
|
|
809
|
+
<span class="pf-c-menu__item-text">Application grouping</span>
|
|
810
|
+
</span>
|
|
811
|
+
</button>
|
|
812
|
+
</li>
|
|
813
|
+
<li class="pf-c-menu__list-item">
|
|
814
|
+
<button class="pf-c-menu__item" type="button">
|
|
815
|
+
<span class="pf-c-menu__item-main">
|
|
816
|
+
<span class="pf-c-menu__item-text">Count</span>
|
|
817
|
+
</span>
|
|
818
|
+
</button>
|
|
819
|
+
</li>
|
|
820
|
+
<li class="pf-c-menu__list-item">
|
|
821
|
+
<button class="pf-c-menu__item" type="button">
|
|
822
|
+
<span class="pf-c-menu__item-main">
|
|
823
|
+
<span class="pf-c-menu__item-text">Labels</span>
|
|
824
|
+
</span>
|
|
825
|
+
</button>
|
|
826
|
+
</li>
|
|
827
|
+
<li class="pf-c-menu__list-item">
|
|
828
|
+
<button class="pf-c-menu__item" type="button">
|
|
829
|
+
<span class="pf-c-menu__item-main">
|
|
830
|
+
<span class="pf-c-menu__item-text">Annotations</span>
|
|
831
|
+
</span>
|
|
832
|
+
</button>
|
|
833
|
+
</li>
|
|
834
|
+
</ul>
|
|
835
|
+
</div>
|
|
836
|
+
</div>
|
|
837
|
+
</li>
|
|
838
|
+
<li class="pf-c-menu__list-item">
|
|
839
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="true">
|
|
840
|
+
<span class="pf-c-menu__item-main">
|
|
841
|
+
<span class="pf-c-menu__item-text">Edit</span>
|
|
842
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
843
|
+
<i class="fas fa-angle-right"></i>
|
|
844
|
+
</span>
|
|
845
|
+
</span>
|
|
846
|
+
<span class="pf-c-menu__item-description">Description</span>
|
|
847
|
+
</button>
|
|
848
|
+
<div class="pf-c-menu pf-m-flyout">
|
|
849
|
+
<div class="pf-c-menu__content">
|
|
850
|
+
<ul class="pf-c-menu__list">
|
|
851
|
+
<li class="pf-c-menu__list-item">
|
|
852
|
+
<button class="pf-c-menu__item" type="button">
|
|
853
|
+
<span class="pf-c-menu__item-main">
|
|
854
|
+
<span class="pf-c-menu__item-text">Application grouping</span>
|
|
855
|
+
</span>
|
|
856
|
+
</button>
|
|
857
|
+
</li>
|
|
858
|
+
<li class="pf-c-menu__list-item">
|
|
859
|
+
<button class="pf-c-menu__item" type="button">
|
|
860
|
+
<span class="pf-c-menu__item-main">
|
|
861
|
+
<span class="pf-c-menu__item-text">Count</span>
|
|
862
|
+
</span>
|
|
863
|
+
</button>
|
|
864
|
+
</li>
|
|
865
|
+
<li class="pf-c-menu__list-item">
|
|
866
|
+
<button class="pf-c-menu__item" type="button">
|
|
867
|
+
<span class="pf-c-menu__item-main">
|
|
868
|
+
<span class="pf-c-menu__item-text">Labels</span>
|
|
869
|
+
</span>
|
|
870
|
+
</button>
|
|
871
|
+
</li>
|
|
872
|
+
<li class="pf-c-menu__list-item">
|
|
873
|
+
<button class="pf-c-menu__item" type="button">
|
|
874
|
+
<span class="pf-c-menu__item-main">
|
|
875
|
+
<span class="pf-c-menu__item-text">Annotations</span>
|
|
876
|
+
</span>
|
|
877
|
+
</button>
|
|
878
|
+
</li>
|
|
879
|
+
</ul>
|
|
880
|
+
</div>
|
|
881
|
+
</div>
|
|
882
|
+
</li>
|
|
883
|
+
<li class="pf-c-menu__list-item">
|
|
884
|
+
<button class="pf-c-menu__item" type="button">
|
|
885
|
+
<span class="pf-c-menu__item-main">
|
|
886
|
+
<span class="pf-c-menu__item-text">Delete deployment config</span>
|
|
887
|
+
</span>
|
|
888
|
+
</button>
|
|
889
|
+
</li>
|
|
890
|
+
</ul>
|
|
891
|
+
</div>
|
|
892
|
+
</div>
|
|
893
|
+
|
|
894
|
+
```
|
|
895
|
+
|
|
774
896
|
### Drilldown
|
|
775
897
|
|
|
776
898
|
```html isBeta
|
|
@@ -4962,6 +5084,7 @@ cssPrefix: pf-c-menu
|
|
|
4962
5084
|
| `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
|
|
4963
5085
|
| `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
|
|
4964
5086
|
| `.pf-m-scrollable` | `.pf-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-c-menu__content--MaxHeight`. |
|
|
5087
|
+
| `.pf-m-current` | `.pf-c-menu__list-item` | Modifies a list item for current styles. |
|
|
4965
5088
|
| `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
|
|
4966
5089
|
| `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
|
|
4967
5090
|
| `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
|
|
@@ -151,6 +151,70 @@ cssPrefix: pf-c-menu-toggle
|
|
|
151
151
|
|
|
152
152
|
```
|
|
153
153
|
|
|
154
|
+
### Secondary
|
|
155
|
+
|
|
156
|
+
```html
|
|
157
|
+
<button
|
|
158
|
+
class="pf-c-menu-toggle pf-m-secondary"
|
|
159
|
+
type="button"
|
|
160
|
+
aria-expanded="false"
|
|
161
|
+
>
|
|
162
|
+
<span class="pf-c-menu-toggle__text">Collapsed</span>
|
|
163
|
+
<span class="pf-c-menu-toggle__controls">
|
|
164
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
165
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
166
|
+
</span>
|
|
167
|
+
</span>
|
|
168
|
+
</button>
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
<button
|
|
172
|
+
class="pf-c-menu-toggle pf-m-secondary"
|
|
173
|
+
type="button"
|
|
174
|
+
aria-expanded="false"
|
|
175
|
+
>
|
|
176
|
+
<span class="pf-c-menu-toggle__icon">
|
|
177
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
178
|
+
</span>
|
|
179
|
+
<span class="pf-c-menu-toggle__text">Icon</span>
|
|
180
|
+
<span class="pf-c-menu-toggle__controls">
|
|
181
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
182
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
183
|
+
</span>
|
|
184
|
+
</span>
|
|
185
|
+
</button>
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
<button
|
|
189
|
+
class="pf-c-menu-toggle pf-m-secondary pf-m-expanded"
|
|
190
|
+
type="button"
|
|
191
|
+
aria-expanded="true"
|
|
192
|
+
>
|
|
193
|
+
<span class="pf-c-menu-toggle__text">Expanded</span>
|
|
194
|
+
<span class="pf-c-menu-toggle__controls">
|
|
195
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
196
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
197
|
+
</span>
|
|
198
|
+
</span>
|
|
199
|
+
</button>
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
<button
|
|
203
|
+
class="pf-c-menu-toggle pf-m-secondary"
|
|
204
|
+
type="button"
|
|
205
|
+
aria-expanded="false"
|
|
206
|
+
disabled
|
|
207
|
+
>
|
|
208
|
+
<span class="pf-c-menu-toggle__text">Disabled</span>
|
|
209
|
+
<span class="pf-c-menu-toggle__controls">
|
|
210
|
+
<span class="pf-c-menu-toggle__toggle-icon">
|
|
211
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
212
|
+
</span>
|
|
213
|
+
</span>
|
|
214
|
+
</button>
|
|
215
|
+
|
|
216
|
+
```
|
|
217
|
+
|
|
154
218
|
### Plain
|
|
155
219
|
|
|
156
220
|
```html
|
|
@@ -283,17 +347,18 @@ cssPrefix: pf-c-menu-toggle
|
|
|
283
347
|
|
|
284
348
|
### Usage
|
|
285
349
|
|
|
286
|
-
| Class | Applied | Outcome
|
|
287
|
-
| -------------------------------- | ------------------- |
|
|
288
|
-
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component.
|
|
289
|
-
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon.
|
|
290
|
-
| `.pf-c-menu-toggle__image` | `<span>` | Defines the menu toggle component image.
|
|
291
|
-
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text.
|
|
292
|
-
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count.
|
|
293
|
-
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls.
|
|
294
|
-
| `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon.
|
|
295
|
-
| `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation.
|
|
296
|
-
| `.pf-m-
|
|
297
|
-
| `.pf-m-
|
|
298
|
-
| `.pf-m-
|
|
299
|
-
| `.pf-m-
|
|
350
|
+
| Class | Applied | Outcome |
|
|
351
|
+
| -------------------------------- | ------------------- | --------------------------------------------------------------- |
|
|
352
|
+
| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
|
|
353
|
+
| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon. |
|
|
354
|
+
| `.pf-c-menu-toggle__image` | `<span>` | Defines the menu toggle component image. |
|
|
355
|
+
| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
|
|
356
|
+
| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
|
|
357
|
+
| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
|
|
358
|
+
| `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
|
|
359
|
+
| `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
|
|
360
|
+
| `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
|
|
361
|
+
| `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
|
|
362
|
+
| `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
|
|
363
|
+
| `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
|
|
364
|
+
| `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
|
|
@@ -5,14 +5,16 @@
|
|
|
5
5
|
#ws-core-c-navigation-expanded,
|
|
6
6
|
#ws-core-c-navigation-expanded-with-subnav-titles,
|
|
7
7
|
#ws-core-c-navigation-mixed,
|
|
8
|
-
#ws-core-c-navigation-flyout-with-menu-component,
|
|
9
8
|
#ws-core-c-navigation-horizontal,
|
|
10
9
|
#ws-core-c-navigation-horizontal-overflow,
|
|
11
10
|
#ws-core-c-navigation-horizontal-subnav,
|
|
12
11
|
#ws-core-c-navigation-horizontal-subnav-overflow,
|
|
13
12
|
#ws-core-c-navigation-drilldown,
|
|
13
|
+
#ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
|
|
14
14
|
#ws-core-c-navigation-level-2-drilldown,
|
|
15
|
-
#ws-core-c-navigation-level-3-drilldown
|
|
15
|
+
#ws-core-c-navigation-level-3-drilldown,
|
|
16
|
+
#ws-core-c-navigation-nav-with-flyout .pf-c-nav,
|
|
17
|
+
#ws-core-c-navigation-nav-with-menu-and-flyout .pf-c-nav {
|
|
16
18
|
padding: 0;
|
|
17
19
|
background-color: var(--pf-global--BackgroundColor--dark-300);
|
|
18
20
|
}
|
|
@@ -44,9 +46,8 @@
|
|
|
44
46
|
grid-row: 1;
|
|
45
47
|
}
|
|
46
48
|
|
|
47
|
-
#ws-core-c-navigation-
|
|
48
|
-
|
|
49
|
-
#ws-core-c-navigation-
|
|
50
|
-
#ws-core-c-navigation-level-3-drilldown {
|
|
49
|
+
#ws-core-c-navigation-nav-with-flyout .ws-preview-html,
|
|
50
|
+
[id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html,
|
|
51
|
+
#ws-core-c-navigation-nav-with-menu-and-flyout .ws-preview-html {
|
|
51
52
|
width: 260px;
|
|
52
53
|
}
|