patternfly-react/packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx at 08b3ec3f0c0bed73ab7657acfe52360ca7e10043 · patternfly/patternfly-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { Fragment } from 'react';
import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent, Button, SearchInput } from '@patternfly/react-core';

export const ToolbarFlexGrowAndWidths: React.FunctionComponent = () => {
  const flexGrowItems = (
    <Fragment>
      <ToolbarItem>
        <Button variant="secondary">Item 1</Button>
      </ToolbarItem>
      <ToolbarItem flexGrow={{ default: 'flexGrow' }}>
        <SearchInput aria-label="Flex grow search input" />
      </ToolbarItem>
      <ToolbarItem>
        <Button variant="secondary">Item 2</Button>
      </ToolbarItem>
    </Fragment>
  );

  const flexGrowGroupItems = (
    <Fragment>
      <ToolbarGroup>
        <ToolbarItem>
          <Button variant="secondary">Item 1</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button variant="secondary">Item 2</Button>
        </ToolbarItem>
      </ToolbarGroup>
      <ToolbarGroup flexGrow={{ default: 'flexGrow' }}>
        <ToolbarItem>
          <Button variant="secondary">Flex grow group item 1</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button variant="secondary">Flex grow group item 2</Button>
        </ToolbarItem>
      </ToolbarGroup>
      <ToolbarGroup>
        <ToolbarItem>
          <Button variant="secondary">Item 3</Button>
        </ToolbarItem>
      </ToolbarGroup>
    </Fragment>
  );

  const widthItems = (
    <Fragment>
      <ToolbarItem widths={{ default: '200px' }}>
        <SearchInput aria-label="Search input with fixed width" />
      </ToolbarItem>
      <ToolbarItem>
        <Button variant="secondary">Regular item</Button>
      </ToolbarItem>
      <ToolbarItem widths={{ default: '300px' }}>
        <SearchInput aria-label="Search input with wider fixed width" />
      </ToolbarItem>
    </Fragment>
  );

  const responsiveWidthItems = (
    <Fragment>
      <ToolbarItem widths={{ default: '100px', md: '200px', xl: '300px' }}>
        <SearchInput aria-label="Search input with responsive width" />
      </ToolbarItem>
      <ToolbarItem>
        <Button variant="secondary">Regular item</Button>
      </ToolbarItem>
    </Fragment>
  );

  return (
    <>
      Using flexGrow on ToolbarItem
      <br />
      <br />
      <Toolbar id="toolbar-flex-grow-item">
        <ToolbarContent>{flexGrowItems}</ToolbarContent>
      </Toolbar>
      <br />
      <br />
      Using flexGrow on ToolbarGroup
      <br />
      <br />
      <Toolbar id="toolbar-flex-grow-group">
        <ToolbarContent>{flexGrowGroupItems}</ToolbarContent>
      </Toolbar>
      <br />
      <br />
      Using widths on ToolbarItem
      <br />
      <br />
      <Toolbar id="toolbar-widths">
        <ToolbarContent>{widthItems}</ToolbarContent>
      </Toolbar>
      <br />
      <br />
      Using responsive widths on ToolbarItem
      <br />
      <br />
      <Toolbar id="toolbar-responsive-widths">
        <ToolbarContent>{responsiveWidthItems}</ToolbarContent>
      </Toolbar>
    </>
  );
};