Merge pull request #89 from rebeccaalpert/attachment-edit-restyle

fix(CodeModal): Restyle to match updated design
patternfly · Aug 30, 2024 · 3950c38 · 3950c38
2 parents d8e71c9 + 790a8b6
commit 3950c38
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 2 deletions.
diff --git a/packages/module/src/CodeModal/CodeModal.scss b/packages/module/src/CodeModal/CodeModal.scss
@@ -4,8 +4,98 @@
 }
 
 .pf-chatbot__code-icon {
- background-color: var(--pf-t--global--icon--color--status--custom--default);
+ background-color: #37a3a3;
  border-radius: var(--pf-t--global--border--radius--tiny);
  width: 24px;
  height: 24px;
 }
+
+.pf-chatbot__code-modal {
+ --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium);
+
+ .pf-v6-c-modal-box__title {
+ --pf-v6-c-modal-box__title--FontSize: var(--pf-t--global--font--size--heading--h2);
+ }
+ .pf-v6-c-code-editor {
+ --pf-v6-c-code-editor__main--BackgroundColor: #1f1f1f;
+ --pf-v6-c-code-editor__main--BorderEndStartRadius: 0;
+ --pf-v6-c-code-editor__main--BorderEndEndRadius: 0;
+ --pf-v6-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--small);
+ }
+ .pf-v6-c-code-editor__header {
+ background: #1f1f1f;
+ /** this is for the attachment editor header */
+ border-start-start-radius: var(--pf-t--global--border--radius--small);
+ border-start-end-radius: var(--pf-t--global--border--radius--small);
+ }
+ .pf-chatbot__code-modal--controls > .pf-v6-c-code-editor__header {
+ flex-direction: row-reverse;
+ border-radius: var(--pf-t--global--border--radius--small);
+ }
+ .pf-v6-c-code-editor__header::before {
+ border-block-end: none;
+ }
+ .pf-v6-c-code-editor__header-content {
+ --pf-v6-c-code-editor__header-content--BackgroundColor: #1f1f1f;
+ --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: #1f1f1f;
+ --pf-v6-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-code-editor__header-content--PaddingInlineEnd: 0;
+ justify-content: flex-end;
+ }
+ .pf-chatbot__code-modal--controls > .pf-v6-c-code-editor__header > .pf-v6-c-code-editor__header-content {
+ --pf-v6-c-code-editor__header-content--BorderStartStartRadius: 0;
+ border-start-end-radius: var(--pf-t--global--border--radius--small);
+ }
+ .pf-v6-c-code-editor__tab {
+ --pf-v6-c-code-editor__tab--BackgroundColor: #1f1f1f;
+ --pf-v6-c-code-editor__tab--Color: #fff;
+ border: none;
+ --pf-v6-c-code-editor__tab--BorderStartEndRadius: 0;
+ border-start-start-radius: var(--pf-t--global--border--radius--small);
+ --pf-t--global--font--weight--body--default: 500;
+ }
+ .pf-v6-c-code-editor__tab-icon {
+ display: none;
+ }
+ .pf-v6-c-code-editor__main {
+ border: unset;
+ --pf-v6-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--small);
+ --pf-v6-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--small);
+ }
+ .pf-v6-c-code-editor__controls {
+ padding-right: var(--pf-t--global--spacer--sm);
+ }
+ .pf-v6-c-code-editor__controls > div > .pf-v6-c-button {
+ --pf-v6-c-button--m-plain__icon--Color: #fff;
+ --pf-v6-c-button--hover__icon--Color: #fff;
+ }
+ .pf-v6-c-code-editor__header-main {
+ display: none;
+ }
+ .pf-v6-c-button.pf-m-primary.pf-m-block,
+ .pf-v6-c-button.pf-m-secondary.pf-m-block {
+ padding-top: var(--pf-t--global--spacer--md);
+ padding-bottom: var(--pf-t--global--spacer--md);
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--md);
+ }
+ .pf-v6-c-button.pf-m-primary.pf-m-block {
+ --pf-v6-c-button--FontWeight: 500;
+ }
+ .pf-v6-c-modal-box__close {
+ --pf-v6-c-modal-box__close--InsetBlockStart: 1.125rem;
+ }
+}
+
+.pf-v6-theme-dark {
+ .pf-chatbot__code-modal {
+ .pf-v6-c-code-editor__controls > div > button {
+ --pf-v6-c-button--m-plain__icon--Color: #c7c7c7;
+ --pf-v6-c-button--hover__icon--Color: #c7c7c7;
+ }
+ }
+ .pf-v6-c-modal-box.pf-chatbot__code-modal {
+ .pf-v6-c-modal-box__title {
+ color: #fff;
+ }
+ }
+}
diff --git a/packages/module/src/CodeModal/CodeModal.tsx b/packages/module/src/CodeModal/CodeModal.tsx
@@ -20,12 +20,16 @@ import {
 import { CodeIcon } from '@patternfly/react-icons';
 
 export interface CodeModalProps {
+ /** Class applied to code editor */
+ codeEditorControlClassName?: string;
  /** Text shown in code editor */
  code: string;
  /** Filename, including extension, of file shown in editor */
  fileName: string;
  /** Whether copying code is allowed */
  isCopyEnabled?: boolean;
+ /** Whether line numbers show in the code editor */
+ isLineNumbersVisible?: boolean;
  /** Whether code is read-only */
  isReadOnly?: boolean;
  /** Action assigned to primary modal button */
@@ -47,8 +51,10 @@ export interface CodeModalProps {
 export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
  fileName,
  code,
+ codeEditorControlClassName: codeEditorClassName,
  handleModalToggle,
  isCopyEnabled,
+ isLineNumbersVisible,
  isModalOpen,
  isReadOnly,
  onPrimaryAction,
@@ -94,6 +100,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
  aria-labelledby="code-modal-title"
  aria-describedby="code-modal"
  width="25%"
+ className="pf-chatbot__code-modal"
  >
  <ModalHeader title={title} labelId="code-modal-title" />
  <ModalBody id="code-modal-body">
@@ -121,7 +128,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
  <StackItem>
  <CodeEditor
  isDarkTheme
- isLineNumbersVisible
+ isLineNumbersVisible={isLineNumbersVisible}
  isLanguageLabelVisible
  isCopyEnabled={isCopyEnabled}
  isReadOnly={isReadOnly}
@@ -130,6 +137,7 @@ export const CodeModal: React.FunctionComponent<CodeModalProps> = ({
  onEditorDidMount={onEditorDidMount}
  height="400px"
  onCodeChange={onCodeChange}
+ className={codeEditorClassName}
  {...props}
  />
  </StackItem>

diff --git a/packages/module/src/PreviewAttachment/PreviewAttachment.tsx b/packages/module/src/PreviewAttachment/PreviewAttachment.tsx
@@ -42,10 +42,12 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
 
  return (
  <CodeModal
+ codeEditorControlClassName="pf-chatbot__code-modal--controls"
  code={code}
  fileName={fileName}
  handleModalToggle={handleModalToggle}
  isCopyEnabled
+ isLineNumbersVisible={false}
  isModalOpen={isModalOpen}
  onPrimaryAction={handleEdit}
  onSecondaryAction={handleDismiss}

diff --git a/packages/module/src/main.scss b/packages/module/src/main.scss
@@ -5,6 +5,7 @@
 @import './ChatbotHeader/ChatbotHeader';
 @import './ChatbotFooter/ChatbotFooter';
 @import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
+@import './CodeModal/CodeModal';
 @import './MessageBar/MessageBar';
 @import './MessageBox/MessageBox';
 @import './Message/Message';