overleaf/services/web/frontend/js/shared/components/icon.tsx
M Fahru b62cb86bf8 Create new SplitMenu component and implement it for the pdf compile button (detached & non-detached) (#11772)
* Create a new shared `SplitMenu` component.

* Refactor the pdf compile button & detached compile button:
    - Rename `detach-compile-button` to `detach-compile-button-wrapper`
    - Rename `pdf-compile-button-inner` to `detach-compile-button`
    - Move some of the logic from `detach-compile-button-wrapper` to `detach-compile-button`
    - Create a new `compile-button.less` to centralize all of the compile button (detached/non-detached) custom styles rule.
    - Extract the animated striped CSS definition to the dedicated CSS file, change the class from `btn-recompile-group-has-changes` to `btn-striped-animated`
    - Refactor other className(s) appropriately according to the new component name
    - Delete the unused `changes-to-autocompile` css rule since it has not been used anywhere

* Implement the new pdf compile button with the new `SplitMenu` component.

GitOrigin-RevId: d1d055bffd311923fc47b4681605ce8ba8e26f25
2023-02-22 09:04:42 +00:00

44 lines
765 B
TypeScript

import classNames from 'classnames'
type IconOwnProps = {
type: string
spin?: boolean
fw?: boolean
modifier?: string
accessibilityLabel?: string
}
export type IconProps = IconOwnProps &
Omit<React.ComponentProps<'i'>, keyof IconOwnProps>
function Icon({
type,
spin,
fw,
modifier,
className = '',
accessibilityLabel,
...rest
}: IconProps) {
const iconClassName = classNames(
'fa',
`fa-${type}`,
{
'fa-spin': spin,
'fa-fw': fw,
[`fa-${modifier}`]: modifier,
},
className
)
return (
<>
<i className={iconClassName} aria-hidden="true" {...rest} />
{accessibilityLabel && (
<span className="sr-only">{accessibilityLabel}</span>
)}
</>
)
}
export default Icon