@patternfly/patternfly 6.4.0 → 6.5.0-prerelease.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 (58) hide show
  1. package/assets/images/RHAiExperienceIcon.svg +27 -0
  2. package/assets/images/RHAutomationsLogo.svg +96 -0
  3. package/assets/images/RHServerStackIcon.svg +16 -0
  4. package/assets/images/compass--hero-bg.png +0 -0
  5. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  6. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  7. package/assets/images/compass--wallpaper-dark.png +0 -0
  8. package/assets/images/compass--wallpaper-light.png +0 -0
  9. package/base/patternfly-common.css +46 -0
  10. package/base/patternfly-common.scss +56 -0
  11. package/components/ActionList/action-list.css +9 -0
  12. package/components/ActionList/action-list.scss +12 -0
  13. package/components/Button/button.css +18 -0
  14. package/components/Button/button.scss +22 -0
  15. package/components/Card/card.css +6 -0
  16. package/components/Card/card.scss +8 -0
  17. package/components/Compass/compass.css +211 -0
  18. package/components/Compass/compass.scss +276 -0
  19. package/components/DataList/data-list.css +5 -1
  20. package/components/DataList/data-list.scss +6 -1
  21. package/components/Menu/menu.css +1 -1
  22. package/components/Menu/menu.scss +1 -1
  23. package/components/MenuToggle/menu-toggle.css +4 -0
  24. package/components/MenuToggle/menu-toggle.scss +5 -0
  25. package/components/Panel/panel.css +1 -1
  26. package/components/Panel/panel.scss +1 -1
  27. package/components/Spinner/spinner.css +3 -0
  28. package/components/Spinner/spinner.scss +5 -0
  29. package/components/Table/table.css +3 -0
  30. package/components/Table/table.scss +5 -0
  31. package/components/Tabs/tabs.css +17 -1
  32. package/components/Tabs/tabs.scss +22 -1
  33. package/components/_index.css +278 -4
  34. package/components/_index.scss +1 -0
  35. package/docs/components/ActionList/examples/ActionList.md +85 -0
  36. package/docs/components/Button/examples/Button.md +116 -0
  37. package/docs/components/Card/examples/Card.md +6 -4
  38. package/docs/components/Compass/examples/Compass.md +4608 -0
  39. package/docs/components/DataList/examples/DataList.md +181 -185
  40. package/docs/components/Drawer/examples/Drawer.md +1 -1
  41. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  42. package/docs/components/Progress/examples/Progress.md +3 -3
  43. package/docs/components/Table/examples/Table.md +88 -0
  44. package/docs/components/Tabs/examples/Tabs.md +188 -0
  45. package/docs/components/Wizard/examples/Wizard.md +15 -15
  46. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  47. package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
  48. package/docs/demos/Drawer/examples/Drawer.md +31 -33
  49. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
  50. package/docs/demos/Wizard/examples/Wizard.md +31 -34
  51. package/package.json +5 -5
  52. package/patternfly-base-no-globals.css +46 -0
  53. package/patternfly-base.css +46 -0
  54. package/patternfly-no-globals.css +324 -4
  55. package/patternfly.css +324 -4
  56. package/patternfly.min.css +1 -1
  57. package/patternfly.min.css.map +1 -1
  58. package/sass-utilities/namespaces-components.scss +3 -0
@@ -1833,6 +1833,121 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1833
1833
 
1834
1834
  ```
1835
1835
 
1836
+ ### Circle buttons
1837
+
1838
+ ```html isBeta
1839
+ <button
1840
+ class="pf-v6-c-button pf-m-circle pf-m-primary"
1841
+ type="button"
1842
+ aria-label="Add primary circle variant"
1843
+ >
1844
+ <span class="pf-v6-c-button__icon pf-m-start">
1845
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1846
+ </span>
1847
+ </button>
1848
+
1849
+ <button
1850
+ class="pf-v6-c-button pf-m-circle pf-m-secondary"
1851
+ type="button"
1852
+ aria-label="Add secondary circle variant"
1853
+ >
1854
+ <span class="pf-v6-c-button__icon pf-m-start">
1855
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1856
+ </span>
1857
+ </button>
1858
+
1859
+ <button
1860
+ class="pf-v6-c-button pf-m-circle pf-m-tertiary"
1861
+ type="button"
1862
+ aria-label="Add tertiary circle variant"
1863
+ >
1864
+ <span class="pf-v6-c-button__icon pf-m-start">
1865
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1866
+ </span>
1867
+ </button>
1868
+
1869
+ <button
1870
+ class="pf-v6-c-button pf-m-circle pf-m-danger"
1871
+ type="button"
1872
+ aria-label="Add danger circle variant"
1873
+ >
1874
+ <span class="pf-v6-c-button__icon pf-m-start">
1875
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1876
+ </span>
1877
+ </button>
1878
+
1879
+ <button
1880
+ class="pf-v6-c-button pf-m-circle pf-m-warning"
1881
+ type="button"
1882
+ aria-label="Add warning circle variant"
1883
+ >
1884
+ <span class="pf-v6-c-button__icon pf-m-start">
1885
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1886
+ </span>
1887
+ </button>
1888
+
1889
+ <button
1890
+ class="pf-v6-c-button pf-m-circle pf-m-link"
1891
+ type="button"
1892
+ aria-label="Add link circle variant"
1893
+ >
1894
+ <span class="pf-v6-c-button__icon pf-m-start">
1895
+ <i class="fas fa-plus-circle" aria-hidden="true"></i>
1896
+ </span>
1897
+ </button>
1898
+
1899
+ <button
1900
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1901
+ type="button"
1902
+ aria-label="Remove plain circle variant"
1903
+ >
1904
+ <span class="pf-v6-c-button__icon pf-m-start">
1905
+ <i class="fas fa-times" aria-hidden="true"></i>
1906
+ </span>
1907
+ </button>
1908
+
1909
+ <button
1910
+ class="pf-v6-c-button pf-m-circle pf-m-control"
1911
+ type="button"
1912
+ aria-label="Copy control circle variant"
1913
+ >
1914
+ <span class="pf-v6-c-button__icon pf-m-start">
1915
+ <i class="fas fa-copy" aria-hidden="true"></i>
1916
+ </span>
1917
+ </button>
1918
+
1919
+ <button
1920
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1921
+ type="button"
1922
+ aria-label="Upload circle variant"
1923
+ >
1924
+ <span class="pf-v6-c-button__icon">
1925
+ <i class="fas fa-upload" aria-hidden="true"></i>
1926
+ </span>
1927
+ </button>
1928
+
1929
+ <button
1930
+ class="pf-v6-c-button pf-m-circle pf-m-in-progress pf-m-plain"
1931
+ type="button"
1932
+ >
1933
+ <span class="pf-v6-c-button__progress">
1934
+ <svg
1935
+ class="pf-v6-c-spinner pf-m-md"
1936
+ role="progressbar"
1937
+ viewBox="0 0 100 100"
1938
+ aria-label="Uploading circle variant..."
1939
+ >
1940
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
1941
+ </svg>
1942
+ </span>
1943
+
1944
+ <span class="pf-v6-c-button__icon">
1945
+ <i class="fas fa-upload" aria-hidden="true"></i>
1946
+ </span>
1947
+ </button>
1948
+
1949
+ ```
1950
+
1836
1951
  ### Counts
1837
1952
 
1838
1953
  ```html
@@ -2236,3 +2351,4 @@ Semantic buttons and links are important for usability as well as accessibility.
2236
2351
  | `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
2237
2352
  | `.pf-m-expand` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
2238
2353
  | `.pf-m-collapse` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |
2354
+ | `.pf-m-circle` | `.pf-v6-c-button` | Modifies a button to have a circular shape, instead of only rounded corners or a pill shape. Intended for buttons that contain only an icon. |
@@ -230,10 +230,12 @@ cssPrefix: pf-v6-c-card
230
230
  <span class="pf-v6-c-button__text">Tertiary action</span>
231
231
  </button>
232
232
  </div>
233
- <div class="pf-v6-c-card__title">
234
- <h2
235
- class="pf-v6-c-card__title-text"
236
- >This is a longer card title that takes up more space</h2>
233
+ <div class="pf-v6-c-card__header-main">
234
+ <div class="pf-v6-c-card__title">
235
+ <h2
236
+ class="pf-v6-c-card__title-text"
237
+ >This is a longer card title that takes up more space</h2>
238
+ </div>
237
239
  </div>
238
240
  </div>
239
241
  <div class="pf-v6-c-card__body">This is the card body</div>