refactor: button to allow html attributes & refactor class names (#956)

app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx

@@ -130,7 +130,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
             label={
               isRegistering ? 'Creating account...' : 'Create account & sign in'
             }
-            type="primary"
+            variant="primary"
             onClick={handleConfirmFormSubmit}
             disabled={isRegistering}
           />

app/assets/javascripts/components/AccountMenu/CreateAccount.tsx

@@ -122,7 +122,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
           <Button
             className="btn-w-full mt-1"
             label="Next"
-            type="primary"
+            variant="primary"
             onClick={handleRegisterFormSubmit}
           />
         </form>

app/assets/javascripts/components/AccountMenu/SignIn.tsx

@@ -171,7 +171,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
           <Button
             className="btn-w-full mt-1 mb-3"
             label={isSigningIn ? 'Signing in...' : 'Sign in'}
-            type="primary"
+            variant="primary"
             onClick={handleSignInFormSubmit}
             disabled={isSigningIn}
           />

app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx

@@ -196,7 +196,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                   : 'No files found in this account'}
               </div>
               <Button
-                type="normal"
+                variant="normal"
                 onClick={handleAttachFilesClick}
                 onBlur={closeOnBlur}
               >

app/assets/javascripts/components/Button.tsx

@@ -1,60 +1,79 @@
 import { JSXInternal } from 'preact/src/jsx';
-import TargetedEvent = JSXInternal.TargetedEvent;
-import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
-
 import { ComponentChildren, FunctionComponent, Ref } from 'preact';
 import { forwardRef } from 'preact/compat';
 
 const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
 
-type ButtonType = 'normal' | 'primary' | 'danger';
+type ButtonVariant = 'normal' | 'primary';
 
-const buttonClasses: { [type in ButtonType]: string } = {
+const getClassName = (
-  normal: `${baseClass} bg-default color-text border-solid border-main border-1 focus:bg-contrast hover:bg-contrast`,
+  variant: ButtonVariant,
-  primary: `${baseClass} no-border bg-info color-info-contrast hover:brightness-130 focus:brightness-130`,
+  danger: boolean,
-  danger: `${baseClass} bg-default color-danger border-solid border-main border-1 focus:bg-contrast hover:bg-contrast`,
+  disabled: boolean
+) => {
+  const borders =
+    variant === 'normal' ? 'border-solid border-main border-1' : 'no-border';
+  const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer';
+
+  let colors =
+    variant === 'normal'
+      ? 'bg-default color-text'
+      : 'bg-info color-info-contrast';
+
+  let focusHoverStates =
+    variant === 'normal'
+      ? 'focus:bg-contrast hover:bg-contrast'
+      : 'hover:brightness-130 focus:brightness-130';
+
+  if (danger) {
+    colors =
+      variant === 'normal'
+        ? 'bg-default color-danger'
+        : 'bg-danger color-info-contrast';
+  }
+
+  if (disabled) {
+    colors =
+      variant === 'normal'
+        ? 'bg-default color-grey-2'
+        : 'bg-grey-2 color-info-contrast';
+    focusHoverStates =
+      variant === 'normal'
+        ? 'focus:bg-default hover:bg-default'
+        : 'focus:brightness-default hover:brightness-default';
+  }
+
+  return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`;
 };
 
-type ButtonProps = {
+type ButtonProps = JSXInternal.HTMLAttributes<HTMLButtonElement> & {
   children?: ComponentChildren;
   className?: string;
-  type: ButtonType;
+  variant?: ButtonVariant;
+  dangerStyle?: boolean;
   label?: string;
-  onClick: (
-    event:
-      | TargetedEvent<HTMLFormElement>
-      | TargetedMouseEvent<HTMLButtonElement>
-  ) => void;
-  onBlur?: (event: FocusEvent) => void;
-  disabled?: boolean;
 };
 
 export const Button: FunctionComponent<ButtonProps> = forwardRef(
   (
     {
-      type,
+      variant = 'normal',
       label,
       className = '',
-      onBlur,
+      dangerStyle: danger = false,
-      onClick,
       disabled = false,
       children,
+      ...props
     }: ButtonProps,
     ref: Ref<HTMLButtonElement>
   ) => {
-    const buttonClass = buttonClasses[type];
-    const cursorClass = disabled ? 'cursor-default' : 'cursor-pointer';
-
     return (
       <button
-        className={`${buttonClass} ${cursorClass} ${className}`}
+        type="button"
-        onBlur={onBlur}
+        className={`${getClassName(variant, danger, disabled)} ${className}`}
-        onClick={(e) => {
-          onClick(e);
-          e.preventDefault();
-        }}
         disabled={disabled}
         ref={ref}
+        {...props}
       >
         {label ?? children}
       </button>

app/assets/javascripts/components/Files/FilePreviewModal.tsx

@@ -111,7 +111,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
           <div className="flex items-center">
             {objectUrl && (
               <Button
-                type="primary"
+                variant="primary"
                 className="mr-4"
                 onClick={() => {
                   application
@@ -151,7 +151,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                   </div>
                   <div className="flex items-center">
                     <Button
-                      type="primary"
+                      variant="primary"
                       className="mr-3"
                       onClick={() => {
                         getObjectUrl();
@@ -160,7 +160,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                       Try again
                     </Button>
                     <Button
-                      type="normal"
+                      variant="normal"
                       onClick={() => {
                         application.getAppState().files.downloadFile(file);
                       }}
@@ -176,7 +176,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
                     application.
                   </div>
                   <Button
-                    type="primary"
+                    variant="primary"
                     onClick={() => {
                       application.getAppState().files.downloadFile(file);
                     }}

app/assets/javascripts/components/Preferences/panes/Extensions.tsx

@@ -120,7 +120,7 @@ export const Extensions: FunctionComponent<{
             <div className="min-h-2" />
             <Button
               className="min-w-20"
-              type="normal"
+              variant="normal"
               label="Install"
               onClick={() => submitExtensionUrl(customUrl)}
             />

app/assets/javascripts/components/Preferences/panes/Listed.tsx

@@ -102,7 +102,7 @@ export const Listed = observer(({ application }: Props) => {
           <Text>Create a free Listed author account to get started.</Text>
           <Button
             className="mt-3"
-            type="normal"
+            variant="normal"
             disabled={requestingAccount}
             label={
               requestingAccount ? 'Creating account...' : 'Create new author'

app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx

@@ -39,7 +39,7 @@ export const Authentication: FunctionComponent<{
             and enable end-to-end encryption.
           </Text>
           <Button
-            type="primary"
+            variant="primary"
             label="Create free account"
             onClick={clickRegister}
             className="mb-3"

app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx

@@ -50,7 +50,7 @@ export const Credentials: FunctionComponent<Props> = observer(
           </Text>
           <Button
             className="min-w-20 mt-3"
-            type="normal"
+            variant="normal"
             label="Change email"
             onClick={() => {
               setIsChangeEmailDialogOpen(true);
@@ -64,7 +64,7 @@ export const Credentials: FunctionComponent<Props> = observer(
           </Text>
           <Button
             className="min-w-20 mt-3"
-            type="normal"
+            variant="normal"
             label="Change password"
             onClick={presentPasswordWizard}
           />

app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx

@@ -27,14 +27,14 @@ const SignOutView: FunctionComponent<{
           <div className="flex flex-row">
             <Button
               className="mr-3"
-              type="normal"
+              variant="normal"
               label="Sign out other sessions"
               onClick={() => {
                 appState.accountMenu.setOtherSessionsSignOut(true);
               }}
             />
             <Button
-              type="normal"
+              variant="normal"
               label="Manage sessions"
               onClick={() => appState.openSessionsModal()}
             />
@@ -48,7 +48,7 @@ const SignOutView: FunctionComponent<{
           </Text>
           <div className="min-h-3" />
           <Button
-            type="danger"
+            dangerStyle={true}
             label="Sign out workspace"
             onClick={() => {
               appState.accountMenu.setSigningOut(true);
@@ -76,7 +76,7 @@ const ClearSessionDataView: FunctionComponent<{
         </Text>
         <div className="min-h-3" />
         <Button
-          type="danger"
+          dangerStyle={true}
           label="Clear workspace"
           onClick={() => {
             appState.accountMenu.setSigningOut(true);

app/assets/javascripts/components/Preferences/panes/account/Sync.tsx

@@ -55,7 +55,7 @@ export const Sync: FunctionComponent<Props> = observer(
               </Text>
               <Button
                 className="min-w-20 mt-3"
-                type="normal"
+                variant="normal"
                 label="Sync now"
                 disabled={isSyncingInProgress}
                 onClick={doSynchronization}

app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx

@@ -169,7 +169,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
         <ModalDialogButtons className="px-4.5">
           <Button
             className="min-w-20"
-            type="primary"
+            variant="primary"
             label={submitButtonTitle}
             onClick={handleSubmit}
           />

app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx

@@ -2,8 +2,6 @@ import { FunctionalComponent } from 'preact';
 import { Subtitle } from '@/components/Preferences/components';
 import { DecoratedInput } from '@/components/DecoratedInput';
 import { Button } from '@/components/Button';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
-import TargetedEvent = JSXInternal.TargetedEvent;
 import { useEffect, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
@@ -40,9 +38,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
       );
     };
 
-    const handleSubscriptionCodeSubmit = async (
+    const handleSubscriptionCodeSubmit = async (event: Event) => {
-      event: TargetedEvent<HTMLFormElement, Event>
-    ) => {
       event.preventDefault();
 
       const result = await application.features.setOfflineFeaturesCode(
@@ -117,7 +113,7 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
               )}
               {hasUserPreviouslyStoredCode && (
                 <Button
-                  type="danger"
+                  dangerStyle={true}
                   label="Remove offline key"
                   onClick={() => {
                     handleRemoveClick();
@@ -127,13 +123,9 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(
               {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
                 <Button
                   label={'Submit'}
-                  type="primary"
+                  variant="primary"
                   disabled={activationCode === ''}
-                  onClick={(event) =>
+                  onClick={(event) => handleSubscriptionCodeSubmit(event)}
-                    handleSubscriptionCodeSubmit(
-                      event as TargetedEvent<HTMLFormElement>
-                    )
-                  }
                 />
               )}
             </form>

app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx

@@ -46,7 +46,7 @@ export const NoSubscription: FunctionalComponent<{
         {application.hasAccount() && (
           <Button
             className="min-w-20 mt-3"
-            type="primary"
+            variant="primary"
             label="Subscribe"
             onClick={onPurchaseClick}
           />

app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx

@@ -81,7 +81,7 @@ export const SubscriptionInformation = observer(
         <StatusText subscriptionState={subscriptionState} />
         <Button
           className="min-w-20 mt-3 mr-3"
-          type="normal"
+          variant="normal"
           label="Manage subscription"
           onClick={manageSubscription}
         />

app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx

@@ -201,7 +201,7 @@ export const DataBackups = observer(({ application, appState }: Props) => {
           )}
 
           <Button
-            type="normal"
+            variant="normal"
             onClick={downloadDataArchive}
             label="Download backup"
             className="mt-2"
@@ -212,7 +212,7 @@ export const DataBackups = observer(({ application, appState }: Props) => {
 
           <div class="flex flex-row items-center mt-3">
             <Button
-              type="normal"
+              variant="normal"
               label="Import backup"
               onClick={handleImportFile}
             />

app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx

@@ -222,7 +222,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
       {shouldShowEnableButton && (
         <div>
           <Button
-            type="normal"
+            variant="normal"
             label="Enable"
             className={`px-1 text-xs min-w-40 ${additionalClass}`}
             onClick={installIntegration}
@@ -235,13 +235,13 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
         <div className={'flex flex-col items-end'}>
           <Button
             className={`min-w-40 mb-2 ${additionalClass}`}
-            type="normal"
+            variant="normal"
             label="Perform Backup"
             onClick={performBackupNow}
           />
           <Button
             className="min-w-40"
-            type="normal"
+            variant="normal"
             label="Disable"
             onClick={disable}
           />

app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx

@@ -56,7 +56,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
       <div className="flex flex-row">
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Cancel"
           onClick={() => callback(false)}
         />
@@ -65,7 +65,7 @@ export const ConfirmCustomExtension: FunctionComponent<{
 
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Install"
           onClick={() => callback(true)}
         />

app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx

@@ -104,7 +104,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
         <div className="flex flex-row">
           <Button
             className="min-w-20"
-            type="normal"
+            variant="normal"
             label="Uninstall"
             onClick={() => uninstall(extension)}
           />

app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx

@@ -224,7 +224,7 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
                 <Button
                   label="Add passcode"
                   onClick={handleAddPassCode}
-                  type="primary"
+                  variant="primary"
                 />
               )}
             </>
@@ -258,13 +258,13 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
               />
               <div className="min-h-2" />
               <Button
-                type="primary"
+                variant="primary"
                 onClick={submitPasscodeForm}
                 label="Set Passcode"
                 className="mr-3"
               />
               <Button
-                type="normal"
+                variant="normal"
                 onClick={() => setShowPasscodeForm(false)}
                 label="Cancel"
               />
@@ -276,13 +276,13 @@ export const PasscodeLock = observer(({ application, appState }: Props) => {
               <Text>Passcode lock is enabled.</Text>
               <div className="flex flex-row mt-3">
                 <Button
-                  type="normal"
+                  variant="normal"
                   label="Change Passcode"
                   onClick={changePasscodePressed}
                   className="mr-3"
                 />
                 <Button
-                  type="danger"
+                  dangerStyle={true}
                   label="Remove Passcode"
                   onClick={removePasscodePressed}
                 />

app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx

@@ -107,7 +107,7 @@ export const Protections: FunctionalComponent<Props> = ({ application }) => {
         {protectionsDisabledUntil && (
           <Button
             className="mt-3"
-            type="primary"
+            variant="primary"
             label="End Unprotected Access"
             onClick={enableProtections}
           />

app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx

@@ -78,13 +78,13 @@ export const SaveSecretKey: FunctionComponent<{
       <ModalDialogButtons>
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Back"
           onClick={() => act.openScanQRCode()}
         />
         <Button
           className="min-w-20"
-          type="primary"
+          variant="primary"
           label="Next"
           onClick={() => act.openVerification()}
         />

app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx

@@ -63,13 +63,13 @@ export const ScanQRCode: FunctionComponent<{
       <ModalDialogButtons>
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Cancel"
           onClick={() => act.cancelActivation()}
         />
         <Button
           className="min-w-20"
-          type="primary"
+          variant="primary"
           label="Next"
           onClick={() => act.openSaveSecretKey()}
         />

app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx

@@ -27,7 +27,7 @@ export const TwoFactorSuccess: FunctionComponent<{
     <ModalDialogButtons>
       <Button
         className="min-w-20"
-        type="primary"
+        variant="primary"
         label="Finish"
         onClick={act.finishActivation}
       />

app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx

@@ -65,13 +65,13 @@ export const Verification: FunctionComponent<{
         )}
         <Button
           className="min-w-20"
-          type="normal"
+          variant="normal"
           label="Back"
           onClick={act.openSaveSecretKey}
         />
         <Button
           className="min-w-20"
-          type="primary"
+          variant="primary"
           label="Next"
           onClick={act.enable2FA}
         />

app/assets/javascripts/components/PurchaseFlow/panes/CreateAccount.tsx

@@ -204,7 +204,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
             </div>
             <Button
               className="py-2.5 xs:mb-4"
-              type="primary"
+              variant="primary"
               label={
                 isCreatingAccount ? 'Creating account...' : 'Create account'
               }

app/assets/javascripts/components/PurchaseFlow/panes/SignIn.tsx

@@ -151,7 +151,7 @@ export const SignIn: FunctionComponent<Props> = observer(
             </div>
             <Button
               className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`}
-              type="primary"
+              variant="primary"
               label={isSigningIn ? 'Signing in...' : 'Sign in'}
               onClick={handleSignIn}
               disabled={isSigningIn}

app/assets/javascripts/components/RevisionHistoryModal/RevisionContentLocked.tsx

@@ -46,7 +46,7 @@ export const RevisionContentLocked: FunctionComponent<{
           . Learn more about our other plans to upgrade your history capacity.
         </div>
         <Button
-          type="primary"
+          variant="primary"
           label="Discover plans"
           onClick={() => {
             if (window.plansUrl) {

app/assets/javascripts/components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx

@@ -292,7 +292,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                   label="Close"
                   onClick={dismissModal}
                   ref={closeButtonRef}
-                  type="normal"
+                  variant="normal"
                 />
               </div>
               {selectedRevision && (
@@ -301,7 +301,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                     <Button
                       className="py-1.35 mr-2.5"
                       onClick={deleteSelectedRevision}
-                      type="normal"
+                      variant="normal"
                     >
                       {isDeletingRevision ? (
                         <div className="sk-spinner my-1 w-3 h-3 spinner-info" />
@@ -314,13 +314,13 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                     className="py-1.35 mr-2.5"
                     label="Restore as a copy"
                     onClick={restoreAsCopy}
-                    type="normal"
+                    variant="normal"
                   />
                   <Button
                     className="py-1.35"
                     label="Restore version"
                     onClick={restore}
-                    type="primary"
+                    variant="primary"
                   />
                 </div>
               )}

app/assets/stylesheets/_sn.scss

@@ -1045,3 +1045,19 @@
 .vertical-middle {
   vertical-align: middle;
 }
+
+.sn-component .focus\:brightness-default:focus {
+  filter: brightness(100%);
+}
+
+.sn-component .hover\:brightness-default:hover {
+  filter: brightness(100%);
+}
+
+.sn-component .focus\:bg-default:focus {
+  background-color: var(--sn-stylekit-background-color);
+}
+
+.sn-component .hover\:bg-default:hover {
+  background-color: var(--sn-stylekit-background-color);
+}