fixup basic styles and override options

Author: ryan953

packages/feedback2/src/core/components/Actor.css.ts

@@ -7,19 +7,26 @@ export function createActorStyles(): HTMLStyleElement {
   const style = DOCUMENT.createElement('style');
   style.textContent = `
 .widget__actor {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
   line-height: 25px;
 
   display: flex;
   align-items: center;
   gap: 8px;
+  z-index: 9000;
 
   border-radius: var(--border-radius);
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   padding: 12px 16px;
   text-decoration: none;
-  z-index: 9000;
 
   color: var(--foreground);
   background-color: var(--background);

packages/feedback2/src/core/createMainStyles.ts

@@ -44,20 +44,13 @@ export function createMainStyles(colorScheme: 'system' | 'dark' | 'light', theme
   style.textContent = `
 :host {
   --bottom: 1rem;
-  --right: 1rem;
+  --right: 1rem; /* this is the font-size of the page, not the shadowroot */
   --top: auto;
   --left: auto;
   --z-index: 100000;
   --font-family: ${themes.themeLight.fontFamily};
   --font-size: ${themes.themeLight.fontSize};
 
-  position: fixed;
-  left: var(--left);
-  right: var(--right);
-  bottom: var(--bottom);
-  top: var(--top);
-  z-index: var(--z-index);
-
   font-family: var(--font-family);
   font-size: var(--font-size);
 

packages/feedback2/src/core/integration.ts

@@ -19,9 +19,8 @@ import {
 import type { DialogComponent } from '../modal/components/Dialog';
 import type { feedback2ModalIntegration } from '../modal/integration';
 import type { feedback2ScreenshotIntegration } from '../screenshot/integration';
-import type { FeedbackCallbacks, FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
+import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, OverrideFeedbackConfiguration } from '../types';
 import { DEBUG_BUILD } from '../util/debug-build';
-import { mergeOptions } from '../util/mergeOptions';
 import { Actor } from './components/Actor';
 import { createMainStyles } from './createMainStyles';
 import { sendFeedback } from './sendFeedback';
@@ -163,7 +162,6 @@ export class Feedback2 implements Integration {
 
     this._host = null;
     this._shadow = null;
-
     this._dialog = null;
   }
 
@@ -213,19 +211,19 @@ export class Feedback2 implements Integration {
   }
 
   /**
-   * Adds click listener to attached element to open a feedback dialog
+   * Adds click listener to the element to open a feedback dialog
    *
-   * The returned function can be used to detact the click listener
+   * The returned function can be used to remove the click listener
    */
-  public attachTo(el: Element | string, optionOverrides: Partial<FeedbackCallbacks> = {}): null | (() => void) {
-    const options = mergeOptions(this.options, optionOverrides);
+  public attachTo(el: Element | string, optionOverrides: OverrideFeedbackConfiguration = {}): () => void {
+    const options = { ...this.options, ...optionOverrides };
 
     const targetEl =
       typeof el === 'string' ? DOCUMENT.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;
 
     if (!targetEl) {
       DEBUG_BUILD && logger.error('[Feedback] Unable to attach to target element');
-      return null;
+      throw new Error('Unable to attach to target element');
     }
 
     const handleClick = async (): Promise<void> => {
@@ -242,9 +240,9 @@ export class Feedback2 implements Integration {
    * Creates a new widget. Accepts partial options to override any options passed to constructor.
    */
   public createWidget(
-    optionOverrides: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean } = {},
+    optionOverrides: OverrideFeedbackConfiguration & { shouldCreateActor?: boolean } = {},
   ): Promise<DialogComponent> {
-    const options = mergeOptions(this.options, optionOverrides);
+    const options = { ...this.options, ...optionOverrides };
 
     return this._loadAndRenderDialog(options);
   }
@@ -309,6 +307,9 @@ export class Feedback2 implements Integration {
       const { colorScheme, themeDark, themeLight } = options;
       const shadow = host.attachShadow({ mode: 'open' });
       shadow.appendChild(
+        // TODO: inject main styles as part of actor and dialog styles
+        // therefore each render root can have it's own theme
+        // err, everything can just have it's own shadowroot...
         createMainStyles(colorScheme, {
           themeDark,
           themeLight,
@@ -338,10 +339,13 @@ export class Feedback2 implements Integration {
       client.getIntegrationByName<ReturnType<typeof feedback2ScreenshotIntegration>>('Feedback2Screenshot');
     const { showScreenshot } = this.options;
 
-    if (showScreenshot === false && screenshotIntegration) {
-      // Warn the user that they loaded too much and explicitly asked for screen shots to be off
-      console.log('WARNING: youre not rendering screenshots but they are bundled into your application.'); // eslint-disable-line no-console
-    }
+    // Disable this because the site could have multiple feedback buttons, not all of them need to have screenshots enabled.
+    // Must be a better way...
+    //
+    // if (showScreenshot === false && screenshotIntegration) {
+    //   // Warn the user that they loaded too much and explicitly asked for screen shots to be off
+    //   console.log('WARNING: Feedback2Screenshot is bundled but not rendered.'); // eslint-disable-line no-console
+    // }
 
     // START TEMP: Error messages
     console.log('ensureRenderer:', { modalIntegration, showScreenshot, screenshotIntegration }); // eslint-disable-line no-console

packages/feedback2/src/index.ts

@@ -16,3 +16,5 @@ export {
   Feedback2Screenshot,
   feedback2ScreenshotIntegration,
 } from './screenshot/integration';
+
+export type { OverrideFeedbackConfiguration } from './types/index';

packages/feedback2/src/modal/components/Dialog.css.ts

@@ -44,14 +44,20 @@ export function createDialogStyles(): HTMLStyleElement {
   background-color: var(--background);
   color: var(--foreground);
 
-  width: 320px;
   max-width: 100%;
   max-height: calc(100% - 2rem);
   display: flex;
   flex-direction: column;
+  gap: 16px;
   box-shadow: var(--box-shadow);
   transition: transform 0.2s ease-in-out;
   transform: translate(0, 0) scale(1);
+
+  padding: 24px;
+}
+.dialog__content-fullscreen {
+  top: 16px;
+  left: 16px;
 }
 
 .dialog__header {
@@ -60,9 +66,8 @@ export function createDialogStyles(): HTMLStyleElement {
   justify-content: space-between;
   font-size: 20px;
   font-weight: 600;
-  padding: 24px 24px 0 24px;
   margin: 0;
-  margin-bottom: 16px;
+
 }
 
 .brand-link {
@@ -71,24 +76,29 @@ export function createDialogStyles(): HTMLStyleElement {
 
 .error {
   color: var(--error);
-  margin-bottom: 16px;
 }
 
 .form {
   display: flex;
   overflow: auto;
-  flex-direction: column;
+  flex-direction: row;
   gap: 16px;
-  padding: 0 24px 24px;
   flex: 1 0 auto;
 }
 
-.form__error-container {
-  color: var(--error);
+.form__right {
+  width: 272px;
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+
 }
 
-.form__error-container--hidden {
-  display: none;
+
+.form__error-container {
+  color: var(--error);
 }
 
 .form__label {
@@ -179,6 +189,13 @@ export function createDialogStyles(): HTMLStyleElement {
 }
 
 .success-message {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
   background-color: var(--background);
   border: var(--border);
   border-radius: var(--border-radius);

packages/feedback2/src/modal/components/Dialog.tsx

@@ -103,9 +103,7 @@ function DialogContainer({ open, onFormSubmitted, ...props }: Props & { open: bo
         <dialog class="dialog" onClick={props.onFormClose} open={open}>
           <DialogContent {...props}>
             <DialogHeader {...props} />
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
-              <Form {...props} onSubmitSuccess={onSubmitSuccess} />
-            </div>
+            <Form {...props} onSubmitSuccess={onSubmitSuccess} />
           </DialogContent>
         </dialog>
       )}

packages/feedback2/src/modal/components/Form.tsx

@@ -127,73 +127,78 @@ export function Form({
 
   return (
     <form class="form" onSubmit={handleSubmit}>
-      {error ? <div class="form__error-container">{error}</div> : null}
-
       {ScreenshotInput && includeScreenshot ? <ScreenshotInput initialImage={undefined} /> : null}
 
-      {showName ? (
-        <label for="name" class="form__label">
-          <LabelText label={nameLabel} isRequired={isNameRequired} />
-          <input
-            class="form__input"
-            defaultValue={defaultName}
-            id="name"
-            name="name"
-            placeholder={namePlaceholder}
-            required={isNameRequired}
-            type="text"
-          />
-        </label>
-      ) : (
-        <input aria-hidden value={defaultName} name="name" type="hidden" />
-      )}
-
-      {showEmail ? (
-        <label for="email" class="form__label">
-          <LabelText label={emailLabel} isRequired={isEmailRequired} />
-          <input
-            class="form__input"
-            defaultValue={defaultEmail}
-            id="email"
-            name="email"
-            placeholder={emailPlaceholder}
-            required={isEmailRequired}
-            type="text"
-          ></input>
-        </label>
-      ) : (
-        <input aria-hidden value={defaultEmail} name="email" type="hidden" />
-      )}
-
-      <label for="message" class="form__label">
-        <LabelText label={messageLabel} isRequired />
-        <textarea
-          autoFocus
-          class="form__input form__input--textarea"
-          id="message"
-          name="message"
-          placeholder={messagePlaceholder}
-          required={true}
-          rows={5}
-        />
-      </label>
-
-      {ScreenshotToggle ? (
-        <ScreenshotToggle
-          onClick={() => {
-            setIncludeScreeshot(prev => !prev);
-          }}
-          isScreenshotIncluded={includeScreenshot}
-        />
-      ) : null}
-
-      <div class="btn-group">
-        <button class="btn btn--primary" type="submit">
-          {submitButtonLabel}
-        </button>
-        <button class="btn btn--default" type="button" onClick={onFormClose}>
-          {cancelButtonLabel}
-        </button>
+      <div class="form__right">
+        <div class="form__top">
+          {error ? <div class="form__error-container">{error}</div> : null}
+
+          {showName ? (
+            <label for="name" class="form__label">
+              <LabelText label={nameLabel} isRequired={isNameRequired} />
+              <input
+                class="form__input"
+                defaultValue={defaultName}
+                id="name"
+                name="name"
+                placeholder={namePlaceholder}
+                required={isNameRequired}
+                type="text"
+              />
+            </label>
+          ) : (
+            <input aria-hidden value={defaultName} name="name" type="hidden" />
+          )}
+
+          {showEmail ? (
+            <label for="email" class="form__label">
+              <LabelText label={emailLabel} isRequired={isEmailRequired} />
+              <input
+                class="form__input"
+                defaultValue={defaultEmail}
+                id="email"
+                name="email"
+                placeholder={emailPlaceholder}
+                required={isEmailRequired}
+                type="text"
+              ></input>
+            </label>
+          ) : (
+            <input aria-hidden value={defaultEmail} name="email" type="hidden" />
+          )}
+
+          <label for="message" class="form__label">
+            <LabelText label={messageLabel} isRequired />
+            <textarea
+              autoFocus
+              class="form__input form__input--textarea"
+              id="message"
+              name="message"
+              placeholder={messagePlaceholder}
+              required={true}
+              rows={5}
+            />
+          </label>
+
+          {ScreenshotToggle ? (
+            <ScreenshotToggle
+              onClick={() => {
+                setIncludeScreeshot(prev => !prev);
+              }}
+              isScreenshotIncluded={includeScreenshot}
+            />
+          ) : null}
+        </div>
+        <div class="form__bottom">
+          <div class="btn-group">
+            <button class="btn btn--primary" type="submit">
+              {submitButtonLabel}
+            </button>
+            <button class="btn btn--default" type="button" onClick={onFormClose}>
+              {cancelButtonLabel}
+            </button>
+          </div>
+        </div>
       </div>
     </form>
   );

packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts

@@ -7,10 +7,14 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   const style = DOCUMENT.createElement('style');
 
   style.textContent = `
+.dialog__content:has(.editor) {
+  top: var(--bottom);
+  left: var(--right);
+}
+
 .editor {
   background: red;
-  width: 75px;
-  height: 75px;
+  flex: 1 0 auto;
 }
 `;