diff --git a/src/components/Dialog/Dialog.scss b/src/components/Dialog/Dialog.scss index 4fe5059081..eeee441cca 100644 --- a/src/components/Dialog/Dialog.scss +++ b/src/components/Dialog/Dialog.scss @@ -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 { diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index eb4ebbc7e2..5086a9d058 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -38,7 +38,7 @@ interface DialogOwnProps { disableFocusTrap?: boolean; disableAutoFocus?: boolean; restoreFocusRef?: React.RefObject; - scroll?: 'inner' | 'outer'; + contentOverflow?: 'visible' | 'auto'; } interface DialogDefaultProps { @@ -79,7 +79,7 @@ export class Dialog extends React.Component { restoreFocusRef, keepMounted, size, - scroll = 'outer', + contentOverflow = 'visible', className, modalClassName, hasCloseButton, @@ -99,7 +99,7 @@ export class Dialog extends React.Component { return ( { container={container} qa={qa} > -
+
{children} {hasCloseButton && }
diff --git a/src/components/Dialog/DialogBody/DialogBody.scss b/src/components/Dialog/DialogBody/DialogBody.scss index 0ed9fefc90..44e42222d9 100644 --- a/src/components/Dialog/DialogBody/DialogBody.scss +++ b/src/components/Dialog/DialogBody/DialogBody.scss @@ -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 { diff --git a/src/components/Dialog/README.md b/src/components/Dialog/README.md index cee9fc3fc5..069dd98632 100644 --- a/src/components/Dialog/README.md +++ b/src/components/Dialog/README.md @@ -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 caption. Use `id` props of `` 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 caption. Use `id` props of `` 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 diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss index a9683a5420..572d93435b 100644 --- a/src/components/Modal/Modal.scss +++ b/src/components/Modal/Modal.scss @@ -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)); } } @@ -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; } diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 22464ebe06..45d6eef526 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -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; @@ -70,7 +70,7 @@ export function Modal({ onTransitionExited, children, style, - scroll = 'outer', + contentOverflow = 'visible', className, contentClassName, 'aria-labelledby': ariaLabelledBy, @@ -131,24 +131,30 @@ export function Modal({ }} >
-
- -
+
+ - {children} -
- +
+ {children} +
+ +
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md index c22f2082d3..aa577e4e62 100644 --- a/src/components/Modal/README.md +++ b/src/components/Modal/README.md @@ -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` |