From b7636e19532fbc2b505e4d3d83b3c11282542fc1 Mon Sep 17 00:00:00 2001
From: Jonnathan Charpentier
 <92122357+JonnCharpentier@users.noreply.github.com>
Date: Fri, 13 Oct 2023 09:17:30 -0600
Subject: [PATCH] feat: adding fullWidth version of RichTextField (#966)

Co-authored-by: JonnCh <jonnch93@gmail.com>
---
 src/inputs/RichTextField.stories.tsx | 17 +++++++++++++++++
 src/inputs/RichTextField.tsx         |  8 +++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/inputs/RichTextField.stories.tsx b/src/inputs/RichTextField.stories.tsx
index 8f5ea6f45..6992ee541 100644
--- a/src/inputs/RichTextField.stories.tsx
+++ b/src/inputs/RichTextField.stories.tsx
@@ -81,3 +81,20 @@ export function ToggleReadOnly() {
     </>
   );
 }
+
+export function FullWidth() {
+  const value =
+    "<div><!--block-->This is some content<br><br></div><ul><li><!--block-->this is a bullet</li><li><!--block--><em>another bullet here</em></li></ul><div><!--block--><br><strong>some really important content</strong></div>";
+
+  return (
+    <RichTextFieldComponent
+      label="Comment"
+      value={value}
+      onChange={noop}
+      fullWidth
+      placeholder="Enter Text"
+      onBlur={noop}
+      onFocus={noop}
+    />
+  );
+}
diff --git a/src/inputs/RichTextField.tsx b/src/inputs/RichTextField.tsx
index c09697db3..1f63990d3 100644
--- a/src/inputs/RichTextField.tsx
+++ b/src/inputs/RichTextField.tsx
@@ -28,6 +28,8 @@ export interface RichTextFieldProps {
   onFocus?: () => void;
   /** For rendering formatted text */
   readOnly?: boolean;
+  /** Will set width to: 100% */
+  fullWidth?: boolean;
 }
 
 /**
@@ -38,7 +40,7 @@ export interface RichTextFieldProps {
  * We also integrate [tributejs]{@link https://github.com/zurb/tribute} for @ mentions.
  */
 export function RichTextField(props: RichTextFieldProps) {
-  const { mergeTags, label, value = "", onChange, onBlur = noop, onFocus = noop, readOnly } = props;
+  const { mergeTags, label, value = "", onChange, onBlur = noop, onFocus = noop, readOnly, fullWidth } = props;
 
   // We get a reference to the Editor instance after trix-init fires
   const [editor, setEditor] = useState<Editor>();
@@ -129,7 +131,7 @@ export function RichTextField(props: RichTextFieldProps) {
 
   if (!readOnly) {
     return (
-      <div css={Css.w100.maxw("550px").$}>
+      <div css={Css.w100.if(!fullWidth).maxw("550px").$}>
         {/* TODO: Not sure what to pass to labelProps. */}
         {label && <Label labelProps={{}} label={label} />}
         <div css={{ ...Css.br4.bgWhite.$, ...trixCssOverrides }}>
@@ -148,7 +150,7 @@ export function RichTextField(props: RichTextFieldProps) {
     );
   } else {
     return (
-      <div css={Css.w100.maxw("550px").$}>
+      <div css={Css.w100.if(!fullWidth).maxw("550px").$}>
         {label && <Label label={label} />}
         <div
           css={Css.mh("120px").bgWhite.sm.gray900.bn.p1.br4.bGray300.ba.$}