Merge branch 'patternfly:main' into main

Author: wise-king-sullyman

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

@@ -13,7 +13,7 @@ The component groups extension contains a range of React components that are mor
 
 The creation and maintenance of this extension is a collaborative effort between the PatternFly and Red Hat Hybrid Cloud Console teams. All component groups receive accessibility and design reviews, and we are working to improve internationalization, add unit test coverage, and ensure that CSS overrides all correctly reference the PatternFly CSS API.
 
-**Note:** This extension replaces [`RedHatInsights/frontend-components`](https://github.com/RedHatInsights/frontend-components). If you previoulsy used `frontend-components`, you can refer to [this migration guide](https://github.com/patternfly/react-component-groups/migration.md) to help you transition to `react-component-groups`.
+**Note:** This extension replaces [`RedHatInsights/frontend-components`](https://github.com/RedHatInsights/frontend-components). If you previoulsy used `frontend-components`, you can refer to [this migration guide](https://github.com/patternfly/react-component-groups/blob/main/migration.md) to help you transition to `react-component-groups`.
 
 ## Contribution guidelines
 

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

@@ -16,13 +16,13 @@ propComponents: ['CloseButton']
 import { CloseIcon } from '@patternfly/react-icons';
 import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseButton';
 
-**Close button**
+The **close button** component provides a way for users to exit a modal, dialogue, or similar action. To further customize this component, you can also utilize all properties of the [button component](/components/button).
 
-The close button component provides a way for users to exit a modal, dialogue, or similar action.
+## Examples
 
-## Examples ##
+### Basic close button
 
-You can use  onClick  to execute a callback when a user selects the close button.
+You can use `onClick` to execute a callback when a user clicks the close button.
 
 ```js file="./CloseButtonExample.tsx"
 

packages/module/patternfly-docs/content/extensions/component-groups/examples/CloseButton/CloseButtonExample.tsx

@@ -4,6 +4,6 @@ import CloseButton from '@patternfly/react-component-groups/dist/dynamic/CloseBu
 
 export const BasicExample: React.FunctionComponent = () => (
   <>
-    <CloseButton onClick={()=>{console.log('Close button clicked')}} />
+    <CloseButton onClick={()=>{console.log('Close button clicked')}} style={{ float: 'none' }} />
   </>
 );

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

@@ -16,7 +16,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
 
 import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState";
 
-The **error state** component repurposes the `EmptyState` component to display an error to users.
+The **error state** component repurposes the `EmptyState` component to display an error to users. To further customize this component, you can also utilize all properties of the [empty state component](/components/empty-state), with the `exception` of `children`.
 
 ## Examples
 
@@ -30,7 +30,7 @@ To provide users with error details, a basic error state should contain an appro
 
 ### Custom footer
 
-To override default action button, specify your own using `customFooter`. 
+To override the default action button, specify your own using `customFooter`. 
 
 ```js file="./ErrorStateFooterExample.tsx"
 

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

@@ -17,8 +17,14 @@ A **not authorized** component displays an error screen to users when they attem
 
 A basic not authorized component displays a title, a description, and custom actions. 
 
-You can customize the not authorized component to fit your use case by specifying the `serviceName` to appear in the title, the `description` to provide appropriate context for the error, and the `actions` that a user can take instead.
+```js file="./NotAuthorizedDefaultExample.tsx"
 
-```js file="./NotAuthorizedExample.tsx"
+```
+
+### Not authorized with custom actions
+
+You can customize the not authorized component to fit your use case by specifying the `serviceName` to appear in the title, a `description` of appropriate context for the error, and the `actions` that a user can take instead.
+
+```js file="./NotAuthorizedCustomExample.tsx"
 
 ```

packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedExample.tsx renamed to packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedCustomExample.tsx

@@ -5,7 +5,7 @@ import NotAuthorized from "@patternfly/react-component-groups/dist/dynamic/NotAu
 export const BasicExample: React.FunctionComponent = () => {
   const primaryAction = 
     <Button key="1">
-      First action
+      Custom primary action
     </Button>;
   const secondaryActions = [
     <Button key="2" variant="link">
@@ -19,7 +19,6 @@ export const BasicExample: React.FunctionComponent = () => {
     <NotAuthorized 
       primaryAction={primaryAction} 
       secondaryActions={secondaryActions}
-      className="something" 
       description="Description text" 
       serviceName="Demo bundle"
       prevPageButtonText="Go to previous page"

packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedDefaultExample.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import NotAuthorized from "@patternfly/react-component-groups/dist/dynamic/NotAuthorized";
+
+export const BasicExample: React.FunctionComponent = () => (
+  <NotAuthorized 
+    description="Description text" 
+    serviceName="Demo bundle"
+    prevPageButtonText="Go to previous page"
+  />
+);
+

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

@@ -24,24 +24,26 @@ A **warning modal** component displays a modal when a user tries to perform a ri
 
 A basic warning modal is triggered when a user tries to perform an action that is deemed risky. 
 
-You can customize the contents of the modal to fit your use cases. To adjust the text in the modal, pass your desired title to `title` and your message to the `<WarningModal>` component. To customize the action buttons in the modal, use `onConfirm` and `onClose`.
+You can customize the contents of the modal to fit your use cases. To adjust the text in the modal, pass your desired title to `title` and your message to the `<WarningModal>` component. To customize the action buttons in the modal, use `onConfirm` and `onClose`. 
+
+For further customization, you can utilize all properties of the [modal component](/components/modal), with the exception of `ref`.
 
 ```js file="./WarningModalExample.tsx"
 
 ```
 
-### Warning Modal with danger button variant
+### Warning modal with a custom button variant
 
-You can customize the modal to have a confirm button with a danger color
+You can apply custom variant to a warning modal's confirmation button.
 
 ```js file="./WarningModalDangerExample.tsx"
 
 ```
 
 
-### Warning Modal with checkbox
+### Warning modal with a checkbox
 
-You can customize the Warning Modal to include a checkbox to double check the user wants to use the selected action.
+To confirm that a user wishes to initiate a selected action, you can add a checkbox to a warning modal.
 
 ```js file="./WarningModalCheckboxExample.tsx"
 

packages/module/src/CloseButton/CloseButton.tsx

@@ -1,41 +1,32 @@
 import React from 'react';
 import { Button, ButtonProps, ButtonVariant } from '@patternfly/react-core';
 import { CloseIcon } from '@patternfly/react-icons';
-import clsx from 'clsx';
 import { createUseStyles } from 'react-jss';
+import clsx from 'clsx';
 
 const useStyles = createUseStyles({
-  '& float-right': {
-    float: 'right'
+  closeButton: {
+    float: 'inline-end',
+    padding: '10px 14px'
   },
-  '&  no-padding': {
-    padding: 0
-  }
 });
 
 export interface CloseButtonProps extends ButtonProps {
-  /** Additional styling to apply to the close button. */
-  additionalClassName?: string;
-  /** Aria label for accessibility */
-  ariaLabel?: string;
-  /** Data test id used for testing. */
+  /** Data test ID used for testing. */
   dataTestID?: string;
-  /** Callback when the button is clicked*/
-  onClick: (event: any) => void;
-}
+};
 
 const CloseButton: React.FunctionComponent<CloseButtonProps> = ({
-  additionalClassName,
-  ariaLabel,
+  className,
   dataTestID,
   onClick,
   ...props
 }: CloseButtonProps) => {
   const classes = useStyles();
   return (
     <Button
-      aria-label={ariaLabel || 'Close'}
-      className={clsx(classes, additionalClassName)}
+      aria-label={props['aria-label'] || 'Close'}
+      className={clsx(classes.closeButton, className)}
       data-test-id={dataTestID}
       onClick={onClick}
       variant={ButtonVariant.plain}

packages/module/src/NotAuthorized/NotAuthorized.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateProps, EmptyStateVariant, EmptyStateHeader, EmptyStateFooter, EmptyStateActions, } from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateProps, EmptyStateVariant, EmptyStateHeader, EmptyStateFooter, EmptyStateActions, ButtonVariant, } from '@patternfly/react-core';
 import { LockIcon } from '@patternfly/react-icons';
 
 export interface NotAuthorizedProps extends Omit<EmptyStateProps, 'children' | 'title'> {
@@ -46,18 +46,18 @@ const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
     <EmptyStateBody>{description}</EmptyStateBody>
     <EmptyStateFooter>
       {primaryAction ? <EmptyStateActions>{primaryAction}</EmptyStateActions> : null}
-      <EmptyStateActions>
-        {secondaryActions ? <EmptyStateActions>{secondaryActions}</EmptyStateActions> : null}
-        {showReturnButton &&
+      {showReturnButton && !primaryAction &&
             (document.referrer ? (
-              <Button variant="link" onClick={() => history.back()}>
+              <Button variant={ButtonVariant.primary} onClick={() => history.back()}>
                 {prevPageButtonText}
               </Button>
             ) : (
-              <Button variant="link" component="a" href={toLandingPageUrl}>
+              <Button variant={ButtonVariant.primary} component="a" href={toLandingPageUrl}>
                 {toLandingPageText}
               </Button>
             ))}
+      <EmptyStateActions>
+        {secondaryActions ? <EmptyStateActions>{secondaryActions}</EmptyStateActions> : null}
       </EmptyStateActions>
     </EmptyStateFooter>
   </EmptyState>