From ff5c740779d7db13b4d76c93c9582aa27c7e010f Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 8 Sep 2022 16:38:49 -0700 Subject: [PATCH 1/4] fix: Replacing bottom border styles with text decoration underline in Link. --- .../src/components/Link/useLinkStyles.ts | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts index dfad5ccba37a4..dc6abf6e320ba 100644 --- a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts +++ b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts @@ -10,7 +10,6 @@ export const linkClassNames: SlotClassNames = { const useStyles = makeStyles({ focusIndicator: createCustomFocusIndicatorStyle({ - borderBottomColor: 'transparent', textDecorationColor: tokens.colorStrokeFocus2, textDecorationLine: 'underline', textDecorationStyle: 'double', @@ -18,12 +17,7 @@ const useStyles = makeStyles({ // Common styles. root: { backgroundColor: 'transparent', - borderTopStyle: 'none', - borderLeftStyle: 'none', - borderRightStyle: 'none', - borderBottomColor: 'transparent', - borderBottomStyle: 'solid', - borderBottomWidth: tokens.strokeWidthThin, + ...shorthands.borderStyle('none'), boxSizing: 'border-box', color: tokens.colorBrandForegroundLink, cursor: 'pointer', @@ -35,17 +29,19 @@ const useStyles = makeStyles({ ...shorthands.padding(0), ...shorthands.overflow('inherit'), textAlign: 'left', - textDecorationLine: 'none', + textDecorationColor: 'transparent', + textDecorationLine: 'underline', + textDecorationThickness: tokens.strokeWidthThin, textOverflow: 'inherit', userSelect: 'text', ':hover': { - borderBottomColor: tokens.colorBrandForegroundLinkHover, + textDecorationColor: tokens.colorBrandForegroundLinkHover, color: tokens.colorBrandForegroundLinkHover, }, ':active': { - borderBottomColor: tokens.colorBrandForegroundLinkPressed, + textDecorationColor: tokens.colorBrandForegroundLinkPressed, color: tokens.colorBrandForegroundLinkPressed, }, }, @@ -58,18 +54,18 @@ const useStyles = makeStyles({ color: tokens.colorNeutralForeground2, ':hover': { - borderBottomColor: tokens.colorNeutralForeground2Hover, + textDecorationColor: tokens.colorNeutralForeground2Hover, color: tokens.colorNeutralForeground2Hover, }, ':active': { - borderBottomColor: tokens.colorNeutralForeground2Pressed, + textDecorationColor: tokens.colorNeutralForeground2Pressed, color: tokens.colorNeutralForeground2Pressed, }, }, // Overrides when the Link is rendered inline within text. inline: { - borderBottomColor: tokens.colorBrandForegroundLink, + textDecorationColor: tokens.colorBrandForegroundLink, }, // Overrides when the Link is rendered inline within text and appears subtle. inlineSubtle: { @@ -77,17 +73,17 @@ const useStyles = makeStyles({ }, // Overrides when the Link is disabled. disabled: { - borderBottomColor: 'transparent', + textDecorationColor: 'transparent', color: tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', ':hover': { - borderBottomColor: 'transparent', + textDecorationColor: 'transparent', color: tokens.colorNeutralForegroundDisabled, }, ':active': { - borderBottomColor: 'transparent', + textDecorationColor: 'transparent', color: tokens.colorNeutralForegroundDisabled, }, }, From 3873aec5655c7ffbba48c08a08aba89a3e80c84e Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 8 Sep 2022 16:41:12 -0700 Subject: [PATCH 2/4] Adding change file. --- ...ui-react-link-ace1a119-44f0-4cac-96a5-b757d4abee30.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-link-ace1a119-44f0-4cac-96a5-b757d4abee30.json diff --git a/change/@fluentui-react-link-ace1a119-44f0-4cac-96a5-b757d4abee30.json b/change/@fluentui-react-link-ace1a119-44f0-4cac-96a5-b757d4abee30.json new file mode 100644 index 0000000000000..caf8f3974fbdb --- /dev/null +++ b/change/@fluentui-react-link-ace1a119-44f0-4cac-96a5-b757d4abee30.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Replacing bottom border styles with text decoration underline.", + "packageName": "@fluentui/react-link", + "email": "humberto_makoto@hotmail.com", + "dependentChangeType": "patch" +} From 1b435873522133ebd03278a9a9239f006e7de382 Mon Sep 17 00:00:00 2001 From: Humberto Makoto Morimoto Burgos Date: Fri, 9 Sep 2022 10:25:35 -0700 Subject: [PATCH 3/4] Removing lingering border styles. --- .../react-link/src/components/Link/useLinkStyles.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts index dc6abf6e320ba..4a9625b58d0b9 100644 --- a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts +++ b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts @@ -17,7 +17,6 @@ const useStyles = makeStyles({ // Common styles. root: { backgroundColor: 'transparent', - ...shorthands.borderStyle('none'), boxSizing: 'border-box', color: tokens.colorBrandForegroundLink, cursor: 'pointer', @@ -69,7 +68,7 @@ const useStyles = makeStyles({ }, // Overrides when the Link is rendered inline within text and appears subtle. inlineSubtle: { - borderBottomColor: tokens.colorNeutralForeground2, + textDecorationColor: tokens.colorNeutralForeground2, }, // Overrides when the Link is disabled. disabled: { From 19ffa30f3f2c021a01965a89c06803063a998a66 Mon Sep 17 00:00:00 2001 From: Humberto Makoto Morimoto Burgos Date: Fri, 9 Sep 2022 17:00:32 -0700 Subject: [PATCH 4/4] Changing approch from changing textDecorationColor to chaging textDecorationLine for improved bundle size and performance. --- .../src/components/Link/useLinkStyles.ts | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts index 4a9625b58d0b9..15f343ed72a2f 100644 --- a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts +++ b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts @@ -28,22 +28,25 @@ const useStyles = makeStyles({ ...shorthands.padding(0), ...shorthands.overflow('inherit'), textAlign: 'left', - textDecorationColor: 'transparent', - textDecorationLine: 'underline', + textDecorationLine: 'none', textDecorationThickness: tokens.strokeWidthThin, textOverflow: 'inherit', userSelect: 'text', ':hover': { - textDecorationColor: tokens.colorBrandForegroundLinkHover, + textDecorationLine: 'underline', color: tokens.colorBrandForegroundLinkHover, }, ':active': { - textDecorationColor: tokens.colorBrandForegroundLinkPressed, + textDecorationLine: 'underline', color: tokens.colorBrandForegroundLinkPressed, }, }, + // Overrides when the Link renders as a button. + button: { + ...shorthands.borderStyle('none'), + }, // Overrides when an href is present so the Link renders as an anchor. href: { fontSize: 'inherit', @@ -53,36 +56,32 @@ const useStyles = makeStyles({ color: tokens.colorNeutralForeground2, ':hover': { - textDecorationColor: tokens.colorNeutralForeground2Hover, + textDecorationLine: 'underline', color: tokens.colorNeutralForeground2Hover, }, ':active': { - textDecorationColor: tokens.colorNeutralForeground2Pressed, + textDecorationLine: 'underline', color: tokens.colorNeutralForeground2Pressed, }, }, // Overrides when the Link is rendered inline within text. inline: { - textDecorationColor: tokens.colorBrandForegroundLink, - }, - // Overrides when the Link is rendered inline within text and appears subtle. - inlineSubtle: { - textDecorationColor: tokens.colorNeutralForeground2, + textDecorationLine: 'underline', }, // Overrides when the Link is disabled. disabled: { - textDecorationColor: 'transparent', + textDecorationLine: 'none', color: tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', ':hover': { - textDecorationColor: 'transparent', + textDecorationLine: 'none', color: tokens.colorNeutralForegroundDisabled, }, ':active': { - textDecorationColor: 'transparent', + textDecorationLine: 'none', color: tokens.colorNeutralForegroundDisabled, }, }, @@ -97,9 +96,9 @@ export const useLinkStyles_unstable = (state: LinkState): LinkState => { styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, + root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, inline && styles.inline, - appearance === 'subtle' && inline && styles.inlineSubtle, disabled && styles.disabled, state.root.className, );