@patternfly/patternfly 4.186.1 → 4.187.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.
@@ -51,6 +51,7 @@
51
51
  --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
52
52
  --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
53
53
  --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
54
+ --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
54
55
  --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
55
56
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
56
57
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -155,6 +156,7 @@
155
156
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
156
157
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
157
158
  --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
159
+ z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
158
160
  box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
159
161
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
160
162
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
@@ -57,6 +57,7 @@
57
57
  --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
58
58
  --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
59
59
  --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
60
+ --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
60
61
  --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
61
62
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
62
63
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -196,6 +197,7 @@
196
197
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY); // moves before down when selected - same amount and speed as the selected card moves up
197
198
  --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY); // causes the before to grow in height - more performant than transitioning height
198
199
 
200
+ z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex); // allows elements (ie, dropdowns) from this card to appear on other cards since the transform creates a new stacking context
199
201
  box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
200
202
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
201
203
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY)); // moves card up when selected
@@ -33,6 +33,7 @@
33
33
  --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
34
34
  --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
35
35
  --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
36
+ --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
36
37
  --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
37
38
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
38
39
  --pf-c-form-control--disabled--BorderColor: transparent;
@@ -293,6 +294,12 @@ select.pf-c-form-control.pf-m-warning {
293
294
  select.pf-c-form-control.pf-m-placeholder {
294
295
  color: var(--pf-c-form-control--placeholder--Color);
295
296
  }
297
+ select.pf-c-form-control.pf-m-placeholder * {
298
+ color: var(--pf-c-form-control--placeholder--child--Color);
299
+ }
300
+ select.pf-c-form-control.pf-m-placeholder *:disabled {
301
+ color: revert;
302
+ }
296
303
 
297
304
  textarea.pf-c-form-control {
298
305
  --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
@@ -62,6 +62,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
62
62
 
63
63
  // input placeholder style
64
64
  --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
65
+ --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
65
66
 
66
67
  // input disabled style
67
68
  --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
@@ -407,6 +408,16 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
407
408
 
408
409
  &.pf-m-placeholder {
409
410
  color: var(--pf-c-form-control--placeholder--Color);
411
+
412
+ * {
413
+ color: var(--pf-c-form-control--placeholder--child--Color);
414
+
415
+ // stylelint-disable max-nesting-depth
416
+ &:disabled {
417
+ color: revert;
418
+ }
419
+ // stylelint-enable
420
+ }
410
421
  }
411
422
  }
412
423
 
@@ -1,5 +1,6 @@
1
1
  @mixin page() {
2
2
  .pf-c-page {
3
+ --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
3
4
  --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
4
5
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
5
6
  --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
@@ -154,6 +154,10 @@
154
154
  --pf-c-tabs--before--BorderBottomWidth: 0;
155
155
  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
156
156
  }
157
+ .pf-c-tabs.pf-m-border-bottom {
158
+ --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
159
+ --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
160
+ }
157
161
  .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
158
162
  --pf-c-tabs__link--after--BorderBottomWidth: 0;
159
163
  }
@@ -199,6 +199,11 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
199
199
  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
200
200
  }
201
201
 
202
+ &.pf-m-border-bottom {
203
+ --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
204
+ --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
205
+ }
206
+
202
207
  // Remove bottom border for variants
203
208
  &.pf-m-box,
204
209
  &.pf-m-vertical {
@@ -124,6 +124,22 @@ cssPrefix: pf-c-form-control
124
124
  id="select-standard"
125
125
  name="select-standard"
126
126
  aria-label="Standard select example"
127
+ >
128
+ <option value selected disabled>Please choose</option>
129
+ <option value="Mr">Mr</option>
130
+ <option value="Miss">Miss</option>
131
+ <option value="Mrs">Mrs</option>
132
+ <option value="Ms">Ms</option>
133
+ <option value="Dr">Dr</option>
134
+ <option value="Other">Other</option>
135
+ </select>
136
+ <br />
137
+ <br />
138
+ <select
139
+ class="pf-c-form-control pf-m-placeholder"
140
+ id="select-placeholder-enabled"
141
+ name="select-placeholder-enabled"
142
+ aria-label="Placeholder enabled select example"
127
143
  >
128
144
  <option value selected>Please choose</option>
129
145
  <option value="Mr">Mr</option>
@@ -43,40 +43,35 @@ cssPrefix: pf-c-tab-content
43
43
  ### Padding
44
44
 
45
45
  ```html
46
- <section
47
- class="pf-c-tab-content pf-m-padding"
48
- id="tab1-panel"
49
- role="tabpanel"
50
- tabindex="0"
51
- >
52
- <div class="pf-c-tab-content__body">Panel 1</div>
46
+ <section class="pf-c-tab-content" id="tab1-panel" role="tabpanel" tabindex="0">
47
+ <div class="pf-c-tab-content__body pf-m-padding">Panel 1</div>
53
48
  </section>
54
49
  <section
55
- class="pf-c-tab-content pf-m-padding"
50
+ class="pf-c-tab-content"
56
51
  id="tab2-panel"
57
52
  role="tabpanel"
58
53
  tabindex="0"
59
54
  hidden
60
55
  >
61
- <div class="pf-c-tab-content__body">Panel 2</div>
56
+ <div class="pf-c-tab-content__body pf-m-padding">Panel 2</div>
62
57
  </section>
63
58
  <section
64
- class="pf-c-tab-content pf-m-padding"
59
+ class="pf-c-tab-content"
65
60
  id="tab3-panel"
66
61
  role="tabpanel"
67
62
  tabindex="0"
68
63
  hidden
69
64
  >
70
- <div class="pf-c-tab-content__body">Panel 3</div>
65
+ <div class="pf-c-tab-content__body pf-m-padding">Panel 3</div>
71
66
  </section>
72
67
  <section
73
- class="pf-c-tab-content pf-m-padding"
68
+ class="pf-c-tab-content"
74
69
  id="tab4-panel"
75
70
  role="tabpanel"
76
71
  tabindex="0"
77
72
  hidden
78
73
  >
79
- <div class="pf-c-tab-content__body">Panel 4</div>
74
+ <div class="pf-c-tab-content__body pf-m-padding">Panel 4</div>
80
75
  </section>
81
76
 
82
77
  ```
@@ -1910,6 +1910,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
1910
1910
  | `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
1911
1911
  | `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
1912
1912
  | `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
1913
+ | `.pf-m-border-bottom` | `.pf-c-tabs` | Adds a bottom border to secondary tabs. |
1913
1914
  | `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
1914
1915
  | `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
1915
1916
  | `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
@@ -2110,222 +2110,214 @@ section: components
2110
2110
  </div>
2111
2111
  </div>
2112
2112
  </section>
2113
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
2113
+ <section
2114
+ class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
2115
+ >
2114
2116
  <div class="pf-c-page__main-body">
2115
- <div class="pf-l-flex pf-m-column">
2116
- <div class="pf-l-flex__item">
2117
- <div
2118
- class="pf-c-tabs pf-m-inset pf-m-secondary"
2119
- id="tabs-tables-and-tabs-example-tabs-secondary"
2120
- >
2121
- <ul class="pf-c-tabs__list">
2122
- <li class="pf-c-tabs__item pf-m-current">
2123
- <button
2124
- class="pf-c-tabs__link"
2125
- aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
2126
- id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
2127
- >
2128
- <span class="pf-c-tabs__item-text">Pod information</span>
2129
- </button>
2130
- </li>
2131
- <li class="pf-c-tabs__item">
2132
- <button
2133
- class="pf-c-tabs__link"
2134
- aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
2135
- id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
2136
- >
2137
- <span class="pf-c-tabs__item-text">Editable Aspects</span>
2138
- </button>
2139
- </li>
2140
- </ul>
2141
- </div>
2142
- </div>
2143
- <div class="pf-l-flex__item">
2117
+ <div
2118
+ class="pf-c-tabs pf-m-secondary pf-m-page-insets pf-m-border-bottom"
2119
+ id="tabs-tables-and-tabs-example-tabs-secondary"
2120
+ >
2121
+ <ul class="pf-c-tabs__list">
2122
+ <li class="pf-c-tabs__item pf-m-current">
2123
+ <button
2124
+ class="pf-c-tabs__link"
2125
+ aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
2126
+ id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
2127
+ >
2128
+ <span class="pf-c-tabs__item-text">Pod information</span>
2129
+ </button>
2130
+ </li>
2131
+ <li class="pf-c-tabs__item">
2132
+ <button
2133
+ class="pf-c-tabs__link"
2134
+ aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
2135
+ id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
2136
+ >
2137
+ <span class="pf-c-tabs__item-text">Editable Aspects</span>
2138
+ </button>
2139
+ </li>
2140
+ </ul>
2141
+ </div>
2142
+ <section
2143
+ class="pf-c-tab-content"
2144
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
2145
+ id="tabs-tables-and-tabs-example-tabs-details-panel"
2146
+ role="tabpanel"
2147
+ tabindex="0"
2148
+ >
2149
+ <div class="pf-c-tab-content__body pf-m-padding">
2144
2150
  <section
2145
2151
  class="pf-c-tab-content"
2146
- aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
2147
- id="tabs-tables-and-tabs-example-tabs-details-panel"
2152
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
2153
+ id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
2148
2154
  role="tabpanel"
2149
2155
  tabindex="0"
2150
2156
  >
2151
2157
  <div class="pf-c-tab-content__body">
2152
- <section
2153
- class="pf-c-tab-content"
2154
- aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
2155
- id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
2156
- role="tabpanel"
2157
- tabindex="0"
2158
- >
2159
- <div class="pf-c-tab-content__body">
2160
- <div class="pf-l-flex pf-m-column">
2161
- <div class="pf-l-flex__item">
2162
- <dl
2163
- class="pf-c-description-list pf-m-2-col-on-lg"
2164
- aria-label="Pod information list"
2165
- >
2166
- <div class="pf-c-description-list__group">
2167
- <dt class="pf-c-description-list__term">Name</dt>
2168
- <dd class="pf-c-description-list__description">
2169
- <div
2170
- class="pf-c-description-list__text"
2171
- >3scale-control-fccb6ddb9-phyqv9</div>
2172
- </dd>
2173
- </div>
2174
- <div class="pf-c-description-list__group">
2175
- <dt class="pf-c-description-list__term">Status</dt>
2176
- <dd class="pf-c-description-list__description">
2177
- <div class="pf-c-description-list__text">
2178
- <div class="pf-l-flex pf-m-space-items-sm">
2179
- <div class="pf-l-flex__item">
2180
- <i
2181
- class="fas fa-fw fa-check-circle"
2182
- aria-hidden="true"
2183
- ></i>
2184
- </div>
2185
- <div class="pf-l-flex__item">Running</div>
2186
- </div>
2158
+ <div class="pf-l-flex pf-m-column">
2159
+ <div class="pf-l-flex__item">
2160
+ <dl
2161
+ class="pf-c-description-list pf-m-2-col-on-lg"
2162
+ aria-label="Pod information list"
2163
+ >
2164
+ <div class="pf-c-description-list__group">
2165
+ <dt class="pf-c-description-list__term">Name</dt>
2166
+ <dd class="pf-c-description-list__description">
2167
+ <div
2168
+ class="pf-c-description-list__text"
2169
+ >3scale-control-fccb6ddb9-phyqv9</div>
2170
+ </dd>
2171
+ </div>
2172
+ <div class="pf-c-description-list__group">
2173
+ <dt class="pf-c-description-list__term">Status</dt>
2174
+ <dd class="pf-c-description-list__description">
2175
+ <div class="pf-c-description-list__text">
2176
+ <div class="pf-l-flex pf-m-space-items-sm">
2177
+ <div class="pf-l-flex__item">
2178
+ <i
2179
+ class="fas fa-fw fa-check-circle"
2180
+ aria-hidden="true"
2181
+ ></i>
2187
2182
  </div>
2188
- </dd>
2189
- </div>
2190
- <div class="pf-c-description-list__group">
2191
- <dt class="pf-c-description-list__term">Namespace</dt>
2192
- <dd class="pf-c-description-list__description">
2193
- <div class="pf-c-description-list__text">
2194
- <div class="pf-l-flex pf-m-space-items-sm">
2195
- <div class="pf-l-flex__item">
2196
- <span class="pf-c-label pf-m-cyan">
2197
- <span class="pf-c-label__content">NS</span>
2198
- </span>
2199
- </div>
2200
- <div class="pf-l-flex__item">
2201
- <a href="#">knative-serving-ingress</a>
2202
- </div>
2203
- </div>
2183
+ <div class="pf-l-flex__item">Running</div>
2184
+ </div>
2185
+ </div>
2186
+ </dd>
2187
+ </div>
2188
+ <div class="pf-c-description-list__group">
2189
+ <dt class="pf-c-description-list__term">Namespace</dt>
2190
+ <dd class="pf-c-description-list__description">
2191
+ <div class="pf-c-description-list__text">
2192
+ <div class="pf-l-flex pf-m-space-items-sm">
2193
+ <div class="pf-l-flex__item">
2194
+ <span class="pf-c-label pf-m-cyan">
2195
+ <span class="pf-c-label__content">NS</span>
2196
+ </span>
2197
+ </div>
2198
+ <div class="pf-l-flex__item">
2199
+ <a href="#">knative-serving-ingress</a>
2204
2200
  </div>
2205
- </dd>
2201
+ </div>
2206
2202
  </div>
2207
- <div class="pf-c-description-list__group">
2208
- <dt
2209
- class="pf-c-description-list__term"
2210
- >Restart policy</dt>
2211
- <dd class="pf-c-description-list__description">
2212
- <div
2213
- class="pf-c-description-list__text"
2214
- >Always restart</div>
2215
- </dd>
2203
+ </dd>
2204
+ </div>
2205
+ <div class="pf-c-description-list__group">
2206
+ <dt class="pf-c-description-list__term">Restart policy</dt>
2207
+ <dd class="pf-c-description-list__description">
2208
+ <div
2209
+ class="pf-c-description-list__text"
2210
+ >Always restart</div>
2211
+ </dd>
2212
+ </div>
2213
+ <div class="pf-c-description-list__group">
2214
+ <dt class="pf-c-description-list__term">Pod IP</dt>
2215
+ <dd class="pf-c-description-list__description">
2216
+ <div class="pf-c-description-list__text">10..345.2.197</div>
2217
+ </dd>
2218
+ </div>
2219
+ <div class="pf-c-description-list__group">
2220
+ <dt
2221
+ class="pf-c-description-list__term"
2222
+ >Active deadline seconds</dt>
2223
+ <dd class="pf-c-description-list__description">
2224
+ <div
2225
+ class="pf-c-description-list__text"
2226
+ >Not configured</div>
2227
+ </dd>
2228
+ </div>
2229
+ <div class="pf-c-description-list__group">
2230
+ <dt class="pf-c-description-list__term">Created at</dt>
2231
+ <dd class="pf-c-description-list__description">
2232
+ <div class="pf-c-description-list__text">
2233
+ <time>Oct 15, 1:51 pm</time>
2216
2234
  </div>
2217
- <div class="pf-c-description-list__group">
2218
- <dt class="pf-c-description-list__term">Pod IP</dt>
2219
- <dd class="pf-c-description-list__description">
2220
- <div
2221
- class="pf-c-description-list__text"
2222
- >10..345.2.197</div>
2223
- </dd>
2224
- </div>
2225
- <div class="pf-c-description-list__group">
2226
- <dt
2227
- class="pf-c-description-list__term"
2228
- >Active deadline seconds</dt>
2229
- <dd class="pf-c-description-list__description">
2230
- <div
2231
- class="pf-c-description-list__text"
2232
- >Not configured</div>
2233
- </dd>
2234
- </div>
2235
- <div class="pf-c-description-list__group">
2236
- <dt class="pf-c-description-list__term">Created at</dt>
2237
- <dd class="pf-c-description-list__description">
2238
- <div class="pf-c-description-list__text">
2239
- <time>Oct 15, 1:51 pm</time>
2240
- </div>
2241
- </dd>
2242
- </div>
2243
- <div class="pf-c-description-list__group">
2244
- <dt class="pf-c-description-list__term">Node</dt>
2245
- <dd class="pf-c-description-list__description">
2246
- <div class="pf-c-description-list__text">
2247
- <div class="pf-l-flex pf-m-space-items-sm">
2248
- <div class="pf-l-flex__item">
2249
- <span class="pf-c-label pf-m-purple">
2250
- <span class="pf-c-label__content">N</span>
2251
- </span>
2252
- </div>
2253
- <div
2254
- class="pf-l-flex__item"
2255
- >ip-10-0-233-118.us-east-2.computer.external</div>
2256
- </div>
2235
+ </dd>
2236
+ </div>
2237
+ <div class="pf-c-description-list__group">
2238
+ <dt class="pf-c-description-list__term">Node</dt>
2239
+ <dd class="pf-c-description-list__description">
2240
+ <div class="pf-c-description-list__text">
2241
+ <div class="pf-l-flex pf-m-space-items-sm">
2242
+ <div class="pf-l-flex__item">
2243
+ <span class="pf-c-label pf-m-purple">
2244
+ <span class="pf-c-label__content">N</span>
2245
+ </span>
2257
2246
  </div>
2258
- </dd>
2247
+ <div
2248
+ class="pf-l-flex__item"
2249
+ >ip-10-0-233-118.us-east-2.computer.external</div>
2250
+ </div>
2259
2251
  </div>
2260
- </dl>
2252
+ </dd>
2261
2253
  </div>
2262
- </div>
2254
+ </dl>
2263
2255
  </div>
2264
- </section>
2265
- <section
2266
- class="pf-c-tab-content"
2267
- aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
2268
- id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
2269
- role="tabpanel"
2270
- tabindex="0"
2271
- hidden
2272
- >
2273
- <div class="pf-c-tab-content__body">Editable aspects panel</div>
2274
- </section>
2256
+ </div>
2275
2257
  </div>
2276
2258
  </section>
2277
2259
  <section
2278
2260
  class="pf-c-tab-content"
2279
- aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
2280
- id="tabs-tables-and-tabs-example-tabs-yaml-panel"
2281
- role="tabpanel"
2282
- tabindex="0"
2283
- hidden
2284
- >
2285
- <div class="pf-c-tab-content__body">YAML panel</div>
2286
- </section>
2287
- <section
2288
- class="pf-c-tab-content"
2289
- aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
2290
- id="tabs-tables-and-tabs-example-tabs-environment-panel"
2291
- role="tabpanel"
2292
- tabindex="0"
2293
- hidden
2294
- >
2295
- <div class="pf-c-tab-content__body">Environment panel</div>
2296
- </section>
2297
- <section
2298
- class="pf-c-tab-content"
2299
- aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
2300
- id="tabs-tables-and-tabs-example-tabs-logs-panel"
2301
- role="tabpanel"
2302
- tabindex="0"
2303
- hidden
2304
- >
2305
- <div class="pf-c-tab-content__body">Logs panel</div>
2306
- </section>
2307
- <section
2308
- class="pf-c-tab-content"
2309
- aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
2310
- id="tabs-tables-and-tabs-example-tabs-events-panel"
2261
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
2262
+ id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
2311
2263
  role="tabpanel"
2312
2264
  tabindex="0"
2313
2265
  hidden
2314
2266
  >
2315
- <div class="pf-c-tab-content__body">Events panel</div>
2316
- </section>
2317
- <section
2318
- class="pf-c-tab-content"
2319
- aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
2320
- id="tabs-tables-and-tabs-example-tabs-terminal-panel"
2321
- role="tabpanel"
2322
- tabindex="0"
2323
- hidden
2324
- >
2325
- <div class="pf-c-tab-content__body">Terminal panel</div>
2267
+ <div class="pf-c-tab-content__body">Editable aspects panel</div>
2326
2268
  </section>
2327
2269
  </div>
2328
- </div>
2270
+ </section>
2271
+ <section
2272
+ class="pf-c-tab-content"
2273
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
2274
+ id="tabs-tables-and-tabs-example-tabs-yaml-panel"
2275
+ role="tabpanel"
2276
+ tabindex="0"
2277
+ hidden
2278
+ >
2279
+ <div class="pf-c-tab-content__body pf-m-padding">YAML panel</div>
2280
+ </section>
2281
+ <section
2282
+ class="pf-c-tab-content"
2283
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
2284
+ id="tabs-tables-and-tabs-example-tabs-environment-panel"
2285
+ role="tabpanel"
2286
+ tabindex="0"
2287
+ hidden
2288
+ >
2289
+ <div class="pf-c-tab-content__body pf-m-padding">Environment panel</div>
2290
+ </section>
2291
+ <section
2292
+ class="pf-c-tab-content"
2293
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
2294
+ id="tabs-tables-and-tabs-example-tabs-logs-panel"
2295
+ role="tabpanel"
2296
+ tabindex="0"
2297
+ hidden
2298
+ >
2299
+ <div class="pf-c-tab-content__body pf-m-padding">Logs panel</div>
2300
+ </section>
2301
+ <section
2302
+ class="pf-c-tab-content"
2303
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
2304
+ id="tabs-tables-and-tabs-example-tabs-events-panel"
2305
+ role="tabpanel"
2306
+ tabindex="0"
2307
+ hidden
2308
+ >
2309
+ <div class="pf-c-tab-content__body pf-m-padding">Events panel</div>
2310
+ </section>
2311
+ <section
2312
+ class="pf-c-tab-content"
2313
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
2314
+ id="tabs-tables-and-tabs-example-tabs-terminal-panel"
2315
+ role="tabpanel"
2316
+ tabindex="0"
2317
+ hidden
2318
+ >
2319
+ <div class="pf-c-tab-content__body pf-m-padding">Terminal panel</div>
2320
+ </section>
2329
2321
  </div>
2330
2322
  </section>
2331
2323
  </main>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.186.1",
4
+ "version": "4.187.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {