@patternfly/patternfly 4.216.4 → 4.217.1

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 (16) hide show
  1. package/RELEASE-NOTES.md +56 -33
  2. package/components/Button/button.css +11 -1
  3. package/components/Button/button.scss +10 -1
  4. package/components/Spinner/spinner.css +4 -0
  5. package/components/Spinner/spinner.scss +7 -0
  6. package/docs/components/Accordion/examples/Accordion.md +7 -1
  7. package/docs/components/Button/examples/Button.md +26 -6
  8. package/docs/components/Spinner/examples/Spinner.md +23 -6
  9. package/docs/demos/Drawer/examples/Drawer.md +168 -144
  10. package/docs/demos/JumpLinks/examples/JumpLinks.md +168 -144
  11. package/docs/demos/Tabs/examples/Tabs.md +1321 -6220
  12. package/package.json +1 -1
  13. package/patternfly-no-reset.css +15 -1
  14. package/patternfly.css +15 -1
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md CHANGED
@@ -3,6 +3,29 @@ id: Release notes
3
3
  section: developer-resources
4
4
  releaseNoteTOC: true
5
5
  ---
6
+ ## 2022.13 release notes (2022-10-06)
7
+ Packages released:
8
+ - [@patternfly/patternfly@v4.217.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.217.1)
9
+
10
+ ### Components
11
+ - **Accordion:** Gave scrollable region keyboard access in fixed examples ([#5130](https://github.com/patternfly/patternfly/pull/5130))
12
+ - **Button:** Added progress support for inline link ([#5104](https://github.com/patternfly/patternfly/pull/5104))
13
+ - **Form group:** Fixed help/required orphan wrapping ([#5118](https://github.com/patternfly/patternfly/pull/5118))
14
+ - **Menu:** Added danger menu item variation ([#5102](https://github.com/patternfly/patternfly/pull/5102))
15
+ - **Sidebar:** Fixed sticky panel behavior in demo ([#5088](https://github.com/patternfly/patternfly/pull/5088))
16
+ - **Slider:** Fixed excessive wrapping of labels ([#5103](https://github.com/patternfly/patternfly/pull/5103))
17
+ - **Tabs:** Updated demos per design guidance ([#5083](https://github.com/patternfly/patternfly/pull/5083))
18
+ - **Text input group:** Fixed chip/filter wrapping ([#4995](https://github.com/patternfly/patternfly/pull/4995))
19
+ - **Toolbar:** Updated search to text-input-group ([#5087](https://github.com/patternfly/patternfly/pull/5087))
20
+ - **Tree view:** Made selectable node text a button to fix keyboard a11y ([#5107](https://github.com/patternfly/patternfly/pull/5107))
21
+
22
+ ### Other
23
+ - **Build:**
24
+ - Pinned dependencies ([#5098](https://github.com/patternfly/patternfly/pull/5098))
25
+ - Updated commitlint, stylelint, prettier ([#5123](https://github.com/patternfly/patternfly/pull/5123))
26
+ - Added workflow to add new issues to github project ([#5092](https://github.com/patternfly/patternfly/pull/5092))
27
+
28
+
6
29
  ## 2022.12 release notes (2022-09-14)
7
30
  Packages released:
8
31
  - [@patternfly/patternfly@v4.215.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.215.1)
@@ -36,8 +59,8 @@ Packages released:
36
59
  - **Checkbox:** Added support for required indicator ([#5025](https://github.com/patternfly/patternfly/pull/5025))
37
60
  - **Dropdown, select, context selector:** Added static variation for menu ([#4986](https://github.com/patternfly/patternfly/pull/4986))
38
61
  - **Expandable section:**
39
- * Added truncate variant ([#5001](https://github.com/patternfly/patternfly/pull/5001))
40
- * Fixed top margin on detached truncate toggle ([#5045](https://github.com/patternfly/patternfly/pull/5045))
62
+ - Added truncate variant ([#5001](https://github.com/patternfly/patternfly/pull/5001))
63
+ - Fixed top margin on detached truncate toggle ([#5045](https://github.com/patternfly/patternfly/pull/5045))
41
64
  - **Menu:** Removed footer bottom border when scrollable ([#5002](https://github.com/patternfly/patternfly/pull/5002))
42
65
  - **Page:** Added full-height modifier ([#5018](https://github.com/patternfly/patternfly/pull/5018))
43
66
  - **Search input:** Added collapsible variant ([#4827](https://github.com/patternfly/patternfly/pull/4827))
@@ -47,8 +70,8 @@ Packages released:
47
70
  ### Other
48
71
  - **Global:** Added custom property to allow override of root font-size ([#5032](https://github.com/patternfly/patternfly/pull/5032))
49
72
  - **Theme:**
50
- * Adjusted dark theme colors ([#5020](https://github.com/patternfly/patternfly/pull/5020))
51
- * Improved contrast of dark theme red-8888, warning button text ([#5041](https://github.com/patternfly/patternfly/pull/5041))
73
+ - Adjusted dark theme colors ([#5020](https://github.com/patternfly/patternfly/pull/5020))
74
+ - Improved contrast of dark theme red-8888, warning button text ([#5041](https://github.com/patternfly/patternfly/pull/5041))
52
75
  - **Workspace:** Fixed a11y violations in data-list and toolbar ([#5015](https://github.com/patternfly/patternfly/pull/5015))
53
76
 
54
77
 
@@ -138,9 +161,9 @@ Packages released:
138
161
 
139
162
  ### Other
140
163
  - **Theme:**
141
- * Imported dark theme per component, added new global var ([#4864](https://github.com/patternfly/patternfly/pull/4864))
142
- * Updated dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
143
- * Updated build process to copy files from new SCSS location ([#4878](https://github.com/patternfly/patternfly/issues/4878))
164
+ - Imported dark theme per component, added new global var ([#4864](https://github.com/patternfly/patternfly/pull/4864))
165
+ - Updated dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
166
+ - Updated build process to copy files from new SCSS location ([#4878](https://github.com/patternfly/patternfly/issues/4878))
144
167
  - **Utilities:** Added font family utilities ([#4868](https://github.com/patternfly/patternfly/pull/4868))
145
168
 
146
169
 
@@ -205,8 +228,8 @@ Packages released:
205
228
  - **Form:** Improved accessible label on form elements in examples/demos ([#4714](https://github.com/patternfly/patternfly/pull/4714))
206
229
  - **Form control:** Updated invalid sprite css, examples ([#4732](https://github.com/patternfly/patternfly/pull/4732))
207
230
  - **Menu toggle:**
208
- * Added typeahead variation ([#4673](https://github.com/patternfly/patternfly/pull/4673))
209
- * Added example of secondary with icon ([#4743](https://github.com/patternfly/patternfly/pull/4743))
231
+ - Added typeahead variation ([#4673](https://github.com/patternfly/patternfly/pull/4673))
232
+ - Added example of secondary with icon ([#4743](https://github.com/patternfly/patternfly/pull/4743))
210
233
  - **Page/modal/wizard:** Made scrollable regions keyboard focusable ([#4736](https://github.com/patternfly/patternfly/pull/4736))
211
234
  - **Pagination:** Updated options menu toggle so whole toggle is clickable ([#4723](https://github.com/patternfly/patternfly/pull/4723))
212
235
 
@@ -433,17 +456,17 @@ Packages released:
433
456
  - **Backdrop:** Added var for position to allow customization ([#4391](https://github.com/patternfly/patternfly/pull/4391))
434
457
  - **Banner:** Added link style ([#4383](https://github.com/patternfly/patternfly/pull/4383))
435
458
  - **Card:**
436
- * Updated log view and event view demos ([#4371](https://github.com/patternfly/patternfly/pull/4371))
437
- * Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
459
+ - Updated log view and event view demos ([#4371](https://github.com/patternfly/patternfly/pull/4371))
460
+ - Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
438
461
  - **Drag drop:**
439
- * Added drag drop ([#4398](https://github.com/patternfly/patternfly/pull/4398))
440
- * Moved drag drop styles into component ([#4404](https://github.com/patternfly/patternfly/pull/4404))
462
+ - Added drag drop ([#4398](https://github.com/patternfly/patternfly/pull/4398))
463
+ - Moved drag drop styles into component ([#4404](https://github.com/patternfly/patternfly/pull/4404))
441
464
  - **Dual list selector:** Added support for disabled items ([#4361](https://github.com/patternfly/patternfly/pull/4361))
442
465
  - **Jump links:** Moved text into expandable toggle ([#4352](https://github.com/patternfly/patternfly/pull/4352))
443
466
  - **Label:** Added compact variant ([#4386](https://github.com/patternfly/patternfly/pull/4386))
444
467
  - **Log viewer:**
445
- * Preserved white space in log viewer text ([#4397](https://github.com/patternfly/patternfly/pull/4397))
446
- * Made text fill available space in container ([#4406](https://github.com/patternfly/patternfly/pull/4406))
468
+ - Preserved white space in log viewer text ([#4397](https://github.com/patternfly/patternfly/pull/4397))
469
+ - Made text fill available space in container ([#4406](https://github.com/patternfly/patternfly/pull/4406))
447
470
  - **Masthead:** Updated column-end ([#4418](https://github.com/patternfly/patternfly/pull/4418))
448
471
  - **Masthead, description list**: Fixed undefined vars ([#4421](https://github.com/patternfly/patternfly/pull/4421))
449
472
  - **Menu:** Added scrollable and plain modifiers ([#4392](https://github.com/patternfly/patternfly/pull/4392))
@@ -453,11 +476,11 @@ Packages released:
453
476
  - **Progress stepper:** Added help text for popover ([#4381](https://github.com/patternfly/patternfly/pull/4381))
454
477
  - **Radio, checkbox, form:** Corrected label alignment ([#4375](https://github.com/patternfly/patternfly/pull/4375))
455
478
  - **Select:**
456
- * Added support for placeholder in toggle ([#4377](https://github.com/patternfly/patternfly/pull/4377))
457
- * Removed double invalid icon on invalid typeahead ([#4385](https://github.com/patternfly/patternfly/pull/4385))
479
+ - Added support for placeholder in toggle ([#4377](https://github.com/patternfly/patternfly/pull/4377))
480
+ - Removed double invalid icon on invalid typeahead ([#4385](https://github.com/patternfly/patternfly/pull/4385))
458
481
  - **Table:**
459
- * Added fixed columns ([#4326](https://github.com/patternfly/patternfly/pull/4326))
460
- * Addressed followup compact tree issues ([#4389](https://github.com/patternfly/patternfly/pull/4389))
482
+ - Added fixed columns ([#4326](https://github.com/patternfly/patternfly/pull/4326))
483
+ - Addressed followup compact tree issues ([#4389](https://github.com/patternfly/patternfly/pull/4389))
461
484
  - **Text input group:** Added component ([#4408](https://github.com/patternfly/patternfly/pull/4408))
462
485
  - **Toolbar:** Adjusted demo heights, removed dupe demo ([#4373](https://github.com/patternfly/patternfly/pull/4373))
463
486
 
@@ -545,20 +568,20 @@ Packages released:
545
568
  ### Components
546
569
  - **Button:** Updated accessibility table ([#4200](https://github.com/patternfly/patternfly/pull/4200))
547
570
  - **Context selector/dropdown:**
548
- * Changed full height toggle display type ([#4179](https://github.com/patternfly/patternfly/pull/4179))
549
- * Moved `::before` values to `::after` ([#4182](https://github.com/patternfly/patternfly/pull/4182))
550
- * Reverted move `::before` values to `::after` ([#4213](https://github.com/patternfly/patternfly/pull/4213))
571
+ - Changed full height toggle display type ([#4179](https://github.com/patternfly/patternfly/pull/4179))
572
+ - Moved `::before` values to `::after` ([#4182](https://github.com/patternfly/patternfly/pull/4182))
573
+ - Reverted move `::before` values to `::after` ([#4213](https://github.com/patternfly/patternfly/pull/4213))
551
574
  - **Form:** Added info text to group label ([#4172](https://github.com/patternfly/patternfly/pull/4172))
552
575
  - **Form group:** Updated form group roles to support checkbox/radio groups ([#4240](https://github.com/patternfly/patternfly/pull/4240))
553
576
  - **Helper text:** Updated static and dynamic to use same icons ([#4246](https://github.com/patternfly/patternfly/pull/4246))
554
577
  - **Jump links:** Forced vertical layout with expandable ([#4230](https://github.com/patternfly/patternfly/pull/4230))
555
578
  - **Login:** Added a password strength demo ([#4145](https://github.com/patternfly/patternfly/pull/4145))
556
579
  - **Menu:**
557
- * Added vars for menu top, left, and right position offset ([#4192](https://github.com/patternfly/patternfly/pull/4192))
558
- * Moved menu position modifers to menu element ([#4199](https://github.com/patternfly/patternfly/pull/4199))
580
+ - Added vars for menu top, left, and right position offset ([#4192](https://github.com/patternfly/patternfly/pull/4192))
581
+ - Moved menu position modifers to menu element ([#4199](https://github.com/patternfly/patternfly/pull/4199))
559
582
  - **Menu toggle:**
560
- * Added full height variant ([#4153](https://github.com/patternfly/patternfly/pull/4153))
561
- * Truncated overflow text ([#4236](https://github.com/patternfly/patternfly/pull/4236))
583
+ - Added full height variant ([#4153](https://github.com/patternfly/patternfly/pull/4153))
584
+ - Truncated overflow text ([#4236](https://github.com/patternfly/patternfly/pull/4236))
562
585
  - **Nav:** Added horizontal subnav ([#4229](https://github.com/patternfly/patternfly/pull/4229))
563
586
  - **Notification badge:** Updated examples to show tasks icon ([#4241](https://github.com/patternfly/patternfly/pull/4241))
564
587
  - **Popover:** Added more position options to position arrow ([#4226](https://github.com/patternfly/patternfly/pull/4226))
@@ -571,16 +594,16 @@ Packages released:
571
594
 
572
595
  ### Other
573
596
  - **Ci:**
574
- * Renamed master to main ([#4194](https://github.com/patternfly/patternfly/pull/4194))
575
- * Updated scripts to use main instead of master ([#4195](https://github.com/patternfly/patternfly/pull/4195))
597
+ - Renamed master to main ([#4194](https://github.com/patternfly/patternfly/pull/4194))
598
+ - Updated scripts to use main instead of master ([#4195](https://github.com/patternfly/patternfly/pull/4195))
576
599
  - **Icons:**
577
- * Added styles to represent different SVG icon sizes and alignment for patternfly-react ([#3871](https://github.com/patternfly/patternfly/pull/3871))
578
- * Added task icon to pficons ([#4184](https://github.com/patternfly/patternfly/pull/4184))
579
- * Added instructions to add icon to pficon font ([#4221](https://github.com/patternfly/patternfly/pull/4221))
600
+ - Added styles to represent different SVG icon sizes and alignment for patternfly-react ([#3871](https://github.com/patternfly/patternfly/pull/3871))
601
+ - Added task icon to pficons ([#4184](https://github.com/patternfly/patternfly/pull/4184))
602
+ - Added instructions to add icon to pficon font ([#4221](https://github.com/patternfly/patternfly/pull/4221))
580
603
  - **Utilities:** Added min/max height and width to sizing utility ([#4009](https://github.com/patternfly/patternfly/pull/4009))
581
604
  - **Fonts:**
582
- * Dropped '?#iefix' for font face definitions ([#4209](https://github.com/patternfly/patternfly/pull/4209))
583
- * Dropped support for legacy fonts ([#4210](https://github.com/patternfly/patternfly/pull/4210))
605
+ - Dropped '?#iefix' for font face definitions ([#4209](https://github.com/patternfly/patternfly/pull/4209))
606
+ - Dropped support for legacy fonts ([#4210](https://github.com/patternfly/patternfly/pull/4210))
584
607
  - **Docs:** Updated references to Kitty Giraudel's deadname ([#4239](https://github.com/patternfly/patternfly/pull/4239))
585
608
 
586
609
 
package/components/Button/button.css CHANGED
@@ -89,6 +89,12 @@
89
89
  --pf-c-button--m-link--m-inline--FontSize: inherit;
90
90
  --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
91
91
  --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
92
+ --pf-c-button--m-link--m-inline--PaddingTop: 0;
93
+ --pf-c-button--m-link--m-inline--PaddingRight: 0;
94
+ --pf-c-button--m-link--m-inline--PaddingBottom: 0;
95
+ --pf-c-button--m-link--m-inline--PaddingLeft: 0;
96
+ --pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
97
+ --pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
92
98
  --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
93
99
  --pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100);
94
100
  --pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
@@ -287,8 +293,9 @@
287
293
  }
288
294
  .pf-c-button.pf-m-link.pf-m-inline {
289
295
  --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
296
+ --pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
290
297
  display: inline;
291
- padding: 0;
298
+ padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
292
299
  text-align: left;
293
300
  white-space: normal;
294
301
  cursor: pointer;
@@ -454,6 +461,9 @@
454
461
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
455
462
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
456
463
  }
464
+ .pf-c-button.pf-m-in-progress {
465
+ --pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
466
+ }
457
467
  .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
458
468
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
459
469
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
package/components/Button/button.scss CHANGED
@@ -112,6 +112,12 @@
112
112
  --pf-c-button--m-link--m-inline--FontSize: inherit;
113
113
  --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
114
114
  --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
115
+ --pf-c-button--m-link--m-inline--PaddingTop: 0;
116
+ --pf-c-button--m-link--m-inline--PaddingRight: 0;
117
+ --pf-c-button--m-link--m-inline--PaddingBottom: 0;
118
+ --pf-c-button--m-link--m-inline--PaddingLeft: 0;
119
+ --pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
120
+ --pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
115
121
 
116
122
  // Link danger
117
123
  --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
@@ -368,9 +374,10 @@
368
374
 
369
375
  &.pf-m-inline {
370
376
  --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
377
+ --pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
371
378
 
372
379
  display: inline;
373
- padding: 0;
380
+ padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
374
381
  text-align: left;
375
382
  white-space: normal;
376
383
  cursor: pointer;
@@ -598,6 +605,8 @@
598
605
  }
599
606
 
600
607
  &.pf-m-in-progress {
608
+ --pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
609
+
601
610
  &:not(.pf-m-plain) {
602
611
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
603
612
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
package/components/Spinner/spinner.css CHANGED
@@ -7,10 +7,14 @@
7
7
  --pf-c-spinner--m-md--diameter: var(--pf-global--icon--FontSize--md);
8
8
  --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
9
9
  --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
10
+ --pf-c-spinner--m-inline--diameter: 1em;
10
11
  width: var(--pf-c-spinner--Width);
11
12
  height: var(--pf-c-spinner--Height);
12
13
  overflow: hidden;
13
14
  }
15
+ .pf-c-spinner.pf-m-inline {
16
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
17
+ }
14
18
  .pf-c-spinner.pf-m-sm {
15
19
  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
16
20
  }
package/components/Spinner/spinner.scss CHANGED
@@ -12,11 +12,18 @@
12
12
  --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
13
13
  --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
14
14
 
15
+ // inline
16
+ --pf-c-spinner--m-inline--diameter: 1em;
17
+
15
18
  width: var(--pf-c-spinner--Width);
16
19
  height: var(--pf-c-spinner--Height);
17
20
  overflow: hidden;
18
21
 
19
22
  // Modifiers change the variables for size variations
23
+ &.pf-m-inline {
24
+ --pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
25
+ }
26
+
20
27
  &.pf-m-sm {
21
28
  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
22
29
  }
package/docs/components/Accordion/examples/Accordion.md CHANGED
@@ -104,6 +104,7 @@ cssPrefix: pf-c-accordion
104
104
  class="pf-c-accordion__toggle pf-m-expanded"
105
105
  type="button"
106
106
  aria-expanded="true"
107
+ id="accordion-fixed-item-two-toggle"
107
108
  >
108
109
  <span class="pf-c-accordion__toggle-text">Item two</span>
109
110
 
@@ -112,7 +113,12 @@ cssPrefix: pf-c-accordion
112
113
  </span>
113
114
  </button>
114
115
  </h3>
115
- <div class="pf-c-accordion__expanded-content pf-m-expanded pf-m-fixed">
116
+ <div
117
+ class="pf-c-accordion__expanded-content pf-m-expanded pf-m-fixed"
118
+ role="region"
119
+ tabindex="0"
120
+ aria-labelledby="accordion-fixed-item-two-toggle"
121
+ >
116
122
  <div
117
123
  class="pf-c-accordion__expanded-content-body"
118
124
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
package/docs/components/Button/examples/Button.md CHANGED
@@ -380,7 +380,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
380
380
  </span>
381
381
  Primary loading
382
382
  </button>
383
-
383
+ <br />
384
384
  <button
385
385
  class="pf-c-button pf-m-progress pf-m-secondary"
386
386
  type="button"
@@ -403,20 +403,39 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
403
403
  </span>
404
404
  Secondary loading
405
405
  </button>
406
-
406
+ <br />
407
407
  <button class="pf-c-button pf-m-plain" type="button" aria-label="Upload">
408
408
  <i class="fas fa-upload" aria-hidden="true"></i>
409
409
  </button>
410
410
 
411
+ <button class="pf-c-button pf-m-in-progress pf-m-plain" type="button">
412
+ <span class="pf-c-button__progress">
413
+ <span
414
+ class="pf-c-spinner pf-m-md"
415
+ role="progressbar"
416
+ aria-label="Uploading..."
417
+ >
418
+ <span class="pf-c-spinner__clipper"></span>
419
+ <span class="pf-c-spinner__lead-ball"></span>
420
+ <span class="pf-c-spinner__tail-ball"></span>
421
+ </span>
422
+ </span>
423
+
424
+ <i class="fas fa-upload" aria-hidden="true"></i>
425
+ </button>
426
+ <br />
411
427
  <button
412
- class="pf-c-button pf-m-plain pf-m-in-progress"
428
+ class="pf-c-button pf-m-progress pf-m-inline pf-m-link"
429
+ type="button"
430
+ >Inline loader</button>
431
+
432
+ <button
433
+ class="pf-c-button pf-m-progress pf-m-in-progress pf-m-inline pf-m-link"
413
434
  type="button"
414
- aria-label="Upload"
415
435
  >
416
- <i class="fas fa-upload" aria-hidden="true"></i>
417
436
  <span class="pf-c-button__progress">
418
437
  <span
419
- class="pf-c-spinner pf-m-md"
438
+ class="pf-c-spinner pf-m-inline"
420
439
  role="progressbar"
421
440
  aria-label="Loading..."
422
441
  >
@@ -425,6 +444,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
425
444
  <span class="pf-c-spinner__tail-ball"></span>
426
445
  </span>
427
446
  </span>
447
+ Inline loading
428
448
  </button>
429
449
 
430
450
  ```
package/docs/components/Spinner/examples/Spinner.md CHANGED
@@ -59,6 +59,22 @@ cssPrefix: pf-c-spinner
59
59
 
60
60
  ```
61
61
 
62
+ ### Inline
63
+
64
+ An inline spinner inherits its font-size, so its size will match the content around it.
65
+
66
+ ```html isBeta
67
+ <svg
68
+ class="pf-c-spinner pf-m-inline"
69
+ role="progressbar"
70
+ viewBox="0 0 100 100"
71
+ aria-label="Loading..."
72
+ >
73
+ <circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
74
+ </svg>
75
+
76
+ ```
77
+
62
78
  ### Custom size
63
79
 
64
80
  ```html
@@ -148,9 +164,10 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
148
164
 
149
165
  ### Modifiers
150
166
 
151
- | Class | Applied to | Outcome |
152
- | ---------- | --------------- | ------------------------------- |
153
- | `.pf-m-sm` | `.pf-c-spinner` | Creates a small spinner. |
154
- | `.pf-m-md` | `.pf-c-spinner` | Creates a medium spinner. |
155
- | `.pf-m-lg` | `.pf-c-spinner` | Creates a large spinner. |
156
- | `.pf-m-xl` | `.pf-c-spinner` | Creates an extra-large spinner. |
167
+ | Class | Applied to | Outcome |
168
+ | -------------- | --------------- | ------------------------------- |
169
+ | `.pf-m-sm` | `.pf-c-spinner` | Creates a small spinner. |
170
+ | `.pf-m-md` | `.pf-c-spinner` | Creates a medium spinner. |
171
+ | `.pf-m-lg` | `.pf-c-spinner` | Creates a large spinner. |
172
+ | `.pf-m-xl` | `.pf-c-spinner` | Creates an extra-large spinner. |
173
+ | `.pf-m-inline` | `.pf-c-spinner` | Creates an inline spinner. |