@patternfly/react-core 5.0.0-alpha.86 → 5.0.0-alpha.88

package/src/demos/CardDemos.md

@@ -3,7 +3,7 @@ id: Card
 section: components
 ---
 
-import { Dropdown as DropdownDeprecated, DropdownItem as DropdownItemDeprecated, KebabToggle } from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
@@ -36,16 +36,16 @@ import {
   Flex,
   List,
   ListItem,
-  Button
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class CardGridDemo extends React.Component {
   constructor(props) {
@@ -58,45 +58,51 @@ class CardGridDemo extends React.Component {
       });
     };
 
-    this.onActionToggle = (_event, isDropdownOpen) => {
-      this.setState({
-        isDropdownOpen
-      });
+    this.onActionToggle = () => {
+      this.setState((prevState) => ({
+        isDropdownOpen: !prevState.isDropdownOpen
+      }));
     };
 
-    this.onActionSelect = (event) => {
+    this.onActionSelect = () => {
       this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
+        isDropdownOpen: false
       });
     };
   }
 
   render() {
     const { isCardExpanded, isDropdownOpen } = this.state;
-    const dropdownItems = [
-      <DropdownItemDeprecated key="action1" component="button">
-        Action 1
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="action2" component="button">
-        Action 2
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="disabled action3" isDisabled component="button">
-        Disabled Action 3
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="action4" component="button">
-        Action 4
-      </DropdownItemDeprecated>
-    ];
-
+    const dropdownItems = (
+      <>
+        <DropdownItem key="action1">Action 1</DropdownItem>
+        <DropdownItem key="action2">Action 2</DropdownItem>
+        <DropdownItem key="disabled action3" isDisabled>
+          Disabled Action 3
+        </DropdownItem>
+        <DropdownItem key="action4">Action 4</DropdownItem>
+      </>
+    );
     const headerActions = (
-      <DropdownDeprecated
+      <Dropdown
         onSelect={this.onActionSelect}
-        toggle={<KebabToggle onToggle={this.onActionToggle} />}
         isOpen={isDropdownOpen}
-        isPlain
-        dropdownItems={dropdownItems}
-        position="right"
-      />
+        popperProps={{ position: 'right' }}
+        onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isDropdownOpen}
+            onClick={this.onActionToggle}
+            variant="plain"
+            aria-label="Horizontal card grid demo kebab toggle"
+          >
+            <EllipsisVIcon aria-hidden="true" />
+          </MenuToggle>
+        )}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     );
 
     return (

package/src/demos/DataListDemo.md

@@ -3,16 +3,10 @@ id: Data list
 section: components
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-DropdownPosition,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
 
 ## Demos
@@ -31,6 +25,10 @@ import {
   DataListToggle,
   DataListContent,
   DataListItemCells,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
@@ -39,14 +37,9 @@ import {
   SearchInput,
   Tooltip
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownPosition,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class ExpandableDataList extends React.Component {
   constructor(props) {
@@ -78,34 +71,34 @@ class ExpandableDataList extends React.Component {
       );
     };
 
-    this.onToggle1 = (_event, isOpen1) => {
-      this.setState({ isOpen1 });
+    this.onToggle1 = () => {
+      this.setState((prevState) => ({ isOpen1: !prevState.isOpen1 }));
     };
 
-    this.onToggle2 = (_event, isOpen2) => {
-      this.setState({ isOpen2 });
+    this.onToggle2 = () => {
+      this.setState((prevState) => ({ isOpen2: !prevState.isOpen2 }));
     };
 
-    this.onToggle3 = (_event, isOpen3) => {
-      this.setState({ isOpen3 });
+    this.onToggle3 = () => {
+      this.setState((prevState) => ({ isOpen3: !prevState.isOpen3 }));
     };
 
-    this.onSelect1 = (event) => {
-      this.setState((prevState) => ({
-        isOpen1: !prevState.isOpen1
-      }));
+    this.onSelect1 = () => {
+      this.setState({
+        isOpen1: false
+      });
     };
 
-    this.onSelect2 = (event) => {
-      this.setState((prevState) => ({
-        isOpen2: !prevState.isOpen2
-      }));
+    this.onSelect2 = () => {
+      this.setState({
+        isOpen2: false
+      });
     };
 
-    this.onSelect3 = (event) => {
-      this.setState((prevState) => ({
-        isOpen3: !prevState.isOpen3
-      }));
+    this.onSelect3 = () => {
+      this.setState({
+        isOpen3: false
+      });
     };
   }
 
@@ -154,6 +147,7 @@ class ExpandableDataList extends React.Component {
   }
 
   render() {
+    const { isOpen1, isOpen2, isOpen3 } = this.state;
     const toggle = (id) => {
       const expanded = this.state.expanded;
       const index = expanded.indexOf(id);
@@ -205,22 +199,44 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <DropdownDeprecated
-                  isPlain
-                  position={DropdownPosition.right}
-                  isOpen={this.state.isOpen1}
+                <Dropdown
+                  isOpen={isOpen1}
                   onSelect={this.onSelect1}
-                  toggle={<KebabToggle onToggle={this.onToggle1} />}
-                  dropdownItems={[
-                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="action" component="button">
+                  popperProps={{ position: 'right' }}
+                  onOpenChange={(isOpen) => this.setState({ isOpen1: isOpen })}
+                  toggle={(toggleRef) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      onClick={this.onToggle1}
+                      isExpanded={isOpen1}
+                      variant="plain"
+                      aria-label="Primary content kebab toggle"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownList>
+                    <DropdownItem itemId={0} key="action1">
                       Action
-                    </DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="disabled link" isDisabled>
+                    </DropdownItem>
+                    <DropdownItem
+                      itemId={1}
+                      key="link1"
+                      to="#default-link2"
+                      // Prevent the default onClick functionality for example purposes
+                      onClick={(ev) => ev.preventDefault()}
+                    >
+                      Link
+                    </DropdownItem>
+                    <DropdownItem itemId={2} isDisabled key="disabled action1">
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem itemId={3} isDisabled key="disabled link1" to="#default-link4">
                       Disabled Link
-                    </DropdownItemDeprecated>
-                  ]}
-                />
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
               </DataListAction>
             </DataListItemRow>
             <DataListContent
@@ -265,22 +281,44 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <DropdownDeprecated
-                  isPlain
-                  position={DropdownPosition.right}
-                  isOpen={this.state.isOpen2}
+                <Dropdown
+                  isOpen={isOpen2}
                   onSelect={this.onSelect2}
-                  toggle={<KebabToggle onToggle={this.onToggle2} />}
-                  dropdownItems={[
-                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="action" component="button">
+                  popperProps={{ position: 'right' }}
+                  onOpenChange={(isOpen) => this.setState({ isOpen2: isOpen })}
+                  toggle={(toggleRef) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      onClick={this.onToggle2}
+                      isExpanded={isOpen2}
+                      variant="plain"
+                      aria-label="Secondary content kebab toggle"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownList>
+                    <DropdownItem itemId={0} key="action2">
                       Action
-                    </DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="disabled link" isDisabled>
+                    </DropdownItem>
+                    <DropdownItem
+                      itemId={1}
+                      key="link2"
+                      to="#default-link2"
+                      // Prevent the default onClick functionality for example purposes
+                      onClick={(ev) => ev.preventDefault()}
+                    >
+                      Link
+                    </DropdownItem>
+                    <DropdownItem itemId={2} isDisabled key="disabled action2">
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem itemId={3} isDisabled key="disabled link2" to="#default-link4">
                       Disabled Link
-                    </DropdownItemDeprecated>
-                  ]}
-                />
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
               </DataListAction>
             </DataListItemRow>
             <DataListContent
@@ -325,22 +363,44 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <DropdownDeprecated
-                  isPlain
-                  position={DropdownPosition.right}
-                  isOpen={this.state.isOpen3}
+                <Dropdown
+                  isOpen={isOpen3}
                   onSelect={this.onSelect3}
-                  toggle={<KebabToggle onToggle={this.onToggle3} />}
-                  dropdownItems={[
-                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="action" component="button">
+                  popperProps={{ position: 'right' }}
+                  onOpenChange={(isOpen) => this.setState({ isOpen3: isOpen })}
+                  toggle={(toggleRef) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      onClick={this.onToggle3}
+                      isExpanded={isOpen3}
+                      variant="plain"
+                      aria-label="Tertiary content kebab toggle"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownList>
+                    <DropdownItem itemId={0} key="action3">
                       Action
-                    </DropdownItemDeprecated>,
-                    <DropdownItemDeprecated key="disabled link" isDisabled>
+                    </DropdownItem>
+                    <DropdownItem
+                      itemId={1}
+                      key="link3"
+                      to="#default-link2"
+                      // Prevent the default onClick functionality for example purposes
+                      onClick={(ev) => ev.preventDefault()}
+                    >
+                      Link
+                    </DropdownItem>
+                    <DropdownItem itemId={2} isDisabled key="disabled action3">
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem itemId={3} isDisabled key="disabled link3" to="#default-link4">
                       Disabled Link
-                    </DropdownItemDeprecated>
-                  ]}
-                />
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
               </DataListAction>
             </DataListItemRow>
             <DataListContent

package/src/demos/DatePicker/DatePicker.md

@@ -1,5 +1,5 @@
 ---
-id: Date range picker
+id: Date picker
 section: components
 subsection: date-and-time
 beta: true
@@ -59,95 +59,7 @@ DateRangePicker = () => {
 };
 ```
 
-### Date and time range picker
 
-```js
-import {
-  Flex,
-  FlexItem,
-  InputGroup,
-  DatePicker,
-  isValidDate,
-  TimePicker,
-  yyyyMMddFormat,
-  updateDateTime
-} from '@patternfly/react-core';
-
-DateTimeRangePicker = () => {
-  const [from, setFrom] = React.useState();
-  const [to, setTo] = React.useState();
-
-  const toValidator = (date) => {
-    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
-      ? ''
-      : 'The "to" date must be after the "from" date';
-  };
-
-  const onFromDateChange = (_event, inputDate, newFromDate) => {
-    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
-      newFromDate.setHours(from.getHours());
-      newFromDate.setMinutes(from.getMinutes());
-    }
-    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
-      setFrom(new Date(newFromDate));
-    }
-  };
-
-  const onFromTimeChange = (_event, time, hour, minute) => {
-    if (isValidDate(from)) {
-      const updatedFromDate = new Date(from);
-      updatedFromDate.setHours(hour);
-      updatedFromDate.setMinutes(minute);
-      setFrom(updatedFromDate);
-    }
-  };
-
-  const onToDateChange = (_event, inputDate, newToDate) => {
-    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
-      newToDate.setHours(to.getHours());
-      newToDate.setMinutes(to.getMinutes());
-    }
-    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
-      setTo(newToDate);
-    }
-  };
-
-  const onToTimeChange = (_event, time, hour, minute) => {
-    if (isValidDate(to)) {
-      const updatedToDate = new Date(to);
-      updatedToDate.setHours(hour);
-      updatedToDate.setMinutes(minute);
-      setTo(updatedToDate);
-    }
-  };
-
-  return (
-    <Flex direction={{ default: 'column', lg: 'row' }}>
-      <FlexItem>
-        <InputGroup>
-          <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-          <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
-        </InputGroup>
-      </FlexItem>
-      <FlexItem>to</FlexItem>
-      <FlexItem>
-        <InputGroup>
-          <DatePicker
-            value={isValidDate(to) ? yyyyMMddFormat(to) : to}
-            onChange={onToDateChange}
-            isDisabled={!isValidDate(from)}
-            rangeStart={from}
-            validators={[toValidator]}
-            aria-label="End date"
-            placeholder="YYYY-MM-DD"
-          />
-          <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
-        </InputGroup>
-      </FlexItem>
-    </Flex>
-  );
-};
-```
 
 ### Date and time pickers in modal
 

package/src/demos/DateTimePicker.md

@@ -7,11 +7,6 @@ beta: true
 
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
-import {
-Dropdown as DropdownDeprecated,
-DropdownToggle,
-DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -22,3 +17,93 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 ```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
 
 ```
+
+### Date and time range picker
+
+```js
+import {
+  Flex,
+  FlexItem,
+  InputGroup,
+  DatePicker,
+  isValidDate,
+  TimePicker,
+  yyyyMMddFormat,
+  updateDateTime
+} from '@patternfly/react-core';
+
+DateTimeRangePicker = () => {
+  const [from, setFrom] = React.useState();
+  const [to, setTo] = React.useState();
+
+  const toValidator = (date) => {
+    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
+      ? ''
+      : 'The "to" date must be after the "from" date';
+  };
+
+  const onFromDateChange = (_event, inputDate, newFromDate) => {
+    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
+      newFromDate.setHours(from.getHours());
+      newFromDate.setMinutes(from.getMinutes());
+    }
+    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
+      setFrom(new Date(newFromDate));
+    }
+  };
+
+  const onFromTimeChange = (_event, time, hour, minute) => {
+    if (isValidDate(from)) {
+      const updatedFromDate = new Date(from);
+      updatedFromDate.setHours(hour);
+      updatedFromDate.setMinutes(minute);
+      setFrom(updatedFromDate);
+    }
+  };
+
+  const onToDateChange = (_event, inputDate, newToDate) => {
+    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
+      newToDate.setHours(to.getHours());
+      newToDate.setMinutes(to.getMinutes());
+    }
+    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
+      setTo(newToDate);
+    }
+  };
+
+  const onToTimeChange = (_event, time, hour, minute) => {
+    if (isValidDate(to)) {
+      const updatedToDate = new Date(to);
+      updatedToDate.setHours(hour);
+      updatedToDate.setMinutes(minute);
+      setTo(updatedToDate);
+    }
+  };
+
+  return (
+    <Flex direction={{ default: 'column', lg: 'row' }}>
+      <FlexItem>
+        <InputGroup>
+          <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+          <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+        </InputGroup>
+      </FlexItem>
+      <FlexItem>to</FlexItem>
+      <FlexItem>
+        <InputGroup>
+          <DatePicker
+            value={isValidDate(to) ? yyyyMMddFormat(to) : to}
+            onChange={onToDateChange}
+            isDisabled={!isValidDate(from)}
+            rangeStart={from}
+            validators={[toValidator]}
+            aria-label="End date"
+            placeholder="YYYY-MM-DD"
+          />
+          <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+        </InputGroup>
+      </FlexItem>
+    </Flex>
+  );
+};
+```

package/src/demos/Masthead.md

@@ -4,19 +4,13 @@ section: components
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import {
-Dropdown as DropdownDeprecated,
-DropdownGroup as DropdownGroupDeprecated,
-DropdownItem as DropdownItemDeprecated,
-DropdownToggle,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
 import pfIcon from './Card/pf-logo-small.svg';
 import { Link } from '@reach/router';