fix: Make closed expandable section header padding symmetrical

cloudscape-design · Aug 8, 2023 · dee94f4 · dee94f4
1 parent fc92170
commit dee94f4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -159,7 +159,7 @@
   &.with-paddings {
     padding: shared.$header-padding;
     &.header-variant-cards {
-      padding: awsui.$space-scaled-s awsui.$space-container-horizontal;
+      padding: awsui.$space-container-header-top awsui.$space-container-horizontal;
     }
   }
 

diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
@@ -109,6 +109,9 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     padding-bottom: awsui.$space-container-header-bottom;
     padding-right: container.$header-padding-horizontal;
 
+    &:not(.wrapper-expanded) {
+      padding-bottom: awsui.$space-container-header-top;
+    }
     &.header-deprecated {
       padding-left: container.$header-padding-horizontal;
     }

diff --git a/src/header/internal.tsx b/src/header/internal.tsx
@@ -60,7 +60,7 @@ export default function InternalHeader({
             styles.title,
             styles[`title-variant-${variantOverride}`],
             isRefresh && styles.refresh,
-            description && [styles[`root-has-description`]]
+            actions && [styles[`has-actions`]]
           )}
         >
           <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>

diff --git a/src/header/styles.scss b/src/header/styles.scss
@@ -44,6 +44,7 @@
   &.refresh {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     // Can't use justify-content: center because it won't align with configurable dashboard handle icon
   }
 
@@ -108,21 +109,21 @@
     font-size: awsui.$font-heading-xl-size;
     // Use padding rather than center align so that all headers of the same size start at the same height in the container,
     // whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
-    &.refresh {
-      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-xl-line-height}) / 2);
-    }
+    // &.refresh.has-actions {
+    //   padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-xl-line-height}) / 2);
+    // }
   }
   &-variant-h2 {
     font-size: awsui.$font-heading-l-size;
-    &.refresh {
-      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-l-line-height}) / 2);
-    }
+    // &.refresh.has-actions {
+    //   padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-l-line-height}) / 2);
+    // }
   }
   &-variant-h3 {
     font-size: awsui.$font-heading-m-size;
-    &.refresh {
-      padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-m-line-height}) / 2);
-    }
+    // &.refresh.has-actions {
+    //   padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-m-line-height}) / 2);
+    // }
   }
   &-variant-h2:not(.refresh),
   &-variant-h3:not(.refresh) {