Merge pull request #773 from thatblindgeye/iss767

fix(MessageBar): updated padding on action buttons

Author: thatblindgeye

packages/module/src/MessageBar/AttachButton.scss

@@ -41,6 +41,5 @@
 .pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

packages/module/src/MessageBar/MessageBar.scss

@@ -147,13 +147,22 @@
   .pf-chatbot__message-textarea {
     font-size: var(--pf-t--global--font--size--sm) !important;
   }
+}
 
+.pf-m-compact {
   .pf-chatbot__message-bar-actions {
-    padding-block-start: var(--pf-t--global--spacer--md);
-    padding-block-end: var(--pf-t--global--spacer--md);
+    padding-block-start: var(--pf-t--global--spacer--sm);
+    padding-block-end: var(--pf-t--global--spacer--sm);
   }
 }
 
+// ============================================================================
+// Multiline textarea styles (2+ lines)
+// ============================================================================
+.pf-chatbot__message-bar.pf-m-multiline {
+  border-radius: calc(var(--pf-t--global--border--radius--small) * 2);
+}
+
 // ============================================================================
 // High contrast styles
 // ============================================================================

packages/module/src/MessageBar/MessageBar.tsx

@@ -161,6 +161,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
   const [isComposing, setIsComposing] = useState(false);
+  const [isMultiline, setIsMultiline] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
@@ -209,6 +210,19 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     return lines > 2;
   };
 
+  const checkIfMultiline = useCallback(
+    (field: HTMLTextAreaElement) => {
+      const parent = field.parentElement;
+      const grandparent = parent?.parentElement;
+      if (grandparent) {
+        const containerHeight = grandparent.offsetHeight;
+        const threshold = isCompact ? 56 : 70;
+        setIsMultiline(containerHeight > threshold);
+      }
+    },
+    [isCompact]
+  );
+
   const setAutoWidth = useCallback((field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
@@ -263,12 +277,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     if (field) {
       if (field.value === '') {
         setInitialLineHeight(field);
+        setIsMultiline(false);
       } else {
         setAutoHeight(field);
         setAutoWidth(field);
+        checkIfMultiline(field);
       }
     }
-  }, [displayMode, message, setAutoWidth]);
+  }, [displayMode, message, setAutoWidth, checkIfMultiline]);
 
   useEffect(() => {
     const field = textareaRef.current;
@@ -284,13 +300,15 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
       if (textareaRef.current) {
         if (event.target.value === '') {
           setInitialLineHeight(textareaRef.current);
+          setIsMultiline(false);
         } else {
           setAutoHeight(textareaRef.current);
+          checkIfMultiline(textareaRef.current);
         }
       }
       setMessage(event.target.value);
     },
-    [onChange]
+    [onChange, checkIfMultiline]
   );
 
   // Handle sending message
@@ -453,7 +471,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     return (
       <AttachMenu
         toggle={(toggleRef) => (
-          <div ref={toggleRef} className={`pf-chatbot__message-bar ${className ?? ''}`}>
+          <div ref={toggleRef} className={css('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className)}>
             {messageBarContents}
           </div>
         )}
@@ -481,6 +499,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
         isPrimary && 'pf-m-primary',
         hasAiIndicator && 'pf-v6-m-ai-indicator',
         isThinking && 'pf-v6-m-thinking',
+        isMultiline && 'pf-m-multiline',
         className
       )}
     >

packages/module/src/MessageBar/MicrophoneButton.scss

@@ -53,6 +53,5 @@
 .pf-v6-c-button.pf-chatbot__button--microphone.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

packages/module/src/MessageBar/SendButton.scss

@@ -58,6 +58,5 @@
 .pf-v6-c-button.pf-chatbot__button--send.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

packages/module/src/MessageBar/StopButton.scss

@@ -41,6 +41,5 @@
 .pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }