diff --git a/common/changes/office-ui-fabric-react/checkbox_2018-03-27-15-24.json b/common/changes/office-ui-fabric-react/checkbox_2018-03-27-15-24.json new file mode 100644 index 0000000000000..1e8405353de1b --- /dev/null +++ b/common/changes/office-ui-fabric-react/checkbox_2018-03-27-15-24.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Checkbox: label text should be selectable, but not the checkmark icons.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts index 3f737ccb6b64d..b1d8aebafba1f 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts @@ -48,7 +48,6 @@ export const getStyles = memoizeFunction(( alignItems: 'center', cursor: 'pointer', position: 'relative', - userSelect: 'none', textAlign: 'left' }, labelReversed: { @@ -73,6 +72,7 @@ export const getStyles = memoizeFunction(( transitionProperty: 'background, border, border-color', transitionDuration: MS_CHECKBOX_TRANSITION_DURATION, transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING, + userSelect: 'none', /* incase the icon is bigger than the box */ overflow: 'hidden' diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 01505cb4f7b2f..f4cc49943ab2c 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -76,7 +76,6 @@ exports[`Checkbox renders Checkbox correctly 1`] = ` margin-top: 0; position: relative; text-align: left; - user-select: none; } htmlFor="checkbox-0" > @@ -101,6 +100,7 @@ exports[`Checkbox renders Checkbox correctly 1`] = ` transition-duration: 200ms; transition-property: background, border, border-color; transition-timing-function: cubic-bezier(.4, 0, .23, 1); + user-select: none; width: 20px; } >