@patternfly/patternfly 4.177.1 → 4.178.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/Nav/nav.css +3 -0
- package/components/Nav/nav.scss +4 -0
- package/docs/components/Nav/examples/Navigation.css +3 -1
- package/docs/components/Nav/examples/Navigation.md +79 -0
- package/docs/demos/Alert/examples/Alert.md +3 -3
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/ContextSelector/examples/ContextSelector.md +32 -2018
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -4
- package/docs/demos/Masthead/examples/Masthead.md +1643 -1026
- package/docs/demos/Nav/examples/Nav.md +8 -8
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +959 -7
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
- package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
- package/docs/demos/Table/examples/Table.md +1784 -16
- package/docs/demos/Tabs/examples/Tabs.md +8 -8
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -1
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +3 -0
- package/patternfly.css +3 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/Nav/nav.css
CHANGED
|
@@ -868,6 +868,9 @@
|
|
|
868
868
|
.pf-c-nav__section + .pf-c-nav__section {
|
|
869
869
|
--pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
|
|
870
870
|
}
|
|
871
|
+
.pf-c-nav__section.pf-m-no-title {
|
|
872
|
+
--pf-c-nav__section--MarginTop: 0;
|
|
873
|
+
}
|
|
871
874
|
|
|
872
875
|
.pf-c-nav__section-title {
|
|
873
876
|
padding: var(--pf-c-nav__section-title--PaddingTop) var(--pf-c-nav__section-title--PaddingRight) var(--pf-c-nav__section-title--PaddingBottom) var(--pf-c-nav__section-title--PaddingLeft);
|
package/components/Nav/nav.scss
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
#ws-core-c-navigation-basic,
|
|
3
3
|
#ws-core-c-navigation-grouped,
|
|
4
4
|
#ws-core-c-navigation-grouped-nav,
|
|
5
|
+
#ws-core-c-navigation-grouped-nav-no-titles,
|
|
5
6
|
#ws-core-c-navigation-expanded,
|
|
6
7
|
#ws-core-c-navigation-expanded-with-subnav-titles,
|
|
7
8
|
#ws-core-c-navigation-mixed,
|
|
@@ -13,7 +14,8 @@
|
|
|
13
14
|
#ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
|
|
14
15
|
#ws-core-c-navigation-level-2-drilldown,
|
|
15
16
|
#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-flyout .pf-c-nav,
|
|
18
|
+
#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
|
|
17
19
|
padding: 0;
|
|
18
20
|
background-color: var(--pf-global--BackgroundColor--dark-300);
|
|
19
21
|
}
|
|
@@ -72,6 +72,83 @@ cssPrefix: pf-c-nav
|
|
|
72
72
|
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
### Grouped nav, no titles
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<nav class="pf-c-nav" aria-label="Global">
|
|
79
|
+
<section class="pf-c-nav__section pf-m-no-title" aria-label="Section one">
|
|
80
|
+
<ul class="pf-c-nav__list">
|
|
81
|
+
<li class="pf-c-nav__item">
|
|
82
|
+
<a href="#" class="pf-c-nav__link">Link 1</a>
|
|
83
|
+
</li>
|
|
84
|
+
<li class="pf-c-nav__item">
|
|
85
|
+
<a href="#" class="pf-c-nav__link">Link 2</a>
|
|
86
|
+
</li>
|
|
87
|
+
<li class="pf-c-nav__item">
|
|
88
|
+
<a href="#" class="pf-c-nav__link">Link 3</a>
|
|
89
|
+
</li>
|
|
90
|
+
</ul>
|
|
91
|
+
</section>
|
|
92
|
+
<hr class="pf-c-divider" />
|
|
93
|
+
<section class="pf-c-nav__section pf-m-no-title" aria-label="Section two">
|
|
94
|
+
<ul class="pf-c-nav__list">
|
|
95
|
+
<li class="pf-c-nav__item">
|
|
96
|
+
<a href="#" class="pf-c-nav__link">Section 2, link 1</a>
|
|
97
|
+
</li>
|
|
98
|
+
<li class="pf-c-nav__item">
|
|
99
|
+
<a
|
|
100
|
+
href="#"
|
|
101
|
+
class="pf-c-nav__link pf-m-current"
|
|
102
|
+
aria-current="page"
|
|
103
|
+
>Current link</a>
|
|
104
|
+
</li>
|
|
105
|
+
<li class="pf-c-nav__item">
|
|
106
|
+
<a href="#" class="pf-c-nav__link">Link 3</a>
|
|
107
|
+
</li>
|
|
108
|
+
</ul>
|
|
109
|
+
</section>
|
|
110
|
+
</nav>
|
|
111
|
+
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Grouped nav, no titles, no margin top
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<nav class="pf-c-nav" aria-label="Global">
|
|
118
|
+
<section class="pf-c-nav__section pf-m-no-title" aria-label="Section one">
|
|
119
|
+
<ul class="pf-c-nav__list">
|
|
120
|
+
<li class="pf-c-nav__item">
|
|
121
|
+
<a href="#" class="pf-c-nav__link">Link 1</a>
|
|
122
|
+
</li>
|
|
123
|
+
<li class="pf-c-nav__item">
|
|
124
|
+
<a href="#" class="pf-c-nav__link">Link 2</a>
|
|
125
|
+
</li>
|
|
126
|
+
<li class="pf-c-nav__item">
|
|
127
|
+
<a href="#" class="pf-c-nav__link">Link 3</a>
|
|
128
|
+
</li>
|
|
129
|
+
</ul>
|
|
130
|
+
</section>
|
|
131
|
+
<section class="pf-c-nav__section pf-m-no-title" aria-label="Section two">
|
|
132
|
+
<ul class="pf-c-nav__list">
|
|
133
|
+
<li class="pf-c-nav__item">
|
|
134
|
+
<a href="#" class="pf-c-nav__link">Section 2, link 1</a>
|
|
135
|
+
</li>
|
|
136
|
+
<li class="pf-c-nav__item">
|
|
137
|
+
<a
|
|
138
|
+
href="#"
|
|
139
|
+
class="pf-c-nav__link pf-m-current"
|
|
140
|
+
aria-current="page"
|
|
141
|
+
>Current link</a>
|
|
142
|
+
</li>
|
|
143
|
+
<li class="pf-c-nav__item">
|
|
144
|
+
<a href="#" class="pf-c-nav__link">Link 3</a>
|
|
145
|
+
</li>
|
|
146
|
+
</ul>
|
|
147
|
+
</section>
|
|
148
|
+
</nav>
|
|
149
|
+
|
|
150
|
+
```
|
|
151
|
+
|
|
75
152
|
### Expanded
|
|
76
153
|
|
|
77
154
|
```html
|
|
@@ -1996,6 +2073,7 @@ The navigation system relies on several different sub-components:
|
|
|
1996
2073
|
| Attribute | Applied to | Outcome |
|
|
1997
2074
|
| -------------------------------------------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1998
2075
|
| `aria-label="[landmark description]"` | `.pf-c-nav` | Describes `<nav>` landmark. |
|
|
2076
|
+
| `aria-label="[section title]"` | `.pf-c-nav__section` | Describes a nav `<section>`, where a `.pf-c-nav__section-title` is not present. |
|
|
1999
2077
|
| `aria-labelledby="[id value of link describing subnav]"` | `.pf-c-nav__subnav` | Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
|
|
2000
2078
|
| `aria-expanded="false"` | `.pf-c-nav__link` | Indicates that subnav section is hidden. |
|
|
2001
2079
|
| `aria-expanded="true"` | `.pf-c-nav__link` | Indicates that subnav section is visible. |
|
|
@@ -2019,6 +2097,7 @@ The navigation system relies on several different sub-components:
|
|
|
2019
2097
|
| `.pf-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
|
|
2020
2098
|
| `.pf-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
|
|
2021
2099
|
| `.pf-m-horizontal` | `.pf-c-nav` | Modifies nav for the horizontal variation. |
|
|
2100
|
+
| `.pf-m-no-title` | `.pf-c-nav__section` | Modifies nav section margin top to 0. |
|
|
2022
2101
|
| `.pf-m-horizontal-subnav` | `.pf-c-nav` | Modifies nav for the horizontal subnav variation. |
|
|
2023
2102
|
| `.pf-m-tertiary` | `.pf-c-nav` | Modifies nav for the tertiary variation. |
|
|
2024
2103
|
| `.pf-m-light` | `.pf-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-c-page__sidebar`)**. |
|
|
@@ -54,7 +54,7 @@ section: components
|
|
|
54
54
|
type="button"
|
|
55
55
|
aria-label="Help"
|
|
56
56
|
>
|
|
57
|
-
<i class="
|
|
57
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
58
58
|
</button>
|
|
59
59
|
</div>
|
|
60
60
|
</div>
|
|
@@ -422,7 +422,7 @@ section: components
|
|
|
422
422
|
type="button"
|
|
423
423
|
aria-label="Help"
|
|
424
424
|
>
|
|
425
|
-
<i class="
|
|
425
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
426
426
|
</button>
|
|
427
427
|
</div>
|
|
428
428
|
</div>
|
|
@@ -795,7 +795,7 @@ section: components
|
|
|
795
795
|
type="button"
|
|
796
796
|
aria-label="Help"
|
|
797
797
|
>
|
|
798
|
-
<i class="
|
|
798
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
799
799
|
</button>
|
|
800
800
|
</div>
|
|
801
801
|
</div>
|
|
@@ -57,7 +57,7 @@ wrapperTag: div
|
|
|
57
57
|
type="button"
|
|
58
58
|
aria-label="Help"
|
|
59
59
|
>
|
|
60
|
-
<i class="
|
|
60
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
61
61
|
</button>
|
|
62
62
|
</div>
|
|
63
63
|
</div>
|
|
@@ -856,7 +856,7 @@ wrapperTag: div
|
|
|
856
856
|
type="button"
|
|
857
857
|
aria-label="Help"
|
|
858
858
|
>
|
|
859
|
-
<i class="
|
|
859
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
860
860
|
</button>
|
|
861
861
|
</div>
|
|
862
862
|
</div>
|