Prevent word wrapping when badge or trailing icon is (not) present

[ernstmul]

What does this PR do?

ActionMenu Anchor and Button don't take up full available space when no icon or badge is present. And if the icon or badge is present, they take up the width 50/50 with the text (making the text wrap in most cases). This PR fixes that.

ActionMenu.Item.Button before:

ActionMenu.Item.Button after:

ActionMenu.Item.Anchor before:

ActionMenu.Item.Anchor after:

Have you read the Contributing Guidelines on issues?

Yes

[changeset-bot]

⚠️ No Changeset found

Latest commit: ad62c7d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@appwrite.io/pink" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-icons" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/kitchensink" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/fonts" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-design" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pink-design	❌ Failed (Inspect)			Jan 28, 2025 11:21am
ui-kitchensink	❌ Failed (Inspect)			Jan 28, 2025 11:21am

[github-actions]

Uh oh! @ernstmul, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@253

npm i https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@253

commit: ad62c7d

[ArmanNik]

LGTM...What happens when the text is too long?

[ernstmul]

LGTM...What happens when the text is too long?

It will wrap eventually, but this time it will be because there is no more space. Not because an empty container is taking up the space!

[github-actions]

Uh oh! @ernstmul, the image you shared is missing helpful alt text. Check #253 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.