diff --git a/.changeset/nice-seals-decide.md b/.changeset/nice-seals-decide.md new file mode 100644 index 00000000000..9ff58a38114 --- /dev/null +++ b/.changeset/nice-seals-decide.md @@ -0,0 +1,5 @@ +--- +'@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 1b7f4b0a0b9..079155d935d 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": "Use `inline` instead.", + "deprecated": true }, { "name": "hoverColor", "type": "string", "defaultValue": "", - "description": "Color used when hovering over link" + "description": "Color used when hovering over the link." }, { "name": "ref", 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