Button, TextLink: Add support for trailing icons

[michaeltaranto]

Provide support for choosing the position of the icon slot within a Button or TextLink.

By default, the iconPosition will be leading the label, but optionally, can be set to trailing.

EXAMPLE USAGE:

<Button
  icon={<IconArrow direction="right" />}
  iconPosition="trailing"
>
  Next
</Button>

[changeset-bot]

🦋 Changeset detected

Latest commit: f31e78f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
braid-design-system	Minor

Not sure what this means? Click here to learn what changesets are.

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

[mrm007]

Nice work with the AvoidWidowIcon component 🎩

[mrm007]

I'll batch a few suggestions into one and you can pick and choose what you like:

• make the children prop more restrictive
• rename the children prop to icon inside the render function, to make it clear (to humans) what it is
• move the comment above the HTML entity

import type { UseIconProps } from '../../../hooks/useIcon';
import React from 'react';
import type { Space } from '../../../css/atoms/atoms';
import type { BoxProps } from '../../Box/Box';
import { Box } from '../../Box/Box';

import * as styles from './AvoidWidowIcon.css';

interface Props extends Pick<BoxProps, 'className'> {
  iconPosition: 'leading' | 'trailing';
  space?: Space;
  children: React.ReactElement<UseIconProps>;
}

export const AvoidWidowIcon = ({
  children: icon,
  iconPosition,
  space = 'xxsmall',
  className,
}: Props) => (
  <Box
    component="span"
    paddingRight={iconPosition === 'leading' ? space : undefined}
    paddingLeft={iconPosition === 'trailing' ? space : undefined}
    className={[styles.nowrap, className]}
    aria-hidden
  >
    {iconPosition === 'leading' ? icon : undefined}
    {/* Word joiner character, a zero-width non-breaking character to prevent the icon wrapping onto its own line */}
    &#8288;
    {iconPosition === 'trailing' ? icon : undefined}
  </Box>
);