feat: notification component (#741)

Closes #141

---------

Signed-off-by: Ogun Babacan <babacanogun@gmail.com>
Co-authored-by: Aykut Saraç <aykutsarac0@gmail.com>

commitlint.config.cjs

@@ -1,35 +1,36 @@
 module.exports = {
- extends: ['@commitlint/config-conventional'],
+ extends: ["@commitlint/config-conventional"],
  rules: {
- 'scope-enum': [
+ "scope-enum": [
  2,
- 'always',
+ "always",
  [
- 'storybook',
- 'design',
- 'react',
- 'deps',
- 'deps-dev',
+ "storybook",
+ "design",
+ "react",
+ "deps",
+ "deps-dev",
  // Components as scopes listed below
- 'button',
- 'icon',
- 'input',
- 'badge',
- 'tab',
- 'tooltip',
- 'progress-indicator',
- 'checkbox-group',
- 'checkbox',
- 'alert',
- 'select',
- 'pagination',
- 'radio',
- 'dialog',
- 'drawer',
- 'dropdown',
- 'switch',
- 'textarea',
- 'popover',
+ "button",
+ "icon",
+ "input",
+ "badge",
+ "tab",
+ "tooltip",
+ "progress-indicator",
+ "checkbox-group",
+ "checkbox",
+ "alert",
+ "select",
+ "pagination",
+ "radio",
+ "dialog",
+ "drawer",
+ "dropdown",
+ "switch",
+ "textarea",
+ "popover",
+ "notification",
  ],
  ],
  },

src/baklava.ts

@@ -23,4 +23,6 @@ export { default as BlDropdown } from "./components/dropdown/bl-dropdown";
 export { default as BlDropdownItem } from "./components/dropdown/item/bl-dropdown-item";
 export { default as BlDropdownGroup } from "./components/dropdown/group/bl-dropdown-group";
 export { default as BlSwitch } from "./components/switch/bl-switch";
+export { default as BlNotification } from "./components/notification/bl-notification";
+export { default as BlNotificationCard } from "./components/notification/card/bl-notification-card";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";

src/components/alert/bl-alert.test.ts

@@ -147,12 +147,25 @@ describe("Slot", () => {
  const el = await fixture<typeofBlAlert>(
  html`<bl-alert>
  <bl-button slot="action"> Action Slot </bl-button>
+ <span slot="action">Should not render this element</span>
  <bl-button slot="action-secondary"> Action Slot </bl-button>
  </bl-alert>`
  );
- const actionSlot = el.shadowRoot?.querySelector('slot[name="action"]');
 
- expect(actionSlot).to.exist;
+ const actionSlot = el.shadowRoot!.querySelector('slot[name="action"]') as HTMLSlotElement;
+ const [actionElement, actionSpanElement] = actionSlot.assignedElements();
+
+ expect(actionElement as HTMLElement).to.exist;
+ expect(actionElement.tagName).to.eq("BL-BUTTON");
+ expect(actionSpanElement as HTMLElement).to.not.exist;
+
+ const actionSecondarySlot = el.shadowRoot!.querySelector(
+ 'slot[name="action-secondary"]'
+ ) as HTMLSlotElement;
+ const actionSecondaryElement = actionSecondarySlot?.assignedElements()[0] as HTMLElement;
+
+ expect(actionSecondaryElement).to.exist;
+ expect(actionSecondaryElement.tagName).to.eq("BL-BUTTON");
  });
  it("renders `action` slot empty when bl-button is not used", async () => {
  const el = await fixture<typeofBlAlert>(

src/components/alert/bl-alert.ts

@@ -104,17 +104,17 @@ export default class BlAlert extends LitElement {
 
  private _initAlertActionSlot(event: Event) {
  const slotElement = event.target as HTMLSlotElement;
- const slotElements = slotElement.assignedElements();
+ const slotElements = slotElement.assignedElements({ flatten: true });
 
  slotElements.forEach(element => {
  if (element.tagName !== "BL-BUTTON") {
  element.parentNode?.removeChild(element);
  return;
  }
 
- (slotElement.parentElement as HTMLElement).style.display = "flex";
+ (this.shadowRoot?.querySelector(".actions") as HTMLElement).style.display = "flex";
 
- const variant = element.slot === "action-secondary" ? "secondary" : "primary";
+ const variant = slotElement.name === "action-secondary" ? "secondary" : "primary";
  const buttonTypes: Record<AlertVariant, string> = {
  info: "default",
  warning: "neutral",

src/components/dialog/bl-dialog.mdx

@@ -94,6 +94,14 @@ document.querySelector("bl-dialog").addEventListener("bl-dialog-request-close",
 });
 ```
 
+## Using HTML Dialog Element
+
+Starting from version 2.4.0 of Baklava, the `bl-dialog` component uses a polyfill implementation by default due to some quirks in the native HTML Dialog element.
+This change was prompted by issues encountered during the development of the `bl-notification` component, where the native dialog element blocked any actions on it, event with Popover attribute.
+
+If you wish to use the native HTML Dialog element, you can do so by setting the `polyfilled` attribute to `false`.
+Please note that this will cause notifications to render under the dialog backdrop. Prior to version 2.4.0, this was the default behavior.
+
 ## Reference
 
 <ArgsTable of="bl-dialog" />

src/components/dialog/bl-dialog.test.ts

@@ -90,7 +90,7 @@ describe("bl-dialog", () => {
  window.HTMLDialogElement = htmlDialogElement;
  });
  it("should render html dialog component with the default values when supports html dialog", async () => {
- const el = await fixture<typeOfBlDialog>(html`<bl-dialog></bl-dialog>`);
+ const el = await fixture<typeOfBlDialog>(html`<bl-dialog .polyfilled=${false}></bl-dialog>`);
 
  assert.shadowDom.equal(
  el,
@@ -132,7 +132,7 @@ describe("bl-dialog", () => {
  });
 
  it("should close the dialog when the close btn is clicked", async () => {
- const el = await fixture<typeOfBlDialog>(html` <bl-dialog open caption="My title">
+ const el = await fixture<typeOfBlDialog>(html` <bl-dialog .polyfilled=${false} open caption="My title">
  <div>My Content</div>
  </bl-dialog>`);
  const dialog = el.shadowRoot?.querySelector(".dialog") as HTMLDivElement;
@@ -340,7 +340,7 @@ describe("bl-dialog", () => {
  });
 
  it("should fire bl-dialog-request-close event when dialog closes by clicking backdrop", async () => {
- const el = await fixture<typeOfBlDialog>(html`<bl-dialog open caption="My title">
+ const el = await fixture<typeOfBlDialog>(html`<bl-dialog .polyfilled=${false} open caption="My title">
  </bl-dialog>`);
 
  const dialog = el?.shadowRoot?.querySelector<HTMLDialogElement>(".dialog");

src/components/dialog/bl-dialog.ts

@@ -48,9 +48,17 @@ export default class BlDialog extends LitElement {
  * using polyfill by setting this to true in some cases like to show some content on top of dialog
  * in case you are not able to use Popover API. Be aware that, polyfilled version can cause some
  * inconsistencies in terms of accessibility and stacking context. So use it with extra caution.
+ *
+ * As of the current implementation, you can render above the dialog HTML element using the Popover API. However,
+ * it will block any actions on the Popover element. This issue was encountered during the development of the `bl-notification` component.
+ * As a result, we decided to enable the polyfill for the `bl-dialog` component by default. If you prefer to use the native dialog, you can set
+ * this property to false. Please note, doing so will cause notifications to render under the dialog backdrop.
+ * For more information, refer to the comment linked below:
+ *
+ * https://github.com/Trendyol/baklava/issues/141#issuecomment-1810301413
  */
  @property({ type: Boolean, reflect: true })
- polyfilled = !window.HTMLDialogElement;
+ polyfilled = true;
 
  @query(".dialog")
  private dialog: HTMLDialogElement & DialogElement;
@@ -176,7 +184,7 @@ export default class BlDialog extends LitElement {
  }
 
  render(): TemplateResult {
- return this.polyfilled
+ return this.polyfilled || !window.HTMLDialogElement
  ? html`<div
  class="dialog-polyfill"
  role="dialog"

src/components/notification/bl-notification.css

@@ -0,0 +1,106 @@
+:host {
+ --bl-notification-width: 396px;
+ --bl-notification-gap: var(--bl-size-2xs);
+ --bl-notification-animation-duration: 0.3s;
+}
+
+.wrapper {
+ --margin: var(--bl-size-xl);
+
+ display: flex;
+ flex-direction: column-reverse;
+ position: fixed;
+ top: 0;
+ right: 0;
+ max-width: var(--bl-notification-width);
+ margin: var(--margin);
+ width: calc(100% - var(--margin) * 2);
+ z-index: var(--bl-index-notification);
+}
+
+@media screen and (max-width: 480px) {
+ .wrapper {
+ flex-direction: column;
+ max-width: 100%;
+ }
+}
+
+.notification {
+ will-change: transform height margin;
+ animation: slide-in-right var(--bl-notification-animation-duration) ease;
+ margin-bottom: var(--bl-notification-gap);
+ touch-action: none;
+}
+
+.notification[data-slide="top"] {
+ animation: slide-in-top var(--bl-notification-animation-duration) ease;
+}
+
+:host([no-animation]) .notification {
+ animation: none;
+}
+
+.notification.removing {
+ animation: slide-out-right var(--bl-notification-animation-duration) ease forwards,
+ size-to-zero var(--bl-notification-animation-duration) ease
+ var(--bl-notification-animation-duration) forwards;
+}
+
+.notification[data-slide="top"].removing {
+ animation: slide-out-top var(--bl-notification-animation-duration) ease forwards,
+ size-to-zero var(--bl-notification-animation-duration) ease
+ var(--bl-notification-animation-duration) forwards;
+}
+
+:host([no-animation]) .notification.removing {
+ animation: size-to-zero 0;
+}
+
+@media (prefers-reduced-motion) {
+ .notification.removing {
+ animation: size-to-zero 0;
+ }
+
+ .notification {
+ animation: none;
+ }
+}
+
+@keyframes slide-in-right {
+ from {
+ transform: translateX(var(--travel-distance, 10px));
+ height: 0;
+ opacity: 0;
+ margin: 0;
+ }
+}
+
+@keyframes slide-out-right {
+ to {
+ transform: translateX(var(--travel-distance, 10px));
+ opacity: 0;
+ }
+}
+
+@keyframes slide-in-top {
+ from {
+ transform: translateY(var(--travel-distance, -10px));
+ height: 0;
+ opacity: 0;
+ margin: 0;
+ }
+}
+
+@keyframes slide-out-top {
+ to {
+ transform: translateY(var(--travel-distance, -10px));
+ opacity: 0;
+ }
+}
+
+@keyframes size-to-zero {
+ to {
+ height: 0;
+ margin: 0;
+ }
+}