Merge pull request #42 from fhlavac/details-page

DetailsPage cleanup

Author: fhlavac

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/ActionButtonsExample.tsx

@@ -1,24 +1,19 @@
+/* eslint-disable no-console */
 import React from 'react';
 import { ActionMenu } from '@patternfly/react-component-groups';
 
-export const BasicExample: React.FC = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <ActionMenu
     actions={[
       {
         children: 'Edit resource',
-        itemID: 'action-menu-example-1',
-        cta: {
-          // eslint-disable-next-line no-console
-          callback: () => console.log('Edit resource clicked'),
-        },
+        itemId: 'action-menu-example-1',
+        onClick: () => console.log('Edit resource clicked'),
       },
       {
         children: 'Delete resource',
-        itemID: 'action-menu-example-2',
-        cta: {
-          // eslint-disable-next-line no-console
-          callback: () => console.log('Delete resource clicked'),
-        },
+        itemId: 'action-menu-example-2',
+        onClick: () => console.log('Delete resource clicked'),
         isDisabled: true,
       },
     ]}

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/ActionMenuExample.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import React from 'react';
 import { ActionMenu } from '@patternfly/react-component-groups';
 
@@ -6,50 +7,38 @@ export const BasicExample: React.FunctionComponent = () => (
     groupedActions={[
       {
         groupId: 'group1',
-        groupActions: [
+        actions: [
           {
             children: 'Edit resource',
-            itemID: 'action-menu-grouped-group-1-example-1',
-            cta: {
-              // eslint-disable-next-line no-console
-              callback: () => console.log('Edit resource clicked'),
-            },
+            itemId: 'action-menu-grouped-group-1-example-1',
+            onClick: () => console.log('Edit resource clicked')
           },
           {
             children: 'Delete resource',
-            itemID: 'action-menu-grouped-group-1-example-2',
-            cta: {
-              // eslint-disable-next-line no-console
-              callback: () => console.log('Delete resource clicked'),
-            },
+            itemId: 'action-menu-grouped-group-1-example-2',
+            onClick: () => console.log('Delete resource clicked'),
             isDisabled: true,
           },
         ],
       },
       {
         groupId: 'group2',
         label: 'Links',
-        groupActions: [
+        actions: [
           {
             children: 'GitHub',
-            itemID: 'action-menu-grouped-group-2-example-1',
-            cta: {
-              href: 'https://github.com/',
-              external: true,
-            },
+            itemId: 'action-menu-grouped-group-2-example-1',
+            onClick: () => console.log('GitHub clicked'),
           },
           {
             children: 'Link',
-            itemID: 'action-menu-grouped-group-2-example-2',
-            cta: {
-              href: '/#',
-            },
+            itemId: 'action-menu-grouped-group-2-example-2',
+            onClick: () => console.log('Link clicked'),
             description: 'Description of link',
           },
         ],
       },
     ]}
-    displayLabelBeforeIcon
     id='action-menu-grouped-example'
   />
 );

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/ActionMenuGroupedExample.tsx

@@ -15,9 +15,6 @@ propComponents: [
   'DetailsPageHeader',
   'PageHeading',
   # 'PageHeadingLabel', # No output --> is a type and not an interface
-  'Breadcrumbs',
-  # 'Breadcrumb', # No output --> is a type and not an interface
-  'ActionButtons',
   'ActionButton',  # Incomplete output --> see https://github.com/patternfly/patternfly-org/issues/3423
   # 'ActionCTA', # No output --> is a type and not an interface
   'ActionMenu',
@@ -29,9 +26,7 @@ propComponents: [
 beta: true
 ---
 
-import { ActionButtons } from '@patternfly/react-component-groups';
 import { ActionMenu } from '@patternfly/react-component-groups';
-import { Breadcrumbs } from '@patternfly/react-component-groups';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import HorizontalNav from '@patternfly/react-component-groups/dist/dynamic/HorizontalNav';
@@ -60,24 +55,6 @@ The `pageHeader` for a details page contains the `breadcrumbs`, `pageHeading`, a
 
 ```
 
-### Details page breadcrumbs 
-
-You can specify the `children` of the details page `breadcrumbs` and the pages that they point to.
-
-```js file="./BreadcrumbsExample.tsx"
-
-```
-
-### Details page action buttons 
-
-The action buttons in a details page header can be customized to be any [button](/components/button) variant.
-
-Include a [`tooltip`](/components/tooltip/) as appropriate.
-
-```js file="./ActionButtonsExample.tsx"
-
-```
-
 ### Details page action menu 
 
 The details page action menu contains multiple actions that users can take.

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/BreadcrumbsExample.tsx

@@ -1,16 +1,29 @@
+/* eslint-disable no-console */
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { CheckCircleIcon } from '@patternfly/react-icons';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 import DetailsPage from '@patternfly/react-component-groups/dist/dynamic/DetailsPage';
 
 export const BasicExample: React.FunctionComponent = () => (
   <Router>
     <DetailsPage
       breadcrumbs={
-        [
-          { children: 'Resources', to: '/resources' },
-          { children: 'Resource details', to: '/resources/example-resource' },
-        ]
+        <Breadcrumb>
+          <BreadcrumbItem
+            to="/resources"
+            key="resources"
+          >
+          Resources
+          </BreadcrumbItem>
+          <BreadcrumbItem
+            isActive
+            to="/resources/example-resource"
+            key="resources-example"
+          >
+          Resource details
+          </BreadcrumbItem>
+        </Breadcrumb>
       }
       pageHeading={{
         title: 'example-resource',
@@ -32,19 +45,13 @@ export const BasicExample: React.FunctionComponent = () => (
         actions: [
           {
             children: 'Edit resource',
-            itemID: 'details-page-action-menu-example-1',
-            cta: {
-              // eslint-disable-next-line no-console
-              callback: () => console.log('Edit resource clicked'),
-            },
+            itemId: 'details-page-action-menu-example-1',
+            onClick: () => console.log('Edit resource clicked')
           },
           {
             children: 'Delete resource',
-            itemID: 'details-page-action-menu-example-2',
-            cta: {
-              // eslint-disable-next-line no-console
-              callback: () => console.log('Delete resource clicked'),
-            },
+            itemId: 'details-page-action-menu-example-2',
+            onClick: () => console.log('Delete resource clicked'),
             isDisabled: true,
           },
         ],

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPage.md

@@ -1,16 +1,29 @@
+/* eslint-disable no-console */
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import DetailsPageHeader from '@patternfly/react-component-groups/dist/dynamic/DetailsPageHeader';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 
 export const BasicExample: React.FunctionComponent = () => (
   <Router>
     <DetailsPageHeader
-      breadcrumbs={
-        [
-          { children: 'Resources', to: '/resources' },
-          { children: 'Resource details', to: '/resources/example-resource' },
-        ]
+      breadcrumbs={ 
+        <Breadcrumb>
+          <BreadcrumbItem
+            to="/resources"
+            key="resources"
+          >
+            Resources
+          </BreadcrumbItem>
+          <BreadcrumbItem
+            isActive
+            to="/resources/example-resource"
+            key="resources-example"
+          >
+            Resource details
+          </BreadcrumbItem>
+        </Breadcrumb>
       }
       pageHeading={{
         title: 'example-resource',
@@ -32,19 +45,13 @@ export const BasicExample: React.FunctionComponent = () => (
         actions: [
           {
             children: 'Edit resource',
-            itemID: 'details-page-header-action-menu-example-1',
-            cta: {
-              // eslint-disable-next-line no-console
-              callback: () => console.log('Edit resource clicked'),
-            },
+            itemId: 'details-page-header-action-menu-example-1',
+            onClick: () => console.log('Edit resource clicked'),
           },
           {
             children: 'Delete resource',
-            itemID: 'details-page-header-action-menu-example-2',
-            cta: {
-              // eslint-disable-next-line no-console
-              callback: () => console.log('Delete resource clicked'),
-            },
+            itemId: 'details-page-header-action-menu-example-2',
+            onClick: () => console.log('Delete resource clicked'),
             isDisabled: true,
           },
         ],

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageExample.tsx

@@ -1,6 +1,4 @@
 import InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject';
 import React from 'react';
 
-const InvalidObjectExample: React.FunctionComponent = () => <InvalidObject />;
-
-export default InvalidObjectExample;
+export const BasicExample: React.FunctionComponent = () => <InvalidObject />;

packages/module/patternfly-docs/content/extensions/component-groups/examples/DetailsPage/DetailsPageHeaderExample.tsx

@@ -0,0 +1,28 @@
+import { Button, ButtonProps, Tooltip, TooltipProps } from '@patternfly/react-core';
+import React from 'react';
+
+export interface ActionButtonProps extends Omit<ButtonProps, 'innerRef'> {
+  /** Content for the action button tooltip */
+  tooltip?: React.ReactNode;
+  /** Tooltip props */
+  tooltipProps?: Omit<TooltipProps, 'triggerRef'>;
+};
+
+export const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
+  tooltipProps,
+  ...buttonProps
+}: ActionButtonProps) => {
+  const tooltipRef = React.useRef();
+  return (
+    <>
+      <Button
+        aria-describedby={tooltipProps?.id}
+        innerRef={tooltipRef}
+        {...buttonProps}
+      />
+      {tooltipProps ? <Tooltip {...tooltipProps} triggerRef={tooltipRef} /> : null}
+    </>
+  );
+};
+
+export default ActionButton;

packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObjectExample.tsx

@@ -0,0 +1,2 @@
+export { default } from './ActionButton';
+export * from './ActionButton';