fix: static dialog nobackdrop position fix [ci-visual]

Author: dmitry-stepanenko

src/styles/dialog.scss

@@ -175,4 +175,10 @@ $button: #{$fd-namespace}-button;
       color: $fd-dialog-resize-handle-color;
     }
   }
+
+  &--no-backdrop:not(.#{$block}--targeted) {
+    @include fd-position-center($position: fixed);
+
+    z-index: 1000;
+  }
 }

src/styles/flexible-column-layout.scss

@@ -58,7 +58,7 @@ $block: #{$fd-namespace}-flexible-column-layout;
     padding: 0;
     z-index: 2;
 
-    @include fd-absolute-center();
+    @include fd-position-center();
   }
 
   &__column {

src/styles/mixins/_mixins.scss

@@ -365,8 +365,8 @@
   transform: translateX(-50%);
 }
 
-@mixin fd-absolute-center {
-  position: absolute;
+@mixin fd-position-center($position: absolute) {
+  position: $position;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

stories/dialog/dialog.stories.js

@@ -34,6 +34,11 @@ The dialog component is a container that appears in response to an action made b
       - \`fd-dialog__decisive-button\` Dialog footer's _Begin/End_ button
     - \`fd-dialog__resize-handle\` Handle for resizing modal
 
+**Additional classes (applied to main \`.fd-dialog\` element):**
+
+- \`fd-dialog--no-backdrop\` needed, if dialog is used without overlay. Centers the dialog vertically and horizontally
+- \`fd-dialog--targeted\` to be used, if dialog is attached to the specific element, not body
+
 Note: Dialog's header, subheader and footer are elements from the **Bar** component. This means that dialog headers and footers can be customized using bar component features. To style the elements according to dialog’s needs, CSS classes are used to slightly override bar’s original behaviour.
 `,
         tags: ['f3', 'a11y', 'theme'],