Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(feedback): Implement new user feedback embeddable widget #9217

Merged
merged 59 commits into from
Nov 6, 2023
Merged
Changes from 1 commit
Commits
Show all changes
59 commits
Select commit Hold shift + click to select a range
64617df
docs(feedback): Add more themeables + improve/fix inconsistencies
billyvg Nov 1, 2023
493992c
wip: initial widget api
billyvg Oct 6, 2023
9f81fda
wip: refactor to functions
billyvg Oct 6, 2023
916bb62
lint
billyvg Oct 10, 2023
5f5479e
ref: move css into separate fns
billyvg Oct 10, 2023
a75e600
ref: move Actor into sep file
billyvg Oct 10, 2023
3e71020
ref: use FeedbackComponent and rename methods
billyvg Oct 10, 2023
9cd810b
feat: add success message, error message, move submit logic up into i…
billyvg Oct 10, 2023
bbc26dc
dont typecheck callback fns
billyvg Oct 13, 2023
4097e4b
some svg refactors
billyvg Oct 13, 2023
6a91be8
WIP: Add attachTo configuration
billyvg Oct 16, 2023
fbf4e30
fix cENS
billyvg Oct 16, 2023
fde0896
try/catch all the things, fix dialog not opening, add autoInject option
billyvg Oct 17, 2023
cd8b208
move feedback class to integration.ts, make isAnonymous work, hide fa…
billyvg Oct 17, 2023
725a42f
ref(Form): destructure options in params
billyvg Oct 17, 2023
9e2ce65
ref: move theme/text labels to constants, fix dark mode for svgs
billyvg Oct 17, 2023
9925a87
ref: change/add some callbacks
billyvg Oct 17, 2023
80294ad
ref: fix onDialogOpened, add option for host id
billyvg Oct 17, 2023
e4904d8
feat: change positioning css to use css vars
billyvg Oct 17, 2023
9b94658
meta: lint fixes
billyvg Oct 17, 2023
c5821d9
use isBrowser
billyvg Oct 25, 2023
ff14e8e
ref(feedback): Refactor to better support multiple dialogs (#9305)
billyvg Oct 25, 2023
fc5568e
refactor shadow/host creation
billyvg Oct 25, 2023
6dfc0b5
remove $ prefix, change h to createElement
billyvg Oct 25, 2023
30596d6
createElementNS
billyvg Oct 25, 2023
1a85ce6
test feedback in size limit
billyvg Oct 26, 2023
3b5bc77
v0.0.1-alpha.5
billyvg Oct 26, 2023
d14ae45
export Form props + add Form test
billyvg Oct 26, 2023
6c532d0
test when message turns empty
billyvg Oct 27, 2023
f41ffd1
add actor test + slight refactor, add text label test for form
billyvg Oct 27, 2023
8a820c6
remove referrer
billyvg Oct 27, 2023
3eb963a
explicit props instead of passing options
billyvg Oct 27, 2023
edd2a90
add dialog test
billyvg Oct 27, 2023
e6c09d2
add submit button test
billyvg Oct 27, 2023
5497c1c
add test for SuccessMessage
billyvg Oct 27, 2023
6bfdbf9
lint
billyvg Oct 30, 2023
02d17c9
add createWidget test, refactor
billyvg Oct 30, 2023
9456f37
ref: remove disabled button, instead add better a11y for required field
billyvg Oct 30, 2023
97ca405
update aria attributes + elements should be in getter
billyvg Oct 30, 2023
6b6ca10
fix type for attachTo
billyvg Oct 30, 2023
03d10cd
missing callback
billyvg Oct 30, 2023
99ef589
update tests
billyvg Oct 30, 2023
c488fcd
lint
billyvg Oct 30, 2023
c97d3bb
bump sentry version
billyvg Oct 31, 2023
0897a26
v0.0.1-alpha.6
billyvg Oct 31, 2023
6a951bd
fix(types): Fix optional types for theme
billyvg Oct 31, 2023
5b12a2f
submit/cancel
billyvg Nov 1, 2023
2b12c96
refactor theme names to be even more consistent, add input styles
billyvg Nov 1, 2023
5230bf6
v0.0.1-alpha.7
billyvg Nov 1, 2023
fda4cb2
feat: Add Sentry branding
billyvg Nov 1, 2023
7942039
fix outline
billyvg Nov 2, 2023
6d439d5
fix branding
billyvg Nov 2, 2023
5c2682f
fix darkmode firefox
billyvg Nov 2, 2023
b9a3c9c
v0.0.1-alpha.8
billyvg Nov 2, 2023
9c02d47
v0.0.1-alpha.9
billyvg Nov 2, 2023
cc43a04
review fixes
billyvg Nov 6, 2023
aa31d8d
prettier
billyvg Nov 6, 2023
78e6b60
fix ts
billyvg Nov 6, 2023
ee46ff4
more ts
billyvg Nov 6, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
submit/cancel
billyvg committed Nov 6, 2023
commit 5b12a2f838e7ad091979484eb1d0bf9f5e360884
44 changes: 38 additions & 6 deletions packages/feedback/src/constants.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,56 @@
const LIGHT_BORDER = '1.5px solid rgba(41, 35, 47, 0.13)';
const LIGHT_BACKGROUND_HOVER = '#f6f6f7';
const LIGHT_FOREGROUND = '#2B2233';

const DARK_BACKGROUND_HOVER = '#352f3b';
const DARK_BORDER = '1.5px solid rgba(235, 230, 239, 0.15)';
const DARK_FOREGROUND = '#EBE6EF';

const SUBMIT_FOREGROUND = '#ffffff';

export const DEFAULT_THEME = {
light: {
fontFamily: "'Helvetica Neue', Arial, sans-serif",
fontSize: '14px',
background: '#ffffff',
backgroundHover: '#f6f6f7',
foreground: '#2B2233',
backgroundHover: LIGHT_BACKGROUND_HOVER,

submitButtonBackground: 'rgba(88, 74, 192, 1)',
submitButtonBackgroundHover: 'rgba(108, 95, 199, 1)',
submitButtonBorder: 'rgba(108, 95, 199, 1)',
submitButtonForeground: SUBMIT_FOREGROUND,

cancelButtonBackground: 'transparent',
cancelButtonBackgroundHover: LIGHT_BACKGROUND_HOVER,
cancelButtonBorder: LIGHT_BORDER,
cancelButtonForeground: LIGHT_FOREGROUND,

foreground: LIGHT_FOREGROUND,
success: '#268d75',
error: '#df3338',
border: '1.5px solid rgba(41, 35, 47, 0.13)',
border: LIGHT_BORDER,
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
},
dark: {
fontFamily: "'Helvetica Neue', Arial, sans-serif",
fontSize: '14px',
background: '#29232f',
backgroundHover: '#352f3b',
foreground: '#EBE6EF',
backgroundHover: DARK_BACKGROUND_HOVER,
foreground: DARK_FOREGROUND,

submitButtonBackground: 'rgba(88, 74, 192, 1)',
submitButtonBackgroundHover: 'rgba(108, 95, 199, 1)',
submitButtonBorder: 'rgba(108, 95, 199, 1)',
submitButtonForeground: SUBMIT_FOREGROUND,

cancelButtonBackground: 'transparent',
cancelButtonBackgroundHover: DARK_BACKGROUND_HOVER,
cancelButtonBorder: DARK_BORDER,
cancelButtonForeground: DARK_FOREGROUND,

success: '#2da98c',
error: '#f55459',
border: '1.5px solid rgba(235, 230, 239, 0.15)',
border: DARK_BORDER,
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
},
};
10 changes: 3 additions & 7 deletions packages/feedback/src/integration.ts
Original file line number Diff line number Diff line change
@@ -16,11 +16,7 @@ import {
SUBMIT_BUTTON_LABEL,
SUCCESS_MESSAGE_TEXT,
} from './constants';
import type {
OptionalFeedbackConfiguration,
FeedbackInternalOptions,
Widget,
} from './types';
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration, Widget } from './types';
import { mergeOptions } from './util/mergeOptions';
import { createActorStyles } from './widget/Actor.css';
import { createShadowHost } from './widget/createShadowHost';
@@ -132,11 +128,11 @@ export class Feedback implements Integration {
colorScheme,
themeDark: {
...DEFAULT_THEME.dark,
...themeDark
...themeDark,
},
themeLight: {
...DEFAULT_THEME.light,
...themeLight
...themeLight,
},

buttonLabel,
13 changes: 12 additions & 1 deletion packages/feedback/src/types/index.ts
Original file line number Diff line number Diff line change
@@ -208,7 +208,8 @@ export interface FeedbackInternalOptions
/**
* Partial configuration that overrides default configuration values
*/
export interface OptionalFeedbackConfiguration extends Omit<Partial<FeedbackInternalOptions>, 'themeLight'|'themeDark'> {
export interface OptionalFeedbackConfiguration
extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
themeLight?: Partial<FeedbackTheme>;
themeDark?: Partial<FeedbackTheme>;
}
@@ -250,6 +251,16 @@ export interface FeedbackTheme {
* Error color
*/
error: string;

submitButtonBackground: string;
submitButtonBackgroundHover: string;
submitButtonBorder: string;
submitButtonForeground: string;

cancelButtonBackground: string;
cancelButtonBackgroundHover: string;
cancelButtonBorder: string;
cancelButtonForeground: string;
}

export interface FeedbackThemes {
13 changes: 9 additions & 4 deletions packages/feedback/src/util/mergeOptions.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { FeedbackInternalOptions, OptionalFeedbackConfiguration } from "../types";
import type { FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';

export function mergeOptions(defaultOptions: FeedbackInternalOptions, optionOverrides: OptionalFeedbackConfiguration) {
/**
*
*/
export function mergeOptions(
defaultOptions: FeedbackInternalOptions,
optionOverrides: OptionalFeedbackConfiguration,
): FeedbackInternalOptions {
return {
...defaultOptions,
...optionOverrides,
@@ -11,7 +17,6 @@ export function mergeOptions(defaultOptions: FeedbackInternalOptions, optionOver
themeLight: {
...defaultOptions.themeLight,
...optionOverrides.themeLight,
}
},
};

}
8 changes: 4 additions & 4 deletions packages/feedback/src/widget/Actor.css.ts
Original file line number Diff line number Diff line change
@@ -19,16 +19,16 @@ export function createActorStyles(d: Document): HTMLStyleElement {
text-decoration: none;
z-index: 9000;

color: var(--fg-color);
background-color: var(--bg-color);
color: var(--foreground-color);
background-color: var(--background-color);
border: var(--border);
box-shadow: var(--box-shadow);
opacity: 1;
transition: opacity 0.1s ease-in-out;
}

.widget__actor:hover {
background-color: var(--bg-hover-color);
background-color: var(--background-hover-color);
}

.widget__actor svg {
@@ -46,7 +46,7 @@ export function createActorStyles(d: Document): HTMLStyleElement {
}

.feedback-icon path {
fill: var(--fg-color);
fill: var(--foreground-color);
}
`;

20 changes: 10 additions & 10 deletions packages/feedback/src/widget/Dialog.css.ts
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
border: var(--border);
padding: 24px;
border-radius: 20px;
background-color: var(--bg-color);
background-color: var(--background-color);
color: var(--fg-color);

width: 320px;
@@ -130,7 +130,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {

.btn {
line-height: inherit;
border: var(--border);
border: var(--cancel-button-border);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
@@ -143,25 +143,25 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
}

.btn--primary {
background-color: rgba(108, 95, 199, 1);
border-color: rgba(108, 95, 199, 1);
color: #fff;
background-color: var(--submit-button-background);
border-color: var(--submit-button-border);
color: var(--submit-button-foreground);
}
.btn--primary:hover {
background-color: rgba(88, 74, 192, 1);
background-color: var(--submit-button-background-hover);
}

.btn--default {
background-color: transparent;
color: var(--fg-color);
background-color: var(--cancel-button-background);
color: var(--cancel-button-foreground);
font-weight: 500;
}
.btn--default:hover {
background-color: var(--bg-accent-color);
background-color: var(--cancel-button-background-hover);
}

.success-message {
background-color: var(--bg-color);
background-color: var(--background-color);
border: var(--border);
border-radius: 12px;
box-shadow: var(--box-shadow);
48 changes: 39 additions & 9 deletions packages/feedback/src/widget/Main.css.ts
Original file line number Diff line number Diff line change
@@ -29,43 +29,73 @@ export function createMainStyles(
font-family: var(--font-family);
font-size: var(--font-size);

--bg-color: ${themes.light.background};
--bg-hover-color: ${themes.light.backgroundHover};
--fg-color: ${themes.light.foreground};
--background-color: ${themes.light.background};
--background-hover-color: ${themes.light.backgroundHover};
--foreground-color: ${themes.light.foreground};
--error-color: ${themes.light.error};
--success-color: ${themes.light.success};
--border: ${themes.light.border};
--box-shadow: ${themes.light.boxShadow};

--submit-button-background: ${themes.light.submitButtonBackground};
--submit-button-background-hover: ${themes.light.submitButtonBackgroundHover};
--submit-button-border: ${themes.light.submitButtonBorder};
--submit-button-foreground: ${themes.light.submitButtonForeground};

--cancel-button-background: ${themes.light.cancelButtonBackground};
--cancel-button-background-hover: ${themes.light.cancelButtonBackgroundHover};
--cancel-button-border: ${themes.light.cancelButtonBorder};
--cancel-button-foreground: ${themes.light.cancelButtonForeground};
}

${
colorScheme === 'system'
? `
@media (prefers-color-scheme: dark) {
:host {
--bg-color: ${themes.dark.background};
--bg-hover-color: ${themes.dark.backgroundHover};
--fg-color: ${themes.dark.foreground};
--background-color: ${themes.dark.background};
--background-hover-color: ${themes.dark.backgroundHover};
--foreground-color: ${themes.dark.foreground};
--error-color: ${themes.dark.error};
--success-color: ${themes.dark.success};
--border: ${themes.dark.border};
--box-shadow: ${themes.dark.boxShadow};
--font-family: ${themes.dark.fontFamily};
--font-size: ${themes.dark.fontSize};

--submit-button-background: ${themes.dark.submitButtonBackground};
--submit-button-background-hover: ${themes.dark.submitButtonBackgroundHover};
--submit-button-border: ${themes.dark.submitButtonBorder};
--submit-button-foreground: ${themes.dark.submitButtonForeground};

--cancel-button-background: ${themes.dark.cancelButtonBackground};
--cancel-button-background-hover: ${themes.dark.cancelButtonBackgroundHover};
--cancel-button-border: ${themes.dark.cancelButtonBorder};
--cancel-button-foreground: ${themes.dark.cancelButtonForeground};
}
}
`
: `
:host-context([data-sentry-feedback-colorscheme="dark"]) {
--bg-color: ${themes.dark.background};
--bg-hover-color: ${themes.dark.backgroundHover};
--fg-color: ${themes.dark.foreground};
--background-color: ${themes.dark.background};
--background-hover-color: ${themes.dark.backgroundHover};
--foreground-color: ${themes.dark.foreground};
--error-color: ${themes.dark.error};
--success-color: ${themes.dark.success};
--border: ${themes.dark.border};
--box-shadow: ${themes.dark.boxShadow};
--font-family: ${themes.dark.fontFamily};
--font-size: ${themes.dark.fontSize};

--submit-button-background: ${themes.dark.submitButtonBackground};
--submit-button-background-hover: ${themes.dark.submitButtonBackgroundHover};
--submit-button-border: ${themes.dark.submitButtonBorder};
--submit-button-foreground: ${themes.dark.submitButtonForeground};

--cancel-button-background: ${themes.dark.cancelButtonBackground};
--cancel-button-background-hover: ${themes.dark.cancelButtonBackgroundHover};
--cancel-button-border: ${themes.dark.cancelButtonBorder};
--cancel-button-foreground: ${themes.dark.cancelButtonForeground};
}
`
}`;