From d00d7bfa6a100bea73901effca70ed146a56826e Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Fri, 6 Sep 2024 12:55:57 -0400
Subject: [PATCH] fix(pf-approach): added example for message bar footer

---
 .../module/src/MessageBar/MessageBar.scss     | 113 +++++++++---------
 packages/module/src/MessageBar/MessageBar.tsx |  27 +++++
 2 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/packages/module/src/MessageBar/MessageBar.scss b/packages/module/src/MessageBar/MessageBar.scss
index 5e2d81c8..c0e2f401 100644
--- a/packages/module/src/MessageBar/MessageBar.scss
+++ b/packages/module/src/MessageBar/MessageBar.scss
@@ -6,69 +6,74 @@
 // ============================================================================
 // Chatbot Footer - Message Bar
 // ============================================================================
+
+// * Chatbot footer
+:root, .pf-chatbot__footer--reset {
+  --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
+}
+
+// - Chatbot footer
+.pf-chatbot__footer {
+  display: grid;
+  justify-content: stretch;
+  row-gap: var(--pf-chatbot__footer--RowGap);
+}
+
+// * Chatbot message bar
+:root, .pf-chatbot__message-bar--reset {
+  --pf-chatbot__message-bar--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-chatbot__message-bar--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-chatbot__message-bar--hover--BoxShadow: var(--pf-t--global--box-shadow--sm);
+}
+
+// - Chatbot message bar
 .pf-chatbot__message-bar {
-  min-height: 64px;
-  background-color: var(--pf-t--global--background--color--primary--default);
-  border-radius: calc(
-    var(--pf-t--global--border--radius--medium) * 2
-  ); // 32px corners - universal for single and multi-line height
-  padding-inline-end: var(--pf-t--global--spacer--sm);
+  display: flex;
+  flex-wrap: wrap;
+  background-color: var(--pf-chatbot__message-bar--BackgroundColor);
+  border-radius: var(--pf-chatbot__message-bar--BorderRadius);
   transition: box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm);
 
-  &-input {
-    padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm)
-  }
-
   &:hover {
-    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+    box-shadow: var(--pf-t--global--box-shadow--sm);
   }
 
   &:focus-within {
     box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
   }
+}
 
-  // Input
-  // --------------------------------------------------------------------------
-  &-input {
-    align-self: stretch;
-    display: flex;
-    // align-items: center;
-    flex-grow: 1;
-    padding: calc(var(--pf-t--global--spacer--100) + var(--pf-t--global--spacer--300)) var(--pf-t--global--spacer--400);
-  }
-  .pf-chatbot__message-textarea {
-    align-self: stretch;
-    display: flex;
-    // align-items: center;
-    flex-grow: 1;
-    max-width: 100%;
-    max-height: 232px; // 8 rows + padding
-    font-size: var(--pf-t--global--font--size--md);
-    line-height: 24px;
-  }
+// * Chatbot message bar actions
+:root, .pf-chatbot__message-bar-actions--reset {
+  --pf-chatbot__message-bar-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-chatbot__message-bar-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-chatbot__message-bar-action--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-chatbot__message-bar-action--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+}
+
+// - Chatbot message bar actions
+.pf-chatbot__message-bar-actions {
+  display: flex;
+  justify-content: end;
+  padding-block-start: var(--pf-chatbot__message-bar-action--PaddingBlockStart);
+  padding-block-end: var(--pf-chatbot__message-bar-actionvar--PaddingBlockEnd);
+  padding-inline-start: var(--pf-chatbot__message-bar-actionvar--PaddingInlineStart);
+  padding-inline-end: var(--pf-chatbot__message-bar-action--PaddingInlineEnd);
+}
 
-  //.pf-chatbot__message-textarea {
-  //  --pf-v6-c-form-control--Resize: none;
-  //  --pf-v6-c-form-control--before--BorderStyle: none;
-  //  --pf-v6-c-form-control--after--BorderStyle: none;
-  //  --pf-v6-c-form-control--PaddingBlockStart: 0;
-  //  --pf-v6-c-form-control--PaddingBlockEnd: 0;
-  //  --pf-v6-c-form-control--PaddingInlineStart: 0;
-  //  --pf-v6-c-form-control--PaddingInlineEnd: 0;
-  //  --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
-  //
-  //  max-width: 100%;
-  //  max-height: 232px; // 8 rows + padding
-  //  font-size: var(--pf-t--global--font--size--md);
-  //  line-height: 24px;
-  //
-  //  textarea:focus {
-  //    outline: none;
-  //    offset: none;
-  //  }
-  //
-  //  textarea:focus-visible {
-  //    outline: none;
-  //  }
-  //}
+// - Chatbot message bar input
+.pf-chatbot__message-bar-input {
+  flex: 1 1 auto;
+  padding-block-start: var(--pf-chatbot__message-bar__input--PaddingBlockStart);
+  padding-block-end: var(--pf-chatbot__message-bar__input--PaddingBlockEnd);
+  padding-inline-start: var(--pf-chatbot__message-bar__input--PaddingInlineStart);
+  padding-inline-end: var(--pf-chatbot__message-bar__input--PaddingInlineEnd);
 }
+
+// - Form control textarea
+.pf-v6-c-form-control__textarea {
+  padding-block-start: var(--pf-v6-c-form-control--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-form-control--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
+}
\ No newline at end of file
diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx
index 14ce1dff..32bc9274 100644
--- a/packages/module/src/MessageBar/MessageBar.tsx
+++ b/packages/module/src/MessageBar/MessageBar.tsx
@@ -95,6 +95,33 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
         {(alwayShowSendButton || message) && <SendButton value={message} onClick={handleSend} />}
       </FlexItem>
     </Flex>
+  // This is how I would structure the footer
+  // Don't use a layout, rather apply all CSS to the component
+  // The only addition to PF would be to .pf-v6-c-form-control__textarea
+  //   <div class="pf-chatbot__footer ">
+  //   <hr class="pf-v6-c-divider">
+  //   <div class="pf-chatbot__message-bar">
+  //     <div class="pf-chatbot__message-bar-input">
+  //       <div role="textbox" contenteditable="true" class="pf-v6-c-form-control__textarea">Type in here...</div>
+  //     </div>
+  //     <div class="pf-chatbot__message-bar-actions">
+  //       <button aria-describedby="pf-chatbot__tooltip--use-microphone" aria-disabled="false" aria-label="Microphone Button" class="pf-v6-c-button pf-m-plain pf-chatbot__button--microphone" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-7">
+  //         <span class="pf-v6-c-button__icon pf-m-start">
+  //           <span class="pf-v6-c-icon pf-m-inline">
+  //             <span class="pf-v6-c-icon__content pf-m-xl">
+  //               <svg class="pf-v6-svg" viewBox="0 0 352 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z"></path></svg>
+  //             </span>
+  //           </span>
+  //         </span>
+  //       </button>
+  //     </div>
+  //   </div>
+  //   <div class="pf-chatbot__footnote">
+  //     <button aria-disabled="false" class="pf-v6-c-button pf-m-link pf-m-small" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-link-1">
+  //       <span class="pf-v6-c-button__text">Lightspeed uses AI. Check for mistakes. <svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></span>
+  //     </button>
+  //   </div>
+  // </div>
   );
 };