diff --git a/common/changes/office-ui-fabric-react/features-disabled-link-pointer-events_2018-02-19-16-13.json b/common/changes/office-ui-fabric-react/features-disabled-link-pointer-events_2018-02-19-16-13.json new file mode 100644 index 0000000000000..17c7cacac5fb8 --- /dev/null +++ b/common/changes/office-ui-fabric-react/features-disabled-link-pointer-events_2018-02-19-16-13.json @@ -0,0 +1,9 @@ +{ + "changes": [{ + "packageName": "office-ui-fabric-react", + "comment": "Only apply 'pointer-events: none' to disabled Link components if there is an href ", + "type": "patch" + }], + "packageName": "office-ui-fabric-react", + "email": "cohoov@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts index 2fcca8da7bc8f..30464420d5d68 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts @@ -43,8 +43,14 @@ export const getStyles = (props: ILinkStyleProps): ILinkStyles => { 'is-disabled', { color: semanticColors.disabledText, - cursor: 'default', - pointerEvents: 'none' + cursor: 'default' + }, + { + selectors: { + '&:link, &:visited': { + pointerEvents: 'none' + } + } } ], !isDisabled && { diff --git a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap index ab56a5c038c8a..22b0992c34d45 100644 --- a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -144,7 +144,6 @@ exports[`Link renders disabled Link correctly 1`] = ` color: #a6a6a6; cursor: default; outline: transparent; - pointer-events: none; position: relative; text-decoration: none; } @@ -162,6 +161,9 @@ exports[`Link renders disabled Link correctly 1`] = ` top: 1px; z-index: 1; } + &:link, &:visited { + pointer-events: none; + } href="#" onClick={[Function]} target={undefined} @@ -193,7 +195,6 @@ exports[`Link renders disabled Link with no href as a button correctly 1`] = ` padding-left: 0px; padding-right: 0px; padding-top: 0px; - pointer-events: none; position: relative; text-align: left; text-overflow: inherit; @@ -215,6 +216,9 @@ exports[`Link renders disabled Link with no href as a button correctly 1`] = ` @media screen and (-ms-high-contrast: active){& { color: Highlight; } + &:link, &:visited { + pointer-events: none; + } disabled={true} onClick={[Function]} >