Skip to content

Commit

Permalink
fix(pf-approach): added example for message bar footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattnolting
mattnolting committed Sep 6, 2024
1 parent 3c65ba7 commit d00d7bf
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 54 deletions.
113 changes: 59 additions & 54 deletions packages/module/src/MessageBar/MessageBar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
27 changes: 27 additions & 0 deletions packages/module/src/MessageBar/MessageBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down

0 comments on commit d00d7bf

Please sign in to comment.