Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Dialog): add prop contentOverflow to control overflow behaviour #1211

Closed
wants to merge 32 commits into from

Conversation

DenisVershkov
Copy link
Contributor

No description provided.

@gravity-ui-bot
Copy link
Contributor

Playwright Test Component is ready.

@gravity-ui-bot
Copy link
Contributor

Preview is ready.

@DenisVershkov
Copy link
Contributor Author

[DATAUI-1254]

@korvin89
Copy link
Contributor

Could u provide some description?

@DenisVershkov
Copy link
Contributor Author

  1. Added prop 'scroll' to the Modal and Dialog. The prop handles scroll appearance:
  • if 'inner' is selected, then scroll will be applied to the DialogBody
  • if 'outer' is selected, then scroll will appear outside (the same behaviour as before)
  • 'outer' is the default value
  1. Added prop 'withDivider' to the DialogBody component. When this prop has 'true' value, then the DialogBody itself will have top and bottom border. This is made for the 'inner' scroll case and should be used something like: <DialogBody withDivider={scroll === 'inner'}>

src/components/Dialog/Dialog.tsx Outdated Show resolved Hide resolved
src/components/Modal/Modal.scss Outdated Show resolved Hide resolved
Comment on lines 134 to 135
<div className={b('content-aligner-wrapper')}>
<div className={b('content-container')}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's call them content-aligner and content-wrapper

}

export function DialogBody(props: DialogBodyProps) {
const {className} = props;
const {className, withDividers = false} = props;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use has* naming throughout the codebase (i.e. hasClear, hasClose, hasArrow)


&_with-scroll {
overflow-y: auto;
max-height: calc(100vh - var(--yc-modal-margin) * 2);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use SCSS var instead, this var will be removed in v6

@DenisVershkov DenisVershkov force-pushed the feature/add-scroll-to-dialog-body branch from 0e2574a to 3fe9fd3 Compare January 17, 2024 14:11
@DenisVershkov DenisVershkov changed the base branch from main to next January 17, 2024 14:13
@DenisVershkov
Copy link
Contributor Author

in order not deal with merge conflicts, i created a new one #1251

@amje amje deleted the feature/add-scroll-to-dialog-body branch July 16, 2024 15:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.