@patternfly/patternfly 5.0.0-alpha.1 → 5.0.0-alpha.10

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 (63) hide show
  1. package/RELEASE-NOTES.md +30 -0
  2. package/base/_common.scss +0 -22
  3. package/base/patternfly-common.css +0 -10
  4. package/components/Card/card.css +9 -12
  5. package/components/Card/card.scss +11 -17
  6. package/components/ChipGroup/chip-group.css +29 -17
  7. package/components/ChipGroup/chip-group.scss +39 -22
  8. package/components/Drawer/drawer.css +0 -1
  9. package/components/Drawer/drawer.scss +0 -1
  10. package/components/Dropdown/dropdown.css +15 -0
  11. package/components/Dropdown/dropdown.scss +20 -0
  12. package/components/EmptyState/empty-state.css +46 -52
  13. package/components/EmptyState/empty-state.scss +58 -57
  14. package/components/FormControl/form-control.css +1 -1
  15. package/components/FormControl/themes/dark/form-control.scss +1 -1
  16. package/components/InputGroup/input-group.css +14 -0
  17. package/components/InputGroup/input-group.scss +9 -0
  18. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  19. package/components/LabelGroup/label-group.css +26 -22
  20. package/components/LabelGroup/label-group.scss +31 -26
  21. package/components/Menu/menu.css +4 -0
  22. package/components/Menu/menu.scss +5 -0
  23. package/components/Pagination/pagination.css +228 -0
  24. package/components/Pagination/pagination.scss +30 -1
  25. package/components/Popover/popover.css +1 -6
  26. package/components/Popover/themes/dark/popover.scss +1 -7
  27. package/components/Slider/slider.css +0 -7
  28. package/components/Slider/slider.scss +0 -9
  29. package/components/Toolbar/toolbar.css +30 -2
  30. package/components/Toolbar/toolbar.scss +37 -3
  31. package/components/Tooltip/themes/dark/tooltip.scss +3 -6
  32. package/components/Tooltip/tooltip.css +2 -5
  33. package/docs/components/Card/examples/Card.md +61 -44
  34. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  35. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  36. package/docs/components/Dropdown/examples/Dropdown.md +216 -0
  37. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  38. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  39. package/docs/components/Pagination/examples/Pagination.md +129 -30
  40. package/docs/components/Slider/examples/Slider.md +6 -6
  41. package/docs/components/Tabs/examples/Tabs.md +1 -1
  42. package/docs/components/Toolbar/examples/Toolbar.md +19 -16
  43. package/docs/components/Wizard/examples/Wizard.md +4 -7
  44. package/docs/demos/Banner/examples/Banner.md +2 -2
  45. package/docs/demos/Card/examples/Card.md +144 -109
  46. package/docs/demos/CardView/examples/CardView.md +1 -3
  47. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  48. package/docs/demos/DataList/examples/DataList.md +2 -4
  49. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  50. package/docs/demos/Nav/examples/Nav.md +671 -718
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +9 -8
  52. package/docs/demos/Table/examples/Table.md +18 -32
  53. package/docs/demos/Tabs/examples/Tabs.md +42 -539
  54. package/docs/demos/Toolbar/examples/Toolbar.md +1589 -9
  55. package/docs/demos/Wizard/examples/Wizard.md +0 -4
  56. package/package.json +5 -5
  57. package/patternfly-base-no-reset.css +0 -10
  58. package/patternfly-base.css +0 -10
  59. package/patternfly-no-reset.css +405 -135
  60. package/patternfly.css +405 -135
  61. package/patternfly.min.css +1 -1
  62. package/patternfly.min.css.map +1 -1
  63. package/sass-utilities/scss-variables.scss +0 -1
package/docs/components/Card/examples/Card.md CHANGED
@@ -144,10 +144,12 @@ cssPrefix: pf-c-card
144
144
  />
145
145
  </div>
146
146
  </div>
147
- <div
148
- class="pf-c-card__title"
149
- id="card-action-example-2-check-label"
150
- >This is a really really really really really really really really really really long title</div>
147
+ <div class="pf-c-card__header-main">
148
+ <div
149
+ class="pf-c-card__title"
150
+ id="card-action-example-2-check-label"
151
+ >This is a really really really really really really really really really really long title</div>
152
+ </div>
151
153
  </div>
152
154
  <div class="pf-c-card__body">Body</div>
153
155
  <div class="pf-c-card__footer">Footer</div>
@@ -230,10 +232,12 @@ cssPrefix: pf-c-card
230
232
  <div class="pf-c-card__actions pf-m-no-offset">
231
233
  <button class="pf-c-button pf-m-primary" type="button">Action</button>
232
234
  </div>
233
- <h1
234
- class="pf-c-title pf-m-2xl"
235
- id="card-action-no-offset-check-label"
236
- >This is a card title</h1>
235
+ <div class="pf-c-card__header-main">
236
+ <h1
237
+ class="pf-c-title pf-m-2xl"
238
+ id="card-action-no-offset-check-label"
239
+ >This is a card title</h1>
240
+ </div>
237
241
  </div>
238
242
  <div class="pf-c-card__body">Body</div>
239
243
  <div class="pf-c-card__footer">Footer</div>
@@ -555,7 +559,9 @@ cssPrefix: pf-c-card
555
559
  />
556
560
  </div>
557
561
  </div>
558
- <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
562
+ <div class="pf-c-card__header-main">
563
+ <div class="pf-c-card__title" id="card-expandable-example-title">Title</div>
564
+ </div>
559
565
  </div>
560
566
  </div>
561
567
 
@@ -579,11 +585,13 @@ cssPrefix: pf-c-card
579
585
  </span>
580
586
  </button>
581
587
  </div>
582
- <img
583
- src="/assets/images/pf-logo-small.svg"
584
- alt="PatternFly logo"
585
- width="27px"
586
- />
588
+ <div class="pf-c-card__header-main">
589
+ <img
590
+ src="/assets/images/pf-logo-small.svg"
591
+ alt="PatternFly logo"
592
+ width="27px"
593
+ />
594
+ </div>
587
595
  <div class="pf-c-card__actions">
588
596
  <div class="pf-c-dropdown">
589
597
  <button
@@ -713,7 +721,9 @@ cssPrefix: pf-c-card
713
721
  />
714
722
  </div>
715
723
  </div>
716
- <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
724
+ <div class="pf-c-card__header-main">
725
+ <div class="pf-c-card__title" id="card-expanded-example-title">Title</div>
726
+ </div>
717
727
  </div>
718
728
  <div class="pf-c-card__expandable-content">
719
729
  <div class="pf-c-card__body">Body</div>
@@ -781,7 +791,9 @@ cssPrefix: pf-c-card
781
791
  />
782
792
  </div>
783
793
  </div>
784
- <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
794
+ <div class="pf-c-card__header-main">
795
+ <div class="pf-c-card__title" id="card-full-height-example-title">Title</div>
796
+ </div>
785
797
  </div>
786
798
  <div class="pf-c-card__body">Body</div>
787
799
  <div class="pf-c-card__footer">Footer</div>
@@ -847,7 +859,12 @@ cssPrefix: pf-c-card
847
859
  />
848
860
  </div>
849
861
  </div>
850
- <div class="pf-c-card__title" id="card-toggle-on-right-example-title">Title</div>
862
+ <div class="pf-c-card__header-main">
863
+ <div
864
+ class="pf-c-card__title"
865
+ id="card-toggle-on-right-example-title"
866
+ >Title</div>
867
+ </div>
851
868
  <div class="pf-c-card__header-toggle">
852
869
  <button
853
870
  class="pf-c-button pf-m-plain"
@@ -889,30 +906,30 @@ A card is a generic rectangular container that can be used to build other compon
889
906
 
890
907
  ### Usage
891
908
 
892
- | Class | Applied | Outcome |
893
- | -------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
894
- | `.pf-c-card` | `<div>` | Creates a card component. **Required** |
895
- | `.pf-c-card__title` | `<div>` | Creates the title of a card. |
896
- | `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
897
- | `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
898
- | `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
899
- | `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
900
- | `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
901
- | `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
902
- | `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. |
903
- | `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
904
- | `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
905
- | `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
906
- | `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
907
- | `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
908
- | `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
909
- | `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
910
- | `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
911
- | `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
912
- | `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
913
- | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
914
- | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
915
- | `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
916
- | `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
917
- | `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
918
- | `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
909
+ | Class | Applied | Outcome |
910
+ | -------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
911
+ | `.pf-c-card` | `<div>` | Creates a card component. **Required** |
912
+ | `.pf-c-card__title` | `<div>` | Creates the title of a card. |
913
+ | `.pf-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-c-card__body` elements. |
914
+ | `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
915
+ | `.pf-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
916
+ | `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
917
+ | `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
918
+ | `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
919
+ | `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
920
+ | `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
921
+ | `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
922
+ | `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
923
+ | `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
924
+ | `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
925
+ | `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
926
+ | `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
927
+ | `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
928
+ | `.pf-m-non-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is not selectable. |
929
+ | `.pf-m-flat` | `.pf-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
930
+ | `.pf-m-rounded` | `.pf-c-card` | Modifies the card to have rounded corners. |
931
+ | `.pf-m-plain` | `.pf-c-card` | Modifies the card to have no box shadow and no background color. |
932
+ | `.pf-m-expanded` | `.pf-c-card` | Modifies the card for the expanded state. |
933
+ | `.pf-m-toggle-right` | `.pf-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
934
+ | `.pf-m-full-height` | `.pf-c-card` | Modifies the card to full height of its parent. |
935
+ | `.pf-m-no-offset` | `.pf-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -172,9 +172,9 @@ name: azure-sample-repo<div
172
172
  | Class | Applied to | Outcome |
173
173
  | -------------------------------- | ---------- | ------------------------------------------------------- |
174
174
  | `.pf-c-code-block` | `<div>` | Initiates the code block component. **Required** |
175
- | `.pf-c-chip-group__header` | `<div>` | Initiates the code block header. |
176
- | `.pf-c-chip-group__actions` | `<div>` | Initiates the code block actions. |
177
- | `.pf-c-chip-group__actions-item` | `<div>` | Initiates a code block action item. |
178
- | `.pf-c-chip-group__content` | `<div>` | Initiates the code block content. **Required** |
179
- | `.pf-c-chip-group__pre` | `<pre>` | Initiates the code block `<pre>` element. **Required** |
180
- | `.pf-c-chip-group__code` | `<code>` | Initiates the code block `<code>` element. **Required** |
175
+ | `.pf-c-code-block__header` | `<div>` | Initiates the code block header. |
176
+ | `.pf-c-code-block__actions` | `<div>` | Initiates the code block actions. |
177
+ | `.pf-c-code-block__actions-item` | `<div>` | Initiates a code block action item. |
178
+ | `.pf-c-code-block__content` | `<div>` | Initiates the code block content. **Required** |
179
+ | `.pf-c-code-block__pre` | `<pre>` | Initiates the code block `<pre>` element. **Required** |
180
+ | `.pf-c-code-block__code` | `<code>` | Initiates the code block `<code>` element. **Required** |
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -123,9 +123,7 @@ cssPrefix: pf-c-code-editor
123
123
  class="pf-c-empty-state__body"
124
124
  >Drag a file here or browse to upload.</div>
125
125
  <button class="pf-c-button pf-m-primary" type="button">Browse</button>
126
- <div class="pf-c-empty-state__secondary">
127
- <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
128
- </div>
126
+ <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
129
127
  </div>
130
128
  </div>
131
129
  </div>
@@ -157,9 +155,7 @@ cssPrefix: pf-c-code-editor
157
155
  class="pf-c-empty-state__body"
158
156
  >Drag a file here or browse to upload.</div>
159
157
  <button class="pf-c-button pf-m-primary" type="button">Browse</button>
160
- <div class="pf-c-empty-state__secondary">
161
- <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
162
- </div>
158
+ <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
163
159
  </div>
164
160
  </div>
165
161
  </div>
package/docs/components/Dropdown/examples/Dropdown.md CHANGED
@@ -982,6 +982,220 @@ cssPrefix: pf-c-dropdown
982
982
 
983
983
  ```
984
984
 
985
+ ### Split button (progress checkbox)
986
+
987
+ ```html isBeta
988
+ <div class="pf-c-dropdown">
989
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
990
+ <label
991
+ class="pf-c-dropdown__toggle-check"
992
+ for="dropdown-split-button-progress-toggle-check"
993
+ >
994
+ <input
995
+ type="checkbox"
996
+ id="dropdown-split-button-progress-toggle-check"
997
+ aria-label="Select all"
998
+ />
999
+ <span class="pf-c-dropdown__toggle-progress">
1000
+ <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1001
+ <circle
1002
+ class="pf-c-spinner__path"
1003
+ cx="50"
1004
+ cy="50"
1005
+ r="45"
1006
+ fill="none"
1007
+ />
1008
+ </svg>
1009
+ </span>
1010
+ </label>
1011
+
1012
+ <button
1013
+ class="pf-c-dropdown__toggle-button"
1014
+ type="button"
1015
+ aria-expanded="false"
1016
+ id="dropdown-split-button-progress-toggle-button"
1017
+ aria-label="Dropdown toggle"
1018
+ >
1019
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1020
+ </button>
1021
+ </div>
1022
+ <ul class="pf-c-dropdown__menu" hidden>
1023
+ <li>
1024
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1025
+ </li>
1026
+ <li>
1027
+ <button
1028
+ class="pf-c-dropdown__menu-item"
1029
+ type="button"
1030
+ disabled
1031
+ >Disabled action</button>
1032
+ </li>
1033
+ <li>
1034
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1035
+ </li>
1036
+ </ul>
1037
+ </div>
1038
+ <div class="pf-c-dropdown">
1039
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
1040
+ <label
1041
+ class="pf-c-dropdown__toggle-check pf-m-in-progress"
1042
+ for="dropdown-split-button-in-progress-toggle-check"
1043
+ >
1044
+ <input
1045
+ type="checkbox"
1046
+ id="dropdown-split-button-in-progress-toggle-check"
1047
+ disabled
1048
+ aria-label="Select all"
1049
+ />
1050
+ <span class="pf-c-dropdown__toggle-progress">
1051
+ <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1052
+ <circle
1053
+ class="pf-c-spinner__path"
1054
+ cx="50"
1055
+ cy="50"
1056
+ r="45"
1057
+ fill="none"
1058
+ />
1059
+ </svg>
1060
+ </span>
1061
+ </label>
1062
+
1063
+ <button
1064
+ class="pf-c-dropdown__toggle-button"
1065
+ type="button"
1066
+ aria-expanded="false"
1067
+ id="dropdown-split-button-in-progress-toggle-button"
1068
+ aria-label="Dropdown toggle"
1069
+ >
1070
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1071
+ </button>
1072
+ </div>
1073
+ <ul class="pf-c-dropdown__menu" hidden>
1074
+ <li>
1075
+ <button class="pf-c-dropdown__menu-item" type="button">Actions</button>
1076
+ </li>
1077
+ <li>
1078
+ <button
1079
+ class="pf-c-dropdown__menu-item"
1080
+ type="button"
1081
+ disabled
1082
+ >Disabled action</button>
1083
+ </li>
1084
+ <li>
1085
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1086
+ </li>
1087
+ </ul>
1088
+ </div>
1089
+ <div class="pf-c-dropdown">
1090
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
1091
+ <label
1092
+ class="pf-c-dropdown__toggle-check"
1093
+ for="dropdown-split-button-progress-text-toggle-check"
1094
+ >
1095
+ <input
1096
+ type="checkbox"
1097
+ id="dropdown-split-button-progress-text-toggle-check"
1098
+ aria-label="Select all"
1099
+ checked
1100
+ aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
1101
+ />
1102
+ <span class="pf-c-dropdown__toggle-progress">
1103
+ <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1104
+ <circle
1105
+ class="pf-c-spinner__path"
1106
+ cx="50"
1107
+ cy="50"
1108
+ r="45"
1109
+ fill="none"
1110
+ />
1111
+ </svg>
1112
+ </span>
1113
+ <span
1114
+ class="pf-c-dropdown__toggle-text"
1115
+ aria-hidden="true"
1116
+ id="dropdown-split-button-progress-text-toggle-check-text"
1117
+ >10 selected</span>
1118
+ </label>
1119
+
1120
+ <button
1121
+ class="pf-c-dropdown__toggle-button"
1122
+ type="button"
1123
+ aria-expanded="false"
1124
+ id="dropdown-split-button-progress-text-toggle-button"
1125
+ aria-label="Dropdown toggle"
1126
+ >
1127
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1128
+ </button>
1129
+ </div>
1130
+ <ul class="pf-c-dropdown__menu" hidden>
1131
+ <li>
1132
+ <button class="pf-c-dropdown__menu-item" type="button">Select all</button>
1133
+ </li>
1134
+ <li>
1135
+ <button class="pf-c-dropdown__menu-item" type="button">Select none</button>
1136
+ </li>
1137
+ <li>
1138
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1139
+ </li>
1140
+ </ul>
1141
+ </div>
1142
+ <div class="pf-c-dropdown">
1143
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
1144
+ <label
1145
+ class="pf-c-dropdown__toggle-check pf-m-in-progress"
1146
+ for="dropdown-split-button-in-progress-text-toggle-check"
1147
+ >
1148
+ <input
1149
+ type="checkbox"
1150
+ id="dropdown-split-button-in-progress-text-toggle-check"
1151
+ disabled
1152
+ aria-label="Select all"
1153
+ checked
1154
+ aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
1155
+ />
1156
+ <span class="pf-c-dropdown__toggle-progress">
1157
+ <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
1158
+ <circle
1159
+ class="pf-c-spinner__path"
1160
+ cx="50"
1161
+ cy="50"
1162
+ r="45"
1163
+ fill="none"
1164
+ />
1165
+ </svg>
1166
+ </span>
1167
+ <span
1168
+ class="pf-c-dropdown__toggle-text"
1169
+ aria-hidden="true"
1170
+ id="dropdown-split-button-in-progress-text-toggle-check-text"
1171
+ >10 selected</span>
1172
+ </label>
1173
+
1174
+ <button
1175
+ class="pf-c-dropdown__toggle-button"
1176
+ type="button"
1177
+ aria-expanded="false"
1178
+ id="dropdown-split-button-in-progress-text-toggle-button"
1179
+ aria-label="Dropdown toggle"
1180
+ >
1181
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1182
+ </button>
1183
+ </div>
1184
+ <ul class="pf-c-dropdown__menu" hidden>
1185
+ <li>
1186
+ <button class="pf-c-dropdown__menu-item" type="button">Select all</button>
1187
+ </li>
1188
+ <li>
1189
+ <button class="pf-c-dropdown__menu-item" type="button">Select none</button>
1190
+ </li>
1191
+ <li>
1192
+ <button class="pf-c-dropdown__menu-item" type="button">Other action</button>
1193
+ </li>
1194
+ </ul>
1195
+ </div>
1196
+
1197
+ ```
1198
+
985
1199
  ### Split button (action)
986
1200
 
987
1201
  ```html
@@ -2080,6 +2294,7 @@ The dropdown menu can contain either links or buttons, depending on the expected
2080
2294
  | `.pf-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
2081
2295
  | `.pf-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
2082
2296
  | `.pf-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
2297
+ | `.pf-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
2083
2298
  | `.pf-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
2084
2299
  | `.pf-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
2085
2300
  | `.pf-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
@@ -2107,3 +2322,4 @@ The dropdown menu can contain either links or buttons, depending on the expected
2107
2322
  | `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
2108
2323
  | `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
2109
2324
  | `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
2325
+ | `.pf-m-in-progress` | `.pf-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |