From 9ac849aca8d593fcc17f30f6461175ceb9a51bc8 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Mon, 8 Jan 2024 18:22:50 +0100 Subject: [PATCH 1/5] Update Link inline prop description --- src/Link/Link.docs.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Link/Link.docs.json b/src/Link/Link.docs.json index 1b7f4b0a0b9..1a7623bcdc5 100644 --- a/src/Link/Link.docs.json +++ b/src/Link/Link.docs.json @@ -15,25 +15,26 @@ "name": "muted", "type": "boolean", "defaultValue": "false", - "description": "Uses a less prominent shade for Link color, and the default link shade on hover" + "description": "Uses a less prominent shade for Link color, and the default link shade on hover." }, { "name": "inline", "type": "boolean", "defaultValue": "false", - "description": "Tag link inside a text block" + "description": "Set to true for links adjacent to text, underlining them for clear visibility and improved accessibility." }, { "name": "underline", "type": "boolean", "defaultValue": "false", - "description": "Adds underline to the Link" + "description": "Adds underline to the Link", + "deprecated": true }, { "name": "hoverColor", "type": "string", "defaultValue": "", - "description": "Color used when hovering over link" + "description": "Color used when hovering over the link." }, { "name": "ref", From 9b53a27071f6d885ac5888b60e5954de89bae187 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Tue, 9 Jan 2024 09:37:21 +0100 Subject: [PATCH 2/5] Add changeset --- .changeset/nice-seals-decide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nice-seals-decide.md diff --git a/.changeset/nice-seals-decide.md b/.changeset/nice-seals-decide.md new file mode 100644 index 00000000000..78f8629ffb1 --- /dev/null +++ b/.changeset/nice-seals-decide.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Deprecate the `underline` property of the Link component in favor of the new `inline` property to better handle link visibility and accessibility when adjacent to text. From a916011c58e3a16d511dae13f5963b59584d93e6 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Tue, 9 Jan 2024 20:00:55 +0100 Subject: [PATCH 3/5] Additional deprecation notice --- .changeset/nice-seals-decide.md | 2 +- src/Link/Link.docs.json | 2 +- src/Link/Link.tsx | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.changeset/nice-seals-decide.md b/.changeset/nice-seals-decide.md index 78f8629ffb1..9ff58a38114 100644 --- a/.changeset/nice-seals-decide.md +++ b/.changeset/nice-seals-decide.md @@ -1,5 +1,5 @@ --- -'@primer/react': patch +'@primer/react': minor --- Deprecate the `underline` property of the Link component in favor of the new `inline` property to better handle link visibility and accessibility when adjacent to text. diff --git a/src/Link/Link.docs.json b/src/Link/Link.docs.json index 1a7623bcdc5..079155d935d 100644 --- a/src/Link/Link.docs.json +++ b/src/Link/Link.docs.json @@ -27,7 +27,7 @@ "name": "underline", "type": "boolean", "defaultValue": "false", - "description": "Adds underline to the Link", + "description": "Use `inline` instead.", "deprecated": true }, { diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx index fd7e6ba8e58..017e729b017 100644 --- a/src/Link/Link.tsx +++ b/src/Link/Link.tsx @@ -29,6 +29,7 @@ const StyledLink = styled.a` text-decoration: none; /* You can add one by setting underline={true} */ + /** @deprecated */ text-decoration: ${props => (props.underline ? 'underline' : undefined)}; /* Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute */ From bf7fd8a14b19310872e211db85a51938d049b732 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Thu, 11 Jan 2024 17:16:22 +0100 Subject: [PATCH 4/5] Update src/Link/Link.tsx Co-authored-by: Josh Black --- src/Link/Link.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx index 017e729b017..fd7e6ba8e58 100644 --- a/src/Link/Link.tsx +++ b/src/Link/Link.tsx @@ -29,7 +29,6 @@ const StyledLink = styled.a` text-decoration: none; /* You can add one by setting underline={true} */ - /** @deprecated */ text-decoration: ${props => (props.underline ? 'underline' : undefined)}; /* Inline links (inside a text block), however, should have underline based on accessibility setting set in data-attribute */ From ebdbed837efa86390582403404a9750e0c2f1818 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Thu, 11 Jan 2024 17:17:40 +0100 Subject: [PATCH 5/5] Add deprecation notice to type --- src/Link/Link.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx index fd7e6ba8e58..cfcceee57da 100644 --- a/src/Link/Link.tsx +++ b/src/Link/Link.tsx @@ -10,6 +10,7 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/po type StyledLinkProps = { hoverColor?: string muted?: boolean + /** @deprecated use `inline` to specify the type of link instead */ underline?: boolean // Link inside a text block inline?: boolean