@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.4

package/src/ChatbotModal/ChatbotModal.tsx

@@ -10,7 +10,10 @@ import { ChatbotDisplayMode } from '../Chatbot';
 export interface ChatbotModalProps extends Omit<ModalProps, 'ref'> {
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Additional className applied to modal */
   className?: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
 export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({
@@ -18,6 +21,7 @@ export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({
   displayMode = ChatbotDisplayMode.default,
   className,
   isOpen,
+  isCompact,
   ...props
 }: ChatbotModalProps) => {
   const modal = (
@@ -26,7 +30,7 @@ export const ChatbotModal: React.FunctionComponent<ChatbotModalProps> = ({
       ouiaId="ChatbotModal"
       aria-labelledby="chatbot-modal-title"
       aria-describedby="chatbot-modal"
-      className={`pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${className}`}
+      className={`pf-chatbot__chatbot-modal pf-chatbot__chatbot-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className}`}
       backdropClassName="pf-chatbot__chatbot-modal-backdrop"
       {...props}
     >

package/src/CodeModal/CodeModal.scss

@@ -61,8 +61,10 @@
   .pf-v6-c-code-editor__header-main {
     display: none;
   }
-  .pf-chatbot__code-modal-file-details {
-    padding-inline-start: var(--pf-t--global--spacer--md);
+  .pf-v6-c-modal-box__close {
+    .pf-v6-c-button.pf-m-plain {
+      --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
+    }
   }
 }
 
@@ -78,10 +80,16 @@
   }
 }
 
-.pf-chatbot__code-modal-body {
+.pf-chatbot__code-modal-editor {
   flex: 1;
 }
 
 .pf-chatbot__code-modal--fullscreen {
   height: inherit !important; // override shared modal so code editor works in full screen
 }
+
+.pf-chatbot__code-modal.pf-m-compact {
+  .pf-chatbot__code-modal-body {
+    gap: var(--pf-t--global--spacer--md);
+  }
+}

package/src/CodeModal/CodeModal.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CodeModal from './CodeModal';
+
+describe('ChatbotModal', () => {
+  it('should render compact modal', () => {
+    render(
+      <CodeModal
+        isCompact
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        handleModalToggle={jest.fn()}
+        onPrimaryAction={jest.fn()}
+        onSecondaryAction={jest.fn()}
+        title="Preview attachment"
+        primaryActionBtn="Submit"
+        secondaryActionBtn="Cancel"
+      ></CodeModal>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+  });
+});

package/src/CodeModal/CodeModal.tsx

@@ -40,6 +40,8 @@ export interface CodeModalProps {
   title: string;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
 export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
@@ -57,6 +59,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
   secondaryActionBtn,
   title,
   displayMode = ChatbotDisplayMode.default,
+  isCompact,
   ...props
 }: CodeModalProps) => {
   const [newCode, setNewCode] = React.useState(code);
@@ -94,8 +97,9 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
       ouiaId="CodeModal"
       aria-labelledby="code-modal-title"
       aria-describedby="code-modal"
-      className={`pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`}
+      className={`pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`}
       displayMode={displayMode}
+      isCompact={isCompact}
     >
       <ModalHeader title={title} labelId="code-modal-title" />
       <ModalBody id="code-modal-body">
@@ -103,7 +107,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
           <StackItem className="pf-chatbot__code-modal-file-details">
             <FileDetails fileName={fileName} />
           </StackItem>
-          <StackItem className="pf-chatbot__code-modal-body">
+          <StackItem className="pf-chatbot__code-modal-editor">
             <CodeEditor
               isDarkTheme
               isLineNumbersVisible={isLineNumbersVisible}

package/src/FileDetails/FileDetails.tsx

@@ -946,7 +946,7 @@ export const FileDetails = ({
 }: PropsWithChildren<FileDetailsProps>) => {
   const language = extensionToLanguage[path.extname(fileName).slice(1)]?.toUpperCase();
   return (
-    <Flex className={`pf-chatbot__file-details ${className}`} gap={{ default: 'gapSm' }}>
+    <Flex className={`pf-chatbot__file-details ${className ? className : ''}`} gap={{ default: 'gapSm' }}>
       <Flex
         className="pf-chatbot__code-icon"
         justifyContent={{ default: 'justifyContentCenter' }}

package/src/FileDetails/__snapshots__/FileDetails.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`FileDetails should render file details 1`] = `
 <div>
   <div
-    class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details undefined"
+    class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
   >
     <div
       class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"

package/src/FileDetailsLabel/__snapshots__/FileDetailsLabel.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`FileDetailsLabel should render file details label 1`] = `
           class="pf-chatbot__file-label-contents"
         >
           <div
-            class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details undefined"
+            class="pf-v6-l-flex pf-m-gap-sm pf-chatbot__file-details "
           >
             <div
               class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"

package/src/PreviewAttachment/PreviewAttachment.tsx

@@ -22,6 +22,8 @@ export interface PreviewAttachmentProps {
   title?: string;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
 export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps> = ({
@@ -32,7 +34,8 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
   onDismiss = undefined,
   onEdit,
   title = 'Preview attachment',
-  displayMode = ChatbotDisplayMode.default
+  displayMode = ChatbotDisplayMode.default,
+  isCompact
 }: PreviewAttachmentProps) => {
   const handleEdit = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
@@ -60,6 +63,7 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
       title={title}
       isReadOnly
       displayMode={displayMode}
+      isCompact={isCompact}
     />
   );
 };

package/src/Settings/Settings.scss

@@ -32,3 +32,14 @@
   font-weight: var(--pf-t--global--font--weight--body--bold);
   text-align: center;
 }
+
+.pf-chatbot__settings-form-container.pf-m-compact {
+  .pf-chatbot__settings-form-row {
+    padding: var(--pf-t--global--spacer--md);
+    font-size: var(--pf-t--global--font--size--body--md);
+  }
+}
+
+.pf-chatbot__header.pf-m-compact {
+  padding-inline-start: var(--pf-t--global--spacer--md);
+}

package/src/Settings/SettingsForm.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';
+import '@testing-library/jest-dom';
 
 describe('SettingsForm', () => {
   it('should render settingsForm with custom classname', () => {
@@ -25,4 +26,20 @@ describe('SettingsForm', () => {
 
     expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
   });
+
+  it('should render settingsForm with isCompact', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm data-testid="settings-form" fields={fields} isCompact />);
+    expect(screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Settings/SettingsForm.tsx

@@ -5,10 +5,20 @@ export interface SettingsFormProps {
   className?: string;
   /** Array of fields to display in the settings layout */
   fields?: { id: string; label: string; field: React.ReactElement }[];
+  /** Sets form to compact styling. */
+  isCompact?: boolean;
 }
 
-export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({ className, fields = [], ...props }) => (
-  <div className={`pf-chatbot__settings-form-container ${className}`} {...props}>
+export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({
+  className,
+  fields = [],
+  isCompact,
+  ...props
+}) => (
+  <div
+    className={`pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}`}
+    {...props}
+  >
     <form className="pf-chatbot__settings-form">
       {fields.map((field) => (
         <div className="pf-chatbot__settings-form-row" key={field.label}>