@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.48

package/src/demos/Card/Card.md

@@ -20,7 +20,15 @@ import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import {
+Dropdown as DropdownDeprecated,
+DropdownToggle,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+DropdownPosition,
+DropdownToggleCheckbox,
+KebabToggle,
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -39,11 +47,7 @@ import {
   CardBody,
   Checkbox,
   Dropdown,
-  DropdownToggle,
-  DropdownItem,
-  DropdownSeparator,
-  DropdownPosition,
-  DropdownToggleCheckbox,
+  DropdownList,
   EmptyState,
   EmptyStateHeader,
   EmptyStateIcon,
@@ -51,7 +55,6 @@ import {
   EmptyStateVariant,
   EmptyStateActions,
   Gallery,
-  KebabToggle,
   MenuToggle,
   OverflowMenu,
   OverflowMenuControl,
@@ -71,7 +74,15 @@ import {
   ToolbarFilter,
   ToolbarContent
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownSeparator,
+  DropdownPosition,
+  DropdownToggleCheckbox,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
@@ -411,19 +422,19 @@ class CardViewBasic extends React.Component {
     const someChecked = anySelected ? null : false;
     const isChecked = allSelected ? true : someChecked;
     const splitButtonDropdownItems = [
-      <DropdownItem key="item-1" onClick={this.selectNone.bind(this)}>
+      <DropdownItemDeprecated key="item-1" onClick={this.selectNone.bind(this)}>
         Select none (0 items)
-      </DropdownItem>,
-      <DropdownItem key="item-2" onClick={this.selectPage.bind(this)}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-2" onClick={this.selectPage.bind(this)}>
         Select page ({this.state.perPage} items)
-      </DropdownItem>,
-      <DropdownItem key="item-3" onClick={this.selectAll.bind(this)}>
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="item-3" onClick={this.selectAll.bind(this)}>
         Select all ({this.state.totalItemCount} items)
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     return (
-      <Dropdown
+      <DropdownDeprecated
         position={DropdownPosition.left}
         onSelect={this.onSplitButtonSelect}
         toggle={
@@ -501,7 +512,9 @@ class CardViewBasic extends React.Component {
     } = this.state;
 
     const toolbarKebabDropdownItems = [
-      <OverflowMenuDropdownItem itemId={0} key="link">Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={0} key="link">
+        Link
+      </OverflowMenuDropdownItem>,
       <OverflowMenuDropdownItem itemId={1} key="action" component="button">
         Action
       </OverflowMenuDropdownItem>,
@@ -512,7 +525,9 @@ class CardViewBasic extends React.Component {
         Disabled Action
       </OverflowMenuDropdownItem>,
       <DropdownSeparator itemId={4} key="separator" />,
-      <OverflowMenuDropdownItem itemId={5} key="separated link">Separated Link</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem itemId={5} key="separated link">
+        Separated Link
+      </OverflowMenuDropdownItem>,
       <OverflowMenuDropdownItem itemId={6} key="separated action" component="button">
         Separated Action
       </OverflowMenuDropdownItem>
@@ -528,9 +543,9 @@ class CardViewBasic extends React.Component {
               <Button variant="primary">Create a project</Button>
             </OverflowMenuItem>
             <OverflowMenuControl hasAdditionalOptions>
-              <DropdownNext
+              <Dropdown
                 onSelect={this.onToolbarKebabDropdownSelect}
-                toggle={toggleRef => (
+                toggle={(toggleRef) => (
                   <MenuToggle
                     ref={toggleRef}
                     aria-label="Toolbar kebab overflow menu"
@@ -544,7 +559,7 @@ class CardViewBasic extends React.Component {
                 isOpen={isLowerToolbarKebabDropdownOpen}
               >
                 <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
-              </DropdownNext>
+              </Dropdown>
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
@@ -619,7 +634,7 @@ class CardViewBasic extends React.Component {
                     actions={{
                       actions: (
                         <>
-                          <Dropdown
+                          <DropdownDeprecated
                             isPlain
                             position="right"
                             onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
@@ -632,10 +647,10 @@ class CardViewBasic extends React.Component {
                             }
                             isOpen={this.state[key]}
                             dropdownItems={[
-                              <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
+                              <DropdownItemDeprecated key="trash" onClick={this.deleteItem(product)} position="right">
                                 <TrashIcon />
                                 Delete
-                              </DropdownItem>
+                              </DropdownItemDeprecated>
                             ]}
                           />
                           <Checkbox

package/src/demos/CardDemos.md

@@ -3,6 +3,7 @@ id: Card
 section: components
 ---
 
+import { Dropdown as DropdownDeprecated, DropdownItem as DropdownItemDeprecated, KebabToggle } from '@patternfly/react-core/deprecated';
 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';
@@ -31,15 +32,17 @@ import {
   Level,
   LabelGroup,
   Label,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Grid,
   Flex,
   List,
   ListItem,
   Button
 } 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';
@@ -71,22 +74,22 @@ class CardGridDemo extends React.Component {
   render() {
     const { isCardExpanded, isDropdownOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="action1" component="button">
+      <DropdownItemDeprecated key="action1" component="button">
         Action 1
-      </DropdownItem>,
-      <DropdownItem key="action2" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action2" component="button">
         Action 2
-      </DropdownItem>,
-      <DropdownItem key="disabled action3" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action3" isDisabled component="button">
         Disabled Action 3
-      </DropdownItem>,
-      <DropdownItem key="action4" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action4" component="button">
         Action 4
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
 
     const headerActions = (
-      <Dropdown
+      <DropdownDeprecated
         onSelect={this.onActionSelect}
         toggle={<KebabToggle onToggle={this.onActionToggle} />}
         isOpen={isDropdownOpen}

package/src/demos/DataListDemo.md

@@ -3,6 +3,12 @@ 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';
@@ -25,10 +31,6 @@ import {
   DataListToggle,
   DataListContent,
   DataListItemCells,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   Toolbar,
   ToolbarGroup,
   ToolbarItem,
@@ -37,6 +39,12 @@ 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';
 
@@ -82,20 +90,20 @@ class ExpandableDataList extends React.Component {
       this.setState({ isOpen3 });
     };
 
-    this.onSelect1 = event => {
-      this.setState(prevState => ({
+    this.onSelect1 = (event) => {
+      this.setState((prevState) => ({
         isOpen1: !prevState.isOpen1
       }));
     };
 
-    this.onSelect2 = event => {
-      this.setState(prevState => ({
+    this.onSelect2 = (event) => {
+      this.setState((prevState) => ({
         isOpen2: !prevState.isOpen2
       }));
     };
 
-    this.onSelect3 = event => {
-      this.setState(prevState => ({
+    this.onSelect3 = (event) => {
+      this.setState((prevState) => ({
         isOpen3: !prevState.isOpen3
       }));
     };
@@ -146,7 +154,7 @@ class ExpandableDataList extends React.Component {
   }
 
   render() {
-    const toggle = id => {
+    const toggle = (id) => {
       const expanded = this.state.expanded;
       const index = expanded.indexOf(id);
       const newExpanded =
@@ -197,20 +205,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen1}
                   onSelect={this.onSelect1}
                   toggle={<KebabToggle onToggle={this.onToggle1} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
@@ -257,20 +265,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen2}
                   onSelect={this.onSelect2}
                   toggle={<KebabToggle onToggle={this.onToggle2} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>
@@ -317,20 +325,20 @@ class ExpandableDataList extends React.Component {
                 aria-label="Actions"
                 isPlainButtonAction
               >
-                <Dropdown
+                <DropdownDeprecated
                   isPlain
                   position={DropdownPosition.right}
                   isOpen={this.state.isOpen3}
                   onSelect={this.onSelect3}
                   toggle={<KebabToggle onToggle={this.onToggle3} />}
                   dropdownItems={[
-                    <DropdownItem key="link">Link</DropdownItem>,
-                    <DropdownItem key="action" component="button">
+                    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="action" component="button">
                       Action
-                    </DropdownItem>,
-                    <DropdownItem key="disabled link" isDisabled>
+                    </DropdownItemDeprecated>,
+                    <DropdownItemDeprecated key="disabled link" isDisabled>
                       Disabled Link
-                    </DropdownItem>
+                    </DropdownItemDeprecated>
                   ]}
                 />
               </DataListAction>

package/src/demos/DateTimePicker.md

@@ -6,6 +6,11 @@ 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
 
@@ -14,4 +19,5 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 ### Date and time picker
 
 ```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
+
 ```

package/src/demos/Masthead.md

@@ -9,6 +9,13 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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';
 
 ## Demos
 
@@ -17,4 +24,5 @@ import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/ava
 Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.
 
 ```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
+
 ```