mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
b85ae6e58e
* Migrate actions menu in editor left menu to react * Move margin from inline style to css file * remove focus selector to avoid "highlighting" the button after closing modal and regain focus * Add disabled state on word count button when the compiling is loading or failed * Use div instead of button for disabled word count button * Add accessibility text props when LeftMenuButton is disabled * Add actions menu test cases and storybook components * use util assign function and wrap function prop in usecallback GitOrigin-RevId: 81ab104be21fbcf5dfbc72c07d29eeb32976c61f
39 lines
872 B
TypeScript
39 lines
872 B
TypeScript
import { PropsWithChildren } from 'react'
|
|
import Icon from '../../../shared/components/icon'
|
|
|
|
type Props = {
|
|
onClick?: () => void
|
|
icon: {
|
|
type: string
|
|
fw?: boolean
|
|
}
|
|
disabled?: boolean
|
|
disabledAccesibilityText?: string
|
|
}
|
|
|
|
export default function LeftMenuButton({
|
|
children,
|
|
onClick,
|
|
icon,
|
|
disabled = false,
|
|
disabledAccesibilityText,
|
|
}: PropsWithChildren<Props>) {
|
|
if (disabled) {
|
|
return (
|
|
<div className="left-menu-button link-disabled">
|
|
<Icon type={icon.type} fw={icon.fw} />
|
|
<span>{children}</span>
|
|
{disabledAccesibilityText ? (
|
|
<span className="sr-only">{disabledAccesibilityText}</span>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button onClick={onClick} className="left-menu-button">
|
|
<Icon type={icon.type} fw={icon.fw} />
|
|
<span>{children}</span>
|
|
</button>
|
|
)
|
|
}
|