What?

This fixes the RTL alignment inside the Button component for buttons with both an icon and text.

Why?

The .components-button.has-icon.has-text style had a justify-content: left, because of which the button contents were always left-aligned, even in RTL languages.

This effect normally isn't visible because the buttons aren't wide enough. But it became apparent in Calypso: when opening the block editor's sidebar, the "View Posts" button is actually a wider one:

For this button, the problem with the alignment for RTL languages is visible:

How?

This PR changes the justify-content from left to start, which works for both LTR and RTL languages.

Testing Instructions

1. Replace the content of any block's edit.js with the following — some extra width has been added to the button to be able to see the effect of the alignment:

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

export default function CodeEdit( { attributes, setAttributes, onRemove } ) {
	const blockProps = useBlockProps();
	return (
		<div { ...blockProps }>
			<Button variant="primary" icon={ plusCircle } style={{ width: 200 }}>
				Hello
			</Button>
		</div>
	);
}

2. Switch to an RTL language, edit a post, add the block you replaced, and confirm that the button contents are now right-aligned.
3. Switch to an LTR language, edit a post, add the block you replaced, and confirm that the button contents are still left-aligned.

Screenshots

RTL before & after:

LTR before & after (should be unchanged):