From dbd2a32fca64074f4c5ffbf218988ccf0b4e2f30 Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Tue, 16 Apr 2024 17:06:42 +0200 Subject: [PATCH] Merge pull request #17806 from overleaf/rd-bootstrap-button2 [web] - Updating the Account Settings page with the Button and Icon Button wrappers GitOrigin-RevId: 135c4ddaa64d009d3ab8cdfef9cff899fd77669c --- .../components/account-info-section.tsx | 24 +++++---- .../actions/make-primary/primary-button.tsx | 20 +++++--- .../components/emails/actions/remove.tsx | 34 +++++++++---- .../settings/components/emails/add-email.tsx | 8 +-- .../emails/add-email/country-input.tsx | 4 +- .../components/emails/downshift-input.tsx | 4 +- .../settings/components/emails/header.tsx | 10 ++-- .../settings/components/emails/row.tsx | 6 +-- .../settings/components/password-section.tsx | 20 ++++---- .../ui/components/bootstrap-5/button.tsx | 17 +++++-- .../components/bootstrap-5/dropdown-menu.tsx | 22 ++++----- .../ui/components/bootstrap-5/icon-button.tsx | 2 +- .../bootstrap-5/icon-text-button.tsx | 26 ---------- .../bootstrap-5/wrappers/button-wrapper.tsx | 49 +++++++++++++++++++ .../wrappers/icon-button-wrapper.tsx | 45 +++++++++++++++++ .../ui/components/types/button-props.ts | 3 ++ .../types/icon-text-button-props.ts | 6 --- .../frontend/js/features/utils/bootstrap-5.ts | 2 +- .../frontend/js/shared/components/icon.tsx | 6 +-- .../frontend/stories/ui/button.stories.tsx | 12 +++++ .../stories/ui/icon-text-button.stories.tsx | 42 ---------------- 21 files changed, 211 insertions(+), 151 deletions(-) delete mode 100644 services/web/frontend/js/features/ui/components/bootstrap-5/icon-text-button.tsx create mode 100644 services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/button-wrapper.tsx create mode 100644 services/web/frontend/js/features/ui/components/bootstrap-5/wrappers/icon-button-wrapper.tsx delete mode 100644 services/web/frontend/js/features/ui/components/types/icon-text-button-props.ts delete mode 100644 services/web/frontend/stories/ui/icon-text-button.stories.tsx diff --git a/services/web/frontend/js/features/settings/components/account-info-section.tsx b/services/web/frontend/js/features/settings/components/account-info-section.tsx index bdcd2d122a..ef1726dd86 100644 --- a/services/web/frontend/js/features/settings/components/account-info-section.tsx +++ b/services/web/frontend/js/features/settings/components/account-info-section.tsx @@ -1,11 +1,5 @@ import { useState } from 'react' -import { - Alert, - Button, - ControlLabel, - FormControl, - FormGroup, -} from 'react-bootstrap' +import { Alert, ControlLabel, FormControl, FormGroup } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { getUserFacingMessage, @@ -15,6 +9,7 @@ import getMeta from '../../../utils/meta' import { ExposedSettings } from '../../../../../types/exposed-settings' import useAsync from '../../../shared/hooks/use-async' import { useUserContext } from '../../../shared/context/user-context' +import ButtonWrapper from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper' function AccountInfoSection() { const { t } = useTranslation() @@ -118,14 +113,17 @@ function AccountInfoSection() { ) : null} {canUpdateEmail || canUpdateNames ? ( - + {t('update')} + ) : null} diff --git a/services/web/frontend/js/features/settings/components/emails/actions/make-primary/primary-button.tsx b/services/web/frontend/js/features/settings/components/emails/actions/make-primary/primary-button.tsx index 089856d7f2..140df2defc 100644 --- a/services/web/frontend/js/features/settings/components/emails/actions/make-primary/primary-button.tsx +++ b/services/web/frontend/js/features/settings/components/emails/actions/make-primary/primary-button.tsx @@ -1,16 +1,22 @@ -import { Button } from 'react-bootstrap' +import ButtonWrapper, { + ButtonWrapperProps, +} from '@/features/ui/components/bootstrap-5/wrappers/button-wrapper' +import { bsVersion } from '@/features/utils/bootstrap-5' -function PrimaryButton({ children, disabled, onClick }: Button.ButtonProps) { +function PrimaryButton({ children, disabled, onClick }: ButtonWrapperProps) { return ( - + ) } diff --git a/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx b/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx index 82fb837d0a..7418dc1461 100644 --- a/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx +++ b/services/web/frontend/js/features/settings/components/emails/actions/remove.tsx @@ -1,24 +1,38 @@ -import Icon from '../../../../../shared/components/icon' -import { Button } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import { UserEmailData } from '../../../../../../../types/user-email' import { useUserEmailsContext } from '../../../context/user-email-context' import { postJSON } from '../../../../../infrastructure/fetch-json' import { UseAsyncReturnType } from '../../../../../shared/hooks/use-async' import TooltipWrapper from '@/features/ui/components/bootstrap-5/wrappers/tooltip-wrapper' +import IconButtonWrapper, { + IconButtonWrapperProps, +} from '@/features/ui/components/bootstrap-5/wrappers/icon-button-wrapper' +import { bsVersion } from '@/features/utils/bootstrap-5' -function DeleteButton({ disabled, onClick }: Button.ButtonProps) { +type DeleteButtonProps = Pick< + IconButtonWrapperProps, + 'disabled' | 'isLoading' | 'onClick' +> + +function DeleteButton({ disabled, isLoading, onClick }: DeleteButtonProps) { const { t } = useTranslation() return ( - + accessibilityLabel={t('remove') || ''} + icon={ + bsVersion({ + bs5: 'delete', + bs3: 'trash', + }) || 'trash' + } + bs3Props={{ fw: true }} + /> ) } @@ -49,7 +63,7 @@ function Remove({ userEmailData, deleteEmailAsync }: RemoveProps) { } if (deleteEmailAsync.isLoading) { - return + return } return ( diff --git a/services/web/frontend/js/features/settings/components/emails/add-email.tsx b/services/web/frontend/js/features/settings/components/emails/add-email.tsx index c26e2af865..46c4da1ed4 100644 --- a/services/web/frontend/js/features/settings/components/emails/add-email.tsx +++ b/services/web/frontend/js/features/settings/components/emails/add-email.tsx @@ -18,7 +18,7 @@ import getMeta from '../../../../utils/meta' import { ReCaptcha2 } from '../../../../shared/components/recaptcha-2' import { useRecaptcha } from '../../../../shared/hooks/use-recaptcha' import ColWrapper from '@/features/ui/components/bootstrap-5/wrappers/col-wrapper' -import { bsClassName } from '@/features/utils/bootstrap-5' +import { bsVersion } from '@/features/utils/bootstrap-5' function AddEmail() { const { t } = useTranslation() @@ -136,7 +136,7 @@ function AddEmail() { <> @@ -162,7 +162,7 @@ function AddEmail() { > @@ -58,7 +58,7 @@ function Downshift({ setValue, inputRef }: CountryInputProps) { {/* eslint-disable-next-line jsx-a11y/label-has-for */} diff --git a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx index 783b284a1e..cde10bb936 100644 --- a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx +++ b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, forwardRef } from 'react' import { useCombobox } from 'downshift' import classnames from 'classnames' import { escapeRegExp } from 'lodash' -import { bsClassName } from '@/features/utils/bootstrap-5' +import { bsVersion } from '@/features/utils/bootstrap-5' type DownshiftInputProps = { highlightMatches?: boolean @@ -92,7 +92,7 @@ function Downshift({ className={ showLabel ? '' - : bsClassName({ bs5: 'visually-hidden', bs3: 'sr-only' }) + : bsVersion({ bs5: 'visually-hidden', bs3: 'sr-only' }) } > {label} diff --git a/services/web/frontend/js/features/settings/components/emails/header.tsx b/services/web/frontend/js/features/settings/components/emails/header.tsx index 90622c42e8..b5039d364c 100644 --- a/services/web/frontend/js/features/settings/components/emails/header.tsx +++ b/services/web/frontend/js/features/settings/components/emails/header.tsx @@ -3,7 +3,7 @@ import EmailCell from './cell' import ColWrapper from '@/features/ui/components/bootstrap-5/wrappers/col-wrapper' import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper' import classnames from 'classnames' -import { bsClassName } from '@/features/utils/bootstrap-5' +import { bsVersion } from '@/features/utils/bootstrap-5' function Header() { const { t } = useTranslation() @@ -13,7 +13,7 @@ function Header() {
diff --git a/services/web/frontend/js/features/settings/components/emails/row.tsx b/services/web/frontend/js/features/settings/components/emails/row.tsx index 6d82a503a3..afbc0d4460 100644 --- a/services/web/frontend/js/features/settings/components/emails/row.tsx +++ b/services/web/frontend/js/features/settings/components/emails/row.tsx @@ -15,7 +15,7 @@ import ReconfirmationInfo from './reconfirmation-info' import { useLocation } from '../../../../shared/hooks/use-location' import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper' import ColWrapper from '@/features/ui/components/bootstrap-5/wrappers/col-wrapper' -import { bsClassName } from '@/features/utils/bootstrap-5' +import { bsVersion } from '@/features/utils/bootstrap-5' type EmailsRowProps = { userEmailData: UserEmailData @@ -44,7 +44,7 @@ function EmailsRow({ userEmailData }: EmailsRowProps) { ) : null} - + {t('change')} + ) } diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx index 8a375c6a59..12e23b371d 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/button.tsx @@ -1,7 +1,8 @@ -import { Button as B5Button, Spinner } from 'react-bootstrap-5' +import { Button as BS5Button, Spinner } from 'react-bootstrap-5' import type { ButtonProps } from '@/features/ui/components/types/button-props' import classNames from 'classnames' import { useTranslation } from 'react-i18next' +import MaterialIcon from '@/shared/components/material-icon' const sizeClasses = new Map([ ['small', 'btn-sm'], @@ -12,8 +13,11 @@ const sizeClasses = new Map([ export default function Button({ children, className, + leadingIcon, isLoading = false, size = 'default', + trailingIcon, + variant = 'primary', ...props }: ButtonProps) { const { t } = useTranslation() @@ -24,9 +28,10 @@ export default function Button({ }) const loadingSpinnerClassName = size === 'large' ? 'loading-spinner-large' : 'loading-spinner-small' + const materialIconClassName = size === 'large' ? 'icon-large' : 'icon-small' return ( - + {isLoading && ( )} + {leadingIcon && ( + + )} {children} + {trailingIcon && ( + + )} - + ) } diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx index e6f26cb4b5..3eec25d6f3 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx @@ -1,10 +1,10 @@ import React from 'react' import { - Dropdown as B5Dropdown, - DropdownToggle as B5DropdownToggle, - DropdownMenu as B5DropdownMenu, - DropdownItem as B5DropdownItem, - DropdownDivider as B5DropdownDivider, + Dropdown as BS5Dropdown, + DropdownToggle as BS5DropdownToggle, + DropdownMenu as BS5DropdownMenu, + DropdownItem as BS5DropdownItem, + DropdownDivider as BS5DropdownDivider, } from 'react-bootstrap-5' import type { DropdownProps, @@ -15,7 +15,7 @@ import type { import MaterialIcon from '@/shared/components/material-icon' export function Dropdown({ ...props }: DropdownProps) { - return + return } export function DropdownItem({ @@ -29,7 +29,7 @@ export function DropdownItem({ const trailingIconType = active ? 'check' : trailingIcon return (
  • - {description} )} - +
    • ) } export function DropdownToggle({ ...props }: DropdownToggleProps) { - return + return } export function DropdownMenu({ as = 'ul', ...props }: DropdownMenuProps) { - return + return } export function DropdownDivider() { - return