patternfly · tlabaj · Jun 5, 2024 · May 31, 2024 · May 31, 2024 · May 31, 2024
diff --git a/packages/react-core/src/components/Hint/Hint.tsx b/packages/react-core/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>
 );

diff --git a/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx b/packages/react-core/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();
+});
diff --git a/packages/react-core/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap b/packages/react-core/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>
+`;
diff --git a/packages/react-core/src/components/Hint/examples/Hint.md b/packages/react-core/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"
+
+```
diff --git a/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx b/packages/react-core/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>
+    </>
+  );
+};