Merge pull request #2172 from skbkontur/modal-no-padding

[ModalBody] no padding
skbkontur · Oct 19, 2020 · 94034a3 · 94034a3
2 parents 6f7bf4a + d18600e
commit 94034a3
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 1 deletion.
diff --git a/packages/react-ui/.creevey/images/Modal/Modal with no-padding/chrome.png b/packages/react-ui/.creevey/images/Modal/Modal with no-padding/chrome.png
diff --git a/packages/react-ui/.creevey/images/Modal/Modal with no-padding/firefox.png b/packages/react-ui/.creevey/images/Modal/Modal with no-padding/firefox.png
diff --git a/packages/react-ui/.creevey/images/Modal/Modal with no-padding/ie11.png b/packages/react-ui/.creevey/images/Modal/Modal with no-padding/ie11.png
diff --git a/packages/react-ui/components/Modal/Modal.styles.ts b/packages/react-ui/components/Modal/Modal.styles.ts
@@ -241,6 +241,12 @@ const styles = {
     `;
   },
 
+  bodyWithoutPadding() {
+    return css`
+      padding: 0 !important;
+    `;
+  },
+
   bodyAddPadding() {
     return css`
       padding-bottom: 30px;

diff --git a/packages/react-ui/components/Modal/ModalBody.tsx b/packages/react-ui/components/Modal/ModalBody.tsx
@@ -6,16 +6,24 @@ import { ZIndex } from '../../internal/ZIndex';
 import { ModalContext } from './ModalContext';
 import { jsStyles } from './Modal.styles';
 
+export interface ModalBodyProps {
+  /**
+   * убирает отступы
+   */
+  noPadding?: boolean;
+}
+
 /**
  * Контейнер с отступами от края модалки
  *
  * @visibleName Modal.Body
  */
-export class ModalBody extends React.Component {
+export class ModalBody extends React.Component<ModalBodyProps> {
   public static __KONTUR_REACT_UI__ = 'ModalBody';
   public static __MODAL_BODY__ = true;
 
   public render(): JSX.Element {
+    const { noPadding } = this.props;
     return (
       <ModalContext.Consumer>
         {({ additionalPadding, hasHeader }) => (
@@ -26,6 +34,7 @@ export class ModalBody extends React.Component {
               [jsStyles.body()]: true,
               [jsStyles.bodyWithoutHeader()]: !hasHeader,
               [jsStyles.bodyAddPadding()]: additionalPadding,
+              [jsStyles.bodyWithoutPadding()]: noPadding,
             })}
           >
             {this.props.children}

diff --git a/packages/react-ui/components/Modal/__stories__/Modal.stories.tsx b/packages/react-ui/components/Modal/__stories__/Modal.stories.tsx
@@ -722,3 +722,20 @@ ModalWithVeryLongHeaderWithoutSpaces.story = {
   name: 'Modal with veryLongHeaderWithoutSpaces',
   parameters: { creevey: { captureElement: null } },
 };
+
+export const ModalBodyWithoutPadding = () => (
+  <Modal width={250}>
+    <Modal.Body noPadding>
+      <div style={{ background: 'white' }}>
+        <p>Loooooooong content content content</p>
+        <p>Loooooooong content content content</p>
+        <p>Loooooooong content content content</p>
+        <p>Loooooooong content content content</p>
+      </div>
+    </Modal.Body>
+  </Modal>
+);
+ModalBodyWithoutPadding.story = {
+  name: 'Modal with no-padding',
+  parameters: { creevey: { captureElement: null } },
+};