@patternfly/react-core 6.0.0-alpha.62 → 6.0.0-alpha.64

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.61","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.63","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.61","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.63","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.61","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.63","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.62",
+  "version": "6.0.0-alpha.64",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.23",
-    "@patternfly/react-styles": "^6.0.0-alpha.23",
-    "@patternfly/react-tokens": "^6.0.0-alpha.23",
+    "@patternfly/react-icons": "^6.0.0-alpha.24",
+    "@patternfly/react-styles": "^6.0.0-alpha.24",
+    "@patternfly/react-tokens": "^6.0.0-alpha.24",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.139",
+    "@patternfly/patternfly": "6.0.0-alpha.150",
     "case-anything": "^2.1.13",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -65,5 +65,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c2840cf2e9e7f864392097450cc2ee11d163ed69"
+  "gitHead": "8e3a02226113a421ca5340644360999ef4cdf32e"
 }

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/CardDemos.md

@@ -10,8 +10,8 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, BellIcon } from '@patternfly/react-icons';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
-import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
-import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
+import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
+import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';

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/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -19,8 +19,8 @@ import {
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts';
-import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
-import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
+import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
+import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
@@ -88,8 +88,8 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                     ariaTitle="Mock stack chart"
                     domainPadding={{ x: [30, 25] }}
                     legendData={[
-                      { name: 'Low', symbol: { fill: chart_color_gold_100.value } },
-                      { name: 'Important', symbol: { fill: chart_color_gold_300.value } },
+                      { name: 'Low', symbol: { fill: chart_color_yellow_100.value } },
+                      { name: 'Important', symbol: { fill: chart_color_yellow_300.value } },
                       { name: 'Moderate', symbol: { fill: chart_color_orange_300.value } },
                       { name: 'Critical', symbol: { fill: chart_color_red_100.value } }
                     ]}
@@ -107,8 +107,8 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                     <ChartStack
                       horizontal
                       colorScale={[
-                        chart_color_gold_100.value,
-                        chart_color_gold_300.value,
+                        chart_color_yellow_100.value,
+                        chart_color_yellow_300.value,
                         chart_color_orange_300.value,
                         chart_color_red_100.value
                       ]}

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"
+
 ```