fix(core/group): show expand-collapse icon (#1260)

.changeset/gold-terms-develop.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/group): show expand-collapse icon

packages/core/src/components/group/group.tsx

@@ -12,7 +12,6 @@ import {
   Element,
   Event,
   EventEmitter,
-  Fragment,
   h,
   Host,
   Prop,
@@ -85,6 +84,8 @@ export class Group {
   @State() slotSize = this.groupItems.length;
   @State() footerVisible = false;
 
+  @State() showExpandCollapsedIcon = false;
+
   private observer: MutationObserver;
 
   get dropdownItems() {
@@ -211,8 +212,9 @@ export class Group {
             ></div>
             <div class="btn-expand-header">
               <ix-icon
+                data-testid="expand-collapsed-icon"
                 class={{
-                  hidden: this.slotSize === 0,
+                  hidden: !this.showExpandCollapsedIcon,
                 }}
                 name={
                   this.collapsed ? 'chevron-right-small' : 'chevron-down-small'
@@ -244,24 +246,32 @@ export class Group {
             'group-content': true,
           }}
         >
-          {!this.collapsed ? (
-            <Fragment>
-              <slot></slot>
-              <ix-group-item
-                suppressSelection={true}
-                focusable={false}
-                class={{
-                  footer: true,
-                  'footer-visible': this.footerVisible,
-                }}
-              >
-                <slot
-                  name="footer"
-                  onSlotchange={() => this.onSlotChange()}
-                ></slot>
-              </ix-group-item>
-            </Fragment>
-          ) : null}
+          <div
+            style={{
+              display: this.collapsed ? 'none' : 'contents',
+            }}
+          >
+            <slot
+              onSlotchange={() => {
+                const slot =
+                  this.hostElement.shadowRoot.querySelector('slot:not([name])');
+                this.showExpandCollapsedIcon = hasSlottedElements(slot);
+              }}
+            ></slot>
+            <ix-group-item
+              suppressSelection={true}
+              focusable={false}
+              class={{
+                footer: true,
+                'footer-visible': this.footerVisible,
+              }}
+            >
+              <slot
+                name="footer"
+                onSlotchange={() => this.onSlotChange()}
+              ></slot>
+            </ix-group-item>
+          </div>
         </div>
       </Host>
     );

packages/core/src/components/group/test/group.ct.ts

@@ -0,0 +1,56 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test('renders', async ({ mount, page }) => {
+  await mount(`<ix-group></ix-group>`);
+  const group = page.locator('ix-group');
+  await expect(group).toHaveClass(/hydrated/);
+});
+
+test('hide expand icon initial', async ({ mount, page }) => {
+  await mount(`
+    <ix-group>
+    </ix-group>
+  `);
+  const group = page.locator('ix-group');
+  await expect(group).toHaveClass(/hydrated/);
+
+  const expandIcon = group.getByTestId('expand-collapsed-icon');
+  await expect(expandIcon).not.toBeVisible();
+
+  await group.evaluate((group) => {
+    const item = document.createElement('ix-group-item');
+    group.appendChild(item);
+  });
+
+  await expect(expandIcon).toBeVisible();
+});
+
+test('show expand icon initial', async ({ mount, page }) => {
+  await mount(`
+    <ix-group>
+      <ix-group-item>Item 1</ix-group-item>
+    </ix-group>
+  `);
+  const group = page.locator('ix-group');
+  await expect(group).toHaveClass(/hydrated/);
+
+  const expandIcon = group.getByTestId('expand-collapsed-icon');
+  await expect(expandIcon).toBeVisible();
+
+  await group.evaluate((group) => {
+    const item = group.querySelector('ix-group-item');
+    item.remove();
+  });
+
+  await expect(expandIcon).not.toBeVisible();
+});