fix(styles): dialog no horizontal paddings, mobile mode issues (#3957)

SAP · Oct 25, 2022 · 5c12202 · 5c12202
1 parent 1c469e1
commit 5c12202
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
@@ -8,8 +8,8 @@
       .fd-dialog__header
         .fd-dialog__title
       .fd-dialog__subheader
-      .fd-dialog__body+(--no-vertical-padding)
-      .fd-dialog__laoder
+      .fd-dialog__body+(--no-vertical-padding, --no-horizontal-padding)
+      .fd-dialog__loader
       .fd-dialog__footer
         .fd-dialog__decisive-button
       .fd-dialog__resize-handle
@@ -73,7 +73,9 @@ $menu: #{$fd-namespace}-menu;
     &--mobile {
       @extend %dialog-mobile;
 
-      .#{$block}__body {
+      .#{$block}__header,
+      .#{$block}__body,
+      .#{$block}__footer {
         border-radius: 0;
       }
 
@@ -128,18 +130,6 @@ $menu: #{$fd-namespace}-menu;
     }
   }
 
-  &__header.#{$bar} {
-    position: relative;
-    border-top-left-radius: $fd-dialog-content-border-radius;
-    border-top-right-radius: $fd-dialog-content-border-radius;
-  }
-
-  &__footer.#{$bar} {
-    position: relative;
-    border-bottom-left-radius: $fd-dialog-content-border-radius;
-    border-bottom-right-radius: $fd-dialog-content-border-radius;
-  }
-
   &__body {
     @include fd-reset();
 
@@ -155,15 +145,19 @@ $menu: #{$fd-namespace}-menu;
       padding-bottom: 0;
     }
 
-    .#{$block}__header + &,
-    .#{$block}__subheader + & {
-      border-top-left-radius: initial;
-      border-top-right-radius: initial;
+    &--no-horizontal-padding {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
     }
 
     &:not(:last-child) {
-      border-bottom-left-radius: initial;
-      border-bottom-right-radius: initial;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
   }
 

diff --git a/stories/dialog/dialog.stories.js b/stories/dialog/dialog.stories.js
@@ -229,6 +229,7 @@ These modifier classes are used to display horizontal padding for dialog's heade
 
 | rem | min-width | max width | modifier class |
 | ---- | ---------- | ---------- | ----------- |
+| 0 | _n/a_ | _n/a_ | \`fd-dialog__body--no-horizontal-padding\` |
 | 1rem | _n/a_ | 599px | \`fd-dialog__content--s\` |
 | 2rem | 600px | 1023px | \`fd-dialog__content--m\` |
 | 2rem | 1024px | 1439px | \`fd-dialog__content--l\` |