style(go-banner, go-button): correct banner styles and icon button al…

…ignment
getgoui · Dec 26, 2023 · 2639a84 · 2639a84
1 parent 63b3fbf
commit 2639a84
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 28 deletions.
diff --git a/packages/core/src/components/go-banner/go-banner.scss b/packages/core/src/components/go-banner/go-banner.scss
@@ -30,9 +30,9 @@ go-banner {
   /**
     @prop --banner-padding-y:
       Vertical padding of banner area
-      - default: 1.5rem
+      - default: 1rem
   */
-  --banner-padding-y: 1.5rem;
+  --banner-padding-y: 1rem;
 
   /**
     @prop --banner-heading-gap
@@ -100,8 +100,13 @@ go-banner {
     display: flex;
     align-items: center;
   }
-  .banner-content {
+  .banner-inner {
+    display: flex;
+    width: 100%;
     padding: var(--banner-padding-y) var(--banner-padding-x);
+  }
+  .banner-inner-content {
+    flex: 1;
     h2 {
       margin-bottom: var(--banner-heading-gap);
     }
@@ -112,8 +117,7 @@ go-banner {
       margin-bottom: 0;
     }
   }
-  .dismissible-col {
-    padding-top: var(--banner-padding-y);
-    padding-right: var(--banner-padding-x);
+  .banner-inner-dismiss {
+    margin-inline-start: auto;
   }
 }
diff --git a/packages/core/src/components/go-banner/go-banner.tsx b/packages/core/src/components/go-banner/go-banner.tsx
@@ -43,35 +43,49 @@ export class GoBanner {
   render() {
     const { hasIcon, heading, dismissible, isShowing } = this;
     return (
-      <Host class={{ 'has-icon': hasIcon, dismissible, 'is-showing': isShowing }}>
+      <Host
+        class={{
+          'has-icon': hasIcon,
+          dismissible,
+          'is-showing': isShowing,
+          'no-heading': !heading,
+        }}>
         {hasIcon ? (
           <div class="icon-col">
             <slot name="icon"></slot>
           </div>
         ) : null}
 
-        <section class="banner-content">
-          {heading ? <h2 class="h5">{heading}</h2> : null}
-          <slot></slot>
-        </section>
-        {dismissible ? (
-          <div class="dismissible-col">
-            <go-button variant="text" class="dismissible-btn" flat={true} icon={true} onClick={() => this.handleClose()} round={true}>
-              <span class="visually-hidden">Dismiss</span>
-              <svg
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                viewBox="0 0 24 24">
-                <path d="M18 6 6 18M6 6l12 12" />
-              </svg>
-            </go-button>
+        <section class="banner-inner">
+          <div class="banner-inner-content">
+            {heading ? <h2 class="h5">{heading}</h2> : null}
+            <slot></slot>
           </div>
-        ) : null}
+          {dismissible ? (
+            <div class="banner-inner-dismiss">
+              <go-button
+                variant="text"
+                icon
+                class="dismissible-btn"
+                flat={true}
+                onClick={() => this.handleClose()}
+                round={true}>
+                <span class="visually-hidden">Dismiss</span>
+                <svg
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24">
+                  <path d="M18 6 6 18M6 6l12 12" />
+                </svg>
+              </go-button>
+            </div>
+          ) : null}
+        </section>
       </Host>
     );
   }

diff --git a/packages/core/src/components/go-button/go-button.scss b/packages/core/src/components/go-button/go-button.scss
@@ -128,6 +128,7 @@ go-button {
       height: var(--go-btn-icon-size);
       padding: 0;
       text-align: center;
+      line-height: 1;
     }
   }