chore: Reset panel header spacing and fix make content alignment more…

… consistent (#2936)

src/app-layout/constants.scss

@@ -33,4 +33,4 @@ $drawer-z-index-mobile: 1001;
 $toolbar-z-index: 1000;
 
 // Shared toolbar drawer component values
-$toolbar-vertical-panel-icon-offset: 10px;
+$toolbar-vertical-panel-icon-offset: 14px;

src/drawer/implementation.tsx

@@ -42,7 +42,7 @@ export function DrawerImplementation({
   ) : (
     <div {...containerProps} ref={__internalRootRef}>
       {header && <div className={styles.header}>{header}</div>}
-      <div className={styles['test-utils-drawer-content']}>{children}</div>
+      <div className={clsx(styles['test-utils-drawer-content'], styles.content)}>{children}</div>
     </div>
   );
 }

src/drawer/styles.scss

@@ -9,29 +9,19 @@
 .drawer {
   @include styles.styles-reset;
   word-wrap: break-word;
-  padding-block-start: awsui.$space-panel-header-vertical;
-  padding-block-end: awsui.$space-panel-content-bottom;
-  padding-inline-start: awsui.$space-panel-side-left;
-  padding-inline-end: awsui.$space-panel-side-right;
-  &.with-toolbar {
-    padding-block-start: awsui.$space-static-m;
-  }
 }
 
 .header {
   @include styles.font-panel-header;
   color: awsui.$color-text-heading-default;
-  padding-block-end: awsui.$space-panel-header-vertical;
+  padding-block: awsui.$space-panel-header-vertical;
   padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
   // padding to make sure the header doesn't overlap with the close icon
   border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
   margin-block-start: 0;
   margin-block-end: awsui.$space-panel-content-top;
-  margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
-  margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
   .with-toolbar > & {
     border-color: transparent;
-    padding-block-end: awsui.$space-static-m;
     margin-block-end: 0px;
   }
 
@@ -48,6 +38,12 @@
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 
+.content:not(:empty) {
+  padding-inline-start: awsui.$space-panel-side-left;
+  padding-inline-end: awsui.$space-panel-side-right;
+  padding-block-end: awsui.$space-panel-content-bottom;
+}
+
 .test-utils-drawer-content {
   /* used in test-utils */
 }

src/help-panel/implementation.tsx

@@ -31,7 +31,12 @@ export function HelpPanelImplementation({
   const i18n = useInternalI18n('help-panel');
   const containerProps = {
     ...baseProps,
-    className: clsx(baseProps.className, styles['help-panel'], isToolbar && styles['with-toolbar']),
+    className: clsx(
+      baseProps.className,
+      styles['help-panel'],
+      isToolbar && styles['with-toolbar'],
+      loading && styles.loading
+    ),
   };
   return loading ? (
     <div {...containerProps} ref={__internalRootRef}>
@@ -45,7 +50,12 @@ export function HelpPanelImplementation({
       <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>
         <div className={styles.content}>{children}</div>
       </LinkDefaultVariantContext.Provider>
-      {footer && <div className={styles.footer}>{footer}</div>}
+      {footer && (
+        <div className={styles.footer}>
+          <hr role="presentation" />
+          {footer}
+        </div>
+      )}
     </div>
   );
 }

src/help-panel/styles.scss

@@ -11,11 +11,6 @@
   word-wrap: break-word;
   padding-block-start: awsui.$space-panel-header-vertical;
   padding-block-end: 0;
-  padding-inline-end: awsui.$space-panel-side-right;
-  padding-inline-start: awsui.$space-panel-side-left;
-  &.with-toolbar {
-    padding-block-start: awsui.$space-static-m;
-  }
 
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   hr {
@@ -120,6 +115,11 @@
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 
+.loading {
+  padding-inline-start: awsui.$space-panel-side-left;
+  padding-inline-end: awsui.$space-panel-side-right;
+}
+
 .header {
   @include styles.font-panel-header;
   color: awsui.$color-text-heading-default;
@@ -131,11 +131,8 @@
   border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
   margin-block-start: 0;
   margin-block-end: awsui.$space-panel-content-top;
-  margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
-  margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
   .with-toolbar > & {
     border-color: transparent;
-    padding-block-end: awsui.$space-static-m;
     margin-block-end: 0px;
   }
 
@@ -154,13 +151,16 @@
 
 .content {
   color: awsui.$color-text-body-secondary;
+  padding-inline-start: awsui.$space-panel-side-left;
+  padding-inline-end: awsui.$space-panel-side-right;
 
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   h2:first-child,
   h3:first-child,
   h4:first-child,
   h5:first-child,
-  h6:first-child {
+  h6:first-child,
+  p:first-child {
     margin-block-start: 0;
   }
 
@@ -172,14 +172,9 @@
 
 .footer {
   color: awsui.$color-text-body-secondary;
-  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-  margin-block: awsui.$space-scaled-xl;
-  margin-inline: calc(-1 * #{awsui.$space-panel-divider-margin-horizontal});
   padding-block: 0;
-  padding-inline: awsui.$space-panel-divider-margin-horizontal;
-  > :first-child {
-    margin-block-start: awsui.$space-scaled-xl;
-  }
+  padding-inline-start: awsui.$space-panel-side-left;
+  padding-inline-end: awsui.$space-panel-side-right;
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   ul {
     list-style: none;

src/side-navigation/styles.scss

@@ -20,9 +20,6 @@
   padding-inline-start: awsui.$space-panel-nav-left;
   // Additional xl space to prevent text from overlapping the close button.
   padding-inline-end: calc(#{awsui.$space-scaled-xxl} + #{awsui.$space-xl});
-  .with-toolbar > & {
-    padding-block: awsui.$space-static-m;
-  }
 }
 
 .header-link {
@@ -53,14 +50,13 @@
 }
 
 .items-control {
-  margin-block-start: awsui.$space-panel-content-top;
   padding-inline: awsui.$space-l;
 }
 
 .list-container {
   margin-block-start: awsui.$space-panel-content-top;
-  .with-toolbar > & {
-    margin-block-start: 0px;
+  .with-toolbar > .divider + & {
+    margin-block-start: 0;
   }
 }
 
@@ -94,6 +90,20 @@
   padding-block: 0;
   padding-inline: 0;
   list-style: none;
+
+  @supports selector(:has(*)) {
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &:has(> .section:not(.refresh)) {
+      margin-block: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
+    }
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &:has(> .section.refresh) {
+      margin-block: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
+    }
+  }
+  .list-variant-root > &:first-child {
+    margin-block-start: 0px;
+  }
 }
 
 .section,
@@ -106,11 +116,12 @@
 }
 
 .section {
-  margin-block: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
-  &.refresh {
-    margin-block: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
+  @supports not selector(:has(*)) {
+    margin-block: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
+    &.refresh {
+      margin-block: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
+    }
   }
-
   // HACK: Remove padding from section header and content to rely on margin collapsing rules.
   /* stylelint-disable-next-line selector-max-type */
   > div {
@@ -193,8 +204,10 @@
 
 .divider-header {
   margin-block-start: 0;
+  margin-block-end: awsui.$space-panel-content-top;
   border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
   .with-toolbar > & {
     border-color: transparent;
+    margin-block-end: 0;
   }
 }