From 42af4059738a1c0723ff6db05600e656479cf35c Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Mon, 6 Nov 2023 17:30:11 -0500 Subject: [PATCH] breaking: inputBorderFocus -> inputOutlineFocus, feat: add foregroundHover and OutlineFocus for submit/cancel buttons --- packages/feedback/README.md | 5 ++++- packages/feedback/src/constants.ts | 11 ++++++++--- packages/feedback/src/types/index.ts | 19 ++++++++++++++++++- packages/feedback/src/widget/Dialog.css.ts | 13 ++++++++++--- packages/feedback/src/widget/Main.css.ts | 6 +++++- 5 files changed, 45 insertions(+), 9 deletions(-) diff --git a/packages/feedback/README.md b/packages/feedback/README.md index 4ed6b8efcc55..2aec104a785b 100644 --- a/packages/feedback/README.md +++ b/packages/feedback/README.md @@ -126,15 +126,18 @@ Colors can be customized via the Feedback constructor or by defining CSS variabl | `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | | `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | | `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button | +| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state | | `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button | +| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button | | `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button | | `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button | | `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | +| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state | | `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button | | `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | | `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | | `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | -| `inputBorderFocus` | `--input-border-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border styles for form inputs when focused | +| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration. ```javascript diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts index 71389e52bc57..a91283f4a541 100644 --- a/packages/feedback/src/constants.ts +++ b/packages/feedback/src/constants.ts @@ -1,5 +1,6 @@ const LIGHT_BACKGROUND = '#ffffff'; const INHERIT = 'inherit'; +const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)'; const LIGHT_THEME = { fontFamily: "'Helvetica Neue', Arial, sans-serif", fontSize: '14px', @@ -14,19 +15,23 @@ const LIGHT_THEME = { error: '#df3338', submitBackground: 'rgba(88, 74, 192, 1)', - submitBackgroundHover: 'rgba(108, 95, 199, 1)', - submitBorder: 'rgba(108, 95, 199, 1)', + submitBackgroundHover: SUBMIT_COLOR, + submitBorder: SUBMIT_COLOR, + submitOutlineFocus: '#29232f', submitForeground: LIGHT_BACKGROUND, + submitForegroundHover: LIGHT_BACKGROUND, cancelBackground: 'transparent', 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)', - inputBorderFocus: 'rgba(108, 95, 199, 1)', + inputOutlineFocus: SUBMIT_COLOR, }; export const DEFAULT_THEME = { diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts index 9f4d0609c417..a4b9569c1a74 100644 --- a/packages/feedback/src/types/index.ts +++ b/packages/feedback/src/types/index.ts @@ -269,11 +269,20 @@ export interface FeedbackTheme { * Border style for the submit button */ submitBorder: string; + /** + * Border style for the submit button, in the focued state + */ + submitOutlineFocus: string; /** * Foreground color for the submit button */ submitForeground: string; + /** + * Foreground color for the submit button, in the hover state + */ + submitForegroundHover: string; + /** * Background color for the cancel button */ @@ -286,10 +295,18 @@ export interface FeedbackTheme { * Border style for the cancel button */ cancelBorder: string; + /** + * Border style for the cancel button, in the focued state + */ + cancelOutlineFocus: string; /** * Foreground color for the cancel button */ cancelForeground: string; + /** + * Foreground color for the cancel button, in the hover state + */ + cancelForegroundHover: string; /** * Background color for form inputs @@ -306,7 +323,7 @@ export interface FeedbackTheme { /** * Border styles for form inputs when focused */ - inputBorderFocus: string; + inputOutlineFocus: string; } export interface FeedbackThemes { diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts index 068e8159d662..c02a20de43f4 100644 --- a/packages/feedback/src/widget/Dialog.css.ts +++ b/packages/feedback/src/widget/Dialog.css.ts @@ -122,9 +122,8 @@ export function createDialogStyles(d: Document): HTMLStyleElement { padding: 6px 12px; } -.form__input:focus { - outline: 1px solid transparent; - outline-color: var(--input-border-focus); +.form__input:focus-visible { + outline: 1px auto var(--input-outline-focus); } .form__input--textarea { @@ -159,6 +158,10 @@ export function createDialogStyles(d: Document): HTMLStyleElement { } .btn--primary:hover { background-color: var(--submit-background-hover); + color: var(--submit-foreground-hover); +} +.btn--primary:focus-visible { + outline: 1px auto var(--submit-outline-focus); } .btn--default { @@ -168,6 +171,10 @@ export function createDialogStyles(d: Document): HTMLStyleElement { } .btn--default:hover { background-color: var(--cancel-background-hover); + color: var(--cancel-foreground-hover); +} +.btn--default:focus-visible { + outline: 1px auto var(--cancel-outline-focus); } .success-message { diff --git a/packages/feedback/src/widget/Main.css.ts b/packages/feedback/src/widget/Main.css.ts index 9cd036fc3112..0c74fedf6832 100644 --- a/packages/feedback/src/widget/Main.css.ts +++ b/packages/feedback/src/widget/Main.css.ts @@ -13,17 +13,21 @@ function getThemedCssVariables(theme: FeedbackTheme): string { --submit-background: ${theme.submitBackground}; --submit-background-hover: ${theme.submitBackgroundHover}; --submit-border: ${theme.submitBorder}; + --submit-outline-focus: ${theme.submitOutlineFocus}; --submit-foreground: ${theme.submitForeground}; + --submit-foreground-hover: ${theme.submitForegroundHover}; --cancel-background: ${theme.cancelBackground}; --cancel-background-hover: ${theme.cancelBackgroundHover}; --cancel-border: ${theme.cancelBorder}; + --cancel-outline-focus: ${theme.cancelOutlineFocus}; --cancel-foreground: ${theme.cancelForeground}; + --cancel-foreground-hover: ${theme.cancelForegroundHover}; --input-background: ${theme.inputBackground}; --input-foreground: ${theme.inputForeground}; --input-border: ${theme.inputBorder}; - --input-border-focus: ${theme.inputBorderFocus}; + --input-outline-focus: ${theme.inputOutlineFocus}; `; }