Component: Button text is hidden in certain variations

[t-hamano]

Description

In the Button component, the button text is cut off when the following conditions are met:

• Specify text with text prop
• Specify the icon with icon prop
• Enable isSmall prop

When the above condition is met, the width of the button is fixed at 24px, regardless of the length of the text.
I think the cause is that the has-text class is not applied when text is specified by the text prop.

gutenberg/packages/components/src/button/index.js

Line 104 in 0ac7078

'has-text': !! icon && !! children,

Perhaps this issue is also related to #44042.
If the response to #44042 takes into account has-text class in the text prop, I believe this issue will be resolved as well.

Step-by-step reproduction instructions

To check the behavior of the current button component, I used the following code in the core/code block.

/**
 * WordPress dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';
import { Button, Flex } from '@wordpress/components';
import { help } from '@wordpress/icons';

export default function CodeEdit() {
	const blockProps = useBlockProps();
	return (
		<div { ...blockProps }>
			<p>only text</p>
			<Flex gap={ 3 } justify="flex-start">
				<Button text="TextProp" variant="primary" />
				<Button variant="primary">TextChildren</Button>
			</Flex>

			<p>text and icon</p>
			<Flex gap={ 3 } justify="flex-start">
				<Button icon={ help } text="TextProp" variant="primary" />
				<Button icon={ help } variant="primary">
					TextChildren
				</Button>
			</Flex>

			<p>text and isSmall</p>
			<Flex gap={ 3 } justify="flex-start">
				<Button text="TextProp" variant="primary" isSmall />
				<Button variant="primary" isSmall>
					TextChildren
				</Button>
			</Flex>

			<p>text, icon and isSmall</p>
			<Flex gap={ 3 } justify="flex-start">
				<Button
					icon={ help }
					text="TextProp"
					variant="primary"
					isSmall
				/>
				<Button icon={ help } variant="primary" isSmall>
					TextChildren
				</Button>
			</Flex>
		</div>
	);
}

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ciampo]

cc'ing @mirka for visibility