@patternfly/patternfly 4.139.1 → 4.141.0

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 (25) hide show
  1. package/components/Banner/banner.css +33 -0
  2. package/components/Banner/banner.scss +50 -0
  3. package/components/DataList/data-list.css +0 -1
  4. package/components/DataList/data-list.scss +0 -1
  5. package/{patternfly-drag-drop.css → components/DragDrop/drag-drop.css} +0 -0
  6. package/{patternfly-drag-drop.scss → components/DragDrop/drag-drop.scss} +0 -0
  7. package/components/DualListSelector/dual-list-selector.css +8 -0
  8. package/components/DualListSelector/dual-list-selector.scss +10 -0
  9. package/components/FormControl/form-control.scss +1 -1
  10. package/components/Menu/menu.css +32 -1
  11. package/components/Menu/menu.scss +39 -1
  12. package/components/Select/select.css +1 -0
  13. package/components/Select/select.scss +2 -0
  14. package/components/_all.scss +1 -0
  15. package/docs/components/Banner/examples/Banner.md +46 -0
  16. package/docs/components/DragDrop/examples/DragDrop.css +13 -0
  17. package/docs/components/DragDrop/examples/DragDrop.md +67 -0
  18. package/docs/components/DualListSelector/examples/DualListSelector.md +60 -46
  19. package/docs/components/Menu/examples/Menu.md +548 -67
  20. package/docs/components/Select/examples/Select.md +250 -4
  21. package/package.json +5 -6
  22. package/patternfly-no-reset.css +130 -2
  23. package/patternfly.css +130 -2
  24. package/patternfly.min.css +1 -1
  25. package/patternfly.min.css.map +1 -1
package/docs/components/DualListSelector/examples/DualListSelector.md CHANGED
@@ -102,11 +102,17 @@ cssPrefix: pf-c-dual-list-selector
102
102
  </button>
103
103
  </div>
104
104
  </li>
105
- <li class="pf-c-dual-list-selector__list-item">
105
+ <li class="pf-c-dual-list-selector__list-item pf-m-disabled">
106
106
  <div class="pf-c-dual-list-selector__list-item-row">
107
- <button class="pf-c-dual-list-selector__item" type="button">
107
+ <button
108
+ class="pf-c-dual-list-selector__item"
109
+ disabled
110
+ type="button"
111
+ >
108
112
  <span class="pf-c-dual-list-selector__item-main">
109
- <span class="pf-c-dual-list-selector__item-text">Item3</span>
113
+ <span
114
+ class="pf-c-dual-list-selector__item-text"
115
+ >Item3 (disabled)</span>
110
116
  </span>
111
117
  <span class="pf-c-dual-list-selector__item-count">
112
118
  <span class="pf-c-badge pf-m-read"></span>
@@ -1752,7 +1758,7 @@ cssPrefix: pf-c-dual-list-selector
1752
1758
 
1753
1759
  ```
1754
1760
 
1755
- ### Tree view chosen options
1761
+ ### Tree view with chosen and disabled options
1756
1762
 
1757
1763
  ```html
1758
1764
  <div class="pf-c-dual-list-selector">
@@ -1850,7 +1856,7 @@ cssPrefix: pf-c-dual-list-selector
1850
1856
  <span class="pf-c-dual-list-selector__item-text">Colors</span>
1851
1857
  </span>
1852
1858
  <span class="pf-c-dual-list-selector__item-count">
1853
- <span class="pf-c-badge pf-m-read"></span>
1859
+ <span class="pf-c-badge pf-m-read">6</span>
1854
1860
  </span>
1855
1861
  </div>
1856
1862
  </div>
@@ -1904,11 +1910,11 @@ cssPrefix: pf-c-dual-list-selector
1904
1910
  </div>
1905
1911
  </li>
1906
1912
  <li
1907
- class="pf-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
1913
+ class="pf-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded pf-m-disabled"
1908
1914
  aria-expanded="true"
1909
1915
  >
1910
1916
  <div class="pf-c-dual-list-selector__list-item-row pf-m-check">
1911
- <div class="pf-c-dual-list-selector__item" tabindex="0">
1917
+ <div class="pf-c-dual-list-selector__item">
1912
1918
  <span class="pf-c-dual-list-selector__item-main">
1913
1919
  <div class="pf-c-dual-list-selector__item-toggle">
1914
1920
  <span class="pf-c-dual-list-selector__item-toggle-icon">
@@ -1920,12 +1926,15 @@ cssPrefix: pf-c-dual-list-selector
1920
1926
  <input
1921
1927
  class="pf-c-check__input"
1922
1928
  type="checkbox"
1929
+ disabled
1923
1930
  id="check-14"
1924
1931
  aria-label="Dual list selector item check"
1925
1932
  />
1926
1933
  </div>
1927
1934
  </span>
1928
- <span class="pf-c-dual-list-selector__item-text">Green</span>
1935
+ <span
1936
+ class="pf-c-dual-list-selector__item-text"
1937
+ >Green (disabled)</span>
1929
1938
  </span>
1930
1939
  <span class="pf-c-dual-list-selector__item-count">
1931
1940
  <span class="pf-c-badge pf-m-read"></span>
@@ -1938,13 +1947,14 @@ cssPrefix: pf-c-dual-list-selector
1938
1947
  <div
1939
1948
  class="pf-c-dual-list-selector__list-item-row pf-m-check"
1940
1949
  >
1941
- <div class="pf-c-dual-list-selector__item" tabindex="0">
1950
+ <div class="pf-c-dual-list-selector__item">
1942
1951
  <span class="pf-c-dual-list-selector__item-main">
1943
1952
  <span class="pf-c-dual-list-selector__item-check">
1944
1953
  <div class="pf-c-check pf-m-standalone">
1945
1954
  <input
1946
1955
  class="pf-c-check__input"
1947
1956
  type="checkbox"
1957
+ disabled
1948
1958
  id="check-15"
1949
1959
  aria-label="Dual list selector item check"
1950
1960
  />
@@ -1964,13 +1974,14 @@ cssPrefix: pf-c-dual-list-selector
1964
1974
  <div
1965
1975
  class="pf-c-dual-list-selector__list-item-row pf-m-check"
1966
1976
  >
1967
- <div class="pf-c-dual-list-selector__item" tabindex="0">
1977
+ <div class="pf-c-dual-list-selector__item">
1968
1978
  <span class="pf-c-dual-list-selector__item-main">
1969
1979
  <span class="pf-c-dual-list-selector__item-check">
1970
1980
  <div class="pf-c-check pf-m-standalone">
1971
1981
  <input
1972
1982
  class="pf-c-check__input"
1973
1983
  type="checkbox"
1984
+ disabled
1974
1985
  id="check-16"
1975
1986
  aria-label="Dual list selector item check"
1976
1987
  />
@@ -1990,13 +2001,14 @@ cssPrefix: pf-c-dual-list-selector
1990
2001
  <div
1991
2002
  class="pf-c-dual-list-selector__list-item-row pf-m-check"
1992
2003
  >
1993
- <div class="pf-c-dual-list-selector__item" tabindex="0">
2004
+ <div class="pf-c-dual-list-selector__item">
1994
2005
  <span class="pf-c-dual-list-selector__item-main">
1995
2006
  <span class="pf-c-dual-list-selector__item-check">
1996
2007
  <div class="pf-c-check pf-m-standalone">
1997
2008
  <input
1998
2009
  class="pf-c-check__input"
1999
2010
  type="checkbox"
2011
+ disabled
2000
2012
  id="check-17"
2001
2013
  aria-label="Dual list selector item check"
2002
2014
  />
@@ -2629,41 +2641,43 @@ cssPrefix: pf-c-dual-list-selector
2629
2641
  | `aria-describedby="[id value of applicable content]"` | `.pf-c-dual-list-selector__draggable .pf-c-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. **Highly recommended** |
2630
2642
  | `aria-labelledby="[id of .pf-c-dual-list-selector__draggable .pf-c-button] [id of item text]"` | `.pf-c-table__dual-list-selector .pf-c-button` | Provides an accessible name for the draggable button. |
2631
2643
  | `id="[]"` | `.pf-c-dual-list-selector__draggable .pf-c-button`, `[item text]` | Gives the button and the text element accessible IDs. |
2644
+ | `disabled` | `.pf-c-dual-list-selector__item [button, check]` | Disables interactive elements in a disabled item. **Required** when an item is disabled. |
2632
2645
 
2633
2646
  ### Usage
2634
2647
 
2635
- | Class | Applied | Outcome |
2636
- | -------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------ |
2637
- | `.pf-c-dual-list-selector` | `<div>` | Initiates the dual list selector component. **Required** |
2638
- | `.pf-c-dual-list-selector__pane` | `<div>` | Initiates a dual list selector pane. **Required** |
2639
- | `.pf-c-dual-list-selector__header` | `<div>` | Initiates a dual list selector pane header. **Required** |
2640
- | `.pf-c-dual-list-selector__title` | `<div>` | Initiates a dual list selector pane title. **Required** |
2641
- | `.pf-c-dual-list-selector__title-text` | `<div>` | Initiates a dual list selector pane title text. **Required** |
2642
- | `.pf-c-dual-list-selector__tools` | `<div>` | Initiates a dual list selector tools. **Required** |
2643
- | `.pf-c-dual-list-selector__filter` | `<div>` | Initiates a dual list selector pane filter. **Required** |
2644
- | `.pf-c-dual-list-selector__actions` | `<div>` | Initiates a dual list selector pane actions. |
2645
- | `.pf-c-dual-list-selector__actions-item` | `<div>` | Initiates a dual list selector pane actions item. |
2646
- | `.pf-c-dual-list-selector__status` | `<div>` | Initiates a dual list selector pane selected status. **Required** |
2647
- | `.pf-c-dual-list-selector__status-text` | `<span>` | Initiates a dual list selector pane selected status text. **Required** |
2648
- | `.pf-c-dual-list-selector__menu` | `<div>` | Initiates a dual list selector pane menu container. **Required** |
2649
- | `.pf-c-dual-list-selector__list` | `<ul>` | Initiates a dual list selector pane menu list. **Required** |
2650
- | `.pf-c-dual-list-selector__list-item` | `<li>` | Initiates a dual list selector pane menu list item. **Required** |
2651
- | `.pf-c-dual-list-selector__list-item-row` | `<div>` | Initiates a dual list selector pane menu list item row. **Required** |
2652
- | `.pf-c-dual-list-selector__draggable` | `<div>` | Initiates a dual list selector pane draggable element. |
2653
- | `.pf-c-dual-list-selector__item` | `<button>`, `<div>` | Initiates a dual list selector pane menu item. **Required** |
2654
- | `.pf-c-dual-list-selector__item-main` | `<span>` | Initiates a dual list selector pane menu item main container. **Required** |
2655
- | `.pf-c-dual-list-selector__item-check` | `<span>` | Initiates the dual list selector item check. |
2656
- | `.pf-c-dual-list-selector__item-count` | `<span>` | Initiates the dual list selector item count. |
2657
- | `.pf-c-dual-list-selector__item-toggle-icon` | `<span>` | Initiates the dual list selector item toggle icon. |
2658
- | `.pf-c-dual-list-selector__item-toggle` | `<button>` | Initiates the dual list selector item toggle. |
2659
- | `.pf-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
2660
- | `.pf-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
2661
- | `.pf-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
2662
- | `.pf-m-available` | `.pf-c-dual-list-selector__pane` | Defines a pane as the available list. |
2663
- | `.pf-m-chosen` | `.pf-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
2664
- | `.pf-m-drag-over` | `.pf-c-dual-list-selector__list` | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
2665
- | `.pf-m-ghost-row` | `.pf-c-dual-list-selector__list-item-row` | Modifies the list item main to be a ghost row. |
2666
- | `.pf-m-selected` | `.pf-c-dual-list-selector__list-item-row` | Modifies the menu item for the selected state. |
2667
- | `.pf-m-check` | `.pf-c-dual-list-selector__list-item-row` | Indicates that an item is selectable with a checkbox. |
2668
- | `.pf-m-expandable` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is expandable. |
2669
- | `.pf-m-expanded` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is expanded. |
2648
+ | Class | Applied | Outcome |
2649
+ | -------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
2650
+ | `.pf-c-dual-list-selector` | `<div>` | Initiates the dual list selector component. **Required** |
2651
+ | `.pf-c-dual-list-selector__pane` | `<div>` | Initiates a dual list selector pane. **Required** |
2652
+ | `.pf-c-dual-list-selector__header` | `<div>` | Initiates a dual list selector pane header. **Required** |
2653
+ | `.pf-c-dual-list-selector__title` | `<div>` | Initiates a dual list selector pane title. **Required** |
2654
+ | `.pf-c-dual-list-selector__title-text` | `<div>` | Initiates a dual list selector pane title text. **Required** |
2655
+ | `.pf-c-dual-list-selector__tools` | `<div>` | Initiates a dual list selector tools. **Required** |
2656
+ | `.pf-c-dual-list-selector__filter` | `<div>` | Initiates a dual list selector pane filter. **Required** |
2657
+ | `.pf-c-dual-list-selector__actions` | `<div>` | Initiates a dual list selector pane actions. |
2658
+ | `.pf-c-dual-list-selector__actions-item` | `<div>` | Initiates a dual list selector pane actions item. |
2659
+ | `.pf-c-dual-list-selector__status` | `<div>` | Initiates a dual list selector pane selected status. **Required** |
2660
+ | `.pf-c-dual-list-selector__status-text` | `<span>` | Initiates a dual list selector pane selected status text. **Required** |
2661
+ | `.pf-c-dual-list-selector__menu` | `<div>` | Initiates a dual list selector pane menu container. **Required** |
2662
+ | `.pf-c-dual-list-selector__list` | `<ul>` | Initiates a dual list selector pane menu list. **Required** |
2663
+ | `.pf-c-dual-list-selector__list-item` | `<li>` | Initiates a dual list selector pane menu list item. **Required** |
2664
+ | `.pf-c-dual-list-selector__list-item-row` | `<div>` | Initiates a dual list selector pane menu list item row. **Required** |
2665
+ | `.pf-c-dual-list-selector__draggable` | `<div>` | Initiates a dual list selector pane draggable element. |
2666
+ | `.pf-c-dual-list-selector__item` | `<button>`, `<div>` | Initiates a dual list selector pane menu item. **Required** |
2667
+ | `.pf-c-dual-list-selector__item-main` | `<span>` | Initiates a dual list selector pane menu item main container. **Required** |
2668
+ | `.pf-c-dual-list-selector__item-check` | `<span>` | Initiates the dual list selector item check. |
2669
+ | `.pf-c-dual-list-selector__item-count` | `<span>` | Initiates the dual list selector item count. |
2670
+ | `.pf-c-dual-list-selector__item-toggle-icon` | `<span>` | Initiates the dual list selector item toggle icon. |
2671
+ | `.pf-c-dual-list-selector__item-toggle` | `<button>` | Initiates the dual list selector item toggle. |
2672
+ | `.pf-c-dual-list-selector__item-text` | `<span>` | Initiates a dual list selector pane menu item text. **Required** |
2673
+ | `.pf-c-dual-list-selector__controls` | `<div>` | Initiates the dual list selector controls. **Required** |
2674
+ | `.pf-c-dual-list-selector__controls-item` | `<div>` | Initiates the dual list selector controls item. **Required** |
2675
+ | `.pf-m-available` | `.pf-c-dual-list-selector__pane` | Defines a pane as the available list. |
2676
+ | `.pf-m-chosen` | `.pf-c-dual-list-selector__pane` | Defines a pane as the chosen list. |
2677
+ | `.pf-m-drag-over` | `.pf-c-dual-list-selector__list` | Modifies the dual list selector list to indicate that a draggable item is being dragged over the list. |
2678
+ | `.pf-m-ghost-row` | `.pf-c-dual-list-selector__list-item-row` | Modifies the list item main to be a ghost row. |
2679
+ | `.pf-m-selected` | `.pf-c-dual-list-selector__list-item-row` | Modifies the menu item for the selected state. |
2680
+ | `.pf-m-check` | `.pf-c-dual-list-selector__list-item-row` | Indicates that an item is selectable with a checkbox. |
2681
+ | `.pf-m-expandable` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is expandable. |
2682
+ | `.pf-m-expanded` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is expanded. |
2683
+ | `.pf-m-disabled` | `.pf-c-dual-list-selector__list-item` | Indicates that an item is disabled. **Note:** If an item is expandable, only the top level item needs the disabled class. |