[BUG] Kirby-button in kirbyHeaderActions not showing label on mobile size screens

[hjorte-bd]

• [x] I have written a good issue

When a kirby button is placed in kirbyHeaderActions in a header, it is not possible for label to be shown, even when there is nothing else in header. Our designer would like this to be possible.

Describe the bug

  <kirby-header [title]="'menu.title' | translate">
    <kirby-action-group *kirbyHeaderActions>
      <button
        kirby-button
        attentionLevel="3"
        [class.icon-only]="false"
        (click)="logout()"
      >
        <kirby-icon name="log-out"></kirby-icon>

        <span class="text">{{ 'menu.logout' | translate }}</span>
      </button>
    </kirby-action-group>
  </kirby-header>

Describe how to reproduce the bug

1. Create kirby-header element
2. Inside, add kirby-action-group element wiith a *kirbyHeaderActions directive
3. Inside add kirby button
4. Label text will not be shown on small screens 4a. [class.icon-only]="false" will show the text, but will result in incorrect layout.

Which Kirby version was used?

8.11.2 (Also v9)

What was the expected behavior?

The text should be shown when there is plenty of space, or at least be possible to force to be shown anyways (like with [class.icon-only]="false")

Add any screenshots

How it looks when text is forced back by removing text-only class.

Please complete the following information:

• OS: MacOS
• Browser: Edge
• Browser version: 119

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

• [ ] Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done

Implementation

The contributor who wants to implement this issue should:

• [ ] Make sure you have read: "Before you get coding".
• [ ] Signal to others you are working on the issue by assigning yourself.
• [ ] Create a branch from the develop branch following our branch naming convention.
• [ ] Create a test that reproduces the bug following guidelines in: "The good: Test".
• [ ] Write code to fix the bug

Review

Once the issue has been implemented and is ready for review:

• [ ] Do a self-review.
• [ ] Create a pull-request.

[RasmusKjeldgaard]

This is intended behavior for the action-group, you should use custom actions instead as described in the header documentation.

[jakobe]

Re-opening this, as it's not possible to opt out of the collapsed (icon only) button even with custom actions.