@patternfly/patternfly 6.1.0-prerelease.1 → 6.1.0-prerelease.3

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 (60) hide show
  1. package/README.md +5 -5
  2. package/components/CodeEditor/code-editor.css +15 -0
  3. package/components/CodeEditor/code-editor.scss +16 -1
  4. package/components/Content/content.css +9 -0
  5. package/components/Content/content.scss +7 -0
  6. package/components/Label/label-group.css +12 -0
  7. package/components/Label/label-group.scss +14 -0
  8. package/components/Label/label.css +2 -0
  9. package/components/Label/label.scss +2 -0
  10. package/components/MenuToggle/menu-toggle.css +3 -7
  11. package/components/MenuToggle/menu-toggle.scss +3 -8
  12. package/components/Table/table-grid.css +12 -12
  13. package/components/Table/table-grid.scss +4 -4
  14. package/components/Table/table-tree-view.css +4 -4
  15. package/components/Table/table-tree-view.scss +4 -4
  16. package/components/Table/table.css +1 -0
  17. package/components/Table/table.scss +2 -0
  18. package/components/Title/title.css +4 -0
  19. package/components/Title/title.scss +7 -0
  20. package/components/Wizard/wizard.css +1 -1
  21. package/components/Wizard/wizard.scss +1 -1
  22. package/components/_index.css +63 -24
  23. package/docs/components/CodeEditor/examples/CodeEditor.css +3 -0
  24. package/docs/components/CodeEditor/examples/CodeEditor.md +158 -7
  25. package/docs/components/Content/examples/Content.md +8 -7
  26. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -18
  27. package/docs/components/Label/examples/Label.css +12 -0
  28. package/docs/components/Label/examples/Label.md +127 -0
  29. package/docs/components/MenuToggle/examples/MenuToggle.md +1193 -536
  30. package/docs/components/Table/examples/Table.md +465 -2523
  31. package/docs/components/Title/examples/Title.md +10 -0
  32. package/docs/demos/AboutModal/examples/AboutModal.md +2 -4
  33. package/docs/demos/Alert/examples/Alert.md +6 -12
  34. package/docs/demos/BackToTop/examples/BackToTop.md +2 -4
  35. package/docs/demos/Banner/examples/Banner.md +4 -8
  36. package/docs/demos/Card/examples/Card.css +4 -0
  37. package/docs/demos/Card/examples/Card.md +13 -21
  38. package/docs/demos/CardView/examples/CardView.md +2 -4
  39. package/docs/demos/Dashboard/examples/Dashboard.md +2 -4
  40. package/docs/demos/DataList/examples/DataList.md +13 -46
  41. package/docs/demos/DescriptionList/examples/DescriptionList.md +11 -42
  42. package/docs/demos/Drawer/examples/Drawer.md +6 -12
  43. package/docs/demos/JumpLinks/examples/JumpLinks.md +8 -16
  44. package/docs/demos/Masthead/examples/Masthead.md +18 -36
  45. package/docs/demos/Modal/examples/Modal.md +12 -24
  46. package/docs/demos/Nav/examples/Nav.md +12 -24
  47. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -20
  48. package/docs/demos/Page/examples/Page.md +24 -48
  49. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +14 -28
  50. package/docs/demos/Skeleton/examples/Skeleton.md +2 -4
  51. package/docs/demos/Table/examples/Table.md +191 -984
  52. package/docs/demos/Tabs/examples/Tabs.md +18 -60
  53. package/docs/demos/Toolbar/examples/Toolbar.md +16 -80
  54. package/docs/demos/Wizard/examples/Wizard.md +18 -36
  55. package/package.json +3 -3
  56. package/patternfly-no-globals.css +63 -24
  57. package/patternfly.css +63 -24
  58. package/patternfly.min.css +1 -1
  59. package/patternfly.min.css.map +1 -1
  60. package/sass-utilities/functions.scss +6 -0
package/docs/components/Label/examples/Label.md CHANGED
@@ -7785,6 +7785,133 @@ In addition to the JavaScript management of [editable labels](/components/label#
7785
7785
 
7786
7786
  ```
7787
7787
 
7788
+ ### Labels with truncation
7789
+
7790
+ ```html
7791
+ <div class="pf-v6-c-label-truncate--example">
7792
+ <strong>Label</strong>
7793
+ <br />
7794
+ <br />
7795
+ <span class="pf-v6-c-label">
7796
+ <span class="pf-v6-c-label__content">
7797
+ <span
7798
+ class="pf-v6-c-label__text"
7799
+ id="-truncated-with-icon-text"
7800
+ style="--pf-v6-c-label__text--MaxWidth: 38ch"
7801
+ >Label with set max-width truncation</span>
7802
+ </span>
7803
+ <span class="pf-v6-c-label__actions">
7804
+ <button
7805
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
7806
+ type="button"
7807
+ id="-truncated-with-icon-button"
7808
+ aria-label="Remove"
7809
+ aria-labelledby="-truncated-with-icon-button -truncated-with-icon-text"
7810
+ >
7811
+ <span class="pf-v6-c-button__icon">
7812
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
7813
+ </span>
7814
+ </button>
7815
+ </span>
7816
+ </span>
7817
+ <br />
7818
+ <br />
7819
+ <strong>Label group</strong>
7820
+ <br />
7821
+ <br />
7822
+ <div class="pf-v6-c-label-group">
7823
+ <div class="pf-v6-c-label-group__main">
7824
+ <ul
7825
+ class="pf-v6-c-label-group__list"
7826
+ role="list"
7827
+ aria-label="Group of labels"
7828
+ >
7829
+ <li class="pf-v6-c-label-group__list-item">
7830
+ <span class="pf-v6-c-label pf-m-blue">
7831
+ <span class="pf-v6-c-label__content">
7832
+ <span class="pf-v6-c-label__icon">
7833
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
7834
+ </span>
7835
+ <span class="pf-v6-c-label__text">Label 1</span>
7836
+ </span>
7837
+ </span>
7838
+ </li>
7839
+ <li class="pf-v6-c-label-group__list-item">
7840
+ <span class="pf-v6-c-label pf-m-green">
7841
+ <span class="pf-v6-c-label__content">
7842
+ <span class="pf-v6-c-label__icon">
7843
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
7844
+ </span>
7845
+ <span class="pf-v6-c-label__text">Label 2</span>
7846
+ </span>
7847
+ </span>
7848
+ </li>
7849
+ <li class="pf-v6-c-label-group__list-item">
7850
+ <span class="pf-v6-c-label">
7851
+ <span class="pf-v6-c-label__content">
7852
+ <span class="pf-v6-c-label__icon">
7853
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
7854
+ </span>
7855
+ <span
7856
+ class="pf-v6-c-label__text"
7857
+ >Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula</span>
7858
+ </span>
7859
+ </span>
7860
+ </li>
7861
+ </ul>
7862
+ </div>
7863
+ </div>
7864
+ <br />
7865
+ <br />
7866
+ <strong>Label group vertical</strong>
7867
+ <br />
7868
+ <br />
7869
+ <div class="pf-v6-c-label-group pf-m-vertical">
7870
+ <div class="pf-v6-c-label-group__main">
7871
+ <ul
7872
+ class="pf-v6-c-label-group__list"
7873
+ role="list"
7874
+ aria-label="Group of labels"
7875
+ >
7876
+ <li class="pf-v6-c-label-group__list-item">
7877
+ <span class="pf-v6-c-label">
7878
+ <span class="pf-v6-c-label__content">
7879
+ <span class="pf-v6-c-label__icon">
7880
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
7881
+ </span>
7882
+ <span class="pf-v6-c-label__text">Label 1</span>
7883
+ </span>
7884
+ </span>
7885
+ </li>
7886
+ <li class="pf-v6-c-label-group__list-item">
7887
+ <span class="pf-v6-c-label pf-m-blue">
7888
+ <span class="pf-v6-c-label__content">
7889
+ <span class="pf-v6-c-label__icon">
7890
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
7891
+ </span>
7892
+ <span class="pf-v6-c-label__text">Label 2</span>
7893
+ </span>
7894
+ </span>
7895
+ </li>
7896
+ <li class="pf-v6-c-label-group__list-item">
7897
+ <span class="pf-v6-c-label pf-m-green">
7898
+ <span class="pf-v6-c-label__content">
7899
+ <span class="pf-v6-c-label__icon">
7900
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
7901
+ </span>
7902
+ <span
7903
+ class="pf-v6-c-label__text"
7904
+ >Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula</span>
7905
+ </span>
7906
+ </span>
7907
+ </li>
7908
+ </ul>
7909
+ </div>
7910
+ </div>
7911
+ </div>
7912
+
7913
+ ```
7914
+
7788
7915
  ## Documentation
7789
7916
 
7790
7917
  ### Label usage