feat(feedback): Configure feedback border radius (#10289)

Adds ability to configure all border radiuses on feedback widget Closes #10256
getsentry · Jan 23, 2024 · a0b987a · a0b987a
1 parent 62b0c4d
commit a0b987a
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts
@@ -16,6 +16,7 @@ const LIGHT_THEME = {
   backgroundHover: '#f6f6f7',
   foreground: '#2b2233',
   border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  borderRadius: '12px',
   boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
 
   success: '#268d75',
@@ -39,6 +40,9 @@ const LIGHT_THEME = {
   inputForeground: INHERIT,
   inputBorder: 'var(--border)',
   inputOutlineFocus: SUBMIT_COLOR,
+
+  formBorderRadius: '20px',
+  formContentBorderRadius: '6px',
 };
 
 export const DEFAULT_THEME = {

diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts
@@ -215,6 +215,10 @@ export interface FeedbackTheme {
    * Border styling for actor and dialog
    */
   border: string;
+  /**
+   * Border radius styling for actor
+   */
+  borderRadius: string;
   /**
    * Box shadow for actor and dialog
    */
@@ -299,6 +303,14 @@ export interface FeedbackTheme {
    * Border styles for form inputs when focused
    */
   inputOutlineFocus: string;
+  /**
+   * Border radius for dialog
+   */
+  formBorderRadius: string;
+  /**
+   * Border radius for form inputs
+   */
+  formContentBorderRadius: string;
 }
 
 export interface FeedbackThemes {

diff --git a/packages/feedback/src/widget/Actor.css.ts b/packages/feedback/src/widget/Actor.css.ts
@@ -11,7 +11,7 @@ export function createActorStyles(d: Document): HTMLStyleElement {
   align-items: center;
   gap: 8px;
 
-  border-radius: 12px;
+  border-radius: var(--border-radius);
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;

diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts
@@ -38,7 +38,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   top: var(--top);
 
   border: var(--border);
-  border-radius: 20px;
+  border-radius: var(--form-border-radius);
   background-color: var(--background);
   color: var(--foreground);
 
@@ -113,7 +113,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   background-color: var(--input-background);
   box-sizing: border-box;
   border: var(--input-border);
-  border-radius: 6px;
+  border-radius: var(--form-content-border-radius);
   color: var(--input-foreground);
   font-size: 14px;
   font-weight: 500;
@@ -138,7 +138,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 .btn {
   line-height: inherit;
   border: var(--cancel-border);
-  border-radius: 6px;
+  border-radius: var(--form-content-border-radius);
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
@@ -178,7 +178,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 .success-message {
   background-color: var(--background);
   border: var(--border);
-  border-radius: 12px;
+  border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   font-weight: 600;
   color: var(--success);

diff --git a/packages/feedback/src/widget/Main.css.ts b/packages/feedback/src/widget/Main.css.ts
@@ -8,6 +8,7 @@ function getThemedCssVariables(theme: FeedbackTheme): string {
   --error: ${theme.error};
   --success: ${theme.success};
   --border: ${theme.border};
+  --border-radius: ${theme.borderRadius};
   --box-shadow: ${theme.boxShadow};
 
   --submit-background: ${theme.submitBackground};
@@ -28,6 +29,9 @@ function getThemedCssVariables(theme: FeedbackTheme): string {
   --input-foreground: ${theme.inputForeground};
   --input-border: ${theme.inputBorder};
   --input-outline-focus: ${theme.inputOutlineFocus};
+
+  --form-border-radius: ${theme.formBorderRadius};
+  --form-content-border-radius: ${theme.formContentBorderRadius};
   `;
 }