feat(feedback): Iterate on css for better scrolling & resizing when browser is small (#11893)

Author: ryan953

packages/feedback/src/constants/theme.ts

@@ -6,37 +6,39 @@ export const LIGHT_THEME = {
   fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
   fontSize: '14px',
 
-  background: LIGHT_BACKGROUND,
-  backgroundHover: '#f6f6f7',
   foreground: '#2b2233',
+  background: LIGHT_BACKGROUND,
+  success: '#268d75',
+  error: '#df3338',
+
+  zIndex: 100000,
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
-  borderRadius: '25px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
-  success: '#268d75',
-  error: '#df3338',
+  backgroundHover: '#f6f6f7',
+  borderRadius: '25px',
 
+  formBorderRadius: '20px',
+  formContentBorderRadius: '6px',
+
+  submitForeground: LIGHT_BACKGROUND,
   submitBackground: 'rgba(88, 74, 192, 1)',
+  submitForegroundHover: LIGHT_BACKGROUND,
   submitBackgroundHover: SUBMIT_COLOR,
   submitBorder: SUBMIT_COLOR,
   submitOutlineFocus: '#29232f',
-  submitForeground: LIGHT_BACKGROUND,
-  submitForegroundHover: LIGHT_BACKGROUND,
 
+  cancelForeground: 'var(--foreground)',
   cancelBackground: 'transparent',
+  cancelForegroundHover: 'var(--foreground)',
   cancelBackgroundHover: 'var(--background-hover)',
   cancelBorder: 'var(--border)',
   cancelOutlineFocus: 'var(--input-outline-focus)',
-  cancelForeground: 'var(--foreground)',
-  cancelForegroundHover: 'var(--foreground)',
 
   inputBackground: INHERIT,
   inputForeground: INHERIT,
   inputBorder: 'var(--border)',
   inputOutlineFocus: SUBMIT_COLOR,
-
-  formBorderRadius: '20px',
-  formContentBorderRadius: '6px',
 };
 
 export const DEFAULT_THEME = {

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

@@ -8,34 +8,36 @@ export function createActorStyles(): HTMLStyleElement {
   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: 16px;
+  margin: 0;
+  inset: var(--actor-inset);
 
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 16px;
 
-
-  border-radius: var(--border-radius);
-  cursor: pointer;
   font-family: inherit;
   font-size: var(--font-size);
   font-weight: 600;
-  padding: 16px;
+  line-height: 16px;
   text-decoration: none;
-  z-index: 9000;
 
-  color: var(--foreground);
   background-color: var(--background);
+  border-radius: var(--border-radius);
   border: var(--border);
   box-shadow: var(--box-shadow);
+  color: var(--foreground);
+  cursor: pointer;
   opacity: 1;
-  transition: opacity 0.1s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+  transform: translate(0, 0) scale(1);
+}
+.widget__actor[aria-hidden="true"] {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transform: translate(0, 16px) scale(0.98);
 }
 
 .widget__actor:hover {
@@ -47,24 +49,11 @@ export function createActorStyles(): HTMLStyleElement {
   height: 16px;
 }
 
-.widget__actor--hidden {
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-}
-
-.widget__actor__text {
-}
-
 @media (max-width: 600px) {
-  .widget__actor__text {
+  .widget__actor span {
     display: none;
   }
 }
-
-.feedback-icon path {
-  fill: var(--foreground);
-}
 `;
 
   return style;

packages/feedback/src/core/components/Actor.ts

@@ -13,6 +13,10 @@ export interface ActorComponent {
   appendToDom: () => void;
 
   removeFromDom: () => void;
+
+  show: () => void;
+
+  hide: () => void;
 }
 
 /**
@@ -27,7 +31,6 @@ export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent {
   el.appendChild(FeedbackIcon());
   if (buttonLabel) {
     const label = DOCUMENT.createElement('span');
-    label.className = 'widget__actor__text';
     label.appendChild(DOCUMENT.createTextNode(buttonLabel));
     el.appendChild(label);
   }
@@ -44,5 +47,11 @@ export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent {
       shadow.removeChild(el);
       shadow.removeChild(style);
     },
+    show(): void {
+      el.ariaHidden = 'false';
+    },
+    hide(): void {
+      el.ariaHidden = 'true';
+    },
   };
 }

packages/feedback/src/core/components/FeedbackIcon.ts

@@ -11,11 +11,10 @@ export function FeedbackIcon(): SVGElement {
   const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
     WINDOW.document.createElementNS(XMLNS, tagName);
   const svg = setAttributesNS(createElementNS('svg'), {
-    class: 'feedback-icon',
     width: `${SIZE}`,
     height: `${SIZE}`,
     viewBox: `0 0 ${SIZE} ${SIZE}`,
-    fill: 'none',
+    fill: 'var(--foreground)',
   });
 
   const g = setAttributesNS(createElementNS('g'), {

packages/feedback/src/core/createMainStyles.ts

@@ -46,17 +46,29 @@ export function createMainStyles(
   const style = DOCUMENT.createElement('style');
   style.textContent = `
 :host {
-  --bottom: 1rem;
-  --right: 1rem;
-  --top: auto;
-  --left: auto;
-  --z-index: 100000;
+  --z-index: ${themes.themeLight.zIndex};
   --font-family: ${themes.themeLight.fontFamily};
   --font-size: ${themes.themeLight.fontSize};
 
   font-family: var(--font-family);
   font-size: var(--font-size);
 
+  --page-margin: 16px;
+  --actor-inset: auto var(--page-margin) var(--page-margin) auto;
+
+  --dialog-inset: auto var(--page-margin) var(--page-margin) auto;
+  --dialog-padding: 24px;
+
+  .brand-link path {
+    fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
+  }
+  @media (prefers-color-scheme: dark)
+  {
+    path: {
+      fill: '#fff';
+    }
+  }
+
   ${getThemedCssVariables(colorScheme === 'dark' ? themes.themeDark : themes.themeLight)}
 }
 

packages/feedback/src/core/integration.ts

@@ -254,13 +254,13 @@ export const buildFeedbackIntegration = ({
       const mergedOptions = mergeOptions(_options, {
         ...optionOverrides,
         onFormOpen() {
-          actor.removeFromDom();
+          actor.hide();
         },
         onFormClose() {
-          actor.appendToDom();
+          actor.show();
         },
         onFormSubmitted() {
-          actor.appendToDom();
+          actor.show();
         },
       });
       _attachTo(actor.el, mergedOptions);