fix(FlyoutMenuOption): added shadow:true & css (#498)

Author: kailash-tw

packages/core-components/src/components/flyout-menu/flyout-menu-option.scss

@@ -0,0 +1,23 @@
+@use '../../global/b2b-styles';
+
+:host {
+  display: block;
+  padding: var(--b2b-size-15) var(--b2b-size-30) 5px var(--b2b-size-30);
+  border-bottom: 1px solid transparent;
+  cursor: pointer;
+}
+
+:host(.b2b-flyout-menu__option:hover),
+:host(.b2b-flyout-menu__option:focus) {
+  background-color: var(--b2b-color-table-selected-hover);
+  outline: none;
+}
+
+:host(.b2b-flyout-menu__option--disabled) {
+  pointer-events: none;
+  color: var(--b2b-color-grey-200);
+}
+
+:host(.b2b-flyout-menu__option--separator) {
+  border-bottom: 1px solid var(--b2b-color-grey-200);
+}

packages/core-components/src/components/flyout-menu/flyout-menu-option.tsx

@@ -11,7 +11,8 @@ import { OptionSelectedEventDetail } from '../../utils/interfaces/form.interface
 
 @Component({
   tag: 'b2b-flyout-menu-option',
-  styleUrl: 'flyout-menu.scss',
+  styleUrl: 'flyout-menu-option.scss',
+  shadow: true,
 })
 export class FlyoutMenuOptionComponent {
   /** The option name. */

packages/core-components/src/components/flyout-menu/flyout-menu.e2e.tsx

@@ -82,7 +82,9 @@ describe('B2B-FlyoutMenu', () => {
     icon.click();
     await page.waitForChanges();
 
-    const flyoutMenuOption = await page.find({ text: 'option3' });
+    const flyoutMenuOption = await page.find(
+      'b2b-flyout-menu-option[option="option3"]',
+    );
     flyoutMenuOption.click();
     await page.waitForChanges();