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

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 (71) 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 +27 -17
  7. package/components/ChipGroup/chip-group.scss +36 -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 +2 -7
  26. package/components/Popover/themes/dark/popover.scss +2 -8
  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 +1 -11
  32. package/components/Tooltip/tooltip.css +7 -12
  33. package/components/Tooltip/tooltip.scss +6 -3
  34. package/docs/components/Card/examples/Card.md +61 -44
  35. package/docs/components/Check/examples/Check.md +2 -6
  36. package/docs/components/ChipGroup/examples/ChipGroup.md +10 -339
  37. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  38. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  39. package/docs/components/DataList/examples/DataList.md +104 -65
  40. package/docs/components/Dropdown/examples/Dropdown.md +263 -23
  41. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  42. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  43. package/docs/components/LabelGroup/examples/LabelGroup.md +2 -14
  44. package/docs/components/Menu/examples/Menu.md +1 -1
  45. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -4
  46. package/docs/components/Pagination/examples/Pagination.md +129 -30
  47. package/docs/components/Slider/examples/Slider.md +6 -6
  48. package/docs/components/Table/examples/Table.md +1117 -700
  49. package/docs/components/Tabs/examples/Tabs.md +1 -1
  50. package/docs/components/Toolbar/examples/Toolbar.md +67 -46
  51. package/docs/components/Wizard/examples/Wizard.md +4 -7
  52. package/docs/demos/Banner/examples/Banner.md +2 -2
  53. package/docs/demos/Card/examples/Card.md +144 -109
  54. package/docs/demos/CardView/examples/CardView.md +9 -8
  55. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  56. package/docs/demos/DataList/examples/DataList.md +138 -89
  57. package/docs/demos/Masthead/examples/Masthead.md +3 -6
  58. package/docs/demos/Nav/examples/Nav.md +671 -718
  59. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +17 -13
  60. package/docs/demos/Table/examples/Table.md +439 -297
  61. package/docs/demos/Tabs/examples/Tabs.md +90 -569
  62. package/docs/demos/Toolbar/examples/Toolbar.md +1773 -163
  63. package/docs/demos/Wizard/examples/Wizard.md +0 -4
  64. package/package.json +5 -5
  65. package/patternfly-base-no-reset.css +0 -10
  66. package/patternfly-base.css +0 -10
  67. package/patternfly-no-reset.css +409 -143
  68. package/patternfly.css +409 -143
  69. package/patternfly.min.css +1 -1
  70. package/patternfly.min.css.map +1 -1
  71. package/sass-utilities/scss-variables.scss +0 -1
package/components/Tooltip/tooltip.scss CHANGED
@@ -13,8 +13,10 @@
13
13
  --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
14
14
 
15
15
  // Arrow variables
16
- --pf-c-tooltip__arrow--Width: #{pf-size-prem(8px)};
17
- --pf-c-tooltip__arrow--Height: #{pf-size-prem(8px)};
16
+ --pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
17
+ --pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
18
+ --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
19
+ --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
18
20
  --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
19
21
  --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
20
22
  --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -122,7 +124,8 @@
122
124
  width: var(--pf-c-tooltip__arrow--Width);
123
125
  height: var(--pf-c-tooltip__arrow--Height);
124
126
  pointer-events: none;
125
- background-color: var(--pf-c-tooltip__content--BackgroundColor);
127
+ background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
128
+ box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
126
129
  }
127
130
 
128
131
  // stylelint-disable no-invalid-position-at-import-rule
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/Check/examples/Check.md CHANGED
@@ -97,22 +97,18 @@ cssPrefix: pf-c-check
97
97
  type="checkbox"
98
98
  id="check-disabled"
99
99
  name="check-disabled"
100
- disabled
101
100
  />
102
101
 
103
- <label
104
- class="pf-c-check__label pf-m-disabled"
105
- for="check-disabled"
106
- >Check disabled</label>
102
+ <label class="pf-c-check__label" for="check-disabled">Check disabled</label>
107
103
  </div>
108
104
  <div class="pf-c-check">
109
105
  <input
110
106
  class="pf-c-check__input"
111
107
  type="checkbox"
108
+ disabled
112
109
  id="check-disabled-2"
113
110
  name="check-disabled-2"
114
111
  checked
115
- disabled
116
112
  />
117
113
 
118
114
  <label
package/docs/components/ChipGroup/examples/ChipGroup.md CHANGED
@@ -568,335 +568,6 @@ cssPrefix: pf-c-chip-group
568
568
 
569
569
  ```
570
570
 
571
- ### Legacy chip group examples without main element
572
-
573
- ```html
574
- <div class="pf-c-chip-group">
575
- <ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
576
- <li class="pf-c-chip-group__list-item">
577
- <div class="pf-c-chip">
578
- <span
579
- class="pf-c-chip__text"
580
- id="legacy-simplechip_one_select_collapsed"
581
- >Chip one</span>
582
- <button
583
- class="pf-c-button pf-m-plain"
584
- type="button"
585
- aria-labelledby="legacy-simpleremove_chip_one_select_collapsed legacy-simplechip_one_select_collapsed"
586
- aria-label="Remove"
587
- id="legacy-simpleremove_chip_one_select_collapsed"
588
- >
589
- <i class="fas fa-times" aria-hidden="true"></i>
590
- </button>
591
- </div>
592
- </li>
593
- <li class="pf-c-chip-group__list-item">
594
- <div class="pf-c-chip">
595
- <span
596
- class="pf-c-chip__text"
597
- id="legacy-simplechip_two_select_collapsed"
598
- >Chip two</span>
599
- <button
600
- class="pf-c-button pf-m-plain"
601
- type="button"
602
- aria-labelledby="legacy-simpleremove_chip_two_select_collapsed legacy-simplechip_two_select_collapsed"
603
- aria-label="Remove"
604
- id="legacy-simpleremove_chip_two_select_collapsed"
605
- >
606
- <i class="fas fa-times" aria-hidden="true"></i>
607
- </button>
608
- </div>
609
- </li>
610
- <li class="pf-c-chip-group__list-item">
611
- <div class="pf-c-chip">
612
- <span
613
- class="pf-c-chip__text"
614
- id="legacy-simplechip_three_select_collapsed"
615
- >Chip three</span>
616
- <button
617
- class="pf-c-button pf-m-plain"
618
- type="button"
619
- aria-labelledby="legacy-simpleremove_chip_three_select_collapsed legacy-simplechip_three_select_collapsed"
620
- aria-label="Remove"
621
- id="legacy-simpleremove_chip_three_select_collapsed"
622
- >
623
- <i class="fas fa-times" aria-hidden="true"></i>
624
- </button>
625
- </div>
626
- </li>
627
- </ul>
628
- </div>
629
-
630
- <br />
631
- <br />
632
-
633
- <div class="pf-c-chip-group">
634
- <ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
635
- <li class="pf-c-chip-group__list-item">
636
- <div class="pf-c-chip">
637
- <span
638
- class="pf-c-chip__text"
639
- id="legacy-simple-removablechip_one_toolbar"
640
- >Chip one</span>
641
- <button
642
- class="pf-c-button pf-m-plain"
643
- type="button"
644
- aria-labelledby="legacy-simple-removableremove_chip_one_toolbar legacy-simple-removablechip_one_toolbar"
645
- aria-label="Remove"
646
- id="legacy-simple-removableremove_chip_one_toolbar"
647
- >
648
- <i class="fas fa-times" aria-hidden="true"></i>
649
- </button>
650
- </div>
651
- </li>
652
- <li class="pf-c-chip-group__list-item">
653
- <div class="pf-c-chip">
654
- <span
655
- class="pf-c-chip__text"
656
- id="legacy-simple-removablechip_two_toolbar"
657
- >Chip two</span>
658
- <button
659
- class="pf-c-button pf-m-plain"
660
- type="button"
661
- aria-labelledby="legacy-simple-removableremove_chip_two_toolbar legacy-simple-removablechip_two_toolbar"
662
- aria-label="Remove"
663
- id="legacy-simple-removableremove_chip_two_toolbar"
664
- >
665
- <i class="fas fa-times" aria-hidden="true"></i>
666
- </button>
667
- </div>
668
- </li>
669
- <li class="pf-c-chip-group__list-item">
670
- <div class="pf-c-chip">
671
- <span
672
- class="pf-c-chip__text"
673
- id="legacy-simple-removablechip_three_toolbar"
674
- >Chip three</span>
675
- <button
676
- class="pf-c-button pf-m-plain"
677
- type="button"
678
- aria-labelledby="legacy-simple-removableremove_chip_three_toolbar legacy-simple-removablechip_three_toolbar"
679
- aria-label="Remove"
680
- id="legacy-simple-removableremove_chip_three_toolbar"
681
- >
682
- <i class="fas fa-times" aria-hidden="true"></i>
683
- </button>
684
- </div>
685
- </li>
686
- <li class="pf-c-chip-group__list-item">
687
- <div class="pf-c-chip">
688
- <span
689
- class="pf-c-chip__text"
690
- id="legacy-simple-removablechip_four_toolbar"
691
- >Chip four</span>
692
- <button
693
- class="pf-c-button pf-m-plain"
694
- type="button"
695
- aria-labelledby="legacy-simple-removableremove_chip_four_toolbar legacy-simple-removablechip_four_toolbar"
696
- aria-label="Remove"
697
- id="legacy-simple-removableremove_chip_four_toolbar"
698
- >
699
- <i class="fas fa-times" aria-hidden="true"></i>
700
- </button>
701
- </div>
702
- </li>
703
- <li class="pf-c-chip-group__list-item">
704
- <div class="pf-c-chip">
705
- <span
706
- class="pf-c-chip__text"
707
- id="legacy-simple-removablechip_five_toolbar"
708
- >Chip five</span>
709
- <button
710
- class="pf-c-button pf-m-plain"
711
- type="button"
712
- aria-labelledby="legacy-simple-removableremove_chip_five_toolbar legacy-simple-removablechip_five_toolbar"
713
- aria-label="Remove"
714
- id="legacy-simple-removableremove_chip_five_toolbar"
715
- >
716
- <i class="fas fa-times" aria-hidden="true"></i>
717
- </button>
718
- </div>
719
- </li>
720
- <li class="pf-c-chip-group__list-item">
721
- <div class="pf-c-chip">
722
- <span
723
- class="pf-c-chip__text"
724
- id="legacy-simple-removablechip_six_toolbar"
725
- >Chip six</span>
726
- <button
727
- class="pf-c-button pf-m-plain"
728
- type="button"
729
- aria-labelledby="legacy-simple-removableremove_chip_six_toolbar legacy-simple-removablechip_six_toolbar"
730
- aria-label="Remove"
731
- id="legacy-simple-removableremove_chip_six_toolbar"
732
- >
733
- <i class="fas fa-times" aria-hidden="true"></i>
734
- </button>
735
- </div>
736
- </li>
737
- </ul>
738
- <div class="pf-c-chip-group__close">
739
- <button
740
- class="pf-c-button pf-m-plain"
741
- type="button"
742
- aria-labelledby="legacy-simple-removable-button legacy-simple-removable-label"
743
- aria-label="Close chip group"
744
- id="legacy-simple-removable-button"
745
- >
746
- <i class="fas fa-times-circle" aria-hidden="true"></i>
747
- </button>
748
- </div>
749
- </div>
750
-
751
- <br />
752
- <br />
753
-
754
- <div class="pf-c-chip-group pf-m-category">
755
- <span
756
- class="pf-c-chip-group__label"
757
- aria-hidden="true"
758
- id="legacy-category-label"
759
- >Category one</span>
760
- <ul
761
- class="pf-c-chip-group__list"
762
- role="list"
763
- aria-labelledby="legacy-category-label"
764
- >
765
- <li class="pf-c-chip-group__list-item">
766
- <div class="pf-c-chip">
767
- <span
768
- class="pf-c-chip__text"
769
- id="legacy-categorychip_one_toolbar_collapsed"
770
- >Chip one</span>
771
- <button
772
- class="pf-c-button pf-m-plain"
773
- type="button"
774
- aria-labelledby="legacy-categoryremove_chip_one_toolbar_collapsed legacy-categorychip_one_toolbar_collapsed"
775
- aria-label="Remove"
776
- id="legacy-categoryremove_chip_one_toolbar_collapsed"
777
- >
778
- <i class="fas fa-times" aria-hidden="true"></i>
779
- </button>
780
- </div>
781
- </li>
782
- <li class="pf-c-chip-group__list-item">
783
- <div class="pf-c-chip">
784
- <span
785
- class="pf-c-chip__text"
786
- id="legacy-categorychip_two_toolbar_collapsed"
787
- >Chip two</span>
788
- <button
789
- class="pf-c-button pf-m-plain"
790
- type="button"
791
- aria-labelledby="legacy-categoryremove_chip_two_toolbar_collapsed legacy-categorychip_two_toolbar_collapsed"
792
- aria-label="Remove"
793
- id="legacy-categoryremove_chip_two_toolbar_collapsed"
794
- >
795
- <i class="fas fa-times" aria-hidden="true"></i>
796
- </button>
797
- </div>
798
- </li>
799
- <li class="pf-c-chip-group__list-item">
800
- <div class="pf-c-chip">
801
- <span
802
- class="pf-c-chip__text"
803
- id="legacy-categorychip_three_toolbar_collapsed"
804
- >Chip three</span>
805
- <button
806
- class="pf-c-button pf-m-plain"
807
- type="button"
808
- aria-labelledby="legacy-categoryremove_chip_three_toolbar_collapsed legacy-categorychip_three_toolbar_collapsed"
809
- aria-label="Remove"
810
- id="legacy-categoryremove_chip_three_toolbar_collapsed"
811
- >
812
- <i class="fas fa-times" aria-hidden="true"></i>
813
- </button>
814
- </div>
815
- </li>
816
- </ul>
817
- </div>
818
-
819
- <br />
820
- <br />
821
-
822
- <div class="pf-c-chip-group pf-m-category">
823
- <span
824
- class="pf-c-chip-group__label"
825
- aria-hidden="true"
826
- id="legacy-category-removable-label"
827
- >Category one</span>
828
- <ul
829
- class="pf-c-chip-group__list"
830
- role="list"
831
- aria-labelledby="legacy-category-removable-label"
832
- >
833
- <li class="pf-c-chip-group__list-item">
834
- <div class="pf-c-chip">
835
- <span
836
- class="pf-c-chip__text"
837
- id="legacy-category-removablechip_one_toolbar_collapsed"
838
- >Chip one</span>
839
- <button
840
- class="pf-c-button pf-m-plain"
841
- type="button"
842
- aria-labelledby="legacy-category-removableremove_chip_one_toolbar_collapsed legacy-category-removablechip_one_toolbar_collapsed"
843
- aria-label="Remove"
844
- id="legacy-category-removableremove_chip_one_toolbar_collapsed"
845
- >
846
- <i class="fas fa-times" aria-hidden="true"></i>
847
- </button>
848
- </div>
849
- </li>
850
- <li class="pf-c-chip-group__list-item">
851
- <div class="pf-c-chip">
852
- <span
853
- class="pf-c-chip__text"
854
- id="legacy-category-removablechip_two_toolbar_collapsed"
855
- >Chip two</span>
856
- <button
857
- class="pf-c-button pf-m-plain"
858
- type="button"
859
- aria-labelledby="legacy-category-removableremove_chip_two_toolbar_collapsed legacy-category-removablechip_two_toolbar_collapsed"
860
- aria-label="Remove"
861
- id="legacy-category-removableremove_chip_two_toolbar_collapsed"
862
- >
863
- <i class="fas fa-times" aria-hidden="true"></i>
864
- </button>
865
- </div>
866
- </li>
867
- <li class="pf-c-chip-group__list-item">
868
- <div class="pf-c-chip">
869
- <span
870
- class="pf-c-chip__text"
871
- id="legacy-category-removablechip_three_toolbar_collapsed"
872
- >Chip three</span>
873
- <button
874
- class="pf-c-button pf-m-plain"
875
- type="button"
876
- aria-labelledby="legacy-category-removableremove_chip_three_toolbar_collapsed legacy-category-removablechip_three_toolbar_collapsed"
877
- aria-label="Remove"
878
- id="legacy-category-removableremove_chip_three_toolbar_collapsed"
879
- >
880
- <i class="fas fa-times" aria-hidden="true"></i>
881
- </button>
882
- </div>
883
- </li>
884
- </ul>
885
- <div class="pf-c-chip-group__close">
886
- <button
887
- class="pf-c-button pf-m-plain"
888
- type="button"
889
- aria-labelledby="legacy-category-removable-button legacy-category-removable-label"
890
- aria-label="Close chip group"
891
- id="legacy-category-removable-button"
892
- >
893
- <i class="fas fa-times-circle" aria-hidden="true"></i>
894
- </button>
895
- </div>
896
- </div>
897
-
898
- ```
899
-
900
571
  ### Overview
901
572
 
902
573
  A chip group is constrained to the width of its container and will wrap when it exceeds that width. An overflow value can be set and when the number of chips exceeds that value, additional chips will be hidden by default. The default overflow value will be set to 3 chips but this can be adjusted per application needs. The toggle button after the last chip allows the group to be expanded (or collapsed).
@@ -917,13 +588,13 @@ The chip group requires the [chip component](/components/chip).
917
588
 
918
589
  ### Usage
919
590
 
920
- | Class | Applied to | Outcome |
921
- | ----------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------- |
922
- | `.pf-c-chip-group` | `<div>` | Initiates the chip group component. **Required.** |
923
- | `.pf-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.** |
924
- | `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
925
- | `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
926
- | `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
927
- | `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. |
928
- | `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
929
- | `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling. |
591
+ | Class | Applied to | Outcome |
592
+ | ----------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------ |
593
+ | `.pf-c-chip-group` | `<div>` | Initiates the chip group component. **Required.** |
594
+ | `.pf-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.** |
595
+ | `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
596
+ | `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
597
+ | `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
598
+ | `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. **Required** |
599
+ | `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
600
+ | `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling. |
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>