RELATED CONTENT

Overview

Benefits

1. 1:1 parity design/development.
2. Simplified properties and usage
3. Better accessibility.

How to migrate

In most cases you should migrate to using the new Link component.

                                                        
                                                        
                                                            // Before
                                                        import { LinkDeprecated as Link } from '@mazeapp/ariane'
                                                        
                                                        <Link href={webappUrl} color="blue500">
                                                          go back to the homepage
                                                        </Link>
                                                        
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        import { Link } from '@mazeapp/ariane'
                                                        
                                                        <Link href={webappUrl}>
                                                          go back to the homepage
                                                        </Link>
                                                        
                                                            

If you are relying on an action (like a opening a dialog), it might be better to use a CTAButton or ActionButton

                                                        
                                                        
                                                            // Before
                                                        import { LinkDeprecated as Link } from '@mazeapp/ariane'
                                                        
                                                        <Link onClick={() => setModalOpen(true)} color={calloutColor.fg} underlined>
                                                          Show issues
                                                        </Link>
                                                        
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        import { ActionButton } from '@mazeapp/ariane'
                                                        
                                                        <ActionButton onClick={() => setModalOpen(true)}>
                                                          Show issues
                                                        </ActionButton>
                                                        
                                                        
                                                            

If you are using a Link component from a third party library like NextJS. Warp the Text component instead as it will recieve the href that is being passed to it.

                                                        
                                                        
                                                            // Before
                                                        import Link from 'next/link';
                                                        import { LinkDeprecated as Link } from '@mazeapp/ariane'
                                                        
                                                        <Link passHref href={webappUrl}>
                                                          <a onClick={() => trackEvent('BUTTON_CLICK', { name: 'open_projects_from_report' })}>
                                                            Example
                                                          </a>
                                                        </Link>
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        import Link from 'next/link';
                                                        import { Text } from '@mazeapp/ariane'
                                                        
                                                        <Link passHref href={webappUrl} onClick={() => trackEvent('BUTTON_CLICK', { name: 'open_projects_from_report' })}>
                                                          <Text>
                                                            Example
                                                          </Text>
                                                        </Link>
                                                        
                                                        
                                                            

Here are the prop changes that have occured:

color

The color prop should primarily be used with semantic colors.

fontSize

The fontSize prop has been removed. Instead rely on the type prop to set the font style.

fontWeight

The fontWeight prop has been removed, in most cases it should be okay to completely remove the font weight, let us know if you run into an issue.

openNewTab

The openNewTab prop has been removed, use the the `` prop instead.

underlined

The underlined prop has been removed, Link will automatically add link styles to itself.

variant

The variant prop has been remove, use the type prop instead.

Let Us Know

For cases where you are not easily able to migrate LinkDeprecated or it is missing a property you need, let us know in #design-system.