feat(alert): update alert actions UI (#501)

Co-authored-by: Aykut Saraç <[email protected]>
Trendyol · Mar 29, 2023 · 1e7bda7 · 1e7bda7
1 parent 2078d73
commit 1e7bda7
Show file tree

Hide file tree

Showing 52 changed files with 509 additions and 408 deletions.
diff --git a/src/components/alert/bl-alert.css b/src/components/alert/bl-alert.css
@@ -25,20 +25,21 @@
 
 .wrapper {
   display: flex;
+  flex-flow: column;
   flex-wrap: wrap;
-  align-items: center;
   justify-content: space-between;
   flex: auto;
 }
 
 .content {
   display: flex;
-  padding: calc(var(--padding) / 2) 0;
   margin-right: var(--bl-size-2xs);
   flex: 20 1 70%;
+  padding: calc(var(--padding) / 2) 0;
 }
 
 .icon {
+  padding: calc(var(--padding) / 2) 0;
   margin-right: var(--bl-size-2xs);
   color: var(--main-color);
 }
@@ -53,10 +54,15 @@
   font: var(--bl-font-title-3-medium);
 }
 
-.action {
-  display: flex;
-  align-items: center;
-  flex: 1 1 0%;
+.actions {
+  display: none;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: calc(var(--padding) / 2) 0;
+}
+
+.close {
+  --bl-color-secondary-background: transparent;
 }
 
 .caption + .description {

diff --git a/src/components/alert/bl-alert.stories.mdx b/src/components/alert/bl-alert.stories.mdx
@@ -35,6 +35,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
 
 export const actionSlot = (actionLabel) => html`
   <bl-button slot="action">${unsafeHTML(actionLabel)}</bl-button>
+  <bl-button slot="action-secondary">${unsafeHTML(actionLabel)}</bl-button>
 `;
 
 export const SingleAlertTemplate = (args) => html`<bl-alert

diff --git a/src/components/alert/bl-alert.test.ts b/src/components/alert/bl-alert.test.ts
@@ -25,11 +25,16 @@ describe('bl-alert', () => {
               </span>
             </div>
           </div>
+          <div class="actions">
           <slot
-            class="action"
-            name="action"
-          >
-          </slot>
+          class="action"
+          name="action"
+        ></slot>
+        <slot
+          class="action-secondary"
+          name="action-secondary"
+        ></slot>
+          </div>
         </div>
       </div>
     `
@@ -132,6 +137,7 @@ describe('Slot', () => {
     const el = await fixture<typeofBlAlert>(
       html`<bl-alert>
         <bl-button slot="action"> Action Slot </bl-button>
+        <bl-button slot="action-secondary"> Action Slot </bl-button>
       </bl-alert>`
     );
     const actionSlot = el.shadowRoot?.querySelector('slot[name="action"]');

diff --git a/src/components/alert/bl-alert.ts b/src/components/alert/bl-alert.ts
@@ -102,14 +102,27 @@ export default class BlAlert extends LitElement {
   }
 
   private _initAlertActionSlot(event: Event) {
-    const slotElements = (event.target as HTMLSlotElement).assignedElements();
+    const slotElement = event.target as HTMLSlotElement;
+    const slotElements = slotElement.assignedElements();
+
     slotElements.forEach(element => {
       if (element.tagName !== 'BL-BUTTON') {
         element.parentNode?.removeChild(element);
         return;
       }
-      element.setAttribute('variant','tertiary' as ButtonVariant);
-      element.setAttribute('kind', 'neutral' as ButtonKind);
+
+      (slotElement.parentElement as HTMLElement).style.display = 'flex';
+
+      const variant = element.slot === 'action-secondary' ? 'secondary' : 'primary';
+      const buttonTypes: Record<AlertVariant, string> = {
+        info: 'default',
+        warning: 'neutral',
+        success: 'success',
+        danger: 'danger',
+      };
+
+      element.setAttribute('variant', variant as ButtonVariant);
+      element.setAttribute('kind', buttonTypes[this.variant] as ButtonKind);
       element.setAttribute('size', 'medium' as ButtonSize);
       element.removeAttribute('icon');
     });
@@ -143,12 +156,19 @@ export default class BlAlert extends LitElement {
 
     return html`
       <div class="alert">
+        ${icon}
         <div class="wrapper">
           <div class="content">
-            ${icon}
             <div class="text-content">${caption} ${description}</div>
           </div>
-          <slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
+          <div class="actions">
+            <slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
+            <slot
+              class="action-secondary"
+              name="action-secondary"
+              @slotchange=${this._initAlertActionSlot}
+            ></slot>
+          </div>
         </div>
         ${closable}
       </div>

diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css
@@ -1,6 +1,11 @@
 @keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(359deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
 }
 
 :host {

diff --git a/src/components/button/bl-button.test.ts b/src/components/button/bl-button.test.ts
@@ -88,9 +88,7 @@ describe('bl-button', () => {
     });
 
     it('is disabled button during loading state', async () => {
-      const el = await fixture<typeOfBlButton>(
-        html`<bl-button loading>Test</bl-button>`
-      );
+      const el = await fixture<typeOfBlButton>(html`<bl-button loading>Test</bl-button>`);
       expect(el.shadowRoot?.querySelector('.loading-icon')).to.exist;
       expect(el).to.have.attribute('loading');
       expect(el.shadowRoot?.querySelector('button')).to.have.attribute('disabled');
@@ -101,7 +99,6 @@ describe('bl-button', () => {
       expect(el.shadowRoot?.querySelector('.loading-icon')).not.to.exist;
       expect(el).not.have.attribute('loading');
       expect(el.shadowRoot?.querySelector('button')).not.have.attribute('disabled');
-
     });
   });
   describe('Slot', () => {
@@ -169,7 +166,7 @@ describe('bl-button', () => {
       const form = await fixture<HTMLFormElement>(html`<form>
         <bl-button type="submit">button</bl-button>
       </form>`);
-      form.addEventListener('submit', (e) => e.preventDefault());
+      form.addEventListener('submit', e => e.preventDefault());
 
       const button = form.querySelector('bl-button')?.shadowRoot?.querySelector('button');
 

diff --git a/src/components/button/bl-button.ts b/src/components/button/bl-button.ts
@@ -170,10 +170,12 @@ export default class BlButton extends LitElement {
 
   render(): TemplateResult {
     const isDisabled = this.loading || this.disabled;
-    const label = (this.loading && this.loadingLabel) ? this.loadingLabel : html`<slot></slot>`;
+    const label = this.loading && this.loadingLabel ? this.loadingLabel : html`<slot></slot>`;
     const isAnchor = !!this.href;
     const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : '';
-    const loadingIcon = this.loading ? html`<bl-icon class="loading-icon" name="loading"></bl-icon>` : '';
+    const loadingIcon = this.loading
+      ? html`<bl-icon class="loading-icon" name="loading"></bl-icon>`
+      : '';
     const slots = html`<slot name="icon">${icon}</slot> <span class="label">${label}</span>`;
     const caret = this.dropdown ? this.caretTemplate() : '';
     const classes = classMap({
@@ -202,7 +204,7 @@ export default class BlButton extends LitElement {
           ?disabled=${isDisabled}
           @click="${this._handleClick}"
         >
-         ${loadingIcon} ${slots} ${caret}
+          ${loadingIcon} ${slots} ${caret}
         </button>`;
   }
 }

diff --git a/src/components/checkbox-group/checkbox/bl-checkbox.css b/src/components/checkbox-group/checkbox/bl-checkbox.css
@@ -4,7 +4,7 @@
 }
 
 :host * {
-  outline:none;
+  outline: none;
 }
 
 label {

diff --git a/src/components/dialog/bl-dialog.css b/src/components/dialog/bl-dialog.css
@@ -22,7 +22,7 @@
 .dialog-polyfill .container {
   position: fixed;
   z-index: var(--bl-index-dialog);
- }
+}
 
 .dialog::backdrop {
   background: #273142;
@@ -42,9 +42,9 @@
 
   /* FIXME: Use css variables for alpha colors */
   background: #273142b3;
- }
+}
 
- :host([open]) .dialog-polyfill {
+:host([open]) .dialog-polyfill {
   display: flex;
 }
 
@@ -87,7 +87,7 @@ footer.shadow {
 }
 
 @media only screen and (max-width: 471px) {
-   .container {
+  .container {
     max-width: calc(100vw - var(--bl-size-2xl));
     max-height: calc(100vh - var(--bl-size-2xl));
     min-width: auto;

diff --git a/src/components/dialog/bl-dialog.ts b/src/components/dialog/bl-dialog.ts
@@ -9,7 +9,6 @@ type DialogElement = {
   close: () => void;
 };
 
-
 /**
  * @tag bl-dialog
  * @summary Baklava Dialog component
@@ -142,9 +141,20 @@ export default class BlDialog extends LitElement {
   render(): TemplateResult {
     return this.hasHtmlDialogSupport
       ? html`
-          <dialog class="dialog" aria-labelledby="dialog-caption" @click=${this.clickOutsideHandler}>${this.renderContainer()}</dialog>
+          <dialog
+            class="dialog"
+            aria-labelledby="dialog-caption"
+            @click=${this.clickOutsideHandler}
+          >
+            ${this.renderContainer()}
+          </dialog>
         `
-      : html`<div class="dialog-polyfill" role="dialog" aria-labelledby="dialog-caption" @click=${this.clickOutsideHandler}>
+      : html`<div
+          class="dialog-polyfill"
+          role="dialog"
+          aria-labelledby="dialog-caption"
+          @click=${this.clickOutsideHandler}
+        >
           ${this.renderContainer()}
         </div>`;
   }

diff --git a/src/components/drawer/bl-drawer.css b/src/components/drawer/bl-drawer.css
@@ -12,7 +12,7 @@
   padding-bottom: max(env(safe-area-inset-bottom), var(--bl-size-xl));
   background: var(--bl-color-primary-background);
   box-shadow: var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);
-  transition: right var(--bl-drawer-animation-duration, .25s);
+  transition: right var(--bl-drawer-animation-duration, 0.25s);
   z-index: var(--bl-index-sticky);
 }
 
@@ -61,7 +61,7 @@ header h2 {
 }
 
 .iframe-content {
-  flex: 1
+  flex: 1;
 }
 
 @media only screen and (max-width: 424px) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
     }
     :host * {
-      outline:none;
+      outline: none;
     }
     label {
@@ Expand Down @@