From 59df04313458c8e38ff434deacaf9131828fe998 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Thu, 26 Sep 2024 10:48:18 +0200 Subject: [PATCH] fix(Link): remove flexbox allowing text to break (#4274) --- .changeset/itchy-planes-sip.md | 5 + .../Alert/__stories__/Link.stories.tsx | 34 ++- .../__snapshots__/index.test.tsx.snap | 12 +- .../__snapshots__/index.test.tsx.snap | 44 ---- .../__snapshots__/index.test.tsx.snap | 12 +- .../__snapshots__/index.test.tsx.snap | 11 - .../Link/__stories__/Examples.stories.tsx | 44 ++++ .../Link/__stories__/index.stories.tsx | 1 + .../__snapshots__/index.test.tsx.snap | 245 +----------------- packages/ui/src/components/Link/index.tsx | 7 +- .../__snapshots__/index.test.tsx.snap | 11 - .../__snapshots__/index.test.tsx.snap | 11 - 12 files changed, 79 insertions(+), 358 deletions(-) create mode 100644 .changeset/itchy-planes-sip.md create mode 100644 packages/ui/src/components/Link/__stories__/Examples.stories.tsx diff --git a/.changeset/itchy-planes-sip.md b/.changeset/itchy-planes-sip.md new file mode 100644 index 0000000000..696e0a9f92 --- /dev/null +++ b/.changeset/itchy-planes-sip.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +Fix `` component not to be flexbox allowing the text to break diff --git a/packages/ui/src/components/Alert/__stories__/Link.stories.tsx b/packages/ui/src/components/Alert/__stories__/Link.stories.tsx index 39a918267f..198b229d35 100644 --- a/packages/ui/src/components/Alert/__stories__/Link.stories.tsx +++ b/packages/ui/src/components/Alert/__stories__/Link.stories.tsx @@ -1,19 +1,27 @@ +import { Alert } from '..' import { Link as UVLink } from '../../Link' import { Stack } from '../../Stack' -import { Template } from './Template.stories' -export const Link = Template.bind({}) - -Link.args = { - sentiment: 'info', - title: 'Information', - children: ( - -

You cannot create a ressource here

- Read more - - ), -} +export const Link = () => ( + + + +

You cannot create a ressource here

+ Read more + + + +

+ You cannot create a ressource here If you believe this is an error,{' '} + + contact support for further assistance this is an error + + . Additionally, ensure that you have the necessary permissions to access + this resource. +

+ + +) Link.parameters = { docs: { diff --git a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap index d43297fe8d..7e6a544f20 100644 --- a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap @@ -508,17 +508,6 @@ exports[`Banner > renders correctly with a link 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -593,6 +582,7 @@ exports[`Banner > renders correctly with a link 1`] = ` width: 14px; min-width: 14px; min-height: 14px; + margin-left: 8px; } .emotion-19 .fillStroke { diff --git a/packages/ui/src/components/Breadcrumbs/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Breadcrumbs/__tests__/__snapshots__/index.test.tsx.snap index 6f4a41638e..fbab9d5ffe 100644 --- a/packages/ui/src/components/Breadcrumbs/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Breadcrumbs/__tests__/__snapshots__/index.test.tsx.snap @@ -43,17 +43,6 @@ exports[`Breadcrumbs > renders correctly with default values 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -289,17 +278,6 @@ exports[`Breadcrumbs > renders correctly with onClick 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -369,17 +347,6 @@ exports[`Breadcrumbs > renders correctly with onClick 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -548,17 +515,6 @@ exports[`Breadcrumbs > renders correctly with selected item 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; diff --git a/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.test.tsx.snap index 07dfc36d34..a06c3b15ce 100644 --- a/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/EmptyState/__tests__/__snapshots__/index.test.tsx.snap @@ -661,17 +661,6 @@ exports[`EmptySpace > should work with learn more 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -738,6 +727,7 @@ exports[`EmptySpace > should work with learn more 1`] = ` width: 16px; min-width: 16px; min-height: 16px; + margin-left: 8px; } .emotion-18 .fillStroke { diff --git a/packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap index 5886209514..8e28ba38b5 100644 --- a/packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/GlobalAlert/__tests__/__snapshots__/index.test.tsx.snap @@ -1527,17 +1527,6 @@ exports[`GlobalAlert > renders correctly with link 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; diff --git a/packages/ui/src/components/Link/__stories__/Examples.stories.tsx b/packages/ui/src/components/Link/__stories__/Examples.stories.tsx new file mode 100644 index 0000000000..d16a1235f2 --- /dev/null +++ b/packages/ui/src/components/Link/__stories__/Examples.stories.tsx @@ -0,0 +1,44 @@ +import type { Decorator } from '@storybook/react' +import type { ComponentProps } from 'react' +import { Link } from '..' +import { Stack } from '../../Stack' +import { Text } from '../../Text' + +export const Examples = (props: ComponentProps) => ( + <> + + To know more about that feature please visit{' '} + + our website + {' '} + that is available any time. + + + To know more about that feature please visit{' '} + + our website + {' '} + that is available any time. + + + To know more about that feature please visit{' '} + + our website + {' '} + that is available any time. + + +) + +Examples.decorators = [ + StoryComponent => ( + + + + ), +] satisfies Decorator[] diff --git a/packages/ui/src/components/Link/__stories__/index.stories.tsx b/packages/ui/src/components/Link/__stories__/index.stories.tsx index 9ff591c3cd..80afa27dd3 100644 --- a/packages/ui/src/components/Link/__stories__/index.stories.tsx +++ b/packages/ui/src/components/Link/__stories__/index.stories.tsx @@ -13,3 +13,4 @@ export { Target } from './Target.stories' export { Size } from './Size.stories' export { OneLine } from './OneLine.stories' export { Prominence } from './Prominence.stories' +export { Examples } from './Examples.stories' diff --git a/packages/ui/src/components/Link/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Link/__tests__/__snapshots__/index.test.tsx.snap index a74f792b08..323530ea97 100644 --- a/packages/ui/src/components/Link/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Link/__tests__/__snapshots__/index.test.tsx.snap @@ -12,17 +12,6 @@ exports[`Link > prominence > render prominence default 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -110,17 +99,6 @@ exports[`Link > prominence > render prominence strong 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -208,17 +186,6 @@ exports[`Link > prominence > render prominence stronger 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -306,17 +273,6 @@ exports[`Link > prominence > render prominence weak 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -404,17 +360,6 @@ exports[`Link > render correctly with bad sentiment 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -501,17 +446,6 @@ exports[`Link > render correctly with href props 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -598,17 +532,6 @@ exports[`Link > render correctly with href props 2`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -675,6 +598,7 @@ exports[`Link > render correctly with href props 2`] = ` width: 16px; min-width: 16px; min-height: 16px; + margin-left: 8px; } .emotion-3 .fillStroke { @@ -692,17 +616,6 @@ exports[`Link > render correctly with href props 2`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -777,6 +690,7 @@ exports[`Link > render correctly with href props 2`] = ` width: 14px; min-width: 14px; min-height: 14px; + margin-left: 8px; } .emotion-15 .fillStroke { @@ -901,17 +815,6 @@ exports[`Link > render correctly with no sentiment 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -998,17 +901,6 @@ exports[`Link > render correctly with oneLine 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1100,17 +992,6 @@ exports[`Link > render correctly with sizes 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1180,17 +1061,6 @@ exports[`Link > render correctly with sizes 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1260,17 +1130,6 @@ exports[`Link > render correctly with sizes 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1375,17 +1234,6 @@ exports[`Link > render correctly with target blank 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1460,6 +1308,7 @@ exports[`Link > render correctly with target blank 1`] = ` width: 14px; min-width: 14px; min-height: 14px; + margin-left: 8px; } .emotion-5 .fillStroke { @@ -1516,17 +1365,6 @@ exports[`Link > render correctly with variants props 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1621,17 +1459,6 @@ exports[`Link > sentiment > render danger 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1718,17 +1545,6 @@ exports[`Link > sentiment > render info 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1815,17 +1631,6 @@ exports[`Link > sentiment > render neutral 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -1912,17 +1717,6 @@ exports[`Link > sentiment > render primary 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -2009,17 +1803,6 @@ exports[`Link > sentiment > render secondary 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -2106,17 +1889,6 @@ exports[`Link > sentiment > render success 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; @@ -2203,17 +1975,6 @@ exports[`Link > sentiment > render warning 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; diff --git a/packages/ui/src/components/Link/index.tsx b/packages/ui/src/components/Link/index.tsx index 693e86bdac..a52f9e9188 100644 --- a/packages/ui/src/components/Link/index.tsx +++ b/packages/ui/src/components/Link/index.tsx @@ -14,7 +14,9 @@ import type { ExtendedColor } from '../../theme' import capitalize from '../../utils/capitalize' import { Tooltip } from '../Tooltip' -const StyledIcon = styled(Icon)`` +const StyledIcon = styled(Icon)` + margin-left: ${({ theme }) => theme.space['1']}; +` export const PROMINENCES = { default: '', @@ -85,9 +87,6 @@ const StyledLink = styled('a', { text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: inline-flex; - flex-direction: row; - align-items: center; transition: text-decoration-color ${TRANSITION_DURATION}ms ease-out; ${StyledIcon} { diff --git a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap index f4dab340a8..ba93734f12 100644 --- a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap @@ -3956,17 +3956,6 @@ exports[`Tabs > renders correctly with custom Tabs component 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px; diff --git a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap index 420a854539..1148e0ce84 100644 --- a/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Toaster/__tests__/__snapshots__/index.test.tsx.snap @@ -151,17 +151,6 @@ exports[`Toaster > components > renders correctly Toast.Link 1`] = ` text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: transparent; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -webkit-transition: text-decoration-color 250ms ease-out; transition: text-decoration-color 250ms ease-out; gap: 8px;