@patternfly/react-core 4.207.0 → 4.208.2

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 (26) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/esm/components/Divider/Divider.d.ts +10 -1
  3. package/dist/esm/components/Divider/Divider.d.ts.map +1 -1
  4. package/dist/esm/components/Divider/Divider.js +2 -2
  5. package/dist/esm/components/Divider/Divider.js.map +1 -1
  6. package/dist/js/components/Divider/Divider.d.ts +10 -1
  7. package/dist/js/components/Divider/Divider.d.ts.map +1 -1
  8. package/dist/js/components/Divider/Divider.js +2 -2
  9. package/dist/js/components/Divider/Divider.js.map +1 -1
  10. package/dist/umd/react-core.css +77 -69
  11. package/dist/umd/react-core.js +2 -2
  12. package/dist/umd/react-core.min.css +77 -69
  13. package/dist/umd/react-core.min.js +1 -1
  14. package/package.json +6 -6
  15. package/src/components/Divider/Divider.tsx +12 -1
  16. package/src/components/Divider/__tests__/Divider.test.tsx +5 -1
  17. package/src/components/Divider/examples/Divider.md +6 -0
  18. package/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx +19 -0
  19. package/src/components/Divider/examples/DividerVerticalFlex.tsx +5 -1
  20. package/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx +6 -1
  21. package/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +4 -2
  22. package/src/components/DragDrop/examples/DragDrop.md +22 -154
  23. package/src/components/DragDrop/examples/DragDropBasic.tsx +53 -0
  24. package/src/components/DragDrop/examples/DragDropMultipleLists.tsx +98 -0
  25. package/src/components/Page/examples/Page.md +17 -7
  26. package/src/demos/CardDemos.md +108 -21
package/src/demos/CardDemos.md CHANGED
@@ -561,7 +561,14 @@ const AggregateStatusCards: React.FunctionComponent = () => {
561
561
  <a href="#">{count}</a>
562
562
  </FlexItem>
563
563
  </Flex>
564
- {content.length > 1 && index === 0 && <Divider key={`${index}_d`} isVertical />}
564
+ {content.length > 1 && index === 0 && (
565
+ <Divider
566
+ key={`${index}_d`}
567
+ orientation={{
568
+ default: 'vertical'
569
+ }}
570
+ />
571
+ )}
565
572
  </React.Fragment>
566
573
  ))}
567
574
  </Flex>
@@ -1255,8 +1262,10 @@ const UtilizationCard3: React.FunctionComponent = () => {
1255
1262
 
1256
1263
  return (
1257
1264
  <React.Fragment>
1258
- <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
1259
- <br /><br />
1265
+ <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
1266
+ <code>baseline</code> alignment.
1267
+ <br />
1268
+ <br />
1260
1269
  <Gallery hasGutter minWidths={{ default: '360px' }}>
1261
1270
  <GalleryItem>
1262
1271
  <Card id="utilization-card-1" component="div">
@@ -1507,7 +1516,13 @@ CardNestedDemo = () => {
1507
1516
  <FlexItem>
1508
1517
  <b>Temperature</b>
1509
1518
  </FlexItem>
1510
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
1519
+ <Divider
1520
+ className="pf-u-hidden-on-md"
1521
+ orientation={{
1522
+ default: 'vertical'
1523
+ }}
1524
+ inset={{ default: 'insetSm' }}
1525
+ />
1511
1526
  <FlexItem>
1512
1527
  <span>64C</span>
1513
1528
  </FlexItem>
@@ -1571,7 +1586,13 @@ CardNestedDemo = () => {
1571
1586
  <FlexItem>
1572
1587
  <b>Speed</b>
1573
1588
  </FlexItem>
1574
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
1589
+ <Divider
1590
+ className="pf-u-hidden-on-md"
1591
+ orientation={{
1592
+ default: 'vertical'
1593
+ }}
1594
+ inset={{ default: 'insetSm' }}
1595
+ />
1575
1596
  <FlexItem>
1576
1597
  <span>2.3Ghz</span>
1577
1598
  </FlexItem>
@@ -1656,7 +1677,13 @@ CardNestedDemo = () => {
1656
1677
  <FlexItem>
1657
1678
  <b>Temperature</b>
1658
1679
  </FlexItem>
1659
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
1680
+ <Divider
1681
+ className="pf-u-hidden-on-md"
1682
+ orientation={{
1683
+ default: 'vertical'
1684
+ }}
1685
+ inset={{ default: 'insetSm' }}
1686
+ />
1660
1687
  <FlexItem>
1661
1688
  <span>64C</span>
1662
1689
  </FlexItem>
@@ -1720,7 +1747,13 @@ CardNestedDemo = () => {
1720
1747
  <FlexItem>
1721
1748
  <b>Speed</b>
1722
1749
  </FlexItem>
1723
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
1750
+ <Divider
1751
+ className="pf-u-hidden-on-md"
1752
+ orientation={{
1753
+ default: 'vertical'
1754
+ }}
1755
+ inset={{ default: 'insetSm' }}
1756
+ />
1724
1757
  <FlexItem>
1725
1758
  <span>2.3Ghz</span>
1726
1759
  </FlexItem>
@@ -1805,7 +1838,13 @@ CardNestedDemo = () => {
1805
1838
  <FlexItem>
1806
1839
  <b>Temperature</b>
1807
1840
  </FlexItem>
1808
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
1841
+ <Divider
1842
+ className="pf-u-hidden-on-md"
1843
+ orientation={{
1844
+ default: 'vertical'
1845
+ }}
1846
+ inset={{ default: 'insetSm' }}
1847
+ />
1809
1848
  <FlexItem>
1810
1849
  <span>64C</span>
1811
1850
  </FlexItem>
@@ -1869,7 +1908,13 @@ CardNestedDemo = () => {
1869
1908
  <FlexItem>
1870
1909
  <b>Speed</b>
1871
1910
  </FlexItem>
1872
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
1911
+ <Divider
1912
+ className="pf-u-hidden-on-md"
1913
+ orientation={{
1914
+ default: 'vertical'
1915
+ }}
1916
+ inset={{ default: 'insetSm' }}
1917
+ />
1873
1918
  <FlexItem>
1874
1919
  <span>2.3Ghz</span>
1875
1920
  </FlexItem>
@@ -1994,7 +2039,13 @@ const AccordionCard: React.FunctionComponent = () => {
1994
2039
  <FlexItem>
1995
2040
  <b>Temperature</b>
1996
2041
  </FlexItem>
1997
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
2042
+ <Divider
2043
+ className="pf-u-hidden-on-md"
2044
+ orientation={{
2045
+ default: 'vertical'
2046
+ }}
2047
+ inset={{ default: 'insetSm' }}
2048
+ />
1998
2049
  <FlexItem>
1999
2050
  <span>64C</span>
2000
2051
  </FlexItem>
@@ -2058,7 +2109,13 @@ const AccordionCard: React.FunctionComponent = () => {
2058
2109
  <FlexItem>
2059
2110
  <b>Speed</b>
2060
2111
  </FlexItem>
2061
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
2112
+ <Divider
2113
+ className="pf-u-hidden-on-md"
2114
+ orientation={{
2115
+ default: 'vertical'
2116
+ }}
2117
+ inset={{ default: 'insetSm' }}
2118
+ />
2062
2119
  <FlexItem>
2063
2120
  <span>2.3Ghz</span>
2064
2121
  </FlexItem>
@@ -2140,7 +2197,13 @@ const AccordionCard: React.FunctionComponent = () => {
2140
2197
  <FlexItem>
2141
2198
  <b>Temperature</b>
2142
2199
  </FlexItem>
2143
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
2200
+ <Divider
2201
+ className="pf-u-hidden-on-md"
2202
+ orientation={{
2203
+ default: 'vertical'
2204
+ }}
2205
+ inset={{ default: 'insetSm' }}
2206
+ />
2144
2207
  <FlexItem>
2145
2208
  <span>64C</span>
2146
2209
  </FlexItem>
@@ -2204,7 +2267,13 @@ const AccordionCard: React.FunctionComponent = () => {
2204
2267
  <FlexItem>
2205
2268
  <b>Speed</b>
2206
2269
  </FlexItem>
2207
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
2270
+ <Divider
2271
+ className="pf-u-hidden-on-md"
2272
+ orientation={{
2273
+ default: 'vertical'
2274
+ }}
2275
+ inset={{ default: 'insetSm' }}
2276
+ />
2208
2277
  <FlexItem>
2209
2278
  <span>2.3Ghz</span>
2210
2279
  </FlexItem>
@@ -2286,7 +2355,13 @@ const AccordionCard: React.FunctionComponent = () => {
2286
2355
  <FlexItem>
2287
2356
  <b>Temperature</b>
2288
2357
  </FlexItem>
2289
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
2358
+ <Divider
2359
+ className="pf-u-hidden-on-md"
2360
+ orientation={{
2361
+ default: 'vertical'
2362
+ }}
2363
+ inset={{ default: 'insetSm' }}
2364
+ />
2290
2365
  <FlexItem>
2291
2366
  <span>64C</span>
2292
2367
  </FlexItem>
@@ -2350,7 +2425,13 @@ const AccordionCard: React.FunctionComponent = () => {
2350
2425
  <FlexItem>
2351
2426
  <b>Speed</b>
2352
2427
  </FlexItem>
2353
- <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
2428
+ <Divider
2429
+ className="pf-u-hidden-on-md"
2430
+ orientation={{
2431
+ default: 'vertical'
2432
+ }}
2433
+ inset={{ default: 'insetSm' }}
2434
+ />
2354
2435
  <FlexItem>
2355
2436
  <span>2.3Ghz</span>
2356
2437
  </FlexItem>
@@ -2444,8 +2525,10 @@ const TrendCard1: React.FunctionComponent = () => {
2444
2525
  ];
2445
2526
  return (
2446
2527
  <React.Fragment>
2447
- <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
2448
- <br /><br />
2528
+ <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
2529
+ <code>baseline</code> alignment.
2530
+ <br />
2531
+ <br />
2449
2532
  <Gallery hasGutter minWidths={{ default: '360px' }}>
2450
2533
  <GalleryItem>
2451
2534
  <Card id="trend-card-1" component="div">
@@ -2626,8 +2709,10 @@ CardLogViewDemo = () => {
2626
2709
 
2627
2710
  return (
2628
2711
  <React.Fragment>
2629
- <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
2630
- <br /><br />
2712
+ <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
2713
+ <code>baseline</code> alignment.
2714
+ <br />
2715
+ <br />
2631
2716
  <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
2632
2717
  <Card id="card-log-view-example">
2633
2718
  <CardHeader className="pf-u-align-items-flex-start">
@@ -2743,8 +2828,10 @@ CardEventViewDemo = () => {
2743
2828
 
2744
2829
  return (
2745
2830
  <React.Fragment>
2746
- <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
2747
- <br /><br />
2831
+ <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
2832
+ <code>baseline</code> alignment.
2833
+ <br />
2834
+ <br />
2748
2835
  <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
2749
2836
  <Card id="card-events-view-example">
2750
2837
  <CardHeader className="pf-u-align-items-flex-start">