@patternfly/react-core 6.0.0-alpha.63 → 6.0.0-alpha.65

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.62","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.64","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.62","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.64","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.62","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.64","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.63",
+  "version": "6.0.0-alpha.65",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -65,5 +65,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e2f8bd614fe8c9c20f205f04ef3e8a26eabe1f33"
+  "gitHead": "c78a547d4e50b3766eead9a2814667c778c3c86f"
 }

package/src/components/Badge/Badge.tsx

@@ -7,6 +7,8 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
   screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
+  /** Adds styling to the badge to indicate it is disabled */
+  isDisabled?: boolean;
   /** content rendered inside the Badge */
   children?: React.ReactNode;
   /** additional classes added to the Badge */
@@ -15,6 +17,7 @@ export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
 
 export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
+  isDisabled = false,
   className = '',
   children = '',
   screenReaderText,
@@ -22,7 +25,12 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
 }: BadgeProps) => (
   <span
     {...props}
-    className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
+    className={css(
+      styles.badge,
+      (isRead ? styles.modifiers.read : styles.modifiers.unread) as any,
+      isDisabled && styles.modifiers.disabled,
+      className
+    )}
   >
     {children}
     {screenReaderText && <span className="pf-v6-screen-reader">{screenReaderText}</span>}

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -32,6 +32,11 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
+test(`Renders with class name ${styles.modifiers.disabled} when isDisabled prop is true`, () => {
+  render(<Badge isDisabled>Test</Badge>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.disabled);
+});
+
 test('Does not render pf-v6-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v6-screen-reader"></span>');

package/src/components/Badge/examples/Badge.md

@@ -18,3 +18,8 @@ import './Badge.css';
 
 ```ts file="./BadgeUnread.tsx"
 ```
+
+### Disabled
+
+```ts file="./BadgeDisabled.tsx"
+```

package/src/components/Badge/examples/BadgeDisabled.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Badge } from '@patternfly/react-core';
+
+export const BadgeRead: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Badge key={1} isDisabled isRead>
+      7
+    </Badge>
+    <Badge key={2} isDisabled isRead>
+      24
+    </Badge>
+    <Badge key={3} isDisabled>
+      240
+    </Badge>
+    <Badge key={4} isDisabled>
+      999+
+    </Badge>
+  </React.Fragment>
+);

package/src/components/Button/Button.tsx

@@ -208,7 +208,9 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       )}
       {countOptions && (
         <span className={css(styles.buttonCount, countOptions.className)}>
-          <Badge isRead={countOptions.isRead}>{countOptions.count}</Badge>
+          <Badge isRead={countOptions.isRead} isDisabled={isDisabled}>
+            {countOptions.count}
+          </Badge>
         </span>
       )}
     </Component>

package/src/components/EmptyState/index.ts

@@ -1,6 +1,4 @@
 export * from './EmptyState';
-export * from './EmptyStateHeader';
-export * from './EmptyStateIcon';
 export * from './EmptyStateBody';
 export * from './EmptyStateFooter';
 export * from './EmptyStateActions';

package/src/components/Hint/Hint.tsx

@@ -9,11 +9,21 @@ export interface HintProps {
   className?: string;
   /** Actions of the hint. */
   actions?: React.ReactNode;
+  /** Flag indicating that the actions have no offset */
+  hasNoActionsOffset?: boolean;
 }
 
-export const Hint: React.FunctionComponent<HintProps> = ({ children, className, actions, ...props }: HintProps) => (
+export const Hint: React.FunctionComponent<HintProps> = ({
+  children,
+  className,
+  actions,
+  hasNoActionsOffset = false,
+  ...props
+}: HintProps) => (
   <div className={css(styles.hint, className)} {...props}>
-    <div className={css(styles.hintActions)}>{actions}</div>
+    {actions && (
+      <div className={css(styles.hintActions, hasNoActionsOffset && styles.modifiers.noOffset)}>{actions}</div>
+    )}
     {children}
   </div>
 );

package/src/components/Hint/__tests__/Hint.test.tsx

@@ -47,12 +47,25 @@ test('renders actions options', () => {
   expect(actions).toBeVisible();
 });
 
-test(`renders with class ${styles.hintActions} if there is an action prop`, () => {
+test(`renders with class ${styles.hintActions} if there is an action prop and not have class ${styles.modifiers.noOffset} without hasNoActionsOffset prop`, () => {
   render(<Hint actions="actions">Test</Hint>);
 
   const hint = screen.getByText('actions');
 
   expect(hint).toHaveClass(styles.hintActions);
+  expect(hint).not.toHaveClass(styles.modifiers.noOffset);
+});
+
+test(`renders with class ${styles.modifiers.noOffset} if there is an action prop and hasNoActionsOffset is true`, () => {
+  render(
+    <Hint actions="actions" hasNoActionsOffset>
+      Test
+    </Hint>
+  );
+
+  const hint = screen.getByText('actions');
+
+  expect(hint).toHaveClass(styles.modifiers.noOffset);
 });
 
 test('renders with inherited element props spread to the component', () => {
@@ -65,3 +78,8 @@ test('matches hint snapshot', () => {
   const { asFragment } = render(<Hint />);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('actions are rendered', () => {
+  const { asFragment } = render(<Hint actions="test" />);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap

@@ -1,13 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`matches hint snapshot 1`] = `
+exports[`actions are rendered 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-hint"
   >
     <div
       class="pf-v6-c-hint__actions"
-    />
+    >
+      test
+    </div>
   </div>
 </DocumentFragment>
 `;
+
+exports[`matches hint snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hint"
+  />
+</DocumentFragment>
+`;

package/src/components/Hint/examples/Hint.md

@@ -20,3 +20,15 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 ```ts file="HintBasicWithoutTitle.tsx"
 
 ```
+
+### With actions
+
+You can add actions to a hint to allow users to respond to suggestions and initiate any related processes.
+
+When a `<Hint>` contains `actions`, a negative margin is applied to the actions so that they are better aligned with the hint title. For larger-sized titles or non-plain actions (such as a button), remove this negative margin by setting `hasNoActionsOffset` to `true`.
+
+To illustrate this behavior, select the "actions hasNoActionsOffset" checkbox in the following example.
+
+```ts file="HintActionsWithNoOffset.tsx"
+
+```

package/src/components/Hint/examples/HintActionsWithNoOffset.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Hint, HintTitle, HintBody, Button, Checkbox } from '@patternfly/react-core';
+
+export const HintActionsWithNoOffset: React.FunctionComponent = () => {
+  const [hasNoActionsOffset, setHasNoActionsOffset] = React.useState<boolean>(false);
+
+  const toggleOffset = (checked: boolean) => {
+    setHasNoActionsOffset(checked);
+  };
+
+  const actions = <Button variant="primary">Action</Button>;
+  return (
+    <>
+      <Checkbox
+        label="actions hasNoOffset"
+        isChecked={hasNoActionsOffset}
+        onChange={(_event, checked) => toggleOffset(checked)}
+        aria-label="remove actions offset"
+        id="toggle-actions-offset"
+        name="toggle-actions-offset"
+      />
+      <div style={{ marginTop: '15px' }}>
+        <Hint actions={actions} hasNoActionsOffset={hasNoActionsOffset}>
+          <HintTitle>Do more with Find it Fix it capabilities</HintTitle>
+          <HintBody>
+            Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
+          </HintBody>
+        </Hint>
+      </div>
+    </>
+  );
+};

package/src/demos/Filters/FilterDemos.md

@@ -21,9 +21,7 @@ Badge,
 Pagination,
 EmptyState,
 EmptyStateBody,
-EmptyStateHeader,
 EmptyStateFooter,
-EmptyStateIcon,
 EmptyStateActions,
 Title,
 Button,
@@ -39,34 +37,41 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 ### Search input
 
 ```ts file="./examples/FilterSearchInput.tsx"
+
 ```
 
 ### Single select
 
 ```ts file="./examples/FilterSingleSelect.tsx"
+
 ```
 
 ### Checkbox select
 
 ```ts file="./examples/FilterCheckboxSelect.tsx"
+
 ```
 
 ### Attribute search
 
 ```ts file="./examples/FilterAttributeSearch.tsx"
+
 ```
 
 ### Mixed select filter group
 
 ```ts file="./examples/FilterMixedSelectGroup.tsx"
+
 ```
 
 ### Single select filter group
 
 ```ts file="./examples/FilterSameSelectGroup.tsx"
+
 ```
 
 ### Faceted filter
 
 ```ts file="./examples/FilterFaceted.tsx"
+
 ```

package/src/deprecated/components/Wizard/examples/Wizard.md

@@ -10,13 +10,12 @@ deprecated: true
 ---
 
 import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
-DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, ModalVariant, Alert, EmptyState, EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
+DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, ModalVariant, Alert, EmptyState, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 
-
 If you seek a wizard solution that allows for more composition, see the [React](/components/wizard) tab.
 
 ## Examples
@@ -24,36 +23,43 @@ If you seek a wizard solution that allows for more composition, see the [React](
 ### Basic
 
 ```js file="./WizardBasic.tsx"
+
 ```
 
 ### Basic with disabled steps
 
 ```js file="./WizardBasicWithDisabledSteps.tsx"
+
 ```
 
 ### Anchors for nav items
 
 ```js file="./WizardAnchorsForNavItems.tsx"
+
 ```
 
 ### Incrementally enabled steps
 
 ```js file="./WizardIncrementallyEnabledSteps.tsx"
+
 ```
 
 ### Expandable steps
 
 ```js file="./WizardExpandableSteps.tsx"
+
 ```
 
 ### Finished
 
 ```js file="./WizardFinished.tsx"
+
 ```
 
 ### Enabled on form validation
 
 ```js file="./WizardEnabledOnFormValidation.tsx"
+
 ```
 
 ### Validate on button press
@@ -74,6 +80,7 @@ interface WizardContext {
 ```
 
 ```js file="./WizardValidateOnButtonPress.tsx"
+
 ```
 
 ### Progressive steps
@@ -81,7 +88,11 @@ interface WizardContext {
 ```js
 import React from 'react';
 import { Button, Radio, Alert } from '@patternfly/react-core';
-import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated'
+import {
+  Wizard as WizardDeprecated,
+  WizardFooter as WizardFooterDeprecated,
+  WizardContextConsumer as WizardContextConsumerDeprecated
+} from '@patternfly/react-core/deprecated';
 
 class ProgressiveWizard extends React.Component {
   constructor(props) {
@@ -367,14 +378,17 @@ class ProgressiveWizard extends React.Component {
 ### Get current step
 
 ```js file="./WizardGetCurrentStep.tsx"
+
 ```
 
 ### Wizard in modal
 
 ```js file="./WizardInModal.tsx"
+
 ```
 
 ### Wizard with drawer
 
 ```js file="./WizardWithDrawer.tsx"
+
 ```