fix(dropdown): dropdown group borders are not visible

package.json

@@ -89,7 +89,7 @@
     "@storybook/addon-mdx-gfm": "^7.4.3",
     "@storybook/addon-viewport": "^7.4.3",
     "@storybook/jest": "^0.2.2",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/web-components": "7.4.3",
     "@storybook/web-components-vite": "^7.4.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",

src/components/dropdown/bl-dropdown.css

@@ -14,3 +14,9 @@
 :host([kind="danger"]) bl-popover {
   --bl-popover-border-color: var(--bl-color-danger);
 }
+
+.popover-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-size-xs);
+}

src/components/dropdown/bl-dropdown.stories.mdx

@@ -92,7 +92,7 @@ Dropdown Button has the same variants ([Primary](/docs/components-button--primar
 Every variant represents the importance of the actions inside it.
 
 <Canvas>
-  <Story name="Variants" play={dropdownOpener}>
+  <Story name="Variants" args={{ label: 'Dropdown Button' }} play={dropdownOpener}>
     {Template.bind({})}
   </Story>
 </Canvas>
@@ -103,7 +103,7 @@ Dropdown Button has the same kinds as the button has.
 Every kind indicates a state of the dropdown buttons. It can has 4 different "kind"s. `default`, `neutral`, `success` and `danger`.
 
 <Canvas>
-  <Story name="Kinds" play={dropdownOpener}>
+  <Story name="Kinds" args={{ label: 'Dropdown Button' }} play={dropdownOpener}>
     {ButtonTypes.bind({})}
   </Story>
 </Canvas>
@@ -113,15 +113,15 @@ Every kind indicates a state of the dropdown buttons. It can has 4 different "ki
 We have 3 sizes of dropdown buttons: **Large**, **Medium**, **Small**. Default size is **Medium**.
 
 <Canvas>
-  <Story name="Dropdown Button Sizes" play={dropdownOpener}>
+  <Story name="Dropdown Button Sizes" args={{ label: 'Dropdown Button' }} play={dropdownOpener}>
     {SizesTemplate.bind({})}
   </Story>
 </Canvas>
 
 If dropdown button has an action with a long text that can not fit in a single line, popover will be automatically widen to the right side of the dropdown button.
 
 <Canvas>
-  <Story name="Automatic Left Align" args={{ content: 'Action with very long text' }} play={dropdownOpener}>
+  <Story name="Automatic Left Align" args={{ label: 'Dropdown Button', content: 'Action with very long text' }} play={dropdownOpener}>
     {SingleDropdownButtonTemplate.bind({})}
   </Story>
 </Canvas>
@@ -131,15 +131,15 @@ If dropdown button has an action with a long text that can not fit in a single l
 We have 2 types of disabled dropdown buttons: Disable version of Primary and Secondary buttons is the same.
 
 <Canvas columns={1}>
-  <Story name="Disabling Dropdown Buttons" args={{ disabled: true }} play={dropdownOpener}>
+  <Story name="Disabling Dropdown Buttons" args={{ label: 'Dropdown Button', disabled: true }} play={dropdownOpener}>
     {SizesTemplate.bind({})}
   </Story>
 </Canvas>
 
 Whereas Tertiary buttons keep their transparent backgrounds.
 
 <Canvas columns={1}>
-  <Story name="Disabling Tertiary Dropdown Buttons" args={{ disabled: true, variant:"tertiary" }} play={dropdownOpener}>
+  <Story name="Disabling Tertiary Dropdown Buttons" args={{ label: 'Dropdown Button', disabled: true, variant:"tertiary" }} play={dropdownOpener}>
     {SizesTemplate.bind({})}
   </Story>
 </Canvas>

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

@@ -23,7 +23,7 @@ describe("bl-dropdown", () => {
   });
 
   it("should render with the default values", async () => {
-    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown></bl-dropdown>`);
+    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown label="Dropdown Button"></bl-dropdown>`);
 
     assert.shadowDom.equal(
       el,
@@ -33,17 +33,16 @@ describe("bl-dropdown", () => {
         kind="default"
         size="medium"
         variant="primary"
-        aria-label="Dropdown Button"
       >
         Dropdown Button
       </bl-button>
-      <bl-popover placement="bottom-start" fit-size><slot></slot></bl-popover>
+      <bl-popover placement="bottom-start" fit-size><div class="popover-content"><slot></slot></div></bl-popover>
     `
     );
   });
 
   it("should open dropdown", async () => {
-    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown></bl-dropdown>`);
+    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown label="Dropdown Button"></bl-dropdown>`);
 
     const buttonHost = <BlButton>el.shadowRoot?.querySelector("bl-button");
     const button = buttonHost.shadowRoot?.querySelector(".button") as HTMLElement | null;
@@ -56,7 +55,7 @@ describe("bl-dropdown", () => {
   });
 
   it("should close dropdown", async () => {
-    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown></bl-dropdown>`);
+    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown label="Dropdown Button"></bl-dropdown>`);
 
     const buttonHost = <BlButton>el.shadowRoot?.querySelector("bl-button");
     const button = buttonHost.shadowRoot?.querySelector(".button") as HTMLElement | null;
@@ -73,7 +72,7 @@ describe("bl-dropdown", () => {
 
   it("should close dropdown when click outside", async () => {
     const el = await fixture<typeOfBlDropdown>(html`<body>
-      <bl-dropdown></bl-dropdown>
+      <bl-dropdown label="Dropdown Button"></bl-dropdown>
     </body>`);
 
     const buttonHost = <BlButton>el.shadowRoot?.querySelector("bl-button");
@@ -96,7 +95,7 @@ describe("bl-dropdown", () => {
 
   it("should close dropdown when click dropdown item", async () => {
     const el = await fixture<typeOfBlDropdown>(html`
-      <bl-dropdown>
+      <bl-dropdown label="Dropdown Button">
         <bl-dropdown-item>dropdown-item</bl-dropdown-item>
       </bl-dropdown>
     `);
@@ -122,7 +121,7 @@ describe("bl-dropdown", () => {
   });
 
   it("should fire event when dropdown opened", async () => {
-    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown></bl-dropdown>`);
+    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown label="Dropdown Button"></bl-dropdown>`);
 
     const buttonHost = <BlButton>el.shadowRoot?.querySelector("bl-button");
     const button = buttonHost.shadowRoot?.querySelector(".button") as HTMLElement | null;
@@ -138,7 +137,7 @@ describe("bl-dropdown", () => {
   });
 
   it("should fire event when dropdown closed", async () => {
-    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown></bl-dropdown>`);
+    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown label="Dropdown Button"></bl-dropdown>`);
 
     const buttonHost = <BlButton>el.shadowRoot?.querySelector("bl-button");
     const button = buttonHost.shadowRoot?.querySelector(".button") as HTMLElement | null;
@@ -154,7 +153,7 @@ describe("bl-dropdown", () => {
   });
 
   it("should not change opened property when disabled", async () => {
-    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown disabled></bl-dropdown>`);
+    const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown label="Dropdown Button" disabled></bl-dropdown>`);
 
     expect(el.opened).to.false;
 
@@ -173,7 +172,7 @@ describe("bl-dropdown", () => {
       //when
       const el = await fixture(
         html`<div>
-          <input id="previnput" /><bl-dropdown>
+          <input id="previnput" /><bl-dropdown label="Dropdown Button">
             <bl-dropdown-item>Action 1</bl-dropdown-item>
             <bl-dropdown-item>Action 2</bl-dropdown-item>
             <bl-dropdown-item>Action 3</bl-dropdown-item>
@@ -213,7 +212,7 @@ describe("bl-dropdown", () => {
       //when
       const el = await fixture(
         html`<div>
-          <input id="previnput" /><bl-dropdown>
+          <input id="previnput" /><bl-dropdown label="Dropdown Button">
             <bl-dropdown-item>Action 1</bl-dropdown-item>
             <bl-dropdown-item>Action 2</bl-dropdown-item>
             <bl-dropdown-item>Action 3</bl-dropdown-item>
@@ -263,7 +262,7 @@ describe("bl-dropdown", () => {
       //when
       const el = await fixture(
         html`<div>
-          <input id="previnput" /><bl-dropdown>
+          <input id="previnput" /><bl-dropdown label="Dropdown Button">
             <bl-dropdown-item>Action 1</bl-dropdown-item>
             <bl-dropdown-item>Action 2</bl-dropdown-item>
             <bl-dropdown-item>Action 3</bl-dropdown-item>

src/components/dropdown/bl-dropdown.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, CSSResultGroup, TemplateResult } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { event, EventDispatcher } from "../../utilities/event";
 import "../button/bl-button";
 import BlButton, { ButtonSize, ButtonVariant, ButtonKind } from "../button/bl-button";
@@ -32,7 +31,7 @@ export default class BlDropdown extends LitElement {
    * Sets the dropdown button label
    */
   @property({ type: String, reflect: true })
-  label = "Dropdown Button";
+  label: string;
 
   /**
    * Sets the dropdown button variant
@@ -143,18 +142,18 @@ export default class BlDropdown extends LitElement {
     return html`<bl-button
         dropdown
         .active=${this.opened}
-        ?disabled=${ifDefined(this.disabled)}
+        ?disabled=${this.disabled}
         variant="${this.variant}"
         kind="${this.kind}"
         size="${this.size}"
-        aria-label="${ifDefined(this.label)}"
         @bl-click="${this._handleClick}"
       >
         ${this.label}
       </bl-button>
-      <bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}">
-        <slot></slot>
-      </bl-popover> `;
+      <bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}"
+        ><div class="popover-content">
+          <slot></slot></div
+      ></bl-popover> `;
   }
 }
 

src/components/dropdown/group/bl-dropdown-group.css

@@ -1,4 +1,5 @@
 :host {
+  display: block;
   position: relative;
   width: 100%;
 }
@@ -17,14 +18,17 @@
   color: var(--bl-color-neutral-dark);
 }
 
-:host(:not(:first-child)) {
+:host(:not(:first-child)) .dropdown-group {
   border-top: 1px solid var(--bl-color-neutral-lighter);
+  padding-top: var(--bl-size-xs);
 }
 
-:host(:not(:last-child)) {
+:host(:not(:last-child)) .dropdown-group {
   border-bottom: 1px solid var(--bl-color-neutral-lighter);
+  padding-bottom: var(--bl-size-xs);
 }
 
+/*
 :host(:not([caption])) ::slotted(:first-child) {
   padding-block: var(--bl-size-xs) 0;
 }
@@ -35,4 +39,4 @@
 
 :host(:not(:first-child)) .caption {
   padding-block: var(--bl-size-xs) 0;
-}
+} */

src/components/dropdown/group/bl-dropdown-group.stories.mdx

@@ -7,6 +7,8 @@ import {
   Story,
 } from '@storybook/addon-docs';
 
+import { userEvent } from '@storybook/testing-library';
+
 <Meta
   title="Components/Dropdown Button/Dropdown Group"
   component="bl-dropdown-group"
@@ -19,32 +21,45 @@ import {
   }}
 />
 
+export const dropdownOpener = async ({ canvasElement }) => {
+  const dropdown = canvasElement?.querySelector('bl-dropdown')
+  if(dropdown.shadowRoot) {
+    const button = dropdown.shadowRoot.querySelector('bl-button')
+    await userEvent.click(button);
+  }
+}
+
 # Dropdown Group
 Dropdown Group component is a component should be used inside a bl-dropdown or bl-dropdown-group component. It is used to display an action in the these components.
 
-export const Template = (args) => html`
-    <bl-dropdown>
-    <bl-dropdown-item>Action outside of Group</bl-dropdown-item>
-  <bl-dropdown-group
-    caption='${ifDefined(args.caption)}'
-  ><bl-dropdown-item>Action 1</bl-dropdown-item><bl-dropdown-item>Action 1</bl-dropdown-item></bl-dropdown-group>
-  </bl-dropdown>
+export const Template = (args) => html`<bl-dropdown label="Dropdown Button">
+  <bl-dropdown-item>Action outside of Group</bl-dropdown-item>
+  <bl-dropdown-group caption="${ifDefined(args.caption)}">
+    <bl-dropdown-item>Action 1</bl-dropdown-item>
+    <bl-dropdown-item>Action 2</bl-dropdown-item>
+  </bl-dropdown-group>
+  <bl-dropdown-group caption="${ifDefined(args.caption)}">
+    <bl-dropdown-item>Action 1</bl-dropdown-item>
+    <bl-dropdown-item>Action 2</bl-dropdown-item>
+  </bl-dropdown-group>
+</bl-dropdown>
 `
 
 ## Basic Usage
+
 <Canvas>
-  <Story name="Basic Usage">
+  <Story name="Basic Usage" play={dropdownOpener}>
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ## With Caption
+
 <Canvas>
-  <Story name="With Caption" args={{ caption: "Caption" }}>
+  <Story name="With Caption" args={{ caption: "Caption" }} play={dropdownOpener}>
     {Template.bind({})}
   </Story>
 </Canvas>
 
 
-
 <ArgsTable of="bl-dropdown-group" />