From ab38f00b074f69763338b62e1dae27b3f1d14bc8 Mon Sep 17 00:00:00 2001
From: Akshat Patel <38994122+Akshat55@users.noreply.github.com>
Date: Wed, 5 Oct 2022 18:06:10 -0400
Subject: [PATCH] fix(styles): add display property for custom HTML elements
 (#12050)

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/styles/scss/components/accordion/_accordion.scss   | 1 +
 packages/styles/scss/components/data-table/_data-table.scss | 1 +
 packages/styles/scss/components/menu/_menu.scss             | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
index 9b623f0067c2..e481ab957b0c 100644
--- a/packages/styles/scss/components/accordion/_accordion.scss
+++ b/packages/styles/scss/components/accordion/_accordion.scss
@@ -51,6 +51,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__item {
+    display: list-item;
     overflow: visible;
     border-top: 1px solid $border-subtle;
     transition: all $duration-fast-02 motion(standard, productive);
diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
index d397c8fe01ba..fb95dc30444c 100644
--- a/packages/styles/scss/components/data-table/_data-table.scss
+++ b/packages/styles/scss/components/data-table/_data-table.scss
@@ -32,6 +32,7 @@
   }
 
   .#{$prefix}--data-table-content {
+    display: block;
     overflow-x: auto;
   }
 
diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss
index 5bf324290495..3f2da68ebf51 100644
--- a/packages/styles/scss/components/menu/_menu.scss
+++ b/packages/styles/scss/components/menu/_menu.scss
@@ -46,6 +46,7 @@
 
   .#{$prefix}--menu-option {
     position: relative;
+    display: list-item;
     // $size-sm
     height: 2rem;
     background-color: $layer;
@@ -123,6 +124,7 @@
   }
 
   .#{$prefix}--menu-divider {
+    display: list-item;
     width: 100%;
     height: 1px;
     margin: $spacing-02 0;