diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 9a39376849dc4..d9e8c6ffe026f 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -28,6 +28,7 @@
"@fluentui/react-badge": "9.0.0-beta.4",
"@fluentui/react-button": "9.0.0-beta.5",
"@fluentui/react-card": "9.0.0-beta.5",
+ "@fluentui/react-checkbox": "^9.0.0-beta.5",
"@fluentui/react-divider": "9.0.0-beta.4",
"@fluentui/react-experiments": "^8.4.9",
"@fluentui/react-hooks": "^8.3.8",
diff --git a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx
new file mode 100644
index 0000000000000..31acf77e8b089
--- /dev/null
+++ b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import Screener, { Steps } from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
+
+storiesOf('Checkbox Converged', module)
+ .addDecorator(TestWrapperDecoratorFixedWidth)
+ .addDecorator(story => (
+
+ {story()}
+
+ ))
+ .addStory('unchecked', () => )
+ .addStory('checked', () => )
+ .addStory('mixed', () => )
+ .addStory('disabled', () => );
+
+storiesOf('Checkbox Converged', module)
+ .addDecorator(story => (
+
+ {story()}
+
+ ))
+ .addStory('disabled+checked', () => )
+ .addStory('disabled+mixed', () => )
+ .addStory('no-label', () => )
+ .addStory('label-before', () => )
+ .addStory('label-wrapping', () => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua
+
+ }
+ />
+ ))
+ .addStory('required', () => )
+ .addStory('required+label-before', () => (
+
+ ))
+ .addStory('circular', () => )
+ .addStory('circular+checked', () => )
+ .addStory('circular+mixed', () => )
+ //
+ // large variants
+ //
+ .addStory('large', () => )
+ .addStory('large+checked', () => )
+ .addStory('large+mixed', () => )
+ .addStory('large+circular', () => )
+ .addStory('large+circular+checked', () => (
+
+ ))
+ .addStory('large+circular+mixed', () => (
+
+ ))
+ .addStory('large+label-wrapping', () => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua
+
+ }
+ />
+ ));
diff --git a/change/@fluentui-react-checkbox-5fb1f1da-596a-44e5-bd25-897803e97979.json b/change/@fluentui-react-checkbox-5fb1f1da-596a-44e5-bd25-897803e97979.json
new file mode 100644
index 0000000000000..05ddc58042963
--- /dev/null
+++ b/change/@fluentui-react-checkbox-5fb1f1da-596a-44e5-bd25-897803e97979.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "Update checkmark icons and color styles to match visual spec",
+ "packageName": "@fluentui/react-checkbox",
+ "email": "behowell@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-checkbox/package.json b/packages/react-checkbox/package.json
index 7730f10fb9fdd..eab923a656452 100644
--- a/packages/react-checkbox/package.json
+++ b/packages/react-checkbox/package.json
@@ -43,10 +43,11 @@
"@fluentui/babel-make-styles": "9.0.0-beta.4"
},
"dependencies": {
- "@fluentui/react-make-styles": "9.0.0-beta.4",
- "@fluentui/react-utilities": "9.0.0-beta.4",
+ "@fluentui/react-icons": "^2.0.154-beta.5",
"@fluentui/react-label": "9.0.0-beta.4",
+ "@fluentui/react-make-styles": "9.0.0-beta.4",
"@fluentui/react-tabster": "9.0.0-beta.5",
+ "@fluentui/react-utilities": "9.0.0-beta.4",
"tslib": "^2.1.0"
},
"peerDependencies": {
diff --git a/packages/react-checkbox/src/components/Checkbox/DefaultIcons.tsx b/packages/react-checkbox/src/components/Checkbox/DefaultIcons.tsx
deleted file mode 100644
index f3801f31e1959..0000000000000
--- a/packages/react-checkbox/src/components/Checkbox/DefaultIcons.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-export const Mixed12Regular = () => (
-
-);
-
-export const Mixed16Regular = () => (
-
-);
-
-export const Checkmark12Regular = () => (
-
-);
-
-export const Checkmark16Regular = () => (
-
-);
diff --git a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 076b3b3afa4cf..2db8c78d58eed 100644
--- a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -38,13 +38,16 @@ exports[`Checkbox renders a default state 1`] = `
class="fui-Checkbox-indicator"
>
@@ -67,13 +70,16 @@ exports[`Checkbox renders checked 1`] = `
class="fui-Checkbox-indicator"
>
@@ -103,17 +109,16 @@ exports[`Checkbox renders mixed 1`] = `
class="fui-Checkbox-indicator"
>
@@ -142,13 +147,16 @@ exports[`Checkbox renders with a label 1`] = `
class="fui-Checkbox-indicator"
>
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx b/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx
index 5b48ae8e66ac3..dbaaf7200dacf 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx
@@ -9,7 +9,14 @@ import {
useMergedRefs,
} from '@fluentui/react-utilities';
import { CheckboxProps, CheckboxState } from './Checkbox.types';
-import { Mixed12Regular, Mixed16Regular, Checkmark12Regular, Checkmark16Regular } from './DefaultIcons';
+import {
+ Checkmark12Filled,
+ Checkmark16Filled,
+ Square12Filled,
+ Square16Filled,
+ Circle12Filled,
+ Circle16Filled,
+} from '@fluentui/react-icons';
import { Label } from '@fluentui/react-label';
/**
@@ -36,8 +43,20 @@ export const useCheckbox = (props: CheckboxProps, ref: React.Ref : ;
+ } else {
+ checkmarkIcon = size === 'large' ? : ;
+ }
+ } else {
+ checkmarkIcon = size === 'large' ? : ;
+ }
+
const state: CheckboxState = {
circular,
checked,
@@ -76,18 +95,7 @@ export const useCheckbox = (props: CheckboxProps, ref: React.Ref
- ) : (
-
- )
- ) : checked === 'mixed' ? (
-
- ) : (
-
- ),
+ children: checkmarkIcon,
},
}),
};
@@ -106,12 +114,11 @@ export const useCheckbox = (props: CheckboxProps, ref: React.Ref element's checked and indeterminate properties based on our tri-state property.
// Since indeterminate can only be set via javascript, it has to be done in a layout effect.
- const indeterminate = checked === 'mixed';
useIsomorphicLayoutEffect(() => {
if (inputRef.current) {
- inputRef.current.indeterminate = indeterminate;
+ inputRef.current.indeterminate = mixed;
}
- }, [inputRef, indeterminate]);
+ }, [inputRef, mixed]);
return state;
};
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 78c53f3c6cf8b..6c4807c0bf536 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -46,7 +46,7 @@ const useRootStyles = makeStyles({
},
},
- ':active': {
+ ':active:hover': {
color: theme.colorNeutralForeground1,
[`& .${indicatorClassName}`]: {
borderColor: theme.colorNeutralStrokeAccessiblePressed,
@@ -59,18 +59,20 @@ const useRootStyles = makeStyles({
[`& .${indicatorClassName}`]: {
backgroundColor: theme.colorCompoundBrandBackground,
color: theme.colorNeutralForegroundOnBrand,
- borderColor: theme.colorBrandBackground,
+ borderColor: theme.colorCompoundBrandBackground,
},
- ':active': {
+ ':hover': {
[`& .${indicatorClassName}`]: {
- backgroundColor: theme.colorCompoundBrandBackgroundPressed,
+ backgroundColor: theme.colorCompoundBrandBackgroundHover,
+ borderColor: theme.colorCompoundBrandBackgroundHover,
},
},
- ':hover': {
+ ':active:hover': {
[`& .${indicatorClassName}`]: {
- backgroundColor: theme.colorCompoundBrandBackgroundHover,
+ backgroundColor: theme.colorCompoundBrandBackgroundPressed,
+ borderColor: theme.colorCompoundBrandBackgroundPressed,
},
},
}),
@@ -82,17 +84,17 @@ const useRootStyles = makeStyles({
color: theme.colorCompoundBrandForeground1,
},
- ':active': {
+ ':hover': {
[`& .${indicatorClassName}`]: {
- borderColor: theme.colorCompoundBrandStrokePressed,
- color: theme.colorCompoundBrandForeground1Pressed,
+ borderColor: theme.colorCompoundBrandStrokeHover,
+ color: theme.colorCompoundBrandForeground1Hover,
},
},
- ':hover': {
+ ':active:hover': {
[`& .${indicatorClassName}`]: {
- borderColor: theme.colorCompoundBrandStrokeHover,
- color: theme.colorCompoundBrandForeground1Hover,
+ borderColor: theme.colorCompoundBrandStrokePressed,
+ color: theme.colorCompoundBrandForeground1Pressed,
},
},
}),
@@ -102,7 +104,6 @@ const useRootStyles = makeStyles({
[`& .${indicatorClassName}`]: {
borderColor: theme.colorNeutralStrokeDisabled,
color: theme.colorNeutralForegroundDisabled,
- backgroundColor: theme.colorNeutralBackground1,
},
}),
});
@@ -187,7 +188,7 @@ export const useCheckboxStyles = (state: CheckboxState): CheckboxState => {
rootStyles.base,
rootStyles.focusIndicator,
state.input.disabled && rootStyles.disabled,
- // Use exactly one of the color classes, depending on `disabled` and `checked`
+ // Pick exactly one of the color classes, based on `disabled` and `checked`
state.input.disabled
? rootStyles.disabledColors
: state.checked === 'mixed'