Merge pull request #22 from plumelo/feature/dropdown-bug

Dropdown Stacking Context Bug

.github/workflows/storybook.yml

@@ -1,34 +1,10 @@
 ---
-name: Storybook CD
+name: Storybook
 on:
   push:
     branches:
       - master
 jobs:
   storybook:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 19
-          cache: 'npm'
-
-      - name: Install
-        run: npm ci
-
-      - name: Install
-        run: npm run build
-
-      - name: Fix import
-        run: sed -i 's/..\/src/..\/dist/g' stories/*.stories.js
-
-      - name: Deploy storybook
-        run: npm run storybook:deploy -- --ci
-        env:
-          GH_TOKEN: Neovici:${{ secrets.GITHUB_TOKEN }}
+    uses: Neovici/cfg/.github/workflows/story.yml@master
+    secrets: inherit

stories/cosmoz-dropdown.stories.ts

@@ -36,3 +36,30 @@ export const DropdownMenu: Story = {
 		</cosmoz-dropdown-menu>`;
 	},
 };
+
+export const DropdownWithBug: Story = {
+	render: () => {
+		return html`<style>
+				.wrapper-with-bug {
+					position: relative;
+					z-index: 2;
+					width: 300px;
+					height: 300px;
+					top: 100px;
+					left: 100px;
+					margin: 0 auto;
+					background-color: blueviolet;
+					transform: translate3d(0, 0, 0);
+				}
+			</style>
+			<div class="wrapper-with-bug">
+				<cosmoz-dropdown>
+					<div>Item 1</div>
+					<div>Item 2</div>
+					<div>Item 3</div>
+					<div>Item 4</div>
+					<div>Item 5</div>
+				</cosmoz-dropdown>
+			</div>`;
+	},
+};