@patternfly/patternfly 6.0.0-alpha.72 → 6.0.0-alpha.73

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 (9) hide show
  1. package/components/Divider/divider.css +8 -6
  2. package/components/Divider/divider.scss +3 -1
  3. package/docs/components/Divider/examples/Divider.md +26 -0
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +8 -6
  6. package/patternfly-theme-dark-unversioned.css +8 -6
  7. package/patternfly.css +8 -6
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Divider/divider.css CHANGED
@@ -60,7 +60,9 @@
60
60
  width: 100%;
61
61
  height: var(--pf-v5-c-divider--Size);
62
62
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
63
+ flex-shrink: 0;
63
64
  align-items: stretch;
65
+ align-self: stretch;
64
66
  justify-content: center;
65
67
  border: 0;
66
68
  }
@@ -77,7 +79,7 @@
77
79
  .pf-v5-c-divider.pf-m-vertical {
78
80
  flex-direction: column;
79
81
  width: var(--pf-v5-c-divider--Size);
80
- height: 100%;
82
+ height: inherit;
81
83
  }
82
84
  .pf-v5-c-divider.pf-m-inset-none {
83
85
  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -115,7 +117,7 @@
115
117
  .pf-v5-c-divider.pf-m-vertical-on-sm {
116
118
  flex-direction: column;
117
119
  width: var(--pf-v5-c-divider--Size);
118
- height: 100%;
120
+ height: inherit;
119
121
  }
120
122
  }
121
123
  @media (min-width: 576px) {
@@ -155,7 +157,7 @@
155
157
  .pf-v5-c-divider.pf-m-vertical-on-md {
156
158
  flex-direction: column;
157
159
  width: var(--pf-v5-c-divider--Size);
158
- height: 100%;
160
+ height: inherit;
159
161
  }
160
162
  }
161
163
  @media (min-width: 768px) {
@@ -195,7 +197,7 @@
195
197
  .pf-v5-c-divider.pf-m-vertical-on-lg {
196
198
  flex-direction: column;
197
199
  width: var(--pf-v5-c-divider--Size);
198
- height: 100%;
200
+ height: inherit;
199
201
  }
200
202
  }
201
203
  @media (min-width: 992px) {
@@ -235,7 +237,7 @@
235
237
  .pf-v5-c-divider.pf-m-vertical-on-xl {
236
238
  flex-direction: column;
237
239
  width: var(--pf-v5-c-divider--Size);
238
- height: 100%;
240
+ height: inherit;
239
241
  }
240
242
  }
241
243
  @media (min-width: 1200px) {
@@ -275,7 +277,7 @@
275
277
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
276
278
  flex-direction: column;
277
279
  width: var(--pf-v5-c-divider--Size);
278
- height: 100%;
280
+ height: inherit;
279
281
  }
280
282
  }
281
283
  @media (min-width: 1450px) {
package/components/Divider/divider.scss CHANGED
@@ -13,7 +13,7 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
13
13
  @mixin pf-v5-c-divider--m-vertical {
14
14
  flex-direction: column;
15
15
  width: var(--#{$divider}--Size); // apply size to width in vertical orientation
16
- height: 100%;
16
+ height: inherit;
17
17
  }
18
18
 
19
19
  :root,
@@ -32,7 +32,9 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
32
32
  @include pf-v5-c-divider--m-horizontal; // default, set to orientation to horizontal
33
33
  @include pf-v5-hidden-visible(var(--#{$divider}--Display));
34
34
 
35
+ flex-shrink: 0;
35
36
  align-items: stretch;
37
+ align-self: stretch;
36
38
  justify-content: center;
37
39
  border: 0; // removes the default border styling on an hr
38
40
 
package/docs/components/Divider/examples/Divider.md CHANGED
@@ -91,6 +91,32 @@ cssPrefix: pf-v5-c-divider
91
91
 
92
92
  ```
93
93
 
94
+ ### In flex layout
95
+
96
+ ```html
97
+ <strong>Horizontal</strong>
98
+ <br />
99
+ <br />
100
+ <div class="pf-v5-l-flex">
101
+ <div class="pf-v5-l-flex__item">item 1</div>
102
+
103
+ <div class="pf-v5-c-divider pf-m-vertical" role="separator"></div>
104
+ <div class="pf-v5-l-flex__item">item 1</div>
105
+ </div>
106
+ <br />
107
+ <br />
108
+ <strong>Vertical</strong>
109
+ <br />
110
+ <br />
111
+ <div class="pf-v5-l-flex pf-m-column">
112
+ <div class="pf-v5-l-flex__item">item 1</div>
113
+
114
+ <div class="pf-v5-c-divider" role="separator"></div>
115
+ <div class="pf-v5-l-flex__item">item 1</div>
116
+ </div>
117
+
118
+ ```
119
+
94
120
  ## Documentation
95
121
 
96
122
  ### Overview
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": "6.0.0-alpha.72",
4
+ "version": "6.0.0-alpha.73",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -14354,7 +14354,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14354
14354
  width: 100%;
14355
14355
  height: var(--pf-v5-c-divider--Size);
14356
14356
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
14357
+ flex-shrink: 0;
14357
14358
  align-items: stretch;
14359
+ align-self: stretch;
14358
14360
  justify-content: center;
14359
14361
  border: 0;
14360
14362
  }
@@ -14371,7 +14373,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14371
14373
  .pf-v5-c-divider.pf-m-vertical {
14372
14374
  flex-direction: column;
14373
14375
  width: var(--pf-v5-c-divider--Size);
14374
- height: 100%;
14376
+ height: inherit;
14375
14377
  }
14376
14378
  .pf-v5-c-divider.pf-m-inset-none {
14377
14379
  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -14409,7 +14411,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14409
14411
  .pf-v5-c-divider.pf-m-vertical-on-sm {
14410
14412
  flex-direction: column;
14411
14413
  width: var(--pf-v5-c-divider--Size);
14412
- height: 100%;
14414
+ height: inherit;
14413
14415
  }
14414
14416
  }
14415
14417
  @media (min-width: 576px) {
@@ -14449,7 +14451,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14449
14451
  .pf-v5-c-divider.pf-m-vertical-on-md {
14450
14452
  flex-direction: column;
14451
14453
  width: var(--pf-v5-c-divider--Size);
14452
- height: 100%;
14454
+ height: inherit;
14453
14455
  }
14454
14456
  }
14455
14457
  @media (min-width: 768px) {
@@ -14489,7 +14491,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14489
14491
  .pf-v5-c-divider.pf-m-vertical-on-lg {
14490
14492
  flex-direction: column;
14491
14493
  width: var(--pf-v5-c-divider--Size);
14492
- height: 100%;
14494
+ height: inherit;
14493
14495
  }
14494
14496
  }
14495
14497
  @media (min-width: 992px) {
@@ -14529,7 +14531,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14529
14531
  .pf-v5-c-divider.pf-m-vertical-on-xl {
14530
14532
  flex-direction: column;
14531
14533
  width: var(--pf-v5-c-divider--Size);
14532
- height: 100%;
14534
+ height: inherit;
14533
14535
  }
14534
14536
  }
14535
14537
  @media (min-width: 1200px) {
@@ -14569,7 +14571,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14569
14571
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
14570
14572
  flex-direction: column;
14571
14573
  width: var(--pf-v5-c-divider--Size);
14572
- height: 100%;
14574
+ height: inherit;
14573
14575
  }
14574
14576
  }
14575
14577
  @media (min-width: 1450px) {
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -14471,7 +14471,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14471
14471
  width: 100%;
14472
14472
  height: var(--pf-v5-c-divider--Size);
14473
14473
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
14474
+ flex-shrink: 0;
14474
14475
  align-items: stretch;
14476
+ align-self: stretch;
14475
14477
  justify-content: center;
14476
14478
  border: 0;
14477
14479
  }
@@ -14488,7 +14490,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14488
14490
  .pf-v5-c-divider.pf-m-vertical {
14489
14491
  flex-direction: column;
14490
14492
  width: var(--pf-v5-c-divider--Size);
14491
- height: 100%;
14493
+ height: inherit;
14492
14494
  }
14493
14495
  .pf-v5-c-divider.pf-m-inset-none {
14494
14496
  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -14526,7 +14528,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14526
14528
  .pf-v5-c-divider.pf-m-vertical-on-sm {
14527
14529
  flex-direction: column;
14528
14530
  width: var(--pf-v5-c-divider--Size);
14529
- height: 100%;
14531
+ height: inherit;
14530
14532
  }
14531
14533
  }
14532
14534
  @media (min-width: 576px) {
@@ -14566,7 +14568,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14566
14568
  .pf-v5-c-divider.pf-m-vertical-on-md {
14567
14569
  flex-direction: column;
14568
14570
  width: var(--pf-v5-c-divider--Size);
14569
- height: 100%;
14571
+ height: inherit;
14570
14572
  }
14571
14573
  }
14572
14574
  @media (min-width: 768px) {
@@ -14606,7 +14608,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14606
14608
  .pf-v5-c-divider.pf-m-vertical-on-lg {
14607
14609
  flex-direction: column;
14608
14610
  width: var(--pf-v5-c-divider--Size);
14609
- height: 100%;
14611
+ height: inherit;
14610
14612
  }
14611
14613
  }
14612
14614
  @media (min-width: 992px) {
@@ -14646,7 +14648,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14646
14648
  .pf-v5-c-divider.pf-m-vertical-on-xl {
14647
14649
  flex-direction: column;
14648
14650
  width: var(--pf-v5-c-divider--Size);
14649
- height: 100%;
14651
+ height: inherit;
14650
14652
  }
14651
14653
  }
14652
14654
  @media (min-width: 1200px) {
@@ -14686,7 +14688,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14686
14688
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
14687
14689
  flex-direction: column;
14688
14690
  width: var(--pf-v5-c-divider--Size);
14689
- height: 100%;
14691
+ height: inherit;
14690
14692
  }
14691
14693
  }
14692
14694
  @media (min-width: 1450px) {
package/patternfly.css CHANGED
@@ -14471,7 +14471,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14471
14471
  width: 100%;
14472
14472
  height: var(--pf-v5-c-divider--Size);
14473
14473
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
14474
+ flex-shrink: 0;
14474
14475
  align-items: stretch;
14476
+ align-self: stretch;
14475
14477
  justify-content: center;
14476
14478
  border: 0;
14477
14479
  }
@@ -14488,7 +14490,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14488
14490
  .pf-v5-c-divider.pf-m-vertical {
14489
14491
  flex-direction: column;
14490
14492
  width: var(--pf-v5-c-divider--Size);
14491
- height: 100%;
14493
+ height: inherit;
14492
14494
  }
14493
14495
  .pf-v5-c-divider.pf-m-inset-none {
14494
14496
  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -14526,7 +14528,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14526
14528
  .pf-v5-c-divider.pf-m-vertical-on-sm {
14527
14529
  flex-direction: column;
14528
14530
  width: var(--pf-v5-c-divider--Size);
14529
- height: 100%;
14531
+ height: inherit;
14530
14532
  }
14531
14533
  }
14532
14534
  @media (min-width: 576px) {
@@ -14566,7 +14568,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14566
14568
  .pf-v5-c-divider.pf-m-vertical-on-md {
14567
14569
  flex-direction: column;
14568
14570
  width: var(--pf-v5-c-divider--Size);
14569
- height: 100%;
14571
+ height: inherit;
14570
14572
  }
14571
14573
  }
14572
14574
  @media (min-width: 768px) {
@@ -14606,7 +14608,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14606
14608
  .pf-v5-c-divider.pf-m-vertical-on-lg {
14607
14609
  flex-direction: column;
14608
14610
  width: var(--pf-v5-c-divider--Size);
14609
- height: 100%;
14611
+ height: inherit;
14610
14612
  }
14611
14613
  }
14612
14614
  @media (min-width: 992px) {
@@ -14646,7 +14648,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14646
14648
  .pf-v5-c-divider.pf-m-vertical-on-xl {
14647
14649
  flex-direction: column;
14648
14650
  width: var(--pf-v5-c-divider--Size);
14649
- height: 100%;
14651
+ height: inherit;
14650
14652
  }
14651
14653
  }
14652
14654
  @media (min-width: 1200px) {
@@ -14686,7 +14688,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14686
14688
  .pf-v5-c-divider.pf-m-vertical-on-2xl {
14687
14689
  flex-direction: column;
14688
14690
  width: var(--pf-v5-c-divider--Size);
14689
- height: 100%;
14691
+ height: inherit;
14690
14692
  }
14691
14693
  }
14692
14694
  @media (min-width: 1450px) {