fix: Alignment with board component handles

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

Hide file tree

Showing 3 changed files with 15 additions and 26 deletions.
diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
@@ -110,6 +110,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     padding-right: container.$header-padding-horizontal;
 
     &:not(.wrapper-expanded) {
+      // Equal top and bottom padding so standalone header has vertical symmetry.
       padding-bottom: awsui.$space-container-header-top;
     }
     &.header-deprecated {

diff --git a/src/header/internal.tsx b/src/header/internal.tsx
@@ -55,14 +55,7 @@ export default function InternalHeader({
       ref={__internalRootRef}
     >
       <div className={clsx(styles.main, styles[`main-variant-${variantOverride}`], isRefresh && styles.refresh)}>
-        <div
-          className={clsx(
-            styles.title,
-            styles[`title-variant-${variantOverride}`],
-            isRefresh && styles.refresh,
-            actions && [styles[`has-actions`]]
-          )}
-        >
+        <div className={clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh)}>
           <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>
             <span
               {...{ [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME }}

diff --git a/src/header/styles.scss b/src/header/styles.scss
@@ -6,6 +6,10 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 
+@function space-heading-button-diff($heading-height) {
+  @return calc((#{awsui.$size-vertical-input} - #{$heading-height}) / 2);
+}
+
 .root {
   @include styles.styles-reset();
   cursor: inherit;
@@ -44,8 +48,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
+    // Can't use justify-content: center because it won't align with configurable dashboard fixed handle icon
   }
 
   &-variant-h1 {
@@ -105,25 +108,17 @@
   @include styles.text-wrapping;
   color: awsui.$color-text-heading-default;
 
-  &-variant-h1 {
-    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,
+  &-variant-h1.refresh {
+    // Use padding rather than center align with min height to avoid having extra bottom space when no actions are present.
+    // Having top padding always present ensures that all headers of the same variant start at the same height in the container,
     // whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
-    // &.refresh.has-actions {
-    //   padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-xl-line-height}) / 2);
-    // }
+    padding-top: space-heading-button-diff(awsui.$font-heading-xl-line-height);
   }
-  &-variant-h2 {
-    font-size: awsui.$font-heading-l-size;
-    // &.refresh.has-actions {
-    //   padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-l-line-height}) / 2);
-    // }
+  &-variant-h2.refresh {
+    padding-top: space-heading-button-diff(awsui.$font-heading-l-line-height);
   }
-  &-variant-h3 {
-    font-size: awsui.$font-heading-m-size;
-    // &.refresh.has-actions {
-    //   padding-top: calc((#{awsui.$size-vertical-input} - #{awsui.$font-heading-m-line-height}) / 2);
-    // }
+  &-variant-h3.refresh {
+    padding-top: space-heading-button-diff(awsui.$font-heading-m-line-height);
   }
   &-variant-h2:not(.refresh),
   &-variant-h3:not(.refresh) {