@patternfly/patternfly 4.159.2 → 4.160.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 (13) hide show
  1. package/components/Table/table.css +1 -1
  2. package/components/Table/table.scss +1 -1
  3. package/components/Toolbar/toolbar.css +4 -2
  4. package/components/Toolbar/toolbar.scss +6 -2
  5. package/docs/components/Select/examples/Select.md +12 -11
  6. package/docs/demos/Card/examples/Card.md +164 -112
  7. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +79 -0
  8. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +5 -3
  11. package/patternfly.css +5 -3
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Table/table.css CHANGED
@@ -716,7 +716,7 @@
716
716
  .pf-c-table__check {
717
717
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
718
718
  }
719
- .pf-c-table__check > input {
719
+ .pf-c-table__check > input:not([disabled]) {
720
720
  cursor: pointer;
721
721
  }
722
722
 
package/components/Table/table.scss CHANGED
@@ -902,7 +902,7 @@
902
902
  .pf-c-table__check {
903
903
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
904
904
 
905
- > input {
905
+ > input:not([disabled]) {
906
906
  cursor: pointer;
907
907
  }
908
908
  }
package/components/Toolbar/toolbar.css CHANGED
@@ -112,6 +112,8 @@
112
112
  --pf-c-toolbar__item--m-chip-group--spacer: var(--pf-global--spacer--sm);
113
113
  --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
114
114
  --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
115
+ --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
116
+ --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
115
117
  --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
116
118
  --pf-c-toolbar--c-divider--m-vertical--spacer: var(--pf-c-toolbar--spacer--base);
117
119
  --pf-c-toolbar--m-full-height--PaddingTop: 0;
@@ -379,8 +381,8 @@
379
381
  grid-row-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
380
382
  }
381
383
  .pf-c-toolbar__expandable-content .pf-m-label {
382
- display: none;
383
- visibility: hidden;
384
+ margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
385
+ font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
384
386
  }
385
387
 
386
388
  .pf-c-toolbar__content.pf-m-chip-container,
package/components/Toolbar/toolbar.scss CHANGED
@@ -99,6 +99,10 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
99
99
  --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
100
100
  --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
101
101
 
102
+ // Label in expanded content
103
+ --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
104
+ --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
105
+
102
106
  // Toggle
103
107
  --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
104
108
 
@@ -382,8 +386,8 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
382
386
  }
383
387
 
384
388
  .pf-m-label {
385
- display: none;
386
- visibility: hidden;
389
+ margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
390
+ font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
387
391
  }
388
392
  }
389
393
 
package/docs/components/Select/examples/Select.md CHANGED
@@ -235,17 +235,18 @@ The single select should be used when the user is selecting an option from a lis
235
235
 
236
236
  ### Usage
237
237
 
238
- | Class | Applied to | Outcome |
239
- | ------------------------------ | -------------- | ------------------------------------------------------- |
240
- | `.pf-c-select` | `<div>` | Initiates a custom select. |
241
- | `.pf-c-select__toggle` | `<button>` | Initiates a custom toggle. |
242
- | `.pf-c-select__toggle-wrapper` | `<div>` | Initiates a custom select toggle wrapper. |
243
- | `.pf-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
244
- | `.pf-c-select__menu` | `<ul>` | Initiates the custom select dropdown menu. |
245
- | `.pf-c-select__menu-item` | `<li>` | Initiates the items in the custom select dropdown menu. |
246
- | `.pf-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon. |
247
- | `.pf-m-top` | `.pf-c-select` | Modifies the select menu to display above the toggle. |
248
- | `.pf-m-active` | `.pf-c-select` | Forces display of the active state of the toggle. |
238
+ | Class | Applied to | Outcome |
239
+ | ------------------------------ | -------------------- | ---------------------------------------------------------------- |
240
+ | `.pf-c-select` | `<div>` | Initiates a custom select. |
241
+ | `.pf-c-select__toggle` | `<button>` | Initiates a custom toggle. |
242
+ | `.pf-c-select__toggle-wrapper` | `<div>` | Initiates a custom select toggle wrapper. |
243
+ | `.pf-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
244
+ | `.pf-c-select__menu` | `<ul>` | Initiates the custom select dropdown menu. |
245
+ | `.pf-c-select__menu-item` | `<li>` | Initiates the items in the custom select dropdown menu. |
246
+ | `.pf-c-select__menu-item-icon` | `<i>` | Initiates the selected item icon. |
247
+ | `.pf-m-top` | `.pf-c-select` | Modifies the select menu to display above the toggle. |
248
+ | `.pf-m-align-right` | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle. |
249
+ | `.pf-m-active` | `.pf-c-select` | Forces display of the active state of the toggle. |
249
250
 
250
251
  ## States
251
252
 
package/docs/demos/Card/examples/Card.md CHANGED
@@ -1831,47 +1831,60 @@ wrapperTag: div
1831
1831
  <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1832
1832
  </div>
1833
1833
  <div class="pf-c-card__actions">
1834
- <div class="pf-c-dropdown">
1834
+ <div class="pf-c-select">
1835
+ <span
1836
+ id="utilization-card-3-example-select-dropdown-label"
1837
+ hidden
1838
+ >Choose one</span>
1839
+
1835
1840
  <button
1836
- class="pf-c-dropdown__toggle"
1837
- id="utilization-card-3-example-dropdown-button"
1838
- aria-expanded="false"
1841
+ class="pf-c-select__toggle"
1839
1842
  type="button"
1843
+ id="utilization-card-3-example-select-dropdown-toggle"
1844
+ aria-haspopup="true"
1845
+ aria-expanded="false"
1846
+ aria-labelledby="utilization-card-3-example-select-dropdown-label utilization-card-3-example-select-dropdown-toggle"
1840
1847
  >
1841
- <span class="pf-c-dropdown__toggle-text">Filter</span>
1842
- <span class="pf-c-dropdown__toggle-icon">
1848
+ <div class="pf-c-select__toggle-wrapper">
1849
+ <span class="pf-c-select__toggle-text">Filter</span>
1850
+ </div>
1851
+ <span class="pf-c-select__toggle-arrow">
1843
1852
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1844
1853
  </span>
1845
1854
  </button>
1855
+
1846
1856
  <ul
1847
- class="pf-c-dropdown__menu pf-m-align-right"
1848
- aria-labelledby="utilization-card-3-example-dropdown-button"
1857
+ class="pf-c-select__menu pf-m-align-right"
1858
+ role="listbox"
1859
+ aria-labelledby="utilization-card-3-example-select-dropdown-label"
1849
1860
  hidden
1850
1861
  >
1851
- <li>
1852
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1862
+ <li role="presentation">
1863
+ <button class="pf-c-select__menu-item" role="option">Running</button>
1853
1864
  </li>
1854
- <li>
1855
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1865
+ <li role="presentation">
1866
+ <button
1867
+ class="pf-c-select__menu-item pf-m-selected"
1868
+ role="option"
1869
+ aria-selected="true"
1870
+ >
1871
+ Stopped
1872
+ <span class="pf-c-select__menu-item-icon">
1873
+ <i class="fas fa-check" aria-hidden="true"></i>
1874
+ </span>
1875
+ </button>
1856
1876
  </li>
1857
- <li>
1858
- <a
1859
- class="pf-c-dropdown__menu-item pf-m-disabled"
1860
- href="#"
1861
- aria-disabled="true"
1862
- tabindex="-1"
1863
- >Disabled link</a>
1877
+ <li role="presentation">
1878
+ <button class="pf-c-select__menu-item" role="option">Down</button>
1864
1879
  </li>
1865
- <li>
1866
- <button
1867
- class="pf-c-dropdown__menu-item"
1868
- type="button"
1869
- disabled
1870
- >Disabled action</button>
1880
+ <li role="presentation">
1881
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
1871
1882
  </li>
1872
- <li class="pf-c-divider" role="separator"></li>
1873
- <li>
1874
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1883
+ <li role="presentation">
1884
+ <button
1885
+ class="pf-c-select__menu-item"
1886
+ role="option"
1887
+ >Needs maintenance</button>
1875
1888
  </li>
1876
1889
  </ul>
1877
1890
  </div>
@@ -2579,47 +2592,60 @@ wrapperTag: div
2579
2592
  <span class="pf-u-color-200">Workload</span>
2580
2593
  </div>
2581
2594
  <div class="pf-c-card__actions">
2582
- <div class="pf-c-dropdown">
2595
+ <div class="pf-c-select">
2596
+ <span
2597
+ id="trend-card-1-example-select-dropdown-label"
2598
+ hidden
2599
+ >Choose one</span>
2600
+
2583
2601
  <button
2584
- class="pf-c-dropdown__toggle"
2585
- id="trend-card-1-example-dropdown-button"
2586
- aria-expanded="false"
2602
+ class="pf-c-select__toggle"
2587
2603
  type="button"
2604
+ id="trend-card-1-example-select-dropdown-toggle"
2605
+ aria-haspopup="true"
2606
+ aria-expanded="false"
2607
+ aria-labelledby="trend-card-1-example-select-dropdown-label trend-card-1-example-select-dropdown-toggle"
2588
2608
  >
2589
- <span class="pf-c-dropdown__toggle-text">Filter</span>
2590
- <span class="pf-c-dropdown__toggle-icon">
2609
+ <div class="pf-c-select__toggle-wrapper">
2610
+ <span class="pf-c-select__toggle-text">Filter</span>
2611
+ </div>
2612
+ <span class="pf-c-select__toggle-arrow">
2591
2613
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2592
2614
  </span>
2593
2615
  </button>
2616
+
2594
2617
  <ul
2595
- class="pf-c-dropdown__menu pf-m-align-right"
2596
- aria-labelledby="trend-card-1-example-dropdown-button"
2618
+ class="pf-c-select__menu pf-m-align-right"
2619
+ role="listbox"
2620
+ aria-labelledby="trend-card-1-example-select-dropdown-label"
2597
2621
  hidden
2598
2622
  >
2599
- <li>
2600
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2623
+ <li role="presentation">
2624
+ <button class="pf-c-select__menu-item" role="option">Running</button>
2601
2625
  </li>
2602
- <li>
2603
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
2626
+ <li role="presentation">
2627
+ <button
2628
+ class="pf-c-select__menu-item pf-m-selected"
2629
+ role="option"
2630
+ aria-selected="true"
2631
+ >
2632
+ Stopped
2633
+ <span class="pf-c-select__menu-item-icon">
2634
+ <i class="fas fa-check" aria-hidden="true"></i>
2635
+ </span>
2636
+ </button>
2604
2637
  </li>
2605
- <li>
2606
- <a
2607
- class="pf-c-dropdown__menu-item pf-m-disabled"
2608
- href="#"
2609
- aria-disabled="true"
2610
- tabindex="-1"
2611
- >Disabled link</a>
2638
+ <li role="presentation">
2639
+ <button class="pf-c-select__menu-item" role="option">Down</button>
2612
2640
  </li>
2613
- <li>
2614
- <button
2615
- class="pf-c-dropdown__menu-item"
2616
- type="button"
2617
- disabled
2618
- >Disabled action</button>
2641
+ <li role="presentation">
2642
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
2619
2643
  </li>
2620
- <li class="pf-c-divider" role="separator"></li>
2621
- <li>
2622
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
2644
+ <li role="presentation">
2645
+ <button
2646
+ class="pf-c-select__menu-item"
2647
+ role="option"
2648
+ >Needs maintenance</button>
2623
2649
  </li>
2624
2650
  </ul>
2625
2651
  </div>
@@ -2681,47 +2707,60 @@ wrapperTag: div
2681
2707
  <div class="pf-c-card" id="card-log-view-example">
2682
2708
  <div class="pf-c-card__header">
2683
2709
  <div class="pf-c-card__actions">
2684
- <div class="pf-c-dropdown">
2710
+ <div class="pf-c-select">
2711
+ <span
2712
+ id="card-log-view-example-select-dropdown-label"
2713
+ hidden
2714
+ >Choose one</span>
2715
+
2685
2716
  <button
2686
- class="pf-c-dropdown__toggle"
2687
- id="card-log-view-example-dropdown-button"
2688
- aria-expanded="false"
2717
+ class="pf-c-select__toggle"
2689
2718
  type="button"
2719
+ id="card-log-view-example-select-dropdown-toggle"
2720
+ aria-haspopup="true"
2721
+ aria-expanded="false"
2722
+ aria-labelledby="card-log-view-example-select-dropdown-label card-log-view-example-select-dropdown-toggle"
2690
2723
  >
2691
- <span class="pf-c-dropdown__toggle-text">Most recent</span>
2692
- <span class="pf-c-dropdown__toggle-icon">
2724
+ <div class="pf-c-select__toggle-wrapper">
2725
+ <span class="pf-c-select__toggle-text">Most recent</span>
2726
+ </div>
2727
+ <span class="pf-c-select__toggle-arrow">
2693
2728
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2694
2729
  </span>
2695
2730
  </button>
2731
+
2696
2732
  <ul
2697
- class="pf-c-dropdown__menu pf-m-align-right"
2698
- aria-labelledby="card-log-view-example-dropdown-button"
2733
+ class="pf-c-select__menu pf-m-align-right"
2734
+ role="listbox"
2735
+ aria-labelledby="card-log-view-example-select-dropdown-label"
2699
2736
  hidden
2700
2737
  >
2701
- <li>
2702
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2738
+ <li role="presentation">
2739
+ <button class="pf-c-select__menu-item" role="option">Running</button>
2703
2740
  </li>
2704
- <li>
2705
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
2741
+ <li role="presentation">
2742
+ <button
2743
+ class="pf-c-select__menu-item pf-m-selected"
2744
+ role="option"
2745
+ aria-selected="true"
2746
+ >
2747
+ Stopped
2748
+ <span class="pf-c-select__menu-item-icon">
2749
+ <i class="fas fa-check" aria-hidden="true"></i>
2750
+ </span>
2751
+ </button>
2706
2752
  </li>
2707
- <li>
2708
- <a
2709
- class="pf-c-dropdown__menu-item pf-m-disabled"
2710
- href="#"
2711
- aria-disabled="true"
2712
- tabindex="-1"
2713
- >Disabled link</a>
2753
+ <li role="presentation">
2754
+ <button class="pf-c-select__menu-item" role="option">Down</button>
2714
2755
  </li>
2715
- <li>
2716
- <button
2717
- class="pf-c-dropdown__menu-item"
2718
- type="button"
2719
- disabled
2720
- >Disabled action</button>
2756
+ <li role="presentation">
2757
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
2721
2758
  </li>
2722
- <li class="pf-c-divider" role="separator"></li>
2723
- <li>
2724
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
2759
+ <li role="presentation">
2760
+ <button
2761
+ class="pf-c-select__menu-item"
2762
+ role="option"
2763
+ >Needs maintenance</button>
2725
2764
  </li>
2726
2765
  </ul>
2727
2766
  </div>
@@ -2813,47 +2852,60 @@ wrapperTag: div
2813
2852
  <div class="pf-c-card" id="card-events-view-example">
2814
2853
  <div class="pf-c-card__header">
2815
2854
  <div class="pf-c-card__actions">
2816
- <div class="pf-c-dropdown">
2855
+ <div class="pf-c-select">
2856
+ <span
2857
+ id="card-events-view-example-select-dropdown-label"
2858
+ hidden
2859
+ >Choose one</span>
2860
+
2817
2861
  <button
2818
- class="pf-c-dropdown__toggle"
2819
- id="card-events-view-example-dropdown-button"
2820
- aria-expanded="false"
2862
+ class="pf-c-select__toggle"
2821
2863
  type="button"
2864
+ id="card-events-view-example-select-dropdown-toggle"
2865
+ aria-haspopup="true"
2866
+ aria-expanded="false"
2867
+ aria-labelledby="card-events-view-example-select-dropdown-label card-events-view-example-select-dropdown-toggle"
2822
2868
  >
2823
- <span class="pf-c-dropdown__toggle-text">Status</span>
2824
- <span class="pf-c-dropdown__toggle-icon">
2869
+ <div class="pf-c-select__toggle-wrapper">
2870
+ <span class="pf-c-select__toggle-text">Status</span>
2871
+ </div>
2872
+ <span class="pf-c-select__toggle-arrow">
2825
2873
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2826
2874
  </span>
2827
2875
  </button>
2876
+
2828
2877
  <ul
2829
- class="pf-c-dropdown__menu pf-m-align-right"
2830
- aria-labelledby="card-events-view-example-dropdown-button"
2878
+ class="pf-c-select__menu pf-m-align-right"
2879
+ role="listbox"
2880
+ aria-labelledby="card-events-view-example-select-dropdown-label"
2831
2881
  hidden
2832
2882
  >
2833
- <li>
2834
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2883
+ <li role="presentation">
2884
+ <button class="pf-c-select__menu-item" role="option">Running</button>
2835
2885
  </li>
2836
- <li>
2837
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
2886
+ <li role="presentation">
2887
+ <button
2888
+ class="pf-c-select__menu-item pf-m-selected"
2889
+ role="option"
2890
+ aria-selected="true"
2891
+ >
2892
+ Stopped
2893
+ <span class="pf-c-select__menu-item-icon">
2894
+ <i class="fas fa-check" aria-hidden="true"></i>
2895
+ </span>
2896
+ </button>
2838
2897
  </li>
2839
- <li>
2840
- <a
2841
- class="pf-c-dropdown__menu-item pf-m-disabled"
2842
- href="#"
2843
- aria-disabled="true"
2844
- tabindex="-1"
2845
- >Disabled link</a>
2898
+ <li role="presentation">
2899
+ <button class="pf-c-select__menu-item" role="option">Down</button>
2846
2900
  </li>
2847
- <li>
2848
- <button
2849
- class="pf-c-dropdown__menu-item"
2850
- type="button"
2851
- disabled
2852
- >Disabled action</button>
2901
+ <li role="presentation">
2902
+ <button class="pf-c-select__menu-item" role="option">Degraded</button>
2853
2903
  </li>
2854
- <li class="pf-c-divider" role="separator"></li>
2855
- <li>
2856
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
2904
+ <li role="presentation">
2905
+ <button
2906
+ class="pf-c-select__menu-item"
2907
+ role="option"
2908
+ >Needs maintenance</button>
2857
2909
  </li>
2858
2910
  </ul>
2859
2911
  </div>
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md ADDED
@@ -0,0 +1,79 @@
1
+ ---
2
+ id: 'Password generator'
3
+ section: demos
4
+ ---## Examples
5
+
6
+ ### Provide a generated password
7
+
8
+ ```html
9
+ <form novalidate class="pf-c-form">
10
+ <div class="pf-c-form__group">
11
+ <div class="pf-c-form__group-label pf-m-info">
12
+ <div class="pf-c-form__group-label-main">
13
+ <label
14
+ class="pf-c-form__label"
15
+ for="password-generator-demo--initial-password"
16
+ >
17
+ <span class="pf-c-form__label-text">Password</span>
18
+ <span class="pf-c-form__label-required" aria-hidden="true">&#42;</span>
19
+ </label>
20
+
21
+ <button class="pf-c-form__group-label-help" aria-label="More info">
22
+ <i class="pficon pf-icon-help" aria-hidden="true"></i>
23
+ </button>
24
+ </div>
25
+ <div class="pf-c-form__group-label-info"></div>
26
+ </div>
27
+ <div class="pf-c-form__group-control">
28
+ <div class="pf-c-input-group">
29
+ <input
30
+ class="pf-c-form-control"
31
+ required
32
+ type="password"
33
+ id="password-generator-demo--initial-password"
34
+ name="password-generator-demo--initial-password"
35
+ aria-label="Password input"
36
+ value
37
+ placeholder="Password"
38
+ />
39
+ <button
40
+ class="pf-c-button pf-m-control"
41
+ type="button"
42
+ aria-label="Show password"
43
+ >
44
+ <i class="fas fa-eye" aria-hidden="true"></i>
45
+ </button>
46
+ </div>
47
+ <div class="pf-c-menu">
48
+ <div class="pf-c-menu__content">
49
+ <ul class="pf-c-menu__list">
50
+ <li class="pf-c-menu__list-item">
51
+ <button class="pf-c-menu__item" type="button">
52
+ <span class="pf-c-menu__item-main">
53
+ <span
54
+ class="pf-c-menu__item-text"
55
+ >Use suggested password: fqu9kKe676JmKt2</span>
56
+ </span>
57
+ </button>
58
+ <button
59
+ class="pf-c-menu__item-action"
60
+ type="button"
61
+ aria-label="Generate a new suggested password"
62
+ >
63
+ <span class="pf-c-menu__item-action-icon">
64
+ <i class="fas fa-fw fa-redo" aria-hidden="true"></i>
65
+ </span>
66
+ </button>
67
+ </li>
68
+ </ul>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </form>
74
+
75
+ ```
76
+
77
+ ## Documentation
78
+
79
+ This demo shows how to use a menu in conjunction with a form input to provide a generated password and an associated button for refresh.
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -40,7 +40,7 @@ section: demos
40
40
  <button
41
41
  class="pf-c-button pf-m-control"
42
42
  type="button"
43
- aria-label="Show password button for password input"
43
+ aria-label="Show password"
44
44
  >
45
45
  <i class="fas fa-eye-slash" aria-hidden="true"></i>
46
46
  </button>
@@ -115,7 +115,7 @@ section: demos
115
115
  <button
116
116
  class="pf-c-button pf-m-control"
117
117
  type="button"
118
- aria-label="Show password button for password input"
118
+ aria-label="Show password"
119
119
  >
120
120
  <i class="fas fa-eye-slash" aria-hidden="true"></i>
121
121
  </button>
@@ -199,7 +199,7 @@ section: demos
199
199
  <button
200
200
  class="pf-c-button pf-m-control"
201
201
  type="button"
202
- aria-label="Show password button for password input"
202
+ aria-label="Show password"
203
203
  >
204
204
  <i class="fas fa-eye-slash" aria-hidden="true"></i>
205
205
  </button>
@@ -283,7 +283,7 @@ section: demos
283
283
  <button
284
284
  class="pf-c-button pf-m-control"
285
285
  type="button"
286
- aria-label="Show password button for password input"
286
+ aria-label="Show password"
287
287
  >
288
288
  <i class="fas fa-eye-slash" aria-hidden="true"></i>
289
289
  </button>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.159.2",
4
+ "version": "4.160.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -9999,6 +9999,8 @@ label.pf-c-check, .pf-c-check__label,
9999
9999
  --pf-c-toolbar__item--m-chip-group--spacer: var(--pf-global--spacer--sm);
10000
10000
  --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
10001
10001
  --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
10002
+ --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
10003
+ --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
10002
10004
  --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
10003
10005
  --pf-c-toolbar--c-divider--m-vertical--spacer: var(--pf-c-toolbar--spacer--base);
10004
10006
  --pf-c-toolbar--m-full-height--PaddingTop: 0;
@@ -10266,8 +10268,8 @@ label.pf-c-check, .pf-c-check__label,
10266
10268
  grid-row-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
10267
10269
  }
10268
10270
  .pf-c-toolbar__expandable-content .pf-m-label {
10269
- display: none;
10270
- visibility: hidden;
10271
+ margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
10272
+ font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
10271
10273
  }
10272
10274
 
10273
10275
  .pf-c-toolbar__content.pf-m-chip-container,
@@ -24191,7 +24193,7 @@ svg.pf-c-spinner.pf-m-xl {
24191
24193
  .pf-c-table__check {
24192
24194
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
24193
24195
  }
24194
- .pf-c-table__check > input {
24196
+ .pf-c-table__check > input:not([disabled]) {
24195
24197
  cursor: pointer;
24196
24198
  }
24197
24199
 
package/patternfly.css CHANGED
@@ -10135,6 +10135,8 @@ label.pf-c-check, .pf-c-check__label,
10135
10135
  --pf-c-toolbar__item--m-chip-group--spacer: var(--pf-global--spacer--sm);
10136
10136
  --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
10137
10137
  --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
10138
+ --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
10139
+ --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
10138
10140
  --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
10139
10141
  --pf-c-toolbar--c-divider--m-vertical--spacer: var(--pf-c-toolbar--spacer--base);
10140
10142
  --pf-c-toolbar--m-full-height--PaddingTop: 0;
@@ -10402,8 +10404,8 @@ label.pf-c-check, .pf-c-check__label,
10402
10404
  grid-row-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
10403
10405
  }
10404
10406
  .pf-c-toolbar__expandable-content .pf-m-label {
10405
- display: none;
10406
- visibility: hidden;
10407
+ margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
10408
+ font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
10407
10409
  }
10408
10410
 
10409
10411
  .pf-c-toolbar__content.pf-m-chip-container,
@@ -24327,7 +24329,7 @@ svg.pf-c-spinner.pf-m-xl {
24327
24329
  .pf-c-table__check {
24328
24330
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
24329
24331
  }
24330
- .pf-c-table__check > input {
24332
+ .pf-c-table__check > input:not([disabled]) {
24331
24333
  cursor: pointer;
24332
24334
  }
24333
24335