From d9390d2262835bf998278707643643f6db0cc0f9 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Thu, 23 May 2024 10:20:27 +0200 Subject: [PATCH] Improve discoverability of unsaved settings (#20153) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DES-195 The purpose of this change is to (1) reduce the overwhelming use of green on the settings UI in general and (2) to make unsaved sections more focused and discoverable and focused when trying to quit Settings without saving so that it's easier to find. --------- Co-authored-by: Daniël van der Winden --- .../src/global/Button.tsx | 11 +++- .../src/global/ButtonGroup.stories.tsx | 25 +++------- .../src/global/ButtonGroup.tsx | 4 +- .../src/settings/SettingGroup.tsx | 50 +++++++++++++------ .../src/settings/SettingGroupHeader.tsx | 4 +- .../settings/advanced/CodeInjection.tsx | 2 +- .../components/settings/advanced/History.tsx | 2 +- .../settings/advanced/Integrations.tsx | 2 +- .../src/components/settings/advanced/Labs.tsx | 4 +- .../components/settings/email/Newsletters.tsx | 2 +- .../src/components/settings/general/Users.tsx | 2 +- .../src/components/settings/growth/Offers.tsx | 2 +- .../settings/growth/Recommendations.tsx | 4 +- .../growth/embedSignup/EmbedSignupForm.tsx | 2 +- .../components/settings/membership/Portal.tsx | 2 +- .../settings/site/AnnouncementBar.tsx | 2 +- .../settings/site/DesignSetting.tsx | 2 +- .../components/settings/site/Navigation.tsx | 2 +- 18 files changed, 71 insertions(+), 53 deletions(-) diff --git a/apps/admin-x-design-system/src/global/Button.tsx b/apps/admin-x-design-system/src/global/Button.tsx index 5c91bfeb26..2464e98f15 100644 --- a/apps/admin-x-design-system/src/global/Button.tsx +++ b/apps/admin-x-design-system/src/global/Button.tsx @@ -3,7 +3,7 @@ import React, {HTMLProps} from 'react'; import clsx from 'clsx'; import {LoadingIndicator, LoadingIndicatorColor, LoadingIndicatorSize} from './LoadingIndicator'; -export type ButtonColor = 'clear' | 'grey' | 'black' | 'green' | 'red' | 'white' | 'outline'; +export type ButtonColor = 'clear' | 'light-grey' | 'grey' | 'black' | 'green' | 'red' | 'white' | 'outline'; export type ButtonSize = 'sm' | 'md'; export interface ButtonProps extends Omit, 'label' | 'size' | 'children'> { @@ -75,6 +75,13 @@ const Button: React.FC = ({ loadingIndicatorColor = 'light'; iconColorClass = iconColorClass || 'text-white'; break; + case 'light-grey': + className = clsx( + link ? 'text-grey-800 hover:text-green-400 dark:text-white' : `bg-grey-200 text-black dark:bg-grey-900 dark:text-white ${!disabled && 'hover:!bg-grey-300 dark:hover:!bg-grey-800'}`, + className + ); + loadingIndicatorColor = 'dark'; + break; case 'grey': className = clsx( link ? 'text-black hover:text-grey-800 dark:text-white' : `bg-grey-100 text-black dark:bg-grey-900 dark:text-white ${!disabled && 'hover:!bg-grey-300 dark:hover:!bg-grey-800'}`, @@ -114,7 +121,7 @@ const Button: React.FC = ({ break; default: className = clsx( - link ? ' text-black hover:text-grey-800 dark:text-white' : `text-black dark:text-white dark:hover:bg-grey-900 ${!disabled && 'hover:bg-grey-200'}`, + link ? ' text-black hover:text-grey-800 dark:text-white' : `text-grey-900 dark:text-white dark:hover:bg-grey-900 ${!disabled && 'hover:bg-grey-200 hover:text-black'}`, (outlineOnMobile && !link) && 'border border-grey-300 hover:border-transparent md:border-transparent', className ); diff --git a/apps/admin-x-design-system/src/global/ButtonGroup.stories.tsx b/apps/admin-x-design-system/src/global/ButtonGroup.stories.tsx index eb007ad9ca..850c8d7bab 100644 --- a/apps/admin-x-design-system/src/global/ButtonGroup.stories.tsx +++ b/apps/admin-x-design-system/src/global/ButtonGroup.stories.tsx @@ -33,6 +33,14 @@ export const Default: Story = { } }; +export const Small: Story = { + args: { + buttons: defaultButtons, + link: false, + size: 'sm' + } +}; + const linkButtons: ButtonProps[] = [ { label: 'Cancel', @@ -50,21 +58,4 @@ export const LinkButtons: Story = { buttons: linkButtons, link: true } -}; - -export const WithBackground: Story = { - args: { - buttons: linkButtons, - link: true, - clearBg: false - } -}; - -export const SmallWithBackground: Story = { - args: { - buttons: linkButtons, - link: true, - clearBg: false, - size: 'sm' - } }; \ No newline at end of file diff --git a/apps/admin-x-design-system/src/global/ButtonGroup.tsx b/apps/admin-x-design-system/src/global/ButtonGroup.tsx index f41d9b0fa4..26697d4977 100644 --- a/apps/admin-x-design-system/src/global/ButtonGroup.tsx +++ b/apps/admin-x-design-system/src/global/ButtonGroup.tsx @@ -17,7 +17,7 @@ export interface ButtonGroupProps { const ButtonGroup: React.FC = ({size = 'md', buttons, link, linkWithPadding, clearBg = true, outlineOnMobile, className}) => { let groupColorClasses = clsx( 'flex items-center justify-start rounded', - link ? 'gap-4' : 'gap-3', + link ? 'gap-4' : 'gap-2', className ); @@ -33,7 +33,7 @@ const ButtonGroup: React.FC = ({size = 'md', buttons, link, li return (
{buttons.map(({key, ...props}) => ( -
); diff --git a/apps/admin-x-design-system/src/settings/SettingGroup.tsx b/apps/admin-x-design-system/src/settings/SettingGroup.tsx index 7c3ab39191..2a620534fc 100644 --- a/apps/admin-x-design-system/src/settings/SettingGroup.tsx +++ b/apps/admin-x-design-system/src/settings/SettingGroup.tsx @@ -78,6 +78,7 @@ const SettingGroup = forwardRef(function Sett styles += ' border-grey-250 dark:border-grey-925'; + // The links visible before editing const viewButtons: ButtonProps[] = []; if (!hideEditButton) { @@ -89,7 +90,7 @@ const SettingGroup = forwardRef(function Sett { label, key: 'edit', - color: 'green', + color: 'clear', onClick: handleEdit } ); @@ -104,6 +105,7 @@ const SettingGroup = forwardRef(function Sett ); } + // The buttons that show when you are editing const editButtons: ButtonProps[] = [ { label: 'Cancel', @@ -119,9 +121,10 @@ const SettingGroup = forwardRef(function Sett } editButtons.push( { - label, + label: label, key: 'save', - color: 'green', + color: saveState === 'unsaved' ? 'green' : 'light-grey', + disabled: saveState !== 'unsaved', onClick: handleSave } ); @@ -151,18 +154,35 @@ const SettingGroup = forwardRef(function Sett styles ); - return ( -
-
- {customHeader ? customHeader : - - {customButtons ? customButtons : - (onEditingChange && )} - - } - {children} -
- ); + if (!isEditing) { + return ( +
+
+ {customHeader ? customHeader : + + {customButtons ? customButtons : + (onEditingChange && ) + } + + } + {children} +
+ ); + } else { + return ( +
+
+ {customHeader ? customHeader : + + {customButtons ? customButtons : + (onEditingChange && ) + } + + } + {children} +
+ ); + } }); export default SettingGroup; diff --git a/apps/admin-x-design-system/src/settings/SettingGroupHeader.tsx b/apps/admin-x-design-system/src/settings/SettingGroupHeader.tsx index 181196bcf3..8927824543 100644 --- a/apps/admin-x-design-system/src/settings/SettingGroupHeader.tsx +++ b/apps/admin-x-design-system/src/settings/SettingGroupHeader.tsx @@ -14,10 +14,10 @@ const SettingGroupHeader: React.FC = ({title, descripti {(title || description) &&
{title}{beta && Beta} - {description &&

{description}

} + {description &&

{description}

}
} -
+
{children}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx b/apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx index aba04ba3c0..484d52319d 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/CodeInjection.tsx @@ -10,7 +10,7 @@ const CodeInjection: React.FC<{ keywords: string[] }> = ({keywords}) => { customHeader={
-
diff --git a/apps/admin-x-settings/src/components/settings/advanced/History.tsx b/apps/admin-x-settings/src/components/settings/advanced/History.tsx index 7f33ae1354..8b05a073cc 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/History.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/History.tsx @@ -11,7 +11,7 @@ const History: React.FC<{ keywords: string[] }> = ({keywords}) => { return ( } + customButtons={