Skip to content

Commit

Permalink
feat: switched prop name; updated styles to correctly handle custom h…
Browse files Browse the repository at this point in the history 
…eight content inside Modal
  • Loading branch information
@DenisVershkov
DenisVershkov committed Dec 23, 2023
1 parent 278bfe8 commit 4154ea1
Show file tree
Hide file tree
Showing 7 changed files with 80 additions and 81 deletions.
3 changes: 2 additions & 1 deletion src/components/Dialog/Dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ $block: '.#{variables.$ns}dialog';
#{$block} {
position: relative;

&_scroll_inner {
&_with-scroll {
display: flex;
flex-direction: column;
overflow-y: auto;
max-height: calc(100vh - var(--yc-modal-margin) * 2);
}

&_size {
Expand Down
17 changes: 13 additions & 4 deletions src/components/Dialog/Dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ interface DialogOwnProps {
disableFocusTrap?: boolean;
disableAutoFocus?: boolean;
restoreFocusRef?: React.RefObject<HTMLElement>;
scroll?: 'inner' | 'outer';
contentOverflow?: 'visible' | 'auto';
}

interface DialogDefaultProps {
Expand Down Expand Up @@ -79,7 +79,7 @@ export class Dialog extends React.Component<DialogInnerProps> {
restoreFocusRef,
keepMounted,
size,
scroll = 'outer',
contentOverflow = 'visible',
className,
modalClassName,
hasCloseButton,
Expand All @@ -99,7 +99,7 @@ export class Dialog extends React.Component<DialogInnerProps> {
return (
<Modal
open={open}
scroll={scroll}
contentOverflow={contentOverflow}
disableBodyScrollLock={disableBodyScrollLock}
disableEscapeKeyDown={disableEscapeKeyDown}
disableOutsideClick={disableOutsideClick}
Expand All @@ -121,7 +121,16 @@ export class Dialog extends React.Component<DialogInnerProps> {
container={container}
qa={qa}
>
<div className={b({size, 'has-close': hasCloseButton, scroll}, className)}>
<div
className={b(
{
size,
'has-close': hasCloseButton,
'with-scroll': contentOverflow === 'auto',
},
className,
)}
>
{children}
{hasCloseButton && <ButtonClose onClose={this.handleCloseButtonClick} />}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dialog/DialogBody/DialogBody.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ $block: '.#{variables.$ns}dialog-body';

#{$block} {
padding: var(--yc-dialog-body-padding);
flex: 1 1 100%;
flex: 1 1 auto;
overflow-y: auto;

&_with-dividers {
Expand Down
54 changes: 27 additions & 27 deletions src/components/Dialog/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,33 @@ Dialog component

### PropTypes

| Name | Type | Required | Default | Description |
| :-------------------- | :--------------------------------------------------------------------------------------------- | :------: | :------ | :---------------------------------------------------------------------------------- |
| open | `Boolean` | ✓ | | Current dialog state |
| onEscapeKeyDown | `(event: KeyboardEvent) => void` | | | Escape key down event handler |
| onEnterKeyDown | `(event: KeyboardEvent) => void` | | | Enter key down event handler |
| onOutsideClick | `(event: MouseEvent) => void` | | | Event handler on outside dialog mouse click |
| onClose | `(event: MouseEvent or KeyboardEvent, reason: LayerCloseReason or "closeButtonClick") => void` | ✓ | | On dialog close handler |
| className | `String` | | | ClassName of dialog content wrapper |
| modalClassName | `String` | | | ClassName of modal box, in which dialog is disposed |
| size | `s` `m` `l` | | | Dialog size |
| disableBodyScrollLock | `Boolean` | | `False` | Should body scroll be locked |
| disableEscapeKeyDown | `Boolean` | | `False` | Should escape key down be disabled |
| disableOutsideClick | `Boolean` | | `False` | Should outside click be disabled |
| disableFocusTrap | `Boolean` | | | If true, the modal will not prevent focus from leaving the modal while open |
| disableAutoFocus | `Boolean` | | | If true, the modal will not automatically shift focus to itself when it opens |
| onTransitionEnter | `() => void` | | | On start open dialog animation |
| onTransitionEntered | `() => void` | | | On finish open dialog animation |
| onTransitionExit | `() => void` | | | On start close dialog animation |
| onTransitionExited | `() => void` | | | On finish close dialog animation |
| restoreFocusRef | `React.RefObject` | | | Element to receive focus when the dialog closes |
| keepMounted | `Boolean` | | `False` | Should dialog be kept mounted |
| hasCloseButton | `Boolean` | | `True` | Cross icon in top right corner of dialog presence |
| aria-labelledby | `String` | | | Id of <Dialog/> caption. Use `id` props of `<Dialog.Header/>` to set id for caption |
| aria-label | `String` | | | Dialog label for a11y. Prefer `aria-labelledby` if caption is visible to user |
| container | `HTMLElement` | | | Container element for the dialog box |
| qa | `String` | | | Data-qa attribute value of modal box, in which dialog is disposed |
| scroll | `inner` `outer` | | `outer` | Define scroll position when the dialog becomes too long to fit the screen |
| Name | Type | Required | Default | Description |
| :-------------------- | :--------------------------------------------------------------------------------------------- | :------: | :-------- | :---------------------------------------------------------------------------------- |
| open | `Boolean` | ✓ | | Current dialog state |
| onEscapeKeyDown | `(event: KeyboardEvent) => void` | | | Escape key down event handler |
| onEnterKeyDown | `(event: KeyboardEvent) => void` | | | Enter key down event handler |
| onOutsideClick | `(event: MouseEvent) => void` | | | Event handler on outside dialog mouse click |
| onClose | `(event: MouseEvent or KeyboardEvent, reason: LayerCloseReason or "closeButtonClick") => void` | ✓ | | On dialog close handler |
| className | `String` | | | ClassName of dialog content wrapper |
| modalClassName | `String` | | | ClassName of modal box, in which dialog is disposed |
| size | `s` `m` `l` | | | Dialog size |
| disableBodyScrollLock | `Boolean` | | `False` | Should body scroll be locked |
| disableEscapeKeyDown | `Boolean` | | `False` | Should escape key down be disabled |
| disableOutsideClick | `Boolean` | | `False` | Should outside click be disabled |
| disableFocusTrap | `Boolean` | | | If true, the modal will not prevent focus from leaving the modal while open |
| disableAutoFocus | `Boolean` | | | If true, the modal will not automatically shift focus to itself when it opens |
| onTransitionEnter | `() => void` | | | On start open dialog animation |
| onTransitionEntered | `() => void` | | | On finish open dialog animation |
| onTransitionExit | `() => void` | | | On start close dialog animation |
| onTransitionExited | `() => void` | | | On finish close dialog animation |
| restoreFocusRef | `React.RefObject` | | | Element to receive focus when the dialog closes |
| keepMounted | `Boolean` | | `False` | Should dialog be kept mounted |
| hasCloseButton | `Boolean` | | `True` | Cross icon in top right corner of dialog presence |
| aria-labelledby | `String` | | | Id of <Dialog/> caption. Use `id` props of `<Dialog.Header/>` to set id for caption |
| aria-label | `String` | | | Dialog label for a11y. Prefer `aria-labelledby` if caption is visible to user |
| container | `HTMLElement` | | | Container element for the dialog box |
| qa | `String` | | | Data-qa attribute value of modal box, in which dialog is disposed |
| contentOverflow | `visible` `auto` | | `visible` | Define whether `Dialog` has a scroll indicator inside or grows with the content |

### Examples

Expand Down
39 changes: 11 additions & 28 deletions src/components/Modal/Modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,42 +19,26 @@ $block: '.#{variables.$ns}modal';
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

&__content-wrapper {
&__content-aligner-wrapper {
width: 100%;
height: 100%;
text-align: center;
min-height: 100%;

&_scroll_inner {
display: flex;
justify-content: center;
align-items: center;
}

&::after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
display: flex;
align-items: center;
justify-content: center;
}

&__content {
display: inline-block;
vertical-align: middle;
text-align: left;

&__content-container {
margin: var(--yc-modal-margin);
background-color: var(--g-color-base-modal);
border-radius: var(--yc-modal-border-radius);
overflow-x: hidden;
}

&_scroll_inner {
display: flex;
flex-direction: column;
&__content {
&_with-scroll {
overflow-y: auto;
margin-top: var(--yc-modal-with-inner-scroll-margin);
margin-bottom: var(--yc-modal-with-inner-scroll-margin);
max-height: calc(100% - (var(--yc-modal-with-inner-scroll-margin) * 2));
max-height: calc(100vh - (var(--yc-modal-margin) * 2));
}
}

Expand Down Expand Up @@ -121,5 +105,4 @@ $block: '.#{variables.$ns}modal';
:root {
--yc-modal-border-radius: 5px;
--yc-modal-margin: 20px;
--yc-modal-with-inner-scroll-margin: 24px;
}
44 changes: 25 additions & 19 deletions src/components/Modal/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export interface ModalProps extends DOMProps, LayerExtendableProps, QAProps {
onTransitionEntered?: VoidFunction;
onTransitionExit?: VoidFunction;
onTransitionExited?: VoidFunction;
scroll?: 'inner' | 'outer';
contentOverflow?: 'visible' | 'auto';
}

export type ModalCloseReason = LayerCloseReason;
Expand Down Expand Up @@ -70,7 +70,7 @@ export function Modal({
onTransitionExited,
children,
style,
scroll = 'outer',
contentOverflow = 'visible',
className,
contentClassName,
'aria-labelledby': ariaLabelledBy,
Expand Down Expand Up @@ -131,24 +131,30 @@ export function Modal({
}}
>
<div ref={containerRef} style={style} className={b({open}, className)} data-qa={qa}>
<div className={b('content-wrapper', {scroll})}>
<FocusTrap
enabled={!disableFocusTrap && focusTrap && open && !inTransition}
autoFocus={!disableAutoFocus && autoFocus}
>
<div
ref={contentRef}
tabIndex={-1}
role="dialog"
aria-modal={open}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
className={b('content', {scroll}, contentClassName)}
{...containerProps}
<div className={b('content-aligner-wrapper')}>
<div className={b('content-container')}>
<FocusTrap
enabled={!disableFocusTrap && focusTrap && open && !inTransition}
autoFocus={!disableAutoFocus && autoFocus}
>
{children}
</div>
</FocusTrap>
<div
ref={contentRef}
tabIndex={-1}
role="dialog"
aria-modal={open}
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
className={b(
'content',
{'with-scroll': contentOverflow === 'auto'},
contentClassName,
)}
{...containerProps}
>
{children}
</div>
</FocusTrap>
</div>
</div>
</div>
</CSSTransition>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,4 @@ const [open, setOpen] = React.useState(false);
| style | HTML `style` atribute for root node | `string` | |
| aria-label | HTML `aria-label` attribute to describe the `Modal` | `string` | |
| aria-labelledby | Id of the visible `Modal` caption element | `string` | |
| scroll | Define scroll position when the modal becomes too long to fit the screen | `inner` `outer` | `outer` |
| contentOverflow | Define whether `Modal` has a scroll indicator inside or grows with the content | `visible` `auto` | `visible` |

0 comments on commit 4154ea1

Please sign in to comment.