@patternfly/react-core 4.207.0 → 4.208.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.
- package/CHANGELOG.md +11 -0
- package/dist/esm/components/Divider/Divider.d.ts +10 -1
- package/dist/esm/components/Divider/Divider.d.ts.map +1 -1
- package/dist/esm/components/Divider/Divider.js +2 -2
- package/dist/esm/components/Divider/Divider.js.map +1 -1
- package/dist/js/components/Divider/Divider.d.ts +10 -1
- package/dist/js/components/Divider/Divider.d.ts.map +1 -1
- package/dist/js/components/Divider/Divider.js +2 -2
- package/dist/js/components/Divider/Divider.js.map +1 -1
- package/dist/umd/react-core.css +8 -0
- package/dist/umd/react-core.js +2 -2
- package/dist/umd/react-core.min.css +77 -69
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +6 -6
- package/src/components/Divider/Divider.tsx +12 -1
- package/src/components/Divider/__tests__/Divider.test.tsx +5 -1
- package/src/components/Divider/examples/Divider.md +6 -0
- package/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx +19 -0
- package/src/components/Divider/examples/DividerVerticalFlex.tsx +5 -1
- package/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx +6 -1
- package/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +4 -2
- package/src/components/Page/examples/Page.md +17 -7
- package/src/demos/CardDemos.md +108 -21
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-core",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.208.0",
|
|
4
4
|
"description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
"generate": "node scripts/copyStyles.js"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@patternfly/react-icons": "^4.
|
|
38
|
-
"@patternfly/react-styles": "^4.
|
|
39
|
-
"@patternfly/react-tokens": "^4.
|
|
37
|
+
"@patternfly/react-icons": "^4.59.0",
|
|
38
|
+
"@patternfly/react-styles": "^4.58.0",
|
|
39
|
+
"@patternfly/react-tokens": "^4.60.0",
|
|
40
40
|
"focus-trap": "6.2.2",
|
|
41
41
|
"react-dropzone": "9.0.0",
|
|
42
42
|
"tippy.js": "5.1.2",
|
|
43
43
|
"tslib": "^2.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@patternfly/patternfly": "4.192.
|
|
46
|
+
"@patternfly/patternfly": "4.192.4",
|
|
47
47
|
"@rollup/plugin-commonjs": "^21.0.0",
|
|
48
48
|
"@rollup/plugin-node-resolve": "^13.0.0",
|
|
49
49
|
"@rollup/plugin-replace": "^3.0.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react": "^16.8.0 || ^17.0.0",
|
|
61
61
|
"react-dom": "^16.8.0 || ^17.0.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "59b129df4098359eed9dc2c2cb7e67ef1f000136"
|
|
64
64
|
}
|
|
@@ -14,7 +14,7 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
|
|
|
14
14
|
className?: string;
|
|
15
15
|
/** The component type to use */
|
|
16
16
|
component?: 'hr' | 'li' | 'div';
|
|
17
|
-
/** Flag to indicate the divider is vertical (must be in a flex layout) */
|
|
17
|
+
/** @deprecated Use `orientation` instead. Flag to indicate the divider is vertical (must be in a flex layout) */
|
|
18
18
|
isVertical?: boolean;
|
|
19
19
|
/** Insets at various breakpoints. */
|
|
20
20
|
inset?: {
|
|
@@ -25,6 +25,15 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
|
|
|
25
25
|
xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
|
|
26
26
|
'2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
|
|
27
27
|
};
|
|
28
|
+
/** Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout. */
|
|
29
|
+
orientation?: {
|
|
30
|
+
default?: 'vertical' | 'horizontal';
|
|
31
|
+
sm?: 'vertical' | 'horizontal';
|
|
32
|
+
md?: 'vertical' | 'horizontal';
|
|
33
|
+
lg?: 'vertical' | 'horizontal';
|
|
34
|
+
xl?: 'vertical' | 'horizontal';
|
|
35
|
+
'2xl'?: 'vertical' | 'horizontal';
|
|
36
|
+
};
|
|
28
37
|
}
|
|
29
38
|
|
|
30
39
|
export const Divider: React.FunctionComponent<DividerProps> = ({
|
|
@@ -32,6 +41,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
|
|
|
32
41
|
component = DividerVariant.hr,
|
|
33
42
|
isVertical = false,
|
|
34
43
|
inset,
|
|
44
|
+
orientation,
|
|
35
45
|
...props
|
|
36
46
|
}: DividerProps) => {
|
|
37
47
|
const Component: any = component;
|
|
@@ -42,6 +52,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
|
|
|
42
52
|
styles.divider,
|
|
43
53
|
isVertical && styles.modifiers.vertical,
|
|
44
54
|
formatBreakpointMods(inset, styles),
|
|
55
|
+
formatBreakpointMods(orientation, styles),
|
|
45
56
|
className
|
|
46
57
|
)}
|
|
47
58
|
{...(component !== 'hr' && { role: 'separator' })}
|
|
@@ -22,7 +22,11 @@ test('vertical divider', () => {
|
|
|
22
22
|
const { asFragment } = render(
|
|
23
23
|
<Flex>
|
|
24
24
|
<FlexItem>first item</FlexItem>
|
|
25
|
-
<Divider
|
|
25
|
+
<Divider
|
|
26
|
+
orientation={{
|
|
27
|
+
default: 'vertical'
|
|
28
|
+
}}
|
|
29
|
+
/>
|
|
26
30
|
<FlexItem>second item</FlexItem>
|
|
27
31
|
</Flex>
|
|
28
32
|
);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Divider, Flex, FlexItem } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => (
|
|
5
|
+
<Flex>
|
|
6
|
+
<FlexItem>first item</FlexItem>
|
|
7
|
+
<Divider
|
|
8
|
+
orientation={{
|
|
9
|
+
default: 'vertical',
|
|
10
|
+
sm: 'horizontal',
|
|
11
|
+
md: 'vertical',
|
|
12
|
+
lg: 'horizontal',
|
|
13
|
+
xl: 'vertical',
|
|
14
|
+
'2xl': 'horizontal'
|
|
15
|
+
}}
|
|
16
|
+
/>
|
|
17
|
+
<FlexItem>second item</FlexItem>
|
|
18
|
+
</Flex>
|
|
19
|
+
);
|
|
@@ -4,7 +4,11 @@ import { Divider, Flex, FlexItem } from '@patternfly/react-core';
|
|
|
4
4
|
export const DividerVerticalFlex: React.FunctionComponent = () => (
|
|
5
5
|
<Flex>
|
|
6
6
|
<FlexItem>first item</FlexItem>
|
|
7
|
-
<Divider
|
|
7
|
+
<Divider
|
|
8
|
+
orientation={{
|
|
9
|
+
default: 'vertical'
|
|
10
|
+
}}
|
|
11
|
+
/>
|
|
8
12
|
<FlexItem>second item</FlexItem>
|
|
9
13
|
</Flex>
|
|
10
14
|
);
|
|
@@ -4,7 +4,12 @@ import { Divider, Flex, FlexItem } from '@patternfly/react-core';
|
|
|
4
4
|
export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
|
|
5
5
|
<Flex>
|
|
6
6
|
<FlexItem>first item</FlexItem>
|
|
7
|
-
<Divider
|
|
7
|
+
<Divider
|
|
8
|
+
orientation={{
|
|
9
|
+
default: 'vertical'
|
|
10
|
+
}}
|
|
11
|
+
inset={{ default: 'insetMd' }}
|
|
12
|
+
/>
|
|
8
13
|
<FlexItem>second item</FlexItem>
|
|
9
14
|
</Flex>
|
|
10
15
|
);
|
|
@@ -5,7 +5,9 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
|
|
|
5
5
|
<Flex>
|
|
6
6
|
<FlexItem>first item</FlexItem>
|
|
7
7
|
<Divider
|
|
8
|
-
|
|
8
|
+
orientation={{
|
|
9
|
+
default: 'vertical'
|
|
10
|
+
}}
|
|
9
11
|
inset={{
|
|
10
12
|
default: 'insetMd',
|
|
11
13
|
md: 'insetNone',
|
|
@@ -13,6 +15,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
|
|
|
13
15
|
xl: 'insetXs'
|
|
14
16
|
}}
|
|
15
17
|
/>
|
|
16
|
-
<FlexItem>
|
|
18
|
+
<FlexItem>second item</FlexItem>
|
|
17
19
|
</Flex>
|
|
18
20
|
);
|
|
@@ -264,11 +264,10 @@ class FillPage extends React.Component {
|
|
|
264
264
|
return (
|
|
265
265
|
<Page header={Header} sidebar={Sidebar}>
|
|
266
266
|
<PageSection>A default page section</PageSection>
|
|
267
|
-
<PageSection isFilled={true}>
|
|
268
|
-
This section fills the available space.
|
|
269
|
-
</PageSection>
|
|
267
|
+
<PageSection isFilled={true}>This section fills the available space.</PageSection>
|
|
270
268
|
<PageSection isFilled={false}>
|
|
271
|
-
This section is set to not fill the available space, since the last page section is set to fill the available
|
|
269
|
+
This section is set to not fill the available space, since the last page section is set to fill the available
|
|
270
|
+
space by default.
|
|
272
271
|
</PageSection>
|
|
273
272
|
</Page>
|
|
274
273
|
);
|
|
@@ -590,7 +589,7 @@ class VerticalPage extends React.Component {
|
|
|
590
589
|
}
|
|
591
590
|
```
|
|
592
591
|
|
|
593
|
-
### Centered
|
|
592
|
+
### Centered section
|
|
594
593
|
|
|
595
594
|
```js
|
|
596
595
|
import React from 'react';
|
|
@@ -607,7 +606,9 @@ import {
|
|
|
607
606
|
PageToggleButton,
|
|
608
607
|
Toolbar,
|
|
609
608
|
ToolbarContent,
|
|
610
|
-
ToolbarItem
|
|
609
|
+
ToolbarItem,
|
|
610
|
+
Card,
|
|
611
|
+
CardBody
|
|
611
612
|
} from '@patternfly/react-core';
|
|
612
613
|
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
613
614
|
|
|
@@ -639,7 +640,16 @@ CenterAlignedPageSection = () => {
|
|
|
639
640
|
return (
|
|
640
641
|
<Page header={Header}>
|
|
641
642
|
<PageSection isWidthLimited isCenterAligned>
|
|
642
|
-
|
|
643
|
+
<Card>
|
|
644
|
+
<CardBody>
|
|
645
|
+
When a width limited page section is wider than the value of
|
|
646
|
+
<code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
|
|
647
|
+
<br />
|
|
648
|
+
<br />
|
|
649
|
+
The content in this example is placed in a card to better illustrate how the section behaves when it is
|
|
650
|
+
centered. A card is not required to center a page section.
|
|
651
|
+
</CardBody>
|
|
652
|
+
</Card>
|
|
643
653
|
</PageSection>
|
|
644
654
|
</Page>
|
|
645
655
|
);
|
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 &&
|
|
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
|
|
1259
|
-
<
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
2448
|
-
<
|
|
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
|
|
2630
|
-
<
|
|
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
|
|
2747
|
-
<
|
|
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">
|