From 1e7bda719c5bd77146d84967ab40d88a8572d437 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aykut=20Sara=C3=A7?= Date: Wed, 29 Mar 2023 10:16:27 +0300 Subject: [PATCH] feat(alert): update alert actions UI (#501) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Aykut Saraç --- src/components/alert/bl-alert.css | 18 ++- src/components/alert/bl-alert.stories.mdx | 1 + src/components/alert/bl-alert.test.ts | 14 +- src/components/alert/bl-alert.ts | 30 ++++- src/components/button/bl-button.css | 9 +- src/components/button/bl-button.test.ts | 7 +- src/components/button/bl-button.ts | 8 +- .../checkbox-group/checkbox/bl-checkbox.css | 2 +- src/components/dialog/bl-dialog.css | 8 +- src/components/dialog/bl-dialog.ts | 16 ++- src/components/drawer/bl-drawer.css | 4 +- src/components/drawer/bl-drawer.test.ts | 66 ++++++---- src/components/drawer/bl-drawer.ts | 4 +- src/components/dropdown/bl-dropdown.css | 44 +++---- src/components/dropdown/bl-dropdown.test.ts | 84 ++++++------ src/components/dropdown/bl-dropdown.ts | 6 +- .../dropdown/group/bl-dropdown-group.css | 26 ++-- .../dropdown/group/bl-dropdown-group.test.ts | 10 +- .../dropdown/group/bl-dropdown-group.ts | 50 ++++---- .../dropdown/item/bl-dropdown-item.css | 6 +- .../dropdown/item/bl-dropdown-item.test.ts | 16 +-- .../dropdown/item/bl-dropdown-item.ts | 7 +- src/components/pagination/bl-pagination.css | 10 +- .../pagination/bl-pagination.test.ts | 7 +- src/components/pagination/bl-pagination.ts | 3 +- src/components/popover/bl-popover.test.ts | 4 +- src/components/popover/bl-popover.ts | 3 +- .../radio-group/bl-radio-group.test.ts | 70 ++++++---- src/components/radio-group/bl-radio-group.ts | 6 +- .../radio-group/radio/bl-radio.test.ts | 4 +- src/components/radio-group/radio/bl-radio.ts | 15 +-- src/components/select/bl-select.css | 6 +- src/components/select/bl-select.test.ts | 9 +- src/components/select/bl-select.ts | 120 ++++++++++-------- .../select/option/bl-select-option.css | 2 +- .../select/option/bl-select-option.test.ts | 1 - .../select/option/bl-select-option.ts | 11 +- src/components/switch/bl-switch.css | 8 +- src/components/switch/bl-switch.test.ts | 28 ++-- src/components/switch/bl-switch.ts | 3 +- src/components/tab-group/bl-tab-group.test.ts | 18 +-- src/components/tab-group/bl-tab-group.ts | 6 +- src/components/tab-group/tab/bl-tab.css | 3 +- src/components/tab-group/tab/bl-tab.test.ts | 2 +- src/components/tab-group/tab/bl-tab.ts | 8 +- src/components/textarea/bl-textarea.ts | 3 +- src/components/tooltip/bl-tooltip.test.ts | 8 +- src/components/tooltip/bl-tooltip.ts | 2 +- src/themes/default.css | 76 ++++++----- src/types/index.d.ts | 2 +- src/utilities/form-control.test.ts | 29 ++--- src/utilities/form-control.ts | 14 +- 52 files changed, 509 insertions(+), 408 deletions(-) diff --git a/src/components/alert/bl-alert.css b/src/components/alert/bl-alert.css index bd574025..02df96c3 100644 --- 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 index 2b2e5cf3..d8af084d 100644 --- 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` ${unsafeHTML(actionLabel)} + ${unsafeHTML(actionLabel)} `; export const SingleAlertTemplate = (args) => html` { +
- + class="action" + name="action" + > + +
` @@ -132,6 +137,7 @@ describe('Slot', () => { const el = await fixture( html` Action Slot + Action Slot ` ); const actionSlot = el.shadowRoot?.querySelector('slot[name="action"]'); diff --git a/src/components/alert/bl-alert.ts b/src/components/alert/bl-alert.ts index f5734021..b5b338dc 100644 --- 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 = { + 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`
+ ${icon}
- ${icon}
${caption} ${description}
- +
+ + +
${closable}
diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css index a6bf9470..053bb514 100644 --- 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 index 2aee640a..9dc70846 100644 --- 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( - html`Test` - ); + const el = await fixture(html`Test`); 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(html`
button
`); - 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 index 5653654f..a02f9342 100644 --- 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``; + const label = this.loading && this.loadingLabel ? this.loadingLabel : html``; const isAnchor = !!this.href; const icon = this.icon ? html`` : ''; - const loadingIcon = this.loading ? html`` : ''; + const loadingIcon = this.loading + ? html`` + : ''; const slots = html`${icon} ${label}`; 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} `; } } diff --git a/src/components/checkbox-group/checkbox/bl-checkbox.css b/src/components/checkbox-group/checkbox/bl-checkbox.css index eac4660c..72a4c9f0 100644 --- 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 index 03f39c27..bde2a117 100644 --- 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 index b6ea7795..41d7ca0d 100644 --- 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` - ${this.renderContainer()} + + ${this.renderContainer()} + ` - : html`