@patternfly/react-core 5.0.0-alpha.62 → 5.0.0-alpha.63

package/src/demos/CardDemos.md

@@ -1254,7 +1254,10 @@ import {
   StackItem,
   Divider,
   Select,
-  SelectOption
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
@@ -1266,21 +1269,32 @@ import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_r
 const UtilizationCard3: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const selectItems = [
-    <SelectOption value="Last hour" key="option1" />,
-    <SelectOption value="Last 6 hours" key="option2" />,
-    <SelectOption value="Last 24 hours" key="option3" />,
-    <SelectOption value="Last 7 days" key="option4" />
-  ];
+  const selectItems = (
+    <SelectList>
+      <SelectOption key="option1" itemId="Last hour">Last hour</SelectOption>
+      <SelectOption key="option2" itemId="Last 6 hours">Last 6 hours</SelectOption>
+      <SelectOption key="option3" itemId="Last 24 hours">Last 24 hours</SelectOption>
+      <SelectOption key="option4" itemId="Last 7 days">Last 7 days</SelectOption>
+    </SelectList>
+  );
+  
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      variant="plainText"
+    >
+      Filter
+    </MenuToggle>
+  );
 
   const headerActions = (
     <Select
       onSelect={() => setIsOpen(!isOpen)}
-      onToggle={() => setIsOpen(!isOpen)}
+      onOpenChange={setIsOpen}
       isOpen={isOpen}
-      placeholderText="Filter"
-      position="right"
-      isPlain
+      toggle={toggle}
     >
       {selectItems}
     </Select>
@@ -1454,7 +1468,6 @@ import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-ch
   </GalleryItem>
 </Gallery>;
 ```
-
 ### Nested cards
 
 ```js
@@ -2523,28 +2536,42 @@ import {
   FlexItem,
   Divider,
   Select,
-  SelectOption
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
 import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts';
 
 const TrendCard1: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const selectItems = [
-    <SelectOption value="Last hour" key="option1" />,
-    <SelectOption value="Last 6 hours" key="option2" />,
-    <SelectOption value="Last 24 hours" key="option3" />,
-    <SelectOption value="Last 7 days" key="option4" />
-  ];
+  const selectItems = (
+    <SelectList>
+      <SelectOption key="option1" itemId="Last hour">Last hour</SelectOption>
+      <SelectOption key="option2" itemId="Last 6 hours">Last 6 hours</SelectOption>
+      <SelectOption key="option3" itemId="Last 24 hours">Last 24 hours</SelectOption>
+      <SelectOption key="option4" itemId="Last 7 days">Last 7 days</SelectOption>
+    </SelectList>
+  );
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      variant="plainText"
+    >
+      Filter
+    </MenuToggle>
+  );
 
   const headerActions = (
     <Select
       onSelect={() => setIsOpen(!isOpen)}
-      onToggle={() => setIsOpen(!isOpen)}
-      placeholderText="Filter"
+      onOpenChange={setIsOpen}
       isOpen={isOpen}
-      position="right"
-      isPlain
+      toggle={toggle}
     >
       {selectItems}
     </Select>
@@ -2701,8 +2728,10 @@ import {
   DescriptionListTerm,
   DescriptionListDescription,
   Select,
+  SelectList,
   SelectOption,
-  Divider
+  Divider,
+  MenuToggle
 } from '@patternfly/react-core';
 
 CardLogViewDemo = () => {
@@ -2716,21 +2745,32 @@ CardLogViewDemo = () => {
     setIsOpen(isOpen);
   };
 
-  const selectItems = [
-    <SelectOption value="Most recent" key="option1" />,
-    <SelectOption value="Last 6 hours" key="option2" />,
-    <SelectOption value="Last 24 hours" key="option3" />,
-    <SelectOption value="Last 7 days" key="option4" />
-  ];
+  const selectItems = (
+    <SelectList>
+      <SelectOption key="option1" itemId="Last hour">Last hour</SelectOption>
+      <SelectOption key="option2" itemId="Last 6 hours">Last 6 hours</SelectOption>
+      <SelectOption key="option3" itemId="Last 24 hours">Last 24 hours</SelectOption>
+      <SelectOption key="option4" itemId="Last 7 days">Last 7 days</SelectOption>
+    </SelectList>
+  );
+
+  const toggle = (toggleRef) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      variant="plainText"
+    >
+      Filter
+    </MenuToggle>
+  );
 
   const headerActions = (
     <Select
-      onSelect={onActionSelect}
-      onToggle={onActionToggle}
-      placeholderText="Most recent"
+      onSelect={() => setIsOpen(!isOpen)}
+      onOpenChange={setIsOpen}
       isOpen={isOpen}
-      position="right"
-      isPlain
+      toggle={toggle}
     >
       {selectItems}
     </Select>
@@ -2819,8 +2859,10 @@ import {
   DescriptionListDescription,
   Spinner,
   Select,
+  SelectList,
   SelectOption,
-  Divider
+  Divider,
+  MenuToggle
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -2836,20 +2878,31 @@ CardEventViewDemo = () => {
     setIsOpen(isOpen);
   };
 
-  const selectItems = [
-    <SelectOption value="Success" key="option1" />,
-    <SelectOption value="Error" key="option2" />,
-    <SelectOption value="Warning" key="option3" />
-  ];
+  const selectItems = (
+    <SelectList>
+      <SelectOption itemId="Success" key="option1">Success</SelectOption>
+      <SelectOption itemId="Error" key="option2">Error</SelectOption>
+      <SelectOption itemId="Warning" key="option3">Error</SelectOption>
+    </SelectList>
+  );
+
+  const toggle = (toggleRef) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      variant="plainText"
+    >
+      Status
+    </MenuToggle>
+  );
 
   const headerActions = (
     <Select
-      onSelect={onActionSelect}
-      onToggle={onActionToggle}
-      placeholderText="Status"
+      onSelect={() => setIsOpen(!isOpen)}
+      onOpenChange={setIsOpen}
       isOpen={isOpen}
-      position="right"
-      isPlain
+      toggle={toggle}
     >
       {selectItems}
     </Select>

package/src/demos/Toolbar.md

@@ -30,16 +30,22 @@ This is an example of toolbar usage in log viewer.
 
 ```js isFullscreen
 import React from 'react';
-import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core';
 import {
   Badge,
   Button,
   Checkbox,
+  MenuToggle,
   SearchInput,
   Select,
+  SelectList,
   SelectOption,
   PageSection,
   PageSectionVariants,
+  Toolbar,
+  ToolbarContent, 
+  ToolbarGroup, 
+  ToolbarItem, 
+  ToolbarToggleGroup,
   Tooltip
 } from '@patternfly/react-core';
 import {
@@ -90,15 +96,19 @@ class ConsoleLogViewerToolbar extends React.Component {
       mobileView: window.innerWidth >= 1450 ? false : true
     };
 
-    this.onContainerToggle = (_event, isExpanded) => {
-      this.setState({
-        containerExpanded: isExpanded
+    this.onContainerToggle = () => {
+      this.setState(prevState => {
+        return {
+          containerExpanded: !prevState.containerExpanded
+        }
       });
     };
 
-    this.onContainerToggleMobile = (_event, isExpanded) => {
-      this.setState({
-        containerExpandedMobile: isExpanded
+    this.onContainerToggleMobile = () => {
+      this.setState(prevState => {
+        return {
+          containerExpandedMobile: !prevState.containerExpandedMobile
+        }
       });
     };
 
@@ -332,19 +342,19 @@ class ConsoleLogViewerToolbar extends React.Component {
     ];
 
     const selectDropdownContent = (
-      <React.Fragment>
+      <SelectList>
         {Object.entries(this.firstOptions).map(([value, { type }]) => (
           <SelectOption
             key={value}
-            value={value}
+            hasCheckbox
+            itemId={value}
             isSelected={containerSelected === value}
-            isChecked={containerSelected === value}
           >
             <Badge key={value}>{type}</Badge>
             {` ${value}`}
           </SelectOption>
         ))}
-      </React.Fragment>
+      </SelectList>
     );
 
     const selectToggleContent = ({ showText }) => {
@@ -379,13 +389,23 @@ class ConsoleLogViewerToolbar extends React.Component {
       <React.Fragment>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
           <Select
-            onToggle={this.onContainerToggle}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={this.onContainerToggle}
+                isExpanded={containerExpanded}
+                style={{ width: '250px' }}
+              >
+                {selectToggleContent({ showText: true })}
+              </MenuToggle>
+            )}
             onSelect={this.onContainerSelect}
-            selections={containerSelected}
+            onOpenChange={(isOpen) => this.setState({ containerExpanded: isOpen })}
+            selected={containerSelected}
             isOpen={containerExpanded}
-            customContent={selectDropdownContent}
-            placeholderText={selectToggleContent({ showText: true })}
-          />
+          >
+            {selectDropdownContent}
+          </Select>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
           <DropdownDeprecated
@@ -412,13 +432,23 @@ class ConsoleLogViewerToolbar extends React.Component {
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>Select container</div>}>
             <Select
-              onToggle={this.onContainerToggleMobile}
+              role="menu"
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={this.onContainerToggleMobile}
+                  isExpanded={containerExpandedMobile}
+                >
+                  {selectToggleContent({ showText: false })}
+                </MenuToggle>
+              )}
               onSelect={this.onContainerSelectMobile}
-              selections={containerSelected}
+              onOpenChange={(isOpen) => this.setState({ containerExpandedMobile: isOpen })}
+              selected={containerSelected}
               isOpen={containerExpandedMobile}
-              customContent={selectDropdownContent}
-              placeholderText={selectToggleContent({ showText: false })}
-            />
+            >
+              {selectDropdownContent}
+              </Select>
           </Tooltip>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -27,8 +27,6 @@ import {
   PageSectionVariants,
   Progress,
   ProgressSize,
-  Select,
-  SelectVariant,
   Tabs,
   Tab,
   TabContent,
@@ -58,6 +56,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 
 interface Repository {
   name: string;
@@ -152,28 +151,12 @@ export const TablesAndTabs = () => {
       <ToolbarContent>
         <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           <ToolbarItem>
-            <Select
-              onToggle={() => {}}
-              variant={SelectVariant.single}
-              aria-label="Select Input"
-              placeholderText="Name"
-            />
+            <MenuToggle>Name</MenuToggle>
           </ToolbarItem>
         </ToolbarToggleGroup>
-        {/* <ToolbarItem> TODO: replace with select after #8073 goes in
-          <OptionsMenu
-            id="page-layout-table-column-management-action-toolbar-top-options-menu-toggle"
-            isPlain
-            menuItems={[]}
-            toggle={
-              <OptionsMenuToggle
-                toggleTemplate={<SortAmountDownIcon aria-hidden="true" />}
-                aria-label="Sort"
-                hideCaret
-              />
-            }
-          />
-        </ToolbarItem> */}
+        <ToolbarItem>
+          <MenuToggle variant="plain" aria-label="Sort columns"><SortAmountDownIcon aria-hidden="true" /></MenuToggle>
+        </ToolbarItem>
         <OverflowMenu breakpoint="md">
           <OverflowMenuContent className="pf-u-display-none pf-u-display-block-on-lg">
             <OverflowMenuGroup groupType="button" isPersistent>