feat: adding fullWidth version of RichTextField (#966)

Co-authored-by: JonnCh <[email protected]>
homebound-team · Oct 13, 2023 · b7636e1 · b7636e1
1 parent 074baca
commit b7636e1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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.$}