docs(ComboBox): add group example (SAP#6497)

Author: Lukas742

packages/main/src/webComponents/ComboBox/ComboBox.mdx

@@ -31,6 +31,10 @@ All available filter types controlled by the `filter` prop.
 
 <Canvas of={ComponentStories.FilterTypes} />
 
+## ComboBox with ComboBoxItemGroups
+
+<Canvas of={ComponentStories.WithGroups} />
+
 <Markdown>{SubcomponentsSection}</Markdown>
 
 ## ComboBoxItem

packages/main/src/webComponents/ComboBox/ComboBox.stories.tsx

@@ -4,6 +4,7 @@ import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
 import { FlexBox } from '../../components/FlexBox/index.js';
 import { FlexBoxDirection, FlexBoxJustifyContent } from '../../enums/index.js';
 import { ComboBoxItem } from '../ComboBoxItem/index.js';
+import { ComboBoxItemGroup } from '../ComboBoxItemGroup/index.js';
 import { Icon } from '../Icon/index.js';
 import { Label } from '../Label/index.js';
 import { ComboBox } from './index.js';
@@ -41,6 +42,24 @@ export const Default: Story = {
   }
 };
 
+export const WithGroups: Story = {
+  render(args) {
+    return (
+      <ComboBox {...args}>
+        <ComboBoxItemGroup headerText="Group 1">
+          <ComboBoxItem text="ComboBox Entry 1" />
+          <ComboBoxItem text="ComboBox Entry 2" />
+        </ComboBoxItemGroup>
+        <ComboBoxItemGroup headerText="Group 2">
+          <ComboBoxItem text="ComboBox Entry 3" />
+          <ComboBoxItem text="ComboBox Entry 4" />
+          <ComboBoxItem text="ComboBox Entry 5" />
+        </ComboBoxItemGroup>
+      </ComboBox>
+    );
+  }
+};
+
 export const FilterTypes: Story = {
   render: () => {
     return (