TextButton - add "button-display" prop

[larserbach]

Description / User Story

As defined in the below discussion and the planning from 05.10.2023 we decided to add an option to the Text Button to make it fill their parent container.

---

Acceptance Criteria

• A prop exists in the TextButton to change the width of the component to be defined by either the content or the parent container
• When the width of the TextButton is defined by the parent container, the icon needs to be displayed with the label in the center of the button

---

Background information

• It could be implemented similar to the option here under Button Display named "Block".
• Once we have the Text Dropdown, this behaviour should also be applied there TextDropdown Button (custom) - design & build component #83
• We discussed already the following solution:
  • The text button has a new property called "button-display" to make the component fill its parent container.
  • The icon should always be with the label in the center of the button, when the button is set to "block".
  • The current button behaviour should be the inline variant of the display prop.

[thrbnhrtmnn]

We should verify again, if this is really a dev task. If it is, we probably can also add the junior friendly label

[larserbach]

After investigating this topic further, I believe on design side we do not have a task.
If the button shows an icon, the text must be set to hug to keep the distance between the icon and the text as defined on the gap token. Setting the textcontainer to fill, would push the icons to the far left or right of the button, which seems not desireable.

Still open is the question, if we should add a "display" prop on the button as seen here: https://boltdesignsystem.com/pattern-lab/?p=viewall-elements-button

[thrbnhrtmnn]

Design review was done and issue was merged.