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

2022-03-28 17:41:54 +05:30
parent 3ca7102fd0
commit aba1e35a1d
31 changed files with 117 additions and 90 deletions
--- a/app/assets/javascripts/components/Preferences/panes/Extensions.tsx
+++ b/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)}
            />
--- a/app/assets/javascripts/components/Preferences/panes/Listed.tsx
+++ b/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'
--- a/app/assets/javascripts/components/Preferences/panes/account/Authentication.tsx
+++ b/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"
--- a/app/assets/javascripts/components/Preferences/panes/account/Credentials.tsx
+++ b/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}
          />
--- a/app/assets/javascripts/components/Preferences/panes/account/SignOutView.tsx
+++ b/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);
--- a/app/assets/javascripts/components/Preferences/panes/account/Sync.tsx
+++ b/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}
--- a/app/assets/javascripts/components/Preferences/panes/account/changeEmail/index.tsx
+++ b/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}
          />
--- a/app/assets/javascripts/components/Preferences/panes/account/offlineSubscription.tsx
+++ b/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 (
-      event: TargetedEvent<HTMLFormElement, Event>
-    ) => {
+    const handleSubscriptionCodeSubmit = async (event: 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) =>
-                    handleSubscriptionCodeSubmit(
-                      event as TargetedEvent<HTMLFormElement>
-                    )
-                  }
+                  onClick={(event) => handleSubscriptionCodeSubmit(event)}
                />
              )}
            </form>
--- a/app/assets/javascripts/components/Preferences/panes/account/subscription/NoSubscription.tsx
+++ b/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}
          />
--- a/app/assets/javascripts/components/Preferences/panes/account/subscription/SubscriptionInformation.tsx
+++ b/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}
        />
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/DataBackups.tsx
+++ b/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}
            />
--- a/app/assets/javascripts/components/Preferences/panes/backups-segments/cloud-backups/CloudBackupProvider.tsx
+++ b/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}
          />
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ConfirmCustomExtension.tsx
+++ b/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)}
        />
--- a/app/assets/javascripts/components/Preferences/panes/extensions-segments/ExtensionItem.tsx
+++ b/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)}
          />
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/PasscodeLock.tsx
+++ b/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}
                />
--- a/app/assets/javascripts/components/Preferences/panes/security-segments/Protections.tsx
+++ b/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}
          />
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/SaveSecretKey.tsx
+++ b/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()}
        />
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/ScanQRCode.tsx
+++ b/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()}
        />
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/TwoFactorSuccess.tsx
+++ b/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}
      />
--- a/app/assets/javascripts/components/Preferences/panes/two-factor-auth/Verification.tsx
+++ b/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}
        />