kirbydesign / designsystem

Kirby Design System
https://cookbook.kirby.design
MIT License
82 stars 22 forks source link

[BUG] Conditionally rendered text in kirby-button is broken #3400

Open sebastian639559 opened 4 months ago

sebastian639559 commented 4 months ago

Describe the bug

Conditional rendering text ('render text' vs ' not rendering any text') alongside an icon inside kirby-button "breaks" the button. When I say it "breaks", I mean the kirby-button still behaves/'is styled' as though there is text inside the button when the conditional rendering defaults to not render any text.

Describe how to reproduce the bug

  1. Add kirby-button to a button html tag.
  2. Inside the button, add some conditional logic that switches between rendering text and not rendering any text
  3. Add an icon inside the button

Examples:

            <button
              kirby-button
            >
              <kirby-icon name="cog"></kirby-icon>
              {{
                showEditOveriewLabelText$() ? "Rediger overblik" : ""
              }}
            </button>
           <button
              kirby-button
            >
              <kirby-icon name="cog"></kirby-icon>
              @if (showEditOveriewLabelText$()) {
                   "some-text"
              }
            </button>

Which Kirby version was used?

"@kirbydesign/designsystem": "9.2.1",

What was the expected behavior?

This is how it currently behaves when the conditional logic renders an empty string:

image

This is how it should behave:

image

Add any screenshots

Please complete the following information:

Are there any additional context?


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.

Implementation

The contributor who wants to implement this issue should:

Review

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