@patternfly/patternfly 4.166.1 → 4.166.5

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.
@@ -2805,1830 +2805,3 @@ section: components
2805
2805
  </div>
2806
2806
 
2807
2807
  ```
2808
-
2809
- ### Toolbar expand all (collapsed)
2810
-
2811
- ```html isFullscreen
2812
- <div class="pf-c-page" id="toolbar-expand-all-collapsed">
2813
- <a
2814
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
2815
- href="#main-content-toolbar-expand-all-collapsed"
2816
- >Skip to content</a>
2817
- <header class="pf-c-page__header">
2818
- <div class="pf-c-page__header-brand">
2819
- <div class="pf-c-page__header-brand-toggle">
2820
- <button
2821
- class="pf-c-button pf-m-plain"
2822
- type="button"
2823
- id="toolbar-expand-all-collapsed-nav-toggle"
2824
- aria-label="Global navigation"
2825
- aria-expanded="true"
2826
- aria-controls="toolbar-expand-all-collapsed-primary-nav"
2827
- >
2828
- <i class="fas fa-bars" aria-hidden="true"></i>
2829
- </button>
2830
- </div>
2831
- <a href="#" class="pf-c-page__header-brand-link">
2832
- <img
2833
- class="pf-c-brand"
2834
- src="/assets/images/PF-Masthead-Logo.svg"
2835
- alt="PatternFly logo"
2836
- />
2837
- </a>
2838
- </div>
2839
-
2840
- <div class="pf-c-page__header-tools">
2841
- <div class="pf-c-page__header-tools-group">
2842
- <div
2843
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
2844
- >
2845
- <button
2846
- class="pf-c-button pf-m-plain"
2847
- type="button"
2848
- aria-label="Settings"
2849
- >
2850
- <i class="fas fa-cog" aria-hidden="true"></i>
2851
- </button>
2852
- </div>
2853
- <div
2854
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
2855
- >
2856
- <button
2857
- class="pf-c-button pf-m-plain"
2858
- type="button"
2859
- aria-label="Help"
2860
- >
2861
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
2862
- </button>
2863
- </div>
2864
- </div>
2865
- <div class="pf-c-page__header-tools-group">
2866
- <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
2867
- <div class="pf-c-dropdown">
2868
- <button
2869
- class="pf-c-dropdown__toggle pf-m-plain"
2870
- id="toolbar-expand-all-collapsed-dropdown-kebab-1-button"
2871
- aria-expanded="false"
2872
- type="button"
2873
- aria-label="Actions"
2874
- >
2875
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2876
- </button>
2877
- <ul
2878
- class="pf-c-dropdown__menu pf-m-align-right"
2879
- aria-labelledby="toolbar-expand-all-collapsed-dropdown-kebab-1-button"
2880
- hidden
2881
- >
2882
- <li>
2883
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2884
- </li>
2885
- <li>
2886
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
2887
- </li>
2888
- <li>
2889
- <a
2890
- class="pf-c-dropdown__menu-item pf-m-disabled"
2891
- href="#"
2892
- aria-disabled="true"
2893
- tabindex="-1"
2894
- >Disabled link</a>
2895
- </li>
2896
- <li>
2897
- <button
2898
- class="pf-c-dropdown__menu-item"
2899
- type="button"
2900
- disabled
2901
- >Disabled action</button>
2902
- </li>
2903
- <li class="pf-c-divider" role="separator"></li>
2904
- <li>
2905
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
2906
- </li>
2907
- </ul>
2908
- </div>
2909
- </div>
2910
- <div
2911
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
2912
- >
2913
- <div class="pf-c-dropdown">
2914
- <button
2915
- class="pf-c-dropdown__toggle pf-m-plain"
2916
- id="toolbar-expand-all-collapsed-dropdown-kebab-2-button"
2917
- aria-expanded="false"
2918
- type="button"
2919
- >
2920
- <span class="pf-c-dropdown__toggle-text">John Smith</span>
2921
- <span class="pf-c-dropdown__toggle-icon">
2922
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2923
- </span>
2924
- </button>
2925
- <ul
2926
- class="pf-c-dropdown__menu"
2927
- aria-labelledby="toolbar-expand-all-collapsed-dropdown-kebab-2-button"
2928
- hidden
2929
- >
2930
- <li>
2931
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2932
- </li>
2933
- <li>
2934
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
2935
- </li>
2936
- <li>
2937
- <a
2938
- class="pf-c-dropdown__menu-item pf-m-disabled"
2939
- href="#"
2940
- aria-disabled="true"
2941
- tabindex="-1"
2942
- >Disabled link</a>
2943
- </li>
2944
- <li>
2945
- <button
2946
- class="pf-c-dropdown__menu-item"
2947
- type="button"
2948
- disabled
2949
- >Disabled action</button>
2950
- </li>
2951
- <li class="pf-c-divider" role="separator"></li>
2952
- <li>
2953
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
2954
- </li>
2955
- </ul>
2956
- </div>
2957
- </div>
2958
- </div>
2959
- <img
2960
- class="pf-c-avatar"
2961
- src="/assets/images/img_avatar.svg"
2962
- alt="Avatar image"
2963
- />
2964
- </div>
2965
- </header>
2966
- <div class="pf-c-page__sidebar">
2967
- <div class="pf-c-page__sidebar-body">
2968
- <nav
2969
- class="pf-c-nav"
2970
- id="toolbar-expand-all-collapsed-primary-nav"
2971
- aria-label="Global"
2972
- >
2973
- <ul class="pf-c-nav__list">
2974
- <li class="pf-c-nav__item">
2975
- <a href="#" class="pf-c-nav__link">System panel</a>
2976
- </li>
2977
- <li class="pf-c-nav__item">
2978
- <a
2979
- href="#"
2980
- class="pf-c-nav__link pf-m-current"
2981
- aria-current="page"
2982
- >Policy</a>
2983
- </li>
2984
- <li class="pf-c-nav__item">
2985
- <a href="#" class="pf-c-nav__link">Authentication</a>
2986
- </li>
2987
- <li class="pf-c-nav__item">
2988
- <a href="#" class="pf-c-nav__link">Network services</a>
2989
- </li>
2990
- <li class="pf-c-nav__item">
2991
- <a href="#" class="pf-c-nav__link">Server</a>
2992
- </li>
2993
- </ul>
2994
- </nav>
2995
- </div>
2996
- </div>
2997
- <main
2998
- class="pf-c-page__main"
2999
- tabindex="-1"
3000
- id="main-content-toolbar-expand-all-collapsed"
3001
- >
3002
- <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3003
- <div class="pf-c-page__main-body">
3004
- <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3005
- <ol class="pf-c-breadcrumb__list">
3006
- <li class="pf-c-breadcrumb__item">
3007
- <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3008
- </li>
3009
- <li class="pf-c-breadcrumb__item">
3010
- <span class="pf-c-breadcrumb__item-divider">
3011
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3012
- </span>
3013
-
3014
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
3015
- </li>
3016
- <li class="pf-c-breadcrumb__item">
3017
- <span class="pf-c-breadcrumb__item-divider">
3018
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3019
- </span>
3020
-
3021
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
3022
- </li>
3023
- <li class="pf-c-breadcrumb__item">
3024
- <span class="pf-c-breadcrumb__item-divider">
3025
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3026
- </span>
3027
-
3028
- <a
3029
- href="#"
3030
- class="pf-c-breadcrumb__link pf-m-current"
3031
- aria-current="page"
3032
- >Section landing</a>
3033
- </li>
3034
- </ol>
3035
- </nav>
3036
- </div>
3037
- </section>
3038
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
3039
- <div class="pf-c-page__main-body">
3040
- <div class="pf-c-content">
3041
- <h1>Main title</h1>
3042
- <p>This is a demo of the page component.</p>
3043
- </div>
3044
- </div>
3045
- </section>
3046
- <section class="pf-c-page__main-section">
3047
- <div
3048
- class="pf-c-toolbar pf-m-nowrap pf-m-page-insets"
3049
- id="toolbar-expand-all-collapsed-mobile-example"
3050
- >
3051
- <div class="pf-c-toolbar__content">
3052
- <div class="pf-c-toolbar__content-section pf-m-nowrap">
3053
- <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show">
3054
- <div class="pf-c-toolbar__toggle">
3055
- <button
3056
- class="pf-c-button pf-m-plain"
3057
- type="button"
3058
- aria-label="Show filters"
3059
- aria-expanded="false"
3060
- aria-controls="toolbar-expand-all-collapsed-mobile-example-expandable-content"
3061
- >
3062
- <i class="fas fa-filter" aria-hidden="true"></i>
3063
- </button>
3064
- </div>
3065
- <div class="pf-c-toolbar__group pf-m-icon-button-group">
3066
- <div class="pf-c-toolbar__item pf-m-expand-all">
3067
- <button
3068
- class="pf-c-button pf-m-plain"
3069
- type="button"
3070
- aria-label="Expand all"
3071
- >
3072
- <span class="pf-c-toolbar__expand-all-icon">
3073
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3074
- </span>
3075
- </button>
3076
- </div>
3077
- <div class="pf-c-toolbar__item pf-m-bulk-select">
3078
- <div class="pf-c-dropdown">
3079
- <div class="pf-c-dropdown__toggle pf-m-split-button">
3080
- <label
3081
- class="pf-c-dropdown__toggle-check"
3082
- for="toolbar-expand-all-collapsed-mobile-example-bulk-select-toggle-check"
3083
- >
3084
- <input
3085
- type="checkbox"
3086
- id="toolbar-expand-all-collapsed-mobile-example-bulk-select-toggle-check"
3087
- aria-label="Select all"
3088
- />
3089
- </label>
3090
-
3091
- <button
3092
- class="pf-c-dropdown__toggle-button"
3093
- type="button"
3094
- aria-expanded="false"
3095
- id="toolbar-expand-all-collapsed-mobile-example-bulk-select-toggle-button"
3096
- aria-label="Dropdown toggle"
3097
- >
3098
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3099
- </button>
3100
- </div>
3101
- <ul class="pf-c-dropdown__menu" hidden>
3102
- <li>
3103
- <button
3104
- class="pf-c-dropdown__menu-item"
3105
- type="button"
3106
- >Select all</button>
3107
- </li>
3108
- <li>
3109
- <button
3110
- class="pf-c-dropdown__menu-item"
3111
- type="button"
3112
- >Select none</button>
3113
- </li>
3114
- <li>
3115
- <button
3116
- class="pf-c-dropdown__menu-item"
3117
- type="button"
3118
- >Other action</button>
3119
- </li>
3120
- </ul>
3121
- </div>
3122
- </div>
3123
- </div>
3124
- <div class="pf-c-toolbar__group pf-m-filter-group">
3125
- <div class="pf-c-toolbar__item pf-m-search-filter">
3126
- <div class="pf-c-input-group">
3127
- <div class="pf-c-select" style="width: 150px">
3128
- <span
3129
- id="toolbar-expand-all-collapsed-mobile-example-select-name-label"
3130
- hidden
3131
- >Choose one</span>
3132
-
3133
- <button
3134
- class="pf-c-select__toggle"
3135
- type="button"
3136
- id="toolbar-expand-all-collapsed-mobile-example-select-name-toggle"
3137
- aria-haspopup="true"
3138
- aria-expanded="false"
3139
- aria-labelledby="toolbar-expand-all-collapsed-mobile-example-select-name-label toolbar-expand-all-collapsed-mobile-example-select-name-toggle"
3140
- >
3141
- <div class="pf-c-select__toggle-wrapper">
3142
- <span class="pf-c-select__toggle-icon">
3143
- <i class="fas fa-filter" aria-hidden="true"></i>
3144
- </span>
3145
- <span class="pf-c-select__toggle-text">Name</span>
3146
- </div>
3147
- <span class="pf-c-select__toggle-arrow">
3148
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3149
- </span>
3150
- </button>
3151
-
3152
- <ul
3153
- class="pf-c-select__menu"
3154
- role="listbox"
3155
- aria-labelledby="toolbar-expand-all-collapsed-mobile-example-select-name-label"
3156
- hidden
3157
- style="width: 150px"
3158
- >
3159
- <li role="presentation">
3160
- <button
3161
- class="pf-c-select__menu-item"
3162
- role="option"
3163
- >Running</button>
3164
- </li>
3165
- <li role="presentation">
3166
- <button
3167
- class="pf-c-select__menu-item pf-m-selected"
3168
- role="option"
3169
- aria-selected="true"
3170
- >
3171
- Stopped
3172
- <span class="pf-c-select__menu-item-icon">
3173
- <i class="fas fa-check" aria-hidden="true"></i>
3174
- </span>
3175
- </button>
3176
- </li>
3177
- <li role="presentation">
3178
- <button
3179
- class="pf-c-select__menu-item"
3180
- role="option"
3181
- >Down</button>
3182
- </li>
3183
- <li role="presentation">
3184
- <button
3185
- class="pf-c-select__menu-item"
3186
- role="option"
3187
- >Degraded</button>
3188
- </li>
3189
- <li role="presentation">
3190
- <button
3191
- class="pf-c-select__menu-item"
3192
- role="option"
3193
- >Needs maintenance</button>
3194
- </li>
3195
- </ul>
3196
- </div>
3197
- <input
3198
- class="pf-c-form-control"
3199
- id="toolbar-expand-all-collapsed-mobile-example-textInput11"
3200
- name="textInput11"
3201
- type="search"
3202
- placeholder="Filter by name..."
3203
- aria-label="Search input example"
3204
- />
3205
- <button
3206
- class="pf-c-button pf-m-control"
3207
- type="button"
3208
- aria-label="Search button for search input"
3209
- >
3210
- <i class="fas fa-search" aria-hidden="true"></i>
3211
- </button>
3212
- </div>
3213
- </div>
3214
- </div>
3215
- </div>
3216
- <div class="pf-c-toolbar__item pf-m-overflow-menu">
3217
- <div
3218
- class="pf-c-overflow-menu"
3219
- id="toolbar-expand-all-collapsed-mobile-example-overflow-menu"
3220
- >
3221
- <div class="pf-c-overflow-menu__control">
3222
- <div class="pf-c-dropdown">
3223
- <button
3224
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
3225
- type="button"
3226
- id="toolbar-expand-all-collapsed-mobile-example-overflow-menu-dropdown-toggle"
3227
- aria-label="Overflow menu"
3228
- aria-expanded="false"
3229
- >
3230
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3231
- </button>
3232
- <ul
3233
- class="pf-c-dropdown__menu"
3234
- aria-labelledby="toolbar-expand-all-collapsed-mobile-example-overflow-menu-dropdown-toggle"
3235
- hidden
3236
- >
3237
- <li>
3238
- <button class="pf-c-dropdown__menu-item">Primary</button>
3239
- </li>
3240
- <li>
3241
- <button class="pf-c-dropdown__menu-item">Secondary</button>
3242
- </li>
3243
- <li>
3244
- <button class="pf-c-dropdown__menu-item">Tertiary</button>
3245
- </li>
3246
- </ul>
3247
- </div>
3248
- </div>
3249
- </div>
3250
- </div>
3251
- <div class="pf-c-toolbar__item pf-m-pagination">
3252
- <div
3253
- class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
3254
- >
3255
- <div
3256
- class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
3257
- >
3258
- <div class="pf-c-options-menu">
3259
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
3260
- <span class="pf-c-options-menu__toggle-text">
3261
- <b>1 - 10</b>&nbsp;of&nbsp;
3262
- <b>36</b>
3263
- </span>
3264
- <button
3265
- class="pf-c-options-menu__toggle-button"
3266
- id="pagination-options-menu-bottom-example-toggle"
3267
- aria-haspopup="listbox"
3268
- aria-expanded="false"
3269
- aria-label="Items per page"
3270
- >
3271
- <span class="pf-c-options-menu__toggle-button-icon">
3272
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3273
- </span>
3274
- </button>
3275
- </div>
3276
- <ul
3277
- class="pf-c-options-menu__menu"
3278
- aria-labelledby="pagination-options-menu-bottom-example-toggle"
3279
- hidden
3280
- >
3281
- <li>
3282
- <button
3283
- class="pf-c-options-menu__menu-item"
3284
- type="button"
3285
- >5 per page</button>
3286
- </li>
3287
- <li>
3288
- <button
3289
- class="pf-c-options-menu__menu-item"
3290
- type="button"
3291
- >
3292
- 10 per page
3293
- <div class="pf-c-options-menu__menu-item-icon">
3294
- <i class="fas fa-check" aria-hidden="true"></i>
3295
- </div>
3296
- </button>
3297
- </li>
3298
- <li>
3299
- <button
3300
- class="pf-c-options-menu__menu-item"
3301
- type="button"
3302
- >20 per page</button>
3303
- </li>
3304
- </ul>
3305
- </div>
3306
- <nav class="pf-c-pagination__nav" aria-label="Pagination">
3307
- <div class="pf-c-pagination__nav-control pf-m-prev">
3308
- <button
3309
- class="pf-c-button pf-m-plain"
3310
- type="button"
3311
- disabled
3312
- aria-label="Go to previous page"
3313
- >
3314
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3315
- </button>
3316
- </div>
3317
- <div class="pf-c-pagination__nav-control pf-m-next">
3318
- <button
3319
- class="pf-c-button pf-m-plain"
3320
- type="button"
3321
- aria-label="Go to next page"
3322
- >
3323
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3324
- </button>
3325
- </div>
3326
- </nav>
3327
- </div>
3328
- </div>
3329
- </div>
3330
- </div>
3331
- <div
3332
- class="pf-c-toolbar__expandable-content pf-m-hidden"
3333
- id="toolbar-expand-all-collapsed-mobile-example-expandable-content"
3334
- hidden
3335
- ></div>
3336
- </div>
3337
- </div>
3338
- <table
3339
- class="pf-c-table pf-m-expandable pf-m-grid-lg"
3340
- role="grid"
3341
- aria-label="Collapsed table example"
3342
- id="table-collapsed"
3343
- >
3344
- <thead>
3345
- <tr role="row">
3346
- <td></td>
3347
- <td class="pf-c-table__check" role="cell">
3348
- <input
3349
- type="checkbox"
3350
- name="table-collapsed-check-all"
3351
- aria-label="Select all rows"
3352
- />
3353
- </td>
3354
- <th
3355
- class="pf-m-width-30 pf-c-table__sort pf-m-selected"
3356
- role="columnheader"
3357
- aria-sort="ascending"
3358
- scope="col"
3359
- >
3360
- <button class="pf-c-table__button">
3361
- <div class="pf-c-table__button-content">
3362
- <span class="pf-c-table__text">Repositories</span>
3363
- <span class="pf-c-table__sort-indicator">
3364
- <i class="fas fa-long-arrow-alt-up"></i>
3365
- </span>
3366
- </div>
3367
- </button>
3368
- </th>
3369
- <th
3370
- class="pf-c-table__sort"
3371
- role="columnheader"
3372
- aria-sort="none"
3373
- scope="col"
3374
- >
3375
- <button class="pf-c-table__button">
3376
- <div class="pf-c-table__button-content">
3377
- <span class="pf-c-table__text">Branches</span>
3378
- <span class="pf-c-table__sort-indicator">
3379
- <i class="fas fa-arrows-alt-v"></i>
3380
- </span>
3381
- </div>
3382
- </button>
3383
- </th>
3384
- <th
3385
- class="pf-c-table__sort"
3386
- role="columnheader"
3387
- aria-sort="none"
3388
- scope="col"
3389
- >
3390
- <button class="pf-c-table__button">
3391
- <div class="pf-c-table__button-content">
3392
- <span class="pf-c-table__text">Pull requests</span>
3393
- <span class="pf-c-table__sort-indicator">
3394
- <i class="fas fa-arrows-alt-v"></i>
3395
- </span>
3396
- </div>
3397
- </button>
3398
- </th>
3399
- <td></td>
3400
- <td></td>
3401
- </tr>
3402
- </thead>
3403
-
3404
- <tbody role="rowgroup">
3405
- <tr role="row">
3406
- <td class="pf-c-table__toggle" role="cell">
3407
- <button
3408
- class="pf-c-button pf-m-plain"
3409
- aria-labelledby="table-collapsed-node1 table-collapsed-expandable-toggle1"
3410
- id="table-collapsed-expandable-toggle1"
3411
- aria-label="Details"
3412
- aria-controls="table-collapsed-content1"
3413
- >
3414
- <div class="pf-c-table__toggle-icon">
3415
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3416
- </div>
3417
- </button>
3418
- </td>
3419
-
3420
- <td class="pf-c-table__check" role="cell">
3421
- <input
3422
- type="checkbox"
3423
- name="table-collapsed-checkrow1"
3424
- aria-labelledby="table-collapsed-node1"
3425
- />
3426
- </td>
3427
- <th role="columnheader" data-label="Repository name">
3428
- <div>
3429
- <div id="table-collapsed-node1">Node 1</div>
3430
- <a href="#">siemur/test-space</a>
3431
- </div>
3432
- </th>
3433
- <td role="cell" data-label="Branches">10</td>
3434
- <td role="cell" data-label="Pull requests">25</td>
3435
- <td role="cell" data-label="Action">
3436
- <a href="#">Link 1</a>
3437
- </td>
3438
- <td class="pf-c-table__action" role="cell">
3439
- <div class="pf-c-dropdown">
3440
- <button
3441
- class="pf-c-dropdown__toggle pf-m-plain"
3442
- id="table-collapsed-dropdown-kebab-1-button"
3443
- aria-expanded="false"
3444
- type="button"
3445
- aria-label="Actions"
3446
- >
3447
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3448
- </button>
3449
- <ul
3450
- class="pf-c-dropdown__menu pf-m-align-right"
3451
- aria-labelledby="table-collapsed-dropdown-kebab-1-button"
3452
- hidden
3453
- >
3454
- <li>
3455
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3456
- </li>
3457
- <li>
3458
- <button
3459
- class="pf-c-dropdown__menu-item"
3460
- type="button"
3461
- >Action</button>
3462
- </li>
3463
- <li>
3464
- <a
3465
- class="pf-c-dropdown__menu-item pf-m-disabled"
3466
- href="#"
3467
- aria-disabled="true"
3468
- tabindex="-1"
3469
- >Disabled link</a>
3470
- </li>
3471
- <li>
3472
- <button
3473
- class="pf-c-dropdown__menu-item"
3474
- type="button"
3475
- disabled
3476
- >Disabled action</button>
3477
- </li>
3478
- <li class="pf-c-divider" role="separator"></li>
3479
- <li>
3480
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
3481
- </li>
3482
- </ul>
3483
- </div>
3484
- </td>
3485
- </tr>
3486
-
3487
- <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
3488
- <td></td>
3489
- <td></td>
3490
- <td role="cell" colspan="4" id="table-collapsed-content1">
3491
- <div
3492
- class="pf-c-table__expandable-row-content"
3493
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
3494
- </td>
3495
- <td></td>
3496
- </tr>
3497
- </tbody>
3498
-
3499
- <tbody role="rowgroup">
3500
- <tr role="row">
3501
- <td class="pf-c-table__toggle" role="cell">
3502
- <button
3503
- class="pf-c-button pf-m-plain"
3504
- aria-labelledby="table-collapsed-node2 table-collapsed-expandable-toggle2"
3505
- id="table-collapsed-expandable-toggle2"
3506
- aria-label="Details"
3507
- aria-controls="table-collapsed-content2"
3508
- >
3509
- <div class="pf-c-table__toggle-icon">
3510
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3511
- </div>
3512
- </button>
3513
- </td>
3514
-
3515
- <td class="pf-c-table__check" role="cell">
3516
- <input
3517
- type="checkbox"
3518
- name="table-collapsed-checkrow2"
3519
- aria-labelledby="table-collapsed-node2"
3520
- />
3521
- </td>
3522
- <th role="columnheader" data-label="Repository name">
3523
- <div>
3524
- <div id="table-collapsed-node2">Node 2</div>
3525
- <a href="#">siemur/test-space</a>
3526
- </div>
3527
- </th>
3528
- <td role="cell" data-label="Branches">10</td>
3529
- <td role="cell" data-label="Pull requests">25</td>
3530
- <td role="cell" data-label="Action">
3531
- <a href="#">Link 2</a>
3532
- </td>
3533
- <td class="pf-c-table__action" role="cell">
3534
- <div class="pf-c-dropdown">
3535
- <button
3536
- class="pf-c-dropdown__toggle pf-m-plain"
3537
- id="table-collapsed-dropdown-kebab-2-button"
3538
- aria-expanded="false"
3539
- type="button"
3540
- aria-label="Actions"
3541
- >
3542
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3543
- </button>
3544
- <ul
3545
- class="pf-c-dropdown__menu pf-m-align-right"
3546
- aria-labelledby="table-collapsed-dropdown-kebab-2-button"
3547
- hidden
3548
- >
3549
- <li>
3550
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3551
- </li>
3552
- <li>
3553
- <button
3554
- class="pf-c-dropdown__menu-item"
3555
- type="button"
3556
- >Action</button>
3557
- </li>
3558
- <li>
3559
- <a
3560
- class="pf-c-dropdown__menu-item pf-m-disabled"
3561
- href="#"
3562
- aria-disabled="true"
3563
- tabindex="-1"
3564
- >Disabled link</a>
3565
- </li>
3566
- <li>
3567
- <button
3568
- class="pf-c-dropdown__menu-item"
3569
- type="button"
3570
- disabled
3571
- >Disabled action</button>
3572
- </li>
3573
- <li class="pf-c-divider" role="separator"></li>
3574
- <li>
3575
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
3576
- </li>
3577
- </ul>
3578
- </div>
3579
- </td>
3580
- </tr>
3581
-
3582
- <tr class="pf-c-table__expandable-row" role="row">
3583
- <td role="cell" colspan="7" id="table-collapsed-content2">
3584
- <div
3585
- class="pf-c-table__expandable-row-content"
3586
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
3587
- </td>
3588
- </tr>
3589
- </tbody>
3590
-
3591
- <tbody role="rowgroup">
3592
- <tr role="row">
3593
- <td class="pf-c-table__toggle" role="cell">
3594
- <button
3595
- class="pf-c-button pf-m-plain"
3596
- aria-labelledby="table-collapsed-node3 expandable-toggle3"
3597
- id="expandable-toggle3"
3598
- aria-label="Details"
3599
- aria-controls="table-collapsed-content3"
3600
- >
3601
- <div class="pf-c-table__toggle-icon">
3602
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3603
- </div>
3604
- </button>
3605
- </td>
3606
-
3607
- <td class="pf-c-table__check" role="cell">
3608
- <input
3609
- type="checkbox"
3610
- name="table-collapsed-checkrow3"
3611
- aria-labelledby="table-collapsed-node3"
3612
- />
3613
- </td>
3614
- <th role="columnheader" data-label="Repository name">
3615
- <div>
3616
- <div id="table-collapsed-node3">Node 3</div>
3617
- <a href="#">siemur/test-space</a>
3618
- </div>
3619
- </th>
3620
- <td role="cell" data-label="Branches">10</td>
3621
- <td role="cell" data-label="Pull requests">25</td>
3622
- <td role="cell" data-label="Action">
3623
- <a href="#">Link 3</a>
3624
- </td>
3625
- <td class="pf-c-table__action" role="cell">
3626
- <div class="pf-c-dropdown">
3627
- <button
3628
- class="pf-c-dropdown__toggle pf-m-plain"
3629
- id="table-collapsed-dropdown-kebab-3-button"
3630
- aria-expanded="false"
3631
- type="button"
3632
- aria-label="Actions"
3633
- >
3634
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3635
- </button>
3636
- <ul
3637
- class="pf-c-dropdown__menu pf-m-align-right"
3638
- aria-labelledby="table-collapsed-dropdown-kebab-3-button"
3639
- hidden
3640
- >
3641
- <li>
3642
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3643
- </li>
3644
- <li>
3645
- <button
3646
- class="pf-c-dropdown__menu-item"
3647
- type="button"
3648
- >Action</button>
3649
- </li>
3650
- <li>
3651
- <a
3652
- class="pf-c-dropdown__menu-item pf-m-disabled"
3653
- href="#"
3654
- aria-disabled="true"
3655
- tabindex="-1"
3656
- >Disabled link</a>
3657
- </li>
3658
- <li>
3659
- <button
3660
- class="pf-c-dropdown__menu-item"
3661
- type="button"
3662
- disabled
3663
- >Disabled action</button>
3664
- </li>
3665
- <li class="pf-c-divider" role="separator"></li>
3666
- <li>
3667
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
3668
- </li>
3669
- </ul>
3670
- </div>
3671
- </td>
3672
- </tr>
3673
-
3674
- <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
3675
- <td role="cell" colspan="7" id="table-collapsed-content3">
3676
- <div
3677
- class="pf-c-table__expandable-row-content"
3678
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
3679
- </td>
3680
- </tr>
3681
- </tbody>
3682
-
3683
- <tbody role="rowgroup">
3684
- <tr role="row">
3685
- <td class="pf-c-table__toggle" role="cell">
3686
- <button
3687
- class="pf-c-button pf-m-plain"
3688
- aria-labelledby="table-collapsed-node4 expandable-toggle4"
3689
- id="expandable-toggle4"
3690
- aria-label="Details"
3691
- aria-controls="table-collapsed-content4"
3692
- >
3693
- <div class="pf-c-table__toggle-icon">
3694
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3695
- </div>
3696
- </button>
3697
- </td>
3698
-
3699
- <td class="pf-c-table__check" role="cell">
3700
- <input
3701
- type="checkbox"
3702
- name="table-collapsed-checkrow4"
3703
- aria-labelledby="table-collapsed-node4"
3704
- />
3705
- </td>
3706
- <th role="columnheader" data-label="Repository name">
3707
- <div>
3708
- <div id="table-collapsed-node4">Node 4</div>
3709
- <a href="#">siemur/test-space</a>
3710
- </div>
3711
- </th>
3712
- <td role="cell" data-label="Branches">10</td>
3713
- <td role="cell" data-label="Pull requests">25</td>
3714
- <td role="cell" data-label="Action">
3715
- <a href="#">Link 4</a>
3716
- </td>
3717
- <td class="pf-c-table__action" role="cell">
3718
- <div class="pf-c-dropdown">
3719
- <button
3720
- class="pf-c-dropdown__toggle pf-m-plain"
3721
- id="table-collapsed-dropdown-kebab-4-button"
3722
- aria-expanded="false"
3723
- type="button"
3724
- aria-label="Actions"
3725
- >
3726
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3727
- </button>
3728
- <ul
3729
- class="pf-c-dropdown__menu pf-m-align-right"
3730
- aria-labelledby="table-collapsed-dropdown-kebab-4-button"
3731
- hidden
3732
- >
3733
- <li>
3734
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3735
- </li>
3736
- <li>
3737
- <button
3738
- class="pf-c-dropdown__menu-item"
3739
- type="button"
3740
- >Action</button>
3741
- </li>
3742
- <li>
3743
- <a
3744
- class="pf-c-dropdown__menu-item pf-m-disabled"
3745
- href="#"
3746
- aria-disabled="true"
3747
- tabindex="-1"
3748
- >Disabled link</a>
3749
- </li>
3750
- <li>
3751
- <button
3752
- class="pf-c-dropdown__menu-item"
3753
- type="button"
3754
- disabled
3755
- >Disabled action</button>
3756
- </li>
3757
- <li class="pf-c-divider" role="separator"></li>
3758
- <li>
3759
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
3760
- </li>
3761
- </ul>
3762
- </div>
3763
- </td>
3764
- </tr>
3765
-
3766
- <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
3767
- <td
3768
- class="pf-m-no-padding"
3769
- role="cell"
3770
- colspan="7"
3771
- id="table-collapsed-content4"
3772
- >
3773
- <div
3774
- class="pf-c-table__expandable-row-content"
3775
- >Expandable row content has no padding.</div>
3776
- </td>
3777
- </tr>
3778
- </tbody>
3779
- </table>
3780
- </section>
3781
- </main>
3782
- </div>
3783
-
3784
- ```
3785
-
3786
- ### Toolbar expand all (expanded)
3787
-
3788
- ```html isFullscreen
3789
- <div class="pf-c-page" id="toolbar-expand-all-expanded">
3790
- <a
3791
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
3792
- href="#main-content-toolbar-expand-all-expanded"
3793
- >Skip to content</a>
3794
- <header class="pf-c-page__header">
3795
- <div class="pf-c-page__header-brand">
3796
- <div class="pf-c-page__header-brand-toggle">
3797
- <button
3798
- class="pf-c-button pf-m-plain"
3799
- type="button"
3800
- id="toolbar-expand-all-expanded-nav-toggle"
3801
- aria-label="Global navigation"
3802
- aria-expanded="true"
3803
- aria-controls="toolbar-expand-all-expanded-primary-nav"
3804
- >
3805
- <i class="fas fa-bars" aria-hidden="true"></i>
3806
- </button>
3807
- </div>
3808
- <a href="#" class="pf-c-page__header-brand-link">
3809
- <img
3810
- class="pf-c-brand"
3811
- src="/assets/images/PF-Masthead-Logo.svg"
3812
- alt="PatternFly logo"
3813
- />
3814
- </a>
3815
- </div>
3816
-
3817
- <div class="pf-c-page__header-tools">
3818
- <div class="pf-c-page__header-tools-group">
3819
- <div
3820
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
3821
- >
3822
- <button
3823
- class="pf-c-button pf-m-plain"
3824
- type="button"
3825
- aria-label="Settings"
3826
- >
3827
- <i class="fas fa-cog" aria-hidden="true"></i>
3828
- </button>
3829
- </div>
3830
- <div
3831
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
3832
- >
3833
- <button
3834
- class="pf-c-button pf-m-plain"
3835
- type="button"
3836
- aria-label="Help"
3837
- >
3838
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
3839
- </button>
3840
- </div>
3841
- </div>
3842
- <div class="pf-c-page__header-tools-group">
3843
- <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
3844
- <div class="pf-c-dropdown">
3845
- <button
3846
- class="pf-c-dropdown__toggle pf-m-plain"
3847
- id="toolbar-expand-all-expanded-dropdown-kebab-1-button"
3848
- aria-expanded="false"
3849
- type="button"
3850
- aria-label="Actions"
3851
- >
3852
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3853
- </button>
3854
- <ul
3855
- class="pf-c-dropdown__menu pf-m-align-right"
3856
- aria-labelledby="toolbar-expand-all-expanded-dropdown-kebab-1-button"
3857
- hidden
3858
- >
3859
- <li>
3860
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3861
- </li>
3862
- <li>
3863
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
3864
- </li>
3865
- <li>
3866
- <a
3867
- class="pf-c-dropdown__menu-item pf-m-disabled"
3868
- href="#"
3869
- aria-disabled="true"
3870
- tabindex="-1"
3871
- >Disabled link</a>
3872
- </li>
3873
- <li>
3874
- <button
3875
- class="pf-c-dropdown__menu-item"
3876
- type="button"
3877
- disabled
3878
- >Disabled action</button>
3879
- </li>
3880
- <li class="pf-c-divider" role="separator"></li>
3881
- <li>
3882
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
3883
- </li>
3884
- </ul>
3885
- </div>
3886
- </div>
3887
- <div
3888
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
3889
- >
3890
- <div class="pf-c-dropdown">
3891
- <button
3892
- class="pf-c-dropdown__toggle pf-m-plain"
3893
- id="toolbar-expand-all-expanded-dropdown-kebab-2-button"
3894
- aria-expanded="false"
3895
- type="button"
3896
- >
3897
- <span class="pf-c-dropdown__toggle-text">John Smith</span>
3898
- <span class="pf-c-dropdown__toggle-icon">
3899
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3900
- </span>
3901
- </button>
3902
- <ul
3903
- class="pf-c-dropdown__menu"
3904
- aria-labelledby="toolbar-expand-all-expanded-dropdown-kebab-2-button"
3905
- hidden
3906
- >
3907
- <li>
3908
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3909
- </li>
3910
- <li>
3911
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
3912
- </li>
3913
- <li>
3914
- <a
3915
- class="pf-c-dropdown__menu-item pf-m-disabled"
3916
- href="#"
3917
- aria-disabled="true"
3918
- tabindex="-1"
3919
- >Disabled link</a>
3920
- </li>
3921
- <li>
3922
- <button
3923
- class="pf-c-dropdown__menu-item"
3924
- type="button"
3925
- disabled
3926
- >Disabled action</button>
3927
- </li>
3928
- <li class="pf-c-divider" role="separator"></li>
3929
- <li>
3930
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
3931
- </li>
3932
- </ul>
3933
- </div>
3934
- </div>
3935
- </div>
3936
- <img
3937
- class="pf-c-avatar"
3938
- src="/assets/images/img_avatar.svg"
3939
- alt="Avatar image"
3940
- />
3941
- </div>
3942
- </header>
3943
- <div class="pf-c-page__sidebar">
3944
- <div class="pf-c-page__sidebar-body">
3945
- <nav
3946
- class="pf-c-nav"
3947
- id="toolbar-expand-all-expanded-primary-nav"
3948
- aria-label="Global"
3949
- >
3950
- <ul class="pf-c-nav__list">
3951
- <li class="pf-c-nav__item">
3952
- <a href="#" class="pf-c-nav__link">System panel</a>
3953
- </li>
3954
- <li class="pf-c-nav__item">
3955
- <a
3956
- href="#"
3957
- class="pf-c-nav__link pf-m-current"
3958
- aria-current="page"
3959
- >Policy</a>
3960
- </li>
3961
- <li class="pf-c-nav__item">
3962
- <a href="#" class="pf-c-nav__link">Authentication</a>
3963
- </li>
3964
- <li class="pf-c-nav__item">
3965
- <a href="#" class="pf-c-nav__link">Network services</a>
3966
- </li>
3967
- <li class="pf-c-nav__item">
3968
- <a href="#" class="pf-c-nav__link">Server</a>
3969
- </li>
3970
- </ul>
3971
- </nav>
3972
- </div>
3973
- </div>
3974
- <main
3975
- class="pf-c-page__main"
3976
- tabindex="-1"
3977
- id="main-content-toolbar-expand-all-expanded"
3978
- >
3979
- <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3980
- <div class="pf-c-page__main-body">
3981
- <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3982
- <ol class="pf-c-breadcrumb__list">
3983
- <li class="pf-c-breadcrumb__item">
3984
- <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3985
- </li>
3986
- <li class="pf-c-breadcrumb__item">
3987
- <span class="pf-c-breadcrumb__item-divider">
3988
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3989
- </span>
3990
-
3991
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
3992
- </li>
3993
- <li class="pf-c-breadcrumb__item">
3994
- <span class="pf-c-breadcrumb__item-divider">
3995
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3996
- </span>
3997
-
3998
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
3999
- </li>
4000
- <li class="pf-c-breadcrumb__item">
4001
- <span class="pf-c-breadcrumb__item-divider">
4002
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4003
- </span>
4004
-
4005
- <a
4006
- href="#"
4007
- class="pf-c-breadcrumb__link pf-m-current"
4008
- aria-current="page"
4009
- >Section landing</a>
4010
- </li>
4011
- </ol>
4012
- </nav>
4013
- </div>
4014
- </section>
4015
- <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
4016
- <div class="pf-c-page__main-body">
4017
- <div class="pf-c-content">
4018
- <h1>Main title</h1>
4019
- <p>This is a demo of the page component.</p>
4020
- </div>
4021
- </div>
4022
- </section>
4023
- <section class="pf-c-page__main-section">
4024
- <div
4025
- class="pf-c-toolbar pf-m-nowrap pf-m-page-insets"
4026
- id="toolbar-expand-all-expanded-mobile-example"
4027
- >
4028
- <div class="pf-c-toolbar__content">
4029
- <div class="pf-c-toolbar__content-section pf-m-nowrap">
4030
- <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show">
4031
- <div class="pf-c-toolbar__toggle">
4032
- <button
4033
- class="pf-c-button pf-m-plain"
4034
- type="button"
4035
- aria-label="Show filters"
4036
- aria-expanded="false"
4037
- aria-controls="toolbar-expand-all-expanded-mobile-example-expandable-content"
4038
- >
4039
- <i class="fas fa-filter" aria-hidden="true"></i>
4040
- </button>
4041
- </div>
4042
- <div class="pf-c-toolbar__item pf-m-expand-all pf-m-expanded">
4043
- <button
4044
- class="pf-c-button pf-m-plain"
4045
- type="button"
4046
- aria-label="Collapse all"
4047
- >
4048
- <span class="pf-c-toolbar__expand-all-icon">
4049
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4050
- </span>
4051
- </button>
4052
- </div>
4053
- <div class="pf-c-toolbar__group pf-m-filter-group">
4054
- <div class="pf-c-toolbar__item pf-m-search-filter">
4055
- <div class="pf-c-input-group">
4056
- <div class="pf-c-select" style="width: 150px">
4057
- <span
4058
- id="toolbar-expand-all-expanded-mobile-example-select-name-label"
4059
- hidden
4060
- >Choose one</span>
4061
-
4062
- <button
4063
- class="pf-c-select__toggle"
4064
- type="button"
4065
- id="toolbar-expand-all-expanded-mobile-example-select-name-toggle"
4066
- aria-haspopup="true"
4067
- aria-expanded="false"
4068
- aria-labelledby="toolbar-expand-all-expanded-mobile-example-select-name-label toolbar-expand-all-expanded-mobile-example-select-name-toggle"
4069
- >
4070
- <div class="pf-c-select__toggle-wrapper">
4071
- <span class="pf-c-select__toggle-icon">
4072
- <i class="fas fa-filter" aria-hidden="true"></i>
4073
- </span>
4074
- <span class="pf-c-select__toggle-text">Name</span>
4075
- </div>
4076
- <span class="pf-c-select__toggle-arrow">
4077
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4078
- </span>
4079
- </button>
4080
-
4081
- <ul
4082
- class="pf-c-select__menu"
4083
- role="listbox"
4084
- aria-labelledby="toolbar-expand-all-expanded-mobile-example-select-name-label"
4085
- hidden
4086
- style="width: 150px"
4087
- >
4088
- <li role="presentation">
4089
- <button
4090
- class="pf-c-select__menu-item"
4091
- role="option"
4092
- >Running</button>
4093
- </li>
4094
- <li role="presentation">
4095
- <button
4096
- class="pf-c-select__menu-item pf-m-selected"
4097
- role="option"
4098
- aria-selected="true"
4099
- >
4100
- Stopped
4101
- <span class="pf-c-select__menu-item-icon">
4102
- <i class="fas fa-check" aria-hidden="true"></i>
4103
- </span>
4104
- </button>
4105
- </li>
4106
- <li role="presentation">
4107
- <button
4108
- class="pf-c-select__menu-item"
4109
- role="option"
4110
- >Down</button>
4111
- </li>
4112
- <li role="presentation">
4113
- <button
4114
- class="pf-c-select__menu-item"
4115
- role="option"
4116
- >Degraded</button>
4117
- </li>
4118
- <li role="presentation">
4119
- <button
4120
- class="pf-c-select__menu-item"
4121
- role="option"
4122
- >Needs maintenance</button>
4123
- </li>
4124
- </ul>
4125
- </div>
4126
- <input
4127
- class="pf-c-form-control"
4128
- id="toolbar-expand-all-expanded-mobile-example-textInput11"
4129
- name="textInput11"
4130
- type="search"
4131
- placeholder="Filter by name..."
4132
- aria-label="Search input example"
4133
- />
4134
- <button
4135
- class="pf-c-button pf-m-control"
4136
- type="button"
4137
- aria-label="Search button for search input"
4138
- >
4139
- <i class="fas fa-search" aria-hidden="true"></i>
4140
- </button>
4141
- </div>
4142
- </div>
4143
- </div>
4144
- </div>
4145
- <div class="pf-c-toolbar__item pf-m-overflow-menu">
4146
- <div
4147
- class="pf-c-overflow-menu"
4148
- id="toolbar-expand-all-expanded-mobile-example-overflow-menu"
4149
- >
4150
- <div class="pf-c-overflow-menu__control">
4151
- <div class="pf-c-dropdown">
4152
- <button
4153
- class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
4154
- type="button"
4155
- id="toolbar-expand-all-expanded-mobile-example-overflow-menu-dropdown-toggle"
4156
- aria-label="Overflow menu"
4157
- aria-expanded="false"
4158
- >
4159
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4160
- </button>
4161
- <ul
4162
- class="pf-c-dropdown__menu"
4163
- aria-labelledby="toolbar-expand-all-expanded-mobile-example-overflow-menu-dropdown-toggle"
4164
- hidden
4165
- >
4166
- <li>
4167
- <button class="pf-c-dropdown__menu-item">Primary</button>
4168
- </li>
4169
- <li>
4170
- <button class="pf-c-dropdown__menu-item">Secondary</button>
4171
- </li>
4172
- <li>
4173
- <button class="pf-c-dropdown__menu-item">Tertiary</button>
4174
- </li>
4175
- </ul>
4176
- </div>
4177
- </div>
4178
- </div>
4179
- </div>
4180
- <div class="pf-c-toolbar__item pf-m-pagination">
4181
- <div
4182
- class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
4183
- >
4184
- <div
4185
- class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
4186
- >
4187
- <div class="pf-c-options-menu">
4188
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
4189
- <span class="pf-c-options-menu__toggle-text">
4190
- <b>1 - 10</b>&nbsp;of&nbsp;
4191
- <b>36</b>
4192
- </span>
4193
- <button
4194
- class="pf-c-options-menu__toggle-button"
4195
- id="pagination-options-menu-bottom-example-toggle"
4196
- aria-haspopup="listbox"
4197
- aria-expanded="false"
4198
- aria-label="Items per page"
4199
- >
4200
- <span class="pf-c-options-menu__toggle-button-icon">
4201
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4202
- </span>
4203
- </button>
4204
- </div>
4205
- <ul
4206
- class="pf-c-options-menu__menu"
4207
- aria-labelledby="pagination-options-menu-bottom-example-toggle"
4208
- hidden
4209
- >
4210
- <li>
4211
- <button
4212
- class="pf-c-options-menu__menu-item"
4213
- type="button"
4214
- >5 per page</button>
4215
- </li>
4216
- <li>
4217
- <button
4218
- class="pf-c-options-menu__menu-item"
4219
- type="button"
4220
- >
4221
- 10 per page
4222
- <div class="pf-c-options-menu__menu-item-icon">
4223
- <i class="fas fa-check" aria-hidden="true"></i>
4224
- </div>
4225
- </button>
4226
- </li>
4227
- <li>
4228
- <button
4229
- class="pf-c-options-menu__menu-item"
4230
- type="button"
4231
- >20 per page</button>
4232
- </li>
4233
- </ul>
4234
- </div>
4235
- <nav class="pf-c-pagination__nav" aria-label="Pagination">
4236
- <div class="pf-c-pagination__nav-control pf-m-prev">
4237
- <button
4238
- class="pf-c-button pf-m-plain"
4239
- type="button"
4240
- disabled
4241
- aria-label="Go to previous page"
4242
- >
4243
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4244
- </button>
4245
- </div>
4246
- <div class="pf-c-pagination__nav-control pf-m-next">
4247
- <button
4248
- class="pf-c-button pf-m-plain"
4249
- type="button"
4250
- aria-label="Go to next page"
4251
- >
4252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4253
- </button>
4254
- </div>
4255
- </nav>
4256
- </div>
4257
- </div>
4258
- </div>
4259
- </div>
4260
- <div
4261
- class="pf-c-toolbar__expandable-content pf-m-hidden"
4262
- id="toolbar-expand-all-expanded-mobile-example-expandable-content"
4263
- hidden
4264
- ></div>
4265
- </div>
4266
- </div>
4267
- <table
4268
- class="pf-c-table pf-m-expandable pf-m-grid-xl"
4269
- role="grid"
4270
- aria-label="Expanded table example"
4271
- id="toolbar-expand-all-expanded-table"
4272
- >
4273
- <thead>
4274
- <tr role="row">
4275
- <td role="cell"></td>
4276
-
4277
- <th
4278
- class="pf-m-width-30"
4279
- role="columnheader"
4280
- scope="col"
4281
- >Repositories</th>
4282
- <th role="columnheader" scope="col">Branches</th>
4283
- <th role="columnheader" scope="col">Pull requests</th>
4284
- <th role="columnheader" scope="col">Work spaces</th>
4285
- <th role="columnheader" scope="col">Last commit</th>
4286
- <td role="cell"></td>
4287
- </tr>
4288
- </thead>
4289
-
4290
- <tbody class="pf-m-expanded" role="rowgroup">
4291
- <tr role="row">
4292
- <td class="pf-c-table__toggle" role="cell">
4293
- <button
4294
- class="pf-c-button pf-m-plain pf-m-expanded"
4295
- aria-labelledby="toolbar-expand-all-expanded-table-node1 expandable-toggle1"
4296
- id="expandable-toggle1"
4297
- aria-label="Details"
4298
- aria-controls="toolbar-expand-all-expanded-table-content1"
4299
- aria-expanded="true"
4300
- >
4301
- <div class="pf-c-table__toggle-icon">
4302
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4303
- </div>
4304
- </button>
4305
- </td>
4306
-
4307
- <th role="columnheader" data-label="Repository name">
4308
- <div>
4309
- <div id="toolbar-expand-all-expanded-table-node1">Node 2</div>
4310
- <a href="#">siemur/test-space</a>
4311
- </div>
4312
- </th>
4313
- <td role="cell" data-label="Branches">
4314
- <span>
4315
- <i class="fas fa-code-branch"></i>
4316
- <span>10</span>
4317
- </span>
4318
- </td>
4319
- <td role="cell" data-label="Pull requests">
4320
- <span>
4321
- <i class="fas fa-code"></i>
4322
- <span>5</span>
4323
- </span>
4324
- </td>
4325
- <td role="cell" data-label="Work spaces">
4326
- <span>
4327
- <i class="fas fa-cube"></i>
4328
- <span>8</span>
4329
- </span>
4330
- </td>
4331
- <td role="cell" data-label="Last commit">2 days ago</td>
4332
- <td role="cell" data-label="Action">
4333
- <a href="#">Action link</a>
4334
- </td>
4335
- </tr>
4336
-
4337
- <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
4338
- <td role="cell"></td>
4339
-
4340
- <td
4341
- class
4342
- role="cell"
4343
- colspan="6"
4344
- id="toolbar-expand-all-expanded-table-content1"
4345
- >
4346
- <div class="pf-c-table__expandable-row-content">
4347
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4348
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4349
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4350
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4351
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4352
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4353
- </div>
4354
- </td>
4355
- </tr>
4356
- </tbody>
4357
-
4358
- <tbody class="pf-m-expanded" role="rowgroup">
4359
- <tr role="row">
4360
- <td class="pf-c-table__toggle" role="cell">
4361
- <button
4362
- class="pf-c-button pf-m-plain pf-m-expanded"
4363
- aria-labelledby="toolbar-expand-all-expanded-table-node2 expandable-toggle2"
4364
- id="expandable-toggle2"
4365
- aria-label="Details"
4366
- aria-controls="toolbar-expand-all-expanded-table-content2"
4367
- aria-expanded="true"
4368
- >
4369
- <div class="pf-c-table__toggle-icon">
4370
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4371
- </div>
4372
- </button>
4373
- </td>
4374
-
4375
- <th role="columnheader" data-label="Repository name">
4376
- <div>
4377
- <div id="toolbar-expand-all-expanded-table-node2">Node 2</div>
4378
- <a href="#">siemur/test-space</a>
4379
- </div>
4380
- </th>
4381
- <td role="cell" data-label="Branches">
4382
- <span>
4383
- <i class="fas fa-code-branch"></i>
4384
- <span>10</span>
4385
- </span>
4386
- </td>
4387
- <td role="cell" data-label="Pull requests">
4388
- <span>
4389
- <i class="fas fa-code"></i>
4390
- <span>5</span>
4391
- </span>
4392
- </td>
4393
- <td role="cell" data-label="Work spaces">
4394
- <span>
4395
- <i class="fas fa-cube"></i>
4396
- <span>8</span>
4397
- </span>
4398
- </td>
4399
- <td role="cell" data-label="Last commit">2 days ago</td>
4400
- <td role="cell" data-label="Action">
4401
- <a href="#">Action link</a>
4402
- </td>
4403
- </tr>
4404
-
4405
- <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
4406
- <td role="cell"></td>
4407
-
4408
- <td
4409
- class
4410
- role="cell"
4411
- colspan="6"
4412
- id="toolbar-expand-all-expanded-table-content2"
4413
- >
4414
- <div class="pf-c-table__expandable-row-content">
4415
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4416
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4417
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4418
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4419
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4420
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4421
- </div>
4422
- </td>
4423
- </tr>
4424
- </tbody>
4425
-
4426
- <tbody class="pf-m-expanded" role="rowgroup">
4427
- <tr role="row">
4428
- <td class="pf-c-table__toggle" role="cell">
4429
- <button
4430
- class="pf-c-button pf-m-plain pf-m-expanded"
4431
- aria-labelledby="toolbar-expand-all-expanded-table-node3 expandable-toggle3"
4432
- id="expandable-toggle3"
4433
- aria-label="Details"
4434
- aria-controls="toolbar-expand-all-expanded-table-content3"
4435
- aria-expanded="true"
4436
- >
4437
- <div class="pf-c-table__toggle-icon">
4438
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4439
- </div>
4440
- </button>
4441
- </td>
4442
-
4443
- <th role="columnheader" data-label="Repository name">
4444
- <div>
4445
- <div id="toolbar-expand-all-expanded-table-node3">Node 2</div>
4446
- <a href="#">siemur/test-space</a>
4447
- </div>
4448
- </th>
4449
- <td role="cell" data-label="Branches">
4450
- <span>
4451
- <i class="fas fa-code-branch"></i>
4452
- <span>10</span>
4453
- </span>
4454
- </td>
4455
- <td role="cell" data-label="Pull requests">
4456
- <span>
4457
- <i class="fas fa-code"></i>
4458
- <span>5</span>
4459
- </span>
4460
- </td>
4461
- <td role="cell" data-label="Work spaces">
4462
- <span>
4463
- <i class="fas fa-cube"></i>
4464
- <span>8</span>
4465
- </span>
4466
- </td>
4467
- <td role="cell" data-label="Last commit">2 days ago</td>
4468
- <td role="cell" data-label="Action">
4469
- <a href="#">Action link</a>
4470
- </td>
4471
- </tr>
4472
-
4473
- <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
4474
- <td role="cell"></td>
4475
-
4476
- <td
4477
- class
4478
- role="cell"
4479
- colspan="6"
4480
- id="toolbar-expand-all-expanded-table-content3"
4481
- >
4482
- <div class="pf-c-table__expandable-row-content">
4483
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4484
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4485
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4486
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4487
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4488
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4489
- </div>
4490
- </td>
4491
- </tr>
4492
- </tbody>
4493
-
4494
- <tbody class="pf-m-expanded" role="rowgroup">
4495
- <tr role="row">
4496
- <td class="pf-c-table__toggle" role="cell">
4497
- <button
4498
- class="pf-c-button pf-m-plain pf-m-expanded"
4499
- aria-labelledby="toolbar-expand-all-expanded-table-node4 expandable-toggle4"
4500
- id="expandable-toggle4"
4501
- aria-label="Details"
4502
- aria-controls="toolbar-expand-all-expanded-table-content4"
4503
- aria-expanded="true"
4504
- >
4505
- <div class="pf-c-table__toggle-icon">
4506
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4507
- </div>
4508
- </button>
4509
- </td>
4510
-
4511
- <th role="columnheader" data-label="Repository name">
4512
- <div>
4513
- <div id="toolbar-expand-all-expanded-table-node4">Node 2</div>
4514
- <a href="#">siemur/test-space</a>
4515
- </div>
4516
- </th>
4517
- <td role="cell" data-label="Branches">
4518
- <span>
4519
- <i class="fas fa-code-branch"></i>
4520
- <span>10</span>
4521
- </span>
4522
- </td>
4523
- <td role="cell" data-label="Pull requests">
4524
- <span>
4525
- <i class="fas fa-code"></i>
4526
- <span>5</span>
4527
- </span>
4528
- </td>
4529
- <td role="cell" data-label="Work spaces">
4530
- <span>
4531
- <i class="fas fa-cube"></i>
4532
- <span>8</span>
4533
- </span>
4534
- </td>
4535
- <td role="cell" data-label="Last commit">2 days ago</td>
4536
- <td role="cell" data-label="Action">
4537
- <a href="#">Action link</a>
4538
- </td>
4539
- </tr>
4540
-
4541
- <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
4542
- <td role="cell"></td>
4543
-
4544
- <td
4545
- class
4546
- role="cell"
4547
- colspan="6"
4548
- id="toolbar-expand-all-expanded-table-content4"
4549
- >
4550
- <div class="pf-c-table__expandable-row-content">
4551
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4552
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4553
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4554
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4555
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4556
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4557
- </div>
4558
- </td>
4559
- </tr>
4560
- </tbody>
4561
-
4562
- <tbody class="pf-m-expanded" role="rowgroup">
4563
- <tr role="row">
4564
- <td class="pf-c-table__toggle" role="cell">
4565
- <button
4566
- class="pf-c-button pf-m-plain pf-m-expanded"
4567
- aria-labelledby="toolbar-expand-all-expanded-table-node5 expandable-toggle5"
4568
- id="expandable-toggle5"
4569
- aria-label="Details"
4570
- aria-controls="toolbar-expand-all-expanded-table-content5"
4571
- aria-expanded="true"
4572
- >
4573
- <div class="pf-c-table__toggle-icon">
4574
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4575
- </div>
4576
- </button>
4577
- </td>
4578
-
4579
- <th role="columnheader" data-label="Repository name">
4580
- <div>
4581
- <div id="toolbar-expand-all-expanded-table-node5">Node 2</div>
4582
- <a href="#">siemur/test-space</a>
4583
- </div>
4584
- </th>
4585
- <td role="cell" data-label="Branches">
4586
- <span>
4587
- <i class="fas fa-code-branch"></i>
4588
- <span>10</span>
4589
- </span>
4590
- </td>
4591
- <td role="cell" data-label="Pull requests">
4592
- <span>
4593
- <i class="fas fa-code"></i>
4594
- <span>5</span>
4595
- </span>
4596
- </td>
4597
- <td role="cell" data-label="Work spaces">
4598
- <span>
4599
- <i class="fas fa-cube"></i>
4600
- <span>8</span>
4601
- </span>
4602
- </td>
4603
- <td role="cell" data-label="Last commit">2 days ago</td>
4604
- <td role="cell" data-label="Action">
4605
- <a href="#">Action link</a>
4606
- </td>
4607
- </tr>
4608
-
4609
- <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
4610
- <td role="cell"></td>
4611
-
4612
- <td
4613
- class
4614
- role="cell"
4615
- colspan="6"
4616
- id="toolbar-expand-all-expanded-table-content5"
4617
- >
4618
- <div class="pf-c-table__expandable-row-content">
4619
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4620
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4621
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4622
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4623
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4624
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4625
- </div>
4626
- </td>
4627
- </tr>
4628
- </tbody>
4629
- </table>
4630
- </section>
4631
- </main>
4632
- </div>
4633
-
4634
- ```