Merge branch 'main' into add-invalidobject

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

@@ -0,0 +1,32 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Ansible
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['Ansible']
+---
+
+import Ansible from '@patternfly/react-component-groups/dist/dynamic/Ansible';
+
+The **Ansible** component shows Ansible project logo.
+
+To specify whether Ansible is supported or not, add the `unsupported` property to the `<Ansible>` component.
+
+### Ansible supported
+
+```js file="./AnsibleSupportedExample.tsx"
+
+```
+
+### Ansible unsupported
+
+```js file="./AnsibleUnsupportedExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleSupportedExample.tsx

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

packages/module/patternfly-docs/content/extensions/component-groups/examples/Ansible/AnsibleUnsupportedExample.tsx

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

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

@@ -15,44 +15,57 @@ propComponents: ['Battery']
 
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
+The **battery** component generates a 'battery' which corresponds to a level 1-4. Each level corresponds with a severity level and respective color:
 
-This is the battery component that generates a 'battery' which corresponds to a level 1-4.
-- 1 - low, green (best case scenario)
-- 2 - medium, yellow
-- 3 - high, orange
-- 4 - critical, red (worst case scenario)
+| Severity level | Meaning | Style | 
+| --- | --- | --- | 
+| Level 1 | Low severity (best case scenario) | 1 green bar | "1", "low" |
+| Level 2 | Medium severity |  2 yellow bars | 
+| Level 3 | High severity | 3 orange bars | 
+| Level 4 | Critical severity (worst case scenario) | 4 red bars | 
 
-Also accepts a label which can be made invisible.
+To specify the severity of the battery's risk level, you can pass a predefined number or text value into the `severity` property that corresponds to the appropriate severity level.
 
+To add an optional label to a battery, add the `label` property to the `<Battery>` component.
 
-## Component usage
+## Examples
+
+### Default variant
+
+The default style of a battery (4 black lines) appears when any value besides "1", "2", "3", or "4" is passed to `severity`. 
+
+```js file="./BatteryDefaultExample.tsx"
+
+```
 
 ### Low severity
 
+To style a battery as low severity, pass "1", "info", or "low" to `severity`.
+
 ```js file="./BatteryLowExample.tsx"
 
 ```
 
 ### Medium severity
 
+To style a battery as medium severity, pass "2", "medium", or "warn" to `severity`.
+
 ```js file="./BatteryMediumExample.tsx"
 
 ```
 
 ### High severity
 
+To style a battery as high severity, pass "3", "high", or "error" to `severity`.
+
 ```js file="./BatteryHighExample.tsx"
 
 ```
 
 ### Critical severity
 
-```js file="./BatteryCriticalExample.tsx"
+To style a battery as critical severity, pass "4" or "critical" to `severity`.
 
-```
-
-### Default variant
-
-```js file="./BatteryDefaultExample.tsx"
+```js file="./BatteryCriticalExample.tsx"
 
-```
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryCriticalExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <>
     <Battery label="With prop: 4" severity={4} />
-    <Battery className="pf-u-ml-md" label="With prop: critical" severity="critical" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: critical" severity="critical" />
   </>
 );
-
-export default BatteryCriticalExample;
-

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryDefaultExample: React.FunctionComponent = () => <Battery label="Default" severity={'an unknown value' as any}/>
-
-export default BatteryDefaultExample;
+export const BasicExample: React.FunctionComponent = () => <Battery label="Default" severity={'an unknown value' as any}/>

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryHighExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <>
     <Battery label="With prop: 3" severity={3} />
-    <Battery className="pf-u-ml-md" label="With prop: high" severity="high" />
-    <Battery className="pf-u-ml-md" label="With prop: error" severity="error" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: high" severity="high" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: error" severity="error" />
   </>
 );
-
-export default BatteryHighExample;

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryLowExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <>
     <Battery label="With prop: 1" severity={1} />
-    <Battery className="pf-u-ml-md" label="With prop: low" severity="low" />
-    <Battery className="pf-u-ml-md" label="With prop: info" severity="info" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: low" severity="low" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: info" severity="info" />
   </>
 );
-
-export default BatteryLowExample;

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-const BatteryMediumExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <>
     <Battery label="With prop: 2" severity={2} />
-    <Battery className="pf-u-ml-md" label="With prop: medium" severity="medium" />
-    <Battery className="pf-u-ml-md" label="With prop: warn" severity="warn" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: medium" severity="medium" />
+    <Battery className="pf-v5-u-ml-md" label="With prop: warn" severity="warn" />
   </>
 );
-
-export default BatteryMediumExample;

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

@@ -5,7 +5,7 @@ section: extensions
 subsection: Component groups
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: DetailsPage
+id: Details page
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
@@ -38,45 +38,65 @@ import HorizontalNav from '@patternfly/react-component-groups/dist/dynamic/Horiz
 import DetailsPage from '@patternfly/react-component-groups/dist/dynamic/DetailsPage';
 import DetailsPageHeader from'@patternfly/react-component-groups/dist/dynamic/DetailsPageHeader';
 
-## Components Usage
+A **details page** component is used to provide users with details on a resource that they access.
 
-### DetailsPage Component
+## Examples
+
+### Basic details page
+
+A basic details page typically contains elements like `breadcrumbs`, a `pageHeading`, actions, and `tabs`.
+
+Details page content should be customized within the appropriate tab to fit your use case.
 
 ```js file="./DetailsPageExample.tsx"
 
 ```
 
-### DetailsPageHeader Component
+### Details page header
+
+The `pageHeader` for a details page contains the `breadcrumbs`, `pageHeading`, and any actions.
 
 ```js file="./DetailsPageHeaderExample.tsx"
 
 ```
 
-### Breadcrumbs Component
+### Details page breadcrumbs 
+
+You can specify the `children` of the details page `breadcrumbs` and the pages that they point to.
 
 ```js file="./BreadcrumbsExample.tsx"
 
 ```
 
-### ActionButtons Component
+### 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"
 
 ```
 
-### ActionMenu Component
+### Details page action menu 
+
+The details page action menu contains multiple actions that users can take.
 
 ```js file="./ActionMenuExample.tsx"
 
 ```
 
-### ActionMenu with groupedActions Component
+### Details page action menu with grouped actions 
+
+To group related actions in a details page action menu, use the `groupedActions` property.
 
 ```js file="./ActionMenuGroupedExample.tsx"
 
 ```
 
-### HorizonalNav Component
+### Details page horizontal navigation
+
+A details page places `tabs` in a `<HorizontalNav>` component.
 
 ```js file="./HorizontalNavExample.tsx"
 

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

@@ -51,8 +51,8 @@ export const BasicExample: React.FunctionComponent = () => (
         id: 'details-page-action-menu-example'
       }}
       tabs={[
-        { eventKey: 'details', title: 'Details', children: <div className="pf-u-m-md">Details content</div> },
-        { eventKey: 'other', title: 'Other', children: <div className="pf-u-m-md">Other content</div> }
+        { eventKey: 'details', title: 'Details', children: <div className="pf-v5-u-m-md">Details content</div> },
+        { eventKey: 'other', title: 'Other', children: <div className="pf-v5-u-m-md">Other content</div> }
       ]}
     />
   </Router>

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

@@ -4,8 +4,8 @@ import HorizontalNav from '@patternfly/react-component-groups/dist/dynamic/Horiz
 export const BasicExample: React.FunctionComponent = () => (
   <HorizontalNav
     tabs={[
-      { eventKey: 'details', title: 'Details', children: <div className="pf-u-m-md">Details content</div> },
-      { eventKey: 'other', title: 'Other', children: <div className="pf-u-m-md">Other content</div> }
+      { eventKey: 'details', title: 'Details', children: <div className="pf-v5-u-m-md">Details content</div> },
+      { eventKey: 'other', title: 'Other', children: <div className="pf-v5-u-m-md">Other content</div> }
     ]}
   />
 );

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

@@ -5,7 +5,7 @@ section: extensions
 subsection: Component groups
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: ErrorBoundary
+id: Error boundary
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
@@ -15,17 +15,22 @@ propComponents: ['ErrorBoundary']
 
 import ErrorBoundary from "@patternfly/react-component-groups/dist/dynamic/ErrorBoundary";
 
-## Component usage
+The **error boundary** component repurposes the `<ErrorState>` component for an application error boundary.
 
-This component reuses the ErrorState component for an app error boundary.
+## Examples 
 
-### ErrorBoundary component
+### Basic error boundary 
+
+A basic error boundary has a `headerTitle`, an `errorTitle`, and lists error details when a user takes action (like selecting a link).
 
 ```js file="./ErrorBoundaryExample.tsx"
 
 ```
 
-### ErrorBoundary component without error
+### Error boundary without error
+
+If you do not wish to share error details, you can remove `throw new Error("");` and share other content instead.
+
 
 ```js file="./ErrorBoundaryNoExample.tsx"
 

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

@@ -5,7 +5,7 @@ section: extensions
 subsection: Component groups
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: ErrorState
+id: Error state
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
 # If you use typescript, the name of the interface to display props for
@@ -15,11 +15,13 @@ propComponents: ['ErrorState']
 
 import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState";
 
-## Component usage
+The **error state** component repurposes the `EmptyState` component to display an error to users.
 
-This component reuses the EmptyState component. Also most of its props is accepted.
+## Examples
 
-### ErrorState component
+### Basic error state
+
+To provide users with error details, a basic error state should contain an appropriate and informative `errorTitle` and `errorDescription`. 
 
 ```js file="./ErrorStateExample.tsx"
 

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

@@ -0,0 +1,23 @@
+---
+section: extensions
+subsection: Component groups
+id: Long-text tooltip
+source: react
+propComponents: ['LongTextTooltip']
+---
+
+import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
+
+The **long-text tooltip** component enables you to display long text to users via a tooltip. It builds off of the [tooltip component](https://www.patternfly.org/components/tooltip) to truncate UI text in an element and display the truncated text in a tooltip. 
+
+## Examples
+
+### Basic long-text tooltip
+
+To show users the full value of truncated content, a basic long-text tooltip should contain appropriate and informative `content` and specify the `maxLength` of the UI text (after which, truncation will occur).  
+
+Additionally you can pass in a `tooltipPosition` to control the position of the tooltip, and `tooltipMaxWidth` to control the tooltip width.
+
+```js file="./LongTextTooltipExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TooltipPosition } from '@patternfly/react-core';
+import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
+
+export const LongTextTooltipExample: React.FunctionComponent = () => (
+  <LongTextTooltip
+    content="This is a very long tooltip that will be truncated to fit the screen. It will also have a max width of 400px."
+    maxLength={40}
+    tooltipPosition={TooltipPosition.bottom}/>
+)