@patternfly/patternfly 4.203.4 → 4.204.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/Menu/menu.css +1 -0
- package/components/Menu/menu.scss +1 -0
- package/components/NumberInput/number-input.css +11 -1
- package/components/NumberInput/number-input.scss +15 -1
- package/docs/components/NumberInput/examples/NumberInput.md +57 -6
- package/package.json +1 -1
- package/patternfly-no-reset.css +12 -1
- package/patternfly.css +12 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/Menu/menu.css
CHANGED
|
@@ -10,11 +10,21 @@
|
|
|
10
10
|
--pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
|
|
11
11
|
--pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
|
|
12
12
|
--pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
|
|
13
|
+
--pf-c-number-input--c-form-control--width-icon: 0px;
|
|
14
|
+
--pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
|
|
13
15
|
--pf-c-number-input--c-form-control--width-chars: 4;
|
|
14
|
-
--pf-c-number-input--c-form-control--Width:
|
|
16
|
+
--pf-c-number-input--c-form-control--Width:
|
|
17
|
+
calc(
|
|
18
|
+
calc(
|
|
19
|
+
var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
|
|
20
|
+
) + var(--pf-c-number-input--c-form-control--width-icon)
|
|
21
|
+
);
|
|
15
22
|
display: inline-flex;
|
|
16
23
|
align-items: center;
|
|
17
24
|
}
|
|
25
|
+
.pf-c-number-input.pf-m-status {
|
|
26
|
+
--pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
|
|
27
|
+
}
|
|
18
28
|
.pf-c-number-input .pf-c-form-control {
|
|
19
29
|
display: inline-flex;
|
|
20
30
|
width: var(--pf-c-number-input--c-form-control--Width);
|
|
@@ -7,12 +7,26 @@
|
|
|
7
7
|
|
|
8
8
|
// form control
|
|
9
9
|
--pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2); // element's padding
|
|
10
|
+
// stylelint-disable length-zero-no-unit
|
|
11
|
+
--pf-c-number-input--c-form-control--width-icon: 0px;
|
|
12
|
+
// stylelint-enable length-zero-no-unit
|
|
13
|
+
--pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl); // extra width to accommodate a status icon
|
|
10
14
|
--pf-c-number-input--c-form-control--width-chars: 4;
|
|
11
|
-
--pf-c-number-input--c-form-control--Width:
|
|
15
|
+
--pf-c-number-input--c-form-control--Width:
|
|
16
|
+
calc(
|
|
17
|
+
calc(
|
|
18
|
+
var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
|
|
19
|
+
) + var(--pf-c-number-input--c-form-control--width-icon)
|
|
20
|
+
);
|
|
12
21
|
|
|
13
22
|
display: inline-flex;
|
|
14
23
|
align-items: center;
|
|
15
24
|
|
|
25
|
+
// This modifier can be removed in a breaking change and the extra space created can always be included.
|
|
26
|
+
&.pf-m-status {
|
|
27
|
+
--pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
|
|
28
|
+
}
|
|
29
|
+
|
|
16
30
|
.pf-c-form-control {
|
|
17
31
|
display: inline-flex;
|
|
18
32
|
width: var(--pf-c-number-input--c-form-control--Width);
|
|
@@ -191,6 +191,56 @@ cssPrefix: pf-c-number-input
|
|
|
191
191
|
|
|
192
192
|
```
|
|
193
193
|
|
|
194
|
+
### With status
|
|
195
|
+
|
|
196
|
+
```html
|
|
197
|
+
<div class="pf-c-number-input pf-m-status">
|
|
198
|
+
<div class="pf-c-input-group">
|
|
199
|
+
<button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
|
|
200
|
+
<span class="pf-c-number-input__icon">
|
|
201
|
+
<i class="fas fa-minus" aria-hidden="true"></i>
|
|
202
|
+
</span>
|
|
203
|
+
</button>
|
|
204
|
+
<input
|
|
205
|
+
class="pf-c-form-control"
|
|
206
|
+
type="number"
|
|
207
|
+
value="90"
|
|
208
|
+
name="number-input-status-name"
|
|
209
|
+
aria-label="Number input"
|
|
210
|
+
/>
|
|
211
|
+
<button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
|
|
212
|
+
<span class="pf-c-number-input__icon">
|
|
213
|
+
<i class="fas fa-plus" aria-hidden="true"></i>
|
|
214
|
+
</span>
|
|
215
|
+
</button>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
<br />
|
|
219
|
+
<br />
|
|
220
|
+
<div class="pf-c-number-input pf-m-status">
|
|
221
|
+
<div class="pf-c-input-group">
|
|
222
|
+
<button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
|
|
223
|
+
<span class="pf-c-number-input__icon">
|
|
224
|
+
<i class="fas fa-minus" aria-hidden="true"></i>
|
|
225
|
+
</span>
|
|
226
|
+
</button>
|
|
227
|
+
<input
|
|
228
|
+
class="pf-c-form-control pf-m-warning"
|
|
229
|
+
type="number"
|
|
230
|
+
value="90"
|
|
231
|
+
name="number-input-status-warning-name"
|
|
232
|
+
aria-label="Number input"
|
|
233
|
+
/>
|
|
234
|
+
<button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
|
|
235
|
+
<span class="pf-c-number-input__icon">
|
|
236
|
+
<i class="fas fa-plus" aria-hidden="true"></i>
|
|
237
|
+
</span>
|
|
238
|
+
</button>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
```
|
|
243
|
+
|
|
194
244
|
### Varying sizes
|
|
195
245
|
|
|
196
246
|
```html
|
|
@@ -311,9 +361,10 @@ cssPrefix: pf-c-number-input
|
|
|
311
361
|
|
|
312
362
|
### Usage
|
|
313
363
|
|
|
314
|
-
| Class | Applied
|
|
315
|
-
| -------------------------------------------------- | -------------------- |
|
|
316
|
-
| `.pf-c-number-input` | `<div>` | Initiates the number input component.
|
|
317
|
-
| `.pf-c-number-input__icon` | `<span>` | Initiates the number input icon.
|
|
318
|
-
| `.pf-c-number-input__unit` | `<span>` | Initiates the number input unit.
|
|
319
|
-
|
|
|
364
|
+
| Class | Applied to | Outcome |
|
|
365
|
+
| -------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
366
|
+
| `.pf-c-number-input` | `<div>` | Initiates the number input component. |
|
|
367
|
+
| `.pf-c-number-input__icon` | `<span>` | Initiates the number input icon. |
|
|
368
|
+
| `.pf-c-number-input__unit` | `<span>` | Initiates the number input unit. |
|
|
369
|
+
| `.pf-m-status` | `.pf-c-number-input` | Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. **Required** if a status icon may be shown, even if the icon is not currently shown. |
|
|
370
|
+
| `--pf-c-number-input--c-form-control--width-chars` | `.pf-c-number-input` | Specifies the number of characters to show in the input. |
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -18389,6 +18389,7 @@ ul.pf-c-list {
|
|
|
18389
18389
|
background-color: transparent;
|
|
18390
18390
|
}
|
|
18391
18391
|
.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
|
|
18392
|
+
display: none;
|
|
18392
18393
|
visibility: hidden;
|
|
18393
18394
|
}
|
|
18394
18395
|
.pf-c-menu.pf-m-drilldown .pf-c-menu__item {
|
|
@@ -31099,11 +31100,21 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
31099
31100
|
--pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
|
|
31100
31101
|
--pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
|
|
31101
31102
|
--pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
|
|
31103
|
+
--pf-c-number-input--c-form-control--width-icon: 0px;
|
|
31104
|
+
--pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
|
|
31102
31105
|
--pf-c-number-input--c-form-control--width-chars: 4;
|
|
31103
|
-
--pf-c-number-input--c-form-control--Width:
|
|
31106
|
+
--pf-c-number-input--c-form-control--Width:
|
|
31107
|
+
calc(
|
|
31108
|
+
calc(
|
|
31109
|
+
var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
|
|
31110
|
+
) + var(--pf-c-number-input--c-form-control--width-icon)
|
|
31111
|
+
);
|
|
31104
31112
|
display: inline-flex;
|
|
31105
31113
|
align-items: center;
|
|
31106
31114
|
}
|
|
31115
|
+
.pf-c-number-input.pf-m-status {
|
|
31116
|
+
--pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
|
|
31117
|
+
}
|
|
31107
31118
|
.pf-c-number-input .pf-c-form-control {
|
|
31108
31119
|
display: inline-flex;
|
|
31109
31120
|
width: var(--pf-c-number-input--c-form-control--Width);
|
package/patternfly.css
CHANGED
|
@@ -18516,6 +18516,7 @@ ul.pf-c-list {
|
|
|
18516
18516
|
background-color: transparent;
|
|
18517
18517
|
}
|
|
18518
18518
|
.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item:not(.pf-m-current-path) .pf-c-menu {
|
|
18519
|
+
display: none;
|
|
18519
18520
|
visibility: hidden;
|
|
18520
18521
|
}
|
|
18521
18522
|
.pf-c-menu.pf-m-drilldown .pf-c-menu__item {
|
|
@@ -31226,11 +31227,21 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
31226
31227
|
--pf-c-number-input__unit--c-input-group--MarginLeft: var(--pf-global--spacer--sm);
|
|
31227
31228
|
--pf-c-number-input__icon--FontSize: var(--pf-global--FontSize--xs);
|
|
31228
31229
|
--pf-c-number-input--c-form-control--width-base: calc(var(--pf-global--spacer--sm) * 2 + var(--pf-global--BorderWidth--sm) * 2);
|
|
31230
|
+
--pf-c-number-input--c-form-control--width-icon: 0px;
|
|
31231
|
+
--pf-c-number-input--m-status--c-form-control--width-icon: var(--pf-global--spacer--xl);
|
|
31229
31232
|
--pf-c-number-input--c-form-control--width-chars: 4;
|
|
31230
|
-
--pf-c-number-input--c-form-control--Width:
|
|
31233
|
+
--pf-c-number-input--c-form-control--Width:
|
|
31234
|
+
calc(
|
|
31235
|
+
calc(
|
|
31236
|
+
var(--pf-c-number-input--c-form-control--width-base) + var(--pf-c-number-input--c-form-control--width-chars) * 1ch
|
|
31237
|
+
) + var(--pf-c-number-input--c-form-control--width-icon)
|
|
31238
|
+
);
|
|
31231
31239
|
display: inline-flex;
|
|
31232
31240
|
align-items: center;
|
|
31233
31241
|
}
|
|
31242
|
+
.pf-c-number-input.pf-m-status {
|
|
31243
|
+
--pf-c-number-input--c-form-control--width-icon: var(--pf-c-number-input--m-status--c-form-control--width-icon);
|
|
31244
|
+
}
|
|
31234
31245
|
.pf-c-number-input .pf-c-form-control {
|
|
31235
31246
|
display: inline-flex;
|
|
31236
31247
|
width: var(--pf-c-number-input--c-form-control--Width);
|