fix(title-bar-module): tweak spacing (#1124)

* fix(title-bar-module): tweak spacing * fix: update `TitleBarModule` style snapshot Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 2, 2021 · 1c21534 · 1c21534
1 parent 145537d
commit 1c21534
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/src/__tests__/scss/__snapshots__/styles-test.js.snap b/src/__tests__/scss/__snapshots__/styles-test.js.snap
@@ -13703,16 +13703,20 @@ li.bx--accordion__item--disabled:last-of-type {
 
 .security--layout-module--title-bar__items {
   display: flex;
-  align-items: center;
+  margin-top: 0.25rem;
   margin-left: auto;
 }
 
+.security--layout-module--title-bar__items--subsection {
+  margin-top: 0.125rem;
+}
+
 .security--layout-module--title-bar--label .security--layout-module--title-bar__items {
   margin-top: 1.5rem;
 }
 
-.security--layout-module--title-bar--subsection .security--layout-module--title-bar__items {
-  margin-top: 0.75rem;
+.security--layout-module--title-bar--label .security--layout-module--title-bar__items--subsection {
+  margin-top: 1rem;
 }
 
 .security--layout-module--title-bar--subsection .security--layout-module--title-bar__title {

diff --git a/src/components/LayoutModules/TitleBarModule/_index.scss b/src/components/LayoutModules/TitleBarModule/_index.scss
@@ -33,24 +33,26 @@
 
   &__items {
     display: flex;
-    align-items: center;
+    margin-top: $carbon--spacing-02;
     margin-left: auto;
+
+    &--subsection {
+      margin-top: $carbon--spacing-01;
+    }
   }
 
   &--label &__items {
     margin-top: $carbon--spacing-06;
-  }
 
-  &--subsection & {
-    &__items {
-      margin-top: $carbon--spacing-04;
+    &--subsection {
+      margin-top: $carbon--spacing-05;
     }
+  }
 
-    &__title {
-      @include carbon--type-style($name: productive-heading-02);
+  &--subsection &__title {
+    @include carbon--type-style($name: productive-heading-02);
 
-      order: 1;
-    }
+    order: 1;
   }
 
   &__label-wrapper {

diff --git a/src/components/LayoutModules/TitleBarModule/index.js b/src/components/LayoutModules/TitleBarModule/index.js
@@ -52,7 +52,14 @@ const TitleBarModule = ({
     </div>
 
     {children && (
-      <LayoutModule namespace={`${namespace}__items`}>{children}</LayoutModule>
+      <LayoutModule
+        className={classnames({
+          [`${layoutModuleNamespace}--${namespace}__items--subsection`]:
+            subsection,
+        })}
+        namespace={`${namespace}__items`}>
+        {children}
+      </LayoutModule>
     )}
   </LayoutModule>
 );