fix(dialog): footer padding when standard and highlight (#305)

Endava · Jul 2, 2023 · 55d7814 · 55d7814
1 parent 441839b
commit 55d7814
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -238,7 +238,7 @@ export class BqDialog {
           class={{
             hidden: !this.hasFooter,
             'bq-dialog--footer': this.hasFooter,
-            'bg-ui-secondary-light !pt-s': this.footerApperance === 'highlight',
+            'bg-ui-secondary-light !py-s': this.footerApperance === 'highlight',
           }}
           ref={(footerElem) => (this.footerElem = footerElem)}
           part="footer"

diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.scss
@@ -17,10 +17,12 @@
 /* --------------------------------- Dialog --------------------------------- */
 
 .bq-dialog {
-  @apply m-auto flex flex-col gap-l p-0;
-  @apply z-[var(--bq-dialog-z-index)] rounded-[var(--bq-dialog--border-radius)] border-none bg-[var(--bq-dialog--background)] shadow-[shadow:var(--bq-dialog--box-shadow)];
+  @apply m-auto flex flex-col gap-[var(--bq-dialog--gap)] p-0;
+  @apply rounded-[var(--bq-dialog--border-radius)] bg-[var(--bq-dialog--background)] shadow-[shadow:var(--bq-dialog--box-shadow)];
   @apply opacity-50 transition-opacity duration-300 ease-in-out;
 
+  border: var(--bq-dialog--border-width) var(--bq-dialog--border-style) var(--bq-dialog--border-color);
+
   &.small {
     @apply w-[var(--bq-dialog--width-small)];
   }
@@ -57,7 +59,7 @@
 /* ------------------------------ Dialog footer ----------------------------- */
 
 .bq-dialog--footer {
-  @apply sticky bottom-0 flex w-full items-center justify-end gap-xs px-[var(--bq-dialog--padding)] py-s pt-0;
+  @apply sticky bottom-0 flex w-full items-center justify-end gap-xs p-[var(--bq-dialog--padding)] pt-0;
 }
 
 /* --------------------------- Dialog close button -------------------------- */

diff --git a/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss b/packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss
@@ -4,12 +4,34 @@
 
 :host,
 ::backdrop {
+  /**
+   * @prop --bq-dialog--background: Dialog background color
+   * @prop --bq-dialog--background-backdrop: Dialog backdrop background color
+   * @prop --bq-dialog--box-shadow: Dialog box shadow
+   * @prop --bq-dialog--border-color: Dialog border color
+   * @prop --bq-dialog--border-style: Dialog border style
+   * @prop --bq-dialog--border-width: Dialog border width
+   * @prop --bq-dialog--border-radius: Dialog border radius
+   * @prop --bq-dialog--padding: Dialog padding
+   * @prop --bq-dialog--gap: Dialog gap distance between title, body and footer elements
+   * @prop --bq-dialog--width-small: Dialog small width
+   * @prop --bq-dialog--width-medium: Dialog medium width
+   * @prop --bq-dialog--width-large: Dialog large width
+   * @prop --bq-dialog-z-index: Dialog z-index applied when opened
+   */
+
   --bq-dialog--background: theme('colors.bg.primary');
   --bq-dialog--background-backdrop: theme('colors.grey.600');
 
   --bq-dialog--box-shadow: theme('boxShadow.m');
+
+  --bq-dialog--border-color: theme('colors.transparent');
+  --bq-dialog--border-style: solid;
+  --bq-dialog--border-width: 0;
   --bq-dialog--border-radius: theme('borderRadius.s');
+
   --bq-dialog--padding: theme('spacing.l');
+  --bq-dialog--gap: theme('spacing.l');
 
   --bq-dialog--width-small: 320px;
   --bq-dialog--width-medium: 480px;