TextLink: Default to weak inside secondary tone
Align the secondary tone with other non-neutral text tones, making the foreground color of links inherit the tone of the wrapping Text component.
EXAMPLE USAGE:
In the following example the TextLink will now follow the secondary tone from the wrapping Text component:
<Text tone="secondary"> <TextLink href="#">Link</TextLink> </Text>
Previously this would have retained the default link colour from the theme.
Improve virtual touch target positioning for narrow elements
To maintain accessibility for smaller interactive elements, Braid uses a virtual touch target to maintain the minimum hit area. This change ensures that the virtual element is always centered to the visual target, in particular when the width of the visual target is narrower than the minimum hit area.
TextLink, TextLinkButton: Ensure consistent underline thickness on weak links
A subtle bug affecting weak links was resulting in a change in underline thickness on hover. This bug has been fixed such that weak links now always have the same underline thickness regardless of hover state.
TextLink, TextLinkButton: Underline regular links in non-legacy themes
To improve affordance beyond primarily being colour, a TextLink (and TextLinkButton) will now always be underlined, in line with best practice accessibility guidelines.
Given this has not been the case previously, this decision has been applied to non-legacy themes only, as such only affecting consumers of seekJobs, docs and wireframe.
TextLink, TextLinkButton: Apply themed focus outline
Apply a focus outline using the relevant focus attributes from the theme, bringing TextLink (and TextLinkButton) into line with the focus treatment applied to rest of the system.
TextLink, TextLinkButton: Reduce weak links to regular font weight
The font weight of a weak link is now reduced to regular weight, reducing the link's visual prominence in addition to following the neutral text colour.
seekJobs: Change link colour to neutral
Changing the foregroundColor token for link on the seekJobs theme to align with neutral text.
Our different approach to using colour has seen links dialled back to compete less with other messaging and CTAs.
This affects the following usages across the system:
vars.foregroundColor.linkText (using tone="link")TextLink and (TextLinkButton)Button, TextLinkButton: Add aria-label support
Provide support for aria-label, enabling additional context to be given to assistive technologies where context is typically visual.
EXAMPLE USAGE:
<Button aria-label="Save job">Save</Button>
TextLink, TextLinkButton: Improve underline position for wrapping text
Refine the underline position to be consistent across the whole typographic hierarchy, ensuring it does not interfere with wrapping lines of text.
TextLink, TextLinkButton: Update underline design
Uplift the design of the the text underline used on TextLink and TextLinkButton components.
TextLink, TextLinkButton: Increase text weight of weak links
Increases the text weight of weak links to medium, increasing the affordance against standard text.
As a result, this makes the weight of all text links consistent.
Button, ButtonLink, TextLink, TextLinkButton: Add support for trailing icons
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>
TextLink, TextLinkButton: Add icon support
Provides a designed slot for adding an icon to a TextLink or TextLinkButton.
This solves for the problem of underlining the space between the icon and text.
EXAMPLE USAGE:
<Text> <TextLink icon={<IconLink />}>...</TextLink> </Text>
Support data attribute boolean values
The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.
EXAMPLE USAGE:
<Component data={{ 'custom-attribute': true, }} /> // => <div data-custom-attribute="true" />
TextLink, TextLinkButton: Remove support inside Actions component
Removing support for TextLink and TextLinkButton components inside of Actions. This was previously deprecated back in v29.26.0 in favour of using the transparent variant of ButtonLink.
MIGRATION GUIDE
<Actions> <Button>...</Button> - <TextLink href="...">...</TextLink> + <ButtonLink href="..." variant="transparent">...</ButtonLink> </Actions>
TextLinkButton: Add support for tabIndex
Buttons, Fields, TextLinks, Toggle: Use span for field state overlays instead of div
Produce more valid HTML as div elements are not as flexible with which elements they can be inside (from a validators perspective).
TextLink, TextLinkButton, TextLinkRenderer: Scope deprecation warning to only be in Actions context.
TextLink,TextLinkButton: Deprecate inside of Actions in favour of transparent Button
Usage of TextLink or TextLinkButton inside of an Actions container should now use a Button with a variant of transparent.
Previously when a TextLink or TextLinkButton was placed inside of an Actions container, it would be given a custom layout to align with the Button elements. We are deprecating this behaviour.
MIGRATION GUIDE:
Going forward Actions should only contain Button elements. To migrate towards this, both TextLink and TextLinkButton should now use either a ButtonLink or Button respectively, with a variant or transparent.
<Actions> <Button>...</Button> - <TextLink href="...">...</TextLink> + <ButtonLink href="..." variant="transparent">...</ButtonLink> </Actions>
<Actions> <Button>...</Button> - <TextLinkButton onClick={...}>...</TextLinkButton> + <Button onClick={...} variant="transparent">...</Button> </Actions>
TextLink, TextLinkButton, TextLinkRenderer: Default weight prop to "regular" when nested inside secondary text
As of v28.13.0, TextLink components that were nested inside secondary text would be "weak" by default, i.e. the same tone as the surrounding text and underlined. In practice, this turned out to be somewhat unpredictable behaviour for consumers. We've now reverted this to the previous behaviour of being "regular" weight by default, i.e. blue and medium font weight.
Note that, if needed, you can still use the weaker link treatment within secondary text via an explicit prop override:
<Text tone="secondary"> The TextLink in this sentence is{' '} <TextLink href="..." weight="weak"> weak. </TextLink> </Text>
TextLink, TextLinkButton: Add weight prop, add weak weight variant
You can now render links that are underlined while inheriting the tone and weight of its surrounding text.
EXAMPLE USAGE
<Text> This sentence contains a{' '} <TextLink href="..." weight="weak"> weak TextLink. </TextLink> </Text>
TextLinkButton: Pass click event object to onClick handler
The onClick handler was previously called without any arguments. We now pass the click event object through as expected.
TextLinkButton: Add aria-controls, aria-describedby and aria-expanded props
Add TextLinkButton component
Allows you to render a semantic button that looks like a TextLink.
This component renders a native span element with an ARIA role of button so that, unlike a standard button element, text can wrap across multiple lines.