Spam Reporting UI changes
This commit is contained in:
parent
e031d136a1
commit
8387f938eb
88 changed files with 2711 additions and 807 deletions
|
@ -7,6 +7,7 @@ import classNames from 'classnames';
|
|||
import { noop } from 'lodash';
|
||||
import { animated } from '@react-spring/web';
|
||||
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import type { LocalizerType } from '../types/Util';
|
||||
import { ModalHost } from './ModalHost';
|
||||
import type { Theme } from '../util/theme';
|
||||
|
@ -37,6 +38,7 @@ type PropsType = {
|
|||
title?: ReactNode;
|
||||
useFocusTrap?: boolean;
|
||||
padded?: boolean;
|
||||
['aria-describedby']?: string;
|
||||
};
|
||||
|
||||
export type ModalPropsType = PropsType & {
|
||||
|
@ -65,6 +67,7 @@ export function Modal({
|
|||
hasFooterDivider = false,
|
||||
noTransform = false,
|
||||
padded = true,
|
||||
'aria-describedby': ariaDescribedBy,
|
||||
}: Readonly<ModalPropsType>): JSX.Element | null {
|
||||
const { close, isClosed, modalStyles, overlayStyles } = useAnimated(
|
||||
onClose,
|
||||
|
@ -132,6 +135,7 @@ export function Modal({
|
|||
padded={padded}
|
||||
hasHeaderDivider={hasHeaderDivider}
|
||||
hasFooterDivider={hasFooterDivider}
|
||||
aria-describedby={ariaDescribedBy}
|
||||
>
|
||||
{children}
|
||||
</ModalPage>
|
||||
|
@ -173,6 +177,7 @@ export function ModalPage({
|
|||
padded = true,
|
||||
hasHeaderDivider = false,
|
||||
hasFooterDivider = false,
|
||||
'aria-describedby': ariaDescribedBy,
|
||||
}: ModalPageProps): JSX.Element {
|
||||
const modalRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
|
@ -188,6 +193,8 @@ export function ModalPage({
|
|||
);
|
||||
const getClassName = getClassNamesFor(BASE_CLASS_NAME, moduleClassName);
|
||||
|
||||
const [id] = useState(() => uuid());
|
||||
|
||||
useScrollObserver(bodyRef, bodyInnerRef, scroll => {
|
||||
setScrolled(isScrolled(scroll));
|
||||
setScrolledToBottom(isScrolledToBottom(scroll));
|
||||
|
@ -198,7 +205,7 @@ export function ModalPage({
|
|||
<>
|
||||
{/* We don't want the click event to propagate to its container node. */}
|
||||
{/* eslint-disable-next-line max-len */}
|
||||
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
|
||||
<div
|
||||
className={classNames(
|
||||
getClassName(''),
|
||||
|
@ -209,6 +216,10 @@ export function ModalPage({
|
|||
hasFooterDivider && getClassName('--footer-divider')
|
||||
)}
|
||||
ref={modalRef}
|
||||
role="dialog"
|
||||
tabIndex={-1}
|
||||
aria-labelledby={title ? `${id}-title` : undefined}
|
||||
aria-describedby={ariaDescribedBy}
|
||||
onClick={event => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
|
@ -234,6 +245,7 @@ export function ModalPage({
|
|||
)}
|
||||
{title && (
|
||||
<h1
|
||||
id={`${id}-title`}
|
||||
className={classNames(
|
||||
getClassName('__title'),
|
||||
hasXButton ? getClassName('__title--with-x-button') : null
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue