fix(sheet): adjust spacing

baloise · Feb 10, 2022 · c1e83a5 · c1e83a5
1 parent 5a152c6
commit c1e83a5
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 28 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -540,7 +540,7 @@ export namespace Components {
          */
         "multiple": boolean;
         /**
-          * Overrides the default subtitle filesize
+          * Overrides the default subtitle file size
          */
         "subTitle": ((file: File) => string) | undefined;
         /**
@@ -678,7 +678,7 @@ export namespace Components {
          */
         "debounce": number;
         /**
-          * Defins the allowed decimal points for the `number-input`.
+          * Defines the allowed decimal points for the `number-input`.
          */
         "decimal"?: number;
         /**
@@ -777,7 +777,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * If `true` the list can be used on a dark backround
+          * If `true` the list can be used on a dark background
          */
         "inverted": boolean;
     }
@@ -923,7 +923,7 @@ export namespace Components {
          */
         "pageRange": number;
         /**
-          * Go to the prvious page
+          * Go to the previous page
          */
         "previous": () => Promise<void>;
         /**
@@ -1296,7 +1296,7 @@ export namespace Components {
     }
     interface BalTabs {
         /**
-          * If `true` a acation button is added to the right
+          * If `true` a action button is added to the right
          */
         "action": boolean;
         /**
@@ -2011,7 +2011,7 @@ declare namespace LocalJSX {
          */
         "debounce"?: number;
         /**
-          * Emmited when the accordion has changed
+          * Emitted when the accordion has changed
          */
         "onBalChange"?: (event: CustomEvent<boolean>) => void;
         /**
@@ -2538,7 +2538,7 @@ declare namespace LocalJSX {
          */
         "onBalRejectedFile"?: (event: CustomEvent<FileUploadRejectedFile>) => void;
         /**
-          * Overrides the default subtitle filesize
+          * Overrides the default subtitle file size
          */
         "subTitle"?: ((file: File) => string) | undefined;
         /**
@@ -2664,7 +2664,7 @@ declare namespace LocalJSX {
          */
         "debounce"?: number;
         /**
-          * Defins the allowed decimal points for the `number-input`.
+          * Defines the allowed decimal points for the `number-input`.
          */
         "decimal"?: number;
         /**
@@ -2779,7 +2779,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * If `true` the list can be used on a dark backround
+          * If `true` the list can be used on a dark background
          */
         "inverted"?: boolean;
     }
@@ -3311,7 +3311,7 @@ declare namespace LocalJSX {
     }
     interface BalTabs {
         /**
-          * If `true` a acation button is added to the right
+          * If `true` a action button is added to the right
          */
         "action"?: boolean;
         /**
@@ -3502,7 +3502,7 @@ declare namespace LocalJSX {
          */
         "onBalBlur"?: (event: CustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when either the hour or the minute input has changed. It will not be triggert if either hour or time input has never been set (i.e. "--" is selected).
+          * Emitted when either the hour or the minute input has changed. It will not be triggered if either hour or time input has never been set (i.e. "--" is selected).
          */
         "onBalChange"?: (event: CustomEvent<string>) => void;
         /**

diff --git a/packages/components/src/components/notice/bal-sheet/bal-sheet.scss b/packages/components/src/components/notice/bal-sheet/bal-sheet.scss
@@ -14,8 +14,8 @@ bal-sheet {
   > div.container {
     background-color: $blue-0;
     box-shadow: $shadow;
-    padding-top: 16px;
-    padding-bottom: 16px;
+    padding-top: 8px;
+    padding-bottom: 8px;
   }
 
   @include tablet() {
@@ -28,8 +28,7 @@ bal-sheet {
       > div.inner {
         background-color: $blue-0;
         box-shadow: $shadow;
-        padding-left: 32px;
-        padding-right: 32px;
+        padding: 12px 16px;
       }
     }
   }

diff --git a/packages/components/src/components/notice/bal-sheet/stories/bal-sheet.stories.ts b/packages/components/src/components/notice/bal-sheet/stories/bal-sheet.stories.ts
@@ -51,19 +51,13 @@ export const Basic = args => ({
       <bal-button expanded color="link" class="mt-2">Back</bal-button>
     </div>
     <div class="is-hidden-mobile">
-      <div class="columns">
-        <div class="column is-3 is-flex is-align-items-center px-2">
-          <h3 class="title is-size-3 m-0">1'234 CHF</h3>
-        </div>
-        <div class="column is-flex is-align-items-center px-2">
-          <p class="m-0 has-text-blue-light-text is-small">{{ args.content }}</p>
-        </div>
-        <div class="column is-2 is-flex is-align-items-center px-2">
-          <bal-button expanded color="link">Back</bal-button>
-        </div>
-        <div class="column is-3 is-flex is-align-items-center px-2">
-          <bal-button expanded>Next</bal-button>
-        </div>
+      <div class="is-flex is-align-items-center fg-4">
+        <h3 class="title is-size-3 m-0">1'234 CHF</h3>
+        <p class="has-text-blue-light-text is-small m-0 is-flex-grow-1">{{ args.content }}</p>
+        <bal-button-group>
+          <bal-button color="link">Back</bal-button>
+          <bal-button>Next</bal-button>
+        </bal-button-group>
       </div>
     </div>
   </bal-sheet>
@@ -73,3 +67,18 @@ Basic.args = {
   content: 'Lorem ipsum dolor',
 }
 Basic.parameters = { ...component.sourceCode(Basic) }
+
+// <div class="columns">
+// <div class="column is-3 is-flex is-align-items-center px-2">
+//   <h3 class="title is-size-3 m-0">1'234 CHF</h3>
+// </div>
+// <div class="column is-flex is-align-items-center px-2">
+//   <p class="m-0 has-text-blue-light-text is-small">{{ args.content }}</p>
+// </div>
+// <div class="column is-2 is-flex is-align-items-center px-2">
+//   <bal-button expanded color="link">Back</bal-button>
+// </div>
+// <div class="column is-3 is-flex is-align-items-center px-2">
+//   <bal-button expanded>Next</bal-button>
+// </div>
+// </div>
diff --git a/packages/components/src/styles/helpers/_all.scss b/packages/components/src/styles/helpers/_all.scss
@@ -12,3 +12,4 @@
 @import 'borders';
 @import 'shadow';
 @import 'spacing';
+@import 'flexbox';
diff --git a/packages/components/src/styles/helpers/flexbox.scss b/packages/components/src/styles/helpers/flexbox.scss
@@ -0,0 +1,21 @@
+@each $name, $value in $spacing-values {
+  .fg-#{$name} {
+    gap: $value !important;
+  }
+}
+
+@include tablet() {
+  @each $name, $value in $spacing-values-medium {
+    .fg-#{$name} {
+      gap: $value !important;
+    }
+  }
+}
+
+@include desktop() {
+  @each $name, $value in $spacing-values-large {
+    .fg-#{$name} {
+      gap: $value !important;
+    }
+  }
+}