docs: add SelectMenu, SelectMenuOption story (#7502)

* docs: add select menu story * chore: fix js error * chore: add Storybook check * chore: rename job name
SAP · Aug 29, 2023 · b3e0a61 · b3e0a61
1 parent c34056b
commit b3e0a61
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 5 deletions.
diff --git a/.github/workflows/test-storybook.yaml b/.github/workflows/test-storybook.yaml
@@ -0,0 +1,23 @@
+name: CI - Storybook
+
+on:
+  pull_request:
+  push:
+    branches:
+      - 'main'
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        cache: 'yarn'
+
+    - name: Install and Build
+      run: |
+        export NODE_OPTIONS="--max_old_space_size=4096"
+        yarn install
+        yarn build:playground
diff --git a/packages/base/src/connectToComponent.ts b/packages/base/src/connectToComponent.ts
@@ -24,7 +24,8 @@ const connectToComponent = (options: ConnectOptions): HTMLElement | undefined =>
 	} else if (friend instanceof HTMLElement) {
 		connectedTo = friend;
 	} else {
-		connectedTo = (host.getRootNode() as Document).getElementById(friend) || undefined;
+		const rootNode = host.getRootNode() as Document;
+		connectedTo = (rootNode.getElementById && rootNode.getElementById(friend)) || undefined;
 	}
 
 	const key = `${host._id}-${propName}`;
@@ -40,7 +41,9 @@ const connectToComponent = (options: ConnectOptions): HTMLElement | undefined =>
 		// if friend element not in DOM yet, start polling
 		if (typeof friend === "string" && friend && !intervals.has(key)) {
 			const interval = setInterval(() => {
-				const found = (host.getRootNode() as Document).getElementById(friend);
+				const rootNode = host.getRootNode() as Document;
+				const found = (rootNode.getElementById && rootNode.getElementById(friend));
+
 				if (found) {
 					clearInterval(intervals.get(key));
 					intervals.delete(key);

diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
@@ -123,7 +123,7 @@ interface IOption extends UI5Element {
  * @alias sap.ui.webc.main.Select
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-select
- * @appenddocs sap.ui.webc.main.Option
+ * @appenddocs sap.ui.webc.main.Option sap.ui.webc.main.SelectMenu sap.ui.webc.main.SelectMenuOption
  * @public
  * @since 0.8.0
  */
@@ -195,7 +195,7 @@ class Select extends UI5Element implements IFormElement {
 	static i18nBundle: I18nBundle;
 
 	/**
-	 * Defines a reference (ID or DOM element) of component's menu of options.
+	 * Defines a reference (ID or DOM element) of component's menu of options
 	 * as alternative to define the select's dropdown.
 	 * <br><br>
 	 * <b>Note:</b> Usage of <code>ui5-select-menu</code> is recommended.

diff --git a/packages/playground/_stories/main/Select/Select.stories.ts b/packages/playground/_stories/main/Select/Select.stories.ts
@@ -16,7 +16,11 @@ const component = "ui5-select";
 export default {
   title: "Main/Select",
   component: "Select",
-  subcomponents: { Option: "Option" },
+  subcomponents: {
+    Option: "Option",
+    SelectMenu: "SelectMenu",
+    SelectMenuOption: "SelectMenuOption",
+  },
   argTypes,
   parameters: {
     docs: {
@@ -111,3 +115,44 @@ export const TwoColumnLayout: StoryFn = () =>
     <ui5-option additional-text="CA">Canada</ui5-option>
   </ui5-select>`;
 TwoColumnLayout.storyName = "Two-column layout";
+
+export const CustomOptions: StoryFn = () =>
+  html`<ui5-select menu="selectMenu"></ui5-select>
+
+
+<ui5-select-menu id="selectMenu">
+    <ui5-select-menu-option display-text="AR">
+        <div class="optionContent">
+            <ui5-icon name="soccer"></ui5-icon>
+            Argentina
+            <ui5-icon name="employee"></ui5-icon>
+        </div>
+    </ui5-select-menu-option>
+
+    <ui5-select-menu-option display-text="BE">
+        <div class="optionContent">
+            <ui5-icon name="soccer"></ui5-icon>
+            Belgium
+            <ui5-icon name="employee"></ui5-icon>
+        </div>
+    </ui5-select-menu-option>
+
+    <ui5-select-menu-option display-text="BR">
+        <div class="optionContent">
+            <ui5-icon name="soccer"></ui5-icon>
+            Brazil
+            <ui5-icon name="employee"></ui5-icon>
+        </div>
+    </ui5-select-menu-option>
+</ui5-select-menu>
+
+<style>
+  .optionContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width:100%;
+  }
+</style>`;
+
+CustomOptions.storyName = "Custom Options";