haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dialog) Improvements (#12590) 

Remove focus outline for the close icon
Increase max height
This commit is contained in:
Robert Pintilii 2022-11-21 11:09:03 +02:00 committed by GitHub
parent 243a330318
commit f5f55c4f23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
react/features/base/ui/components/web/ClickableIcon.tsx
View File

@ -6,6 +6,7 @@ import Icon from '../../../icons/components/Icon';
interface IProps { interface IProps {
accessibilityLabel: string; accessibilityLabel: string;
className?: string;
icon: Function; icon: Function;
id?: string; id?: string;
onClick: () => void; onClick: () => void;
@ -40,14 +41,14 @@ const useStyles = makeStyles()(theme => {
}; };
}); });
const ClickableIcon = ({ accessibilityLabel, icon, id, onClick }: IProps) => { const ClickableIcon = ({ accessibilityLabel, className, icon, id, onClick }: IProps) => {
const { classes: styles, cx } = useStyles(); const { classes: styles, cx } = useStyles();
const isMobile = isMobileBrowser(); const isMobile = isMobileBrowser();
return ( return (
<button <button
aria-label = { accessibilityLabel } aria-label = { accessibilityLabel }
className = { cx(styles.button, isMobile && 'is-mobile') } className = { cx(styles.button, isMobile && 'is-mobile', className) }
id = { id } id = { id }
onClick = { onClick }> onClick = { onClick }>
<Icon <Icon

9
react/features/base/ui/components/web/Dialog.tsx
View File

@ -67,7 +67,7 @@ const useStyles = makeStyles()(theme => {
flexDirection: 'column', flexDirection: 'column',
height: 'auto', height: 'auto',
minHeight: '200px', minHeight: '200px',
maxHeight: '660px', maxHeight: '760px',
marginTop: '64px', marginTop: '64px',
animation: `${keyframes` animation: `${keyframes`
0% { 0% {
@ -137,6 +137,12 @@ const useStyles = makeStyles()(theme => {
justifyContent: 'space-between' justifyContent: 'space-between'
}, },
closeIcon: {
'&:focus': {
boxShadow: 'none'
}
},
title: { title: {
color: theme.palette.text01, color: theme.palette.text01,
...withPixelLineHeight(theme.typography.heading5), ...withPixelLineHeight(theme.typography.heading5),
@ -278,6 +284,7 @@ const Dialog = ({
{!hideCloseButton && ( {!hideCloseButton && (
<ClickableIcon <ClickableIcon
accessibilityLabel = { t('dialog.close') } accessibilityLabel = { t('dialog.close') }
className = { classes.closeIcon }
icon = { IconCloseLarge } icon = { IconCloseLarge }
id = 'modal-header-close-button' id = 'modal-header-close-button'
onClick = { onClose } /> onClick = { onClose } />