@kaizen/components 2.3.1 → 2.3.3

package/src/TitleBlock/subcomponents/MainActions.module.scss

@@ -4,39 +4,32 @@
 @layer kz-components {
   .mainActionsContainer {
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex-grow: 1;
+    align-self: flex-start;
     flex-shrink: 0;
+    // 8px gap between default and primary actions
+    // 4px needs to applied as 3rd empty div for minimized default action has gap applied also
+    gap: 4px;
+
+    @include title-block-under-576 {
+      justify-content: flex-start;
+      // offset: hamburger menu button is 48px wide
+      margin-inline-start: 48px;
+    }
 
     .defaultActionButtonMinimized {
       display: none;
-      margin-inline-end: 0;
     }
 
-    @include ca-margin($start: calc(#{$ca-grid} / 2));
+    @media (max-width: 360px) {
+      gap: 0;
 
-    @include title-block-xsmall {
-      padding-top: 12px;
-      justify-content: flex-start;
-      padding-left: 1.25rem;
-
-      @media (max-width: 511px) {
-        padding-top: 0;
-        padding-left: 3.375rem;
+      .defaultActionButton {
+        display: none;
       }
 
-      @media (max-width: 360px) {
-        .defaultActionButton {
-          display: none;
-          margin-inline-end: 0;
-        }
-
-        .defaultActionButtonMinimized {
-          display: flex;
-          margin-inline-end: 3px;
-          margin-left: -0.5rem;
-        }
+      .defaultActionButtonMinimized {
+        display: flex;
+        margin-inline-end: 8px;
       }
     }
   }

package/src/TitleBlock/subcomponents/Toolbar.module.scss

@@ -6,41 +6,9 @@
   .toolbar {
     display: flex;
     align-items: center;
-
-    .toolbarItem {
-      margin: 0 calc(#{$ca-grid} / 4);
-
-      @include title-block-under-1024 {
-        margin: 0 calc(#{$ca-grid} / 8);
-      }
-
-      &.noGap {
-        margin: 0;
-      }
-    }
-
-    .toolbarItem:first-of-type {
-      @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 4));
-
-      @include title-block-under-1024 {
-        @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 8));
-      }
-
-      &.noGap {
-        margin: 0;
-      }
-    }
-
-    .toolbarItem:last-of-type {
-      @include ca-margin($start: calc(#{$ca-grid} / 4), $end: 0);
-
-      @include title-block-under-1024 {
-        @include ca-margin($start: calc(#{$ca-grid} / 8), $end: 0);
-      }
-
-      &.noGap {
-        margin: 0;
-      }
-    }
+    // gap sizing needs to be applied on parent container
+    // the toolbar is used accross mutiple subcomponents within Titleblock,
+    //  spacing in now the responsibility of the parent.
+    gap: inherit;
   }
 }