@fluentui/react-checkbox 9.0.0-beta.5 → 9.0.0-beta.6

package/CHANGELOG.json

@@ -2,7 +2,156 @@
   "name": "@fluentui/react-checkbox",
   "entries": [
     {
-      "date": "Thu, 25 Nov 2021 08:31:31 GMT",
+      "date": "Thu, 10 Feb 2022 08:45:10 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.0-beta.6",
+      "version": "9.0.0-beta.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "0bc161458eae5ae8d387172430496ce9829b1bb1",
+            "comment": "Using ComponentSlotProps instead of ObjectShorthandProps."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
+            "comment": "Updating based on changes to composition types."
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "13ac915a4f18e5b9e79e14bdc239204872abf7f3",
+            "comment": "update styles to not use CSS shorthands"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
+            "comment": "Remove component's shorthandProps array"
+          },
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "839ec14849e112b85aa321d034739ec421199141",
+            "comment": "remove export of commons types"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "3e5027e2c8c8b54a2f9f140690bb88d03eafde27",
+            "comment": "Replace make-styles packages with griffel equivalents."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "38c8bed2c707014688ae2ae689033fa36ef23075",
+            "comment": "Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster."
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "d7d472d3564c7c08465743b2517e4f29428b87b4",
+            "comment": "Update checkmark icons and color styles to match visual spec"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "39bddb7a1da57bb1e7073c7eacabb706e25587a5",
+            "comment": "fix: update styles to match typings"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "b23239743c4f5518bcf7dcad496a36fc16bbd2e5",
+            "comment": "update @fluentui/react-icons package"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "ecca467a89869ec2812b160b26a7f68fa69dac10",
+            "comment": "Replacing use of functions in makeStyles with direct use of tokens."
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
+            "comment": "Bump Fluent UI dependencies to 9.0.0-rc"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
+            "comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "53b01d71e335715fda91b33e3d7bbd9d471d5ed3",
+            "comment": "Refactor component Slot typings"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "f1be0a9728e05ca33ad67e77ae7d1cba3384106f",
+            "comment": "Refactor Checkbox to use label as a slot instead of being the root"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.0.0-beta.5",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          }
+        ],
+        "none": [
+          {
+            "author": "tkrasniqi@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "401cdabeffb7985d88e5789faf75a93de1fb46f2",
+            "comment": "Migration to new dx: ts style config"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          },
+          {
+            "author": "bsunderhus@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "c0d4e63ee58e60e2c6674efbacc0783cd520984e",
+            "comment": "Updates components with nullRender changes"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 Nov 2021 08:34:13 GMT",
       "tag": "@fluentui/react-checkbox_v9.0.0-beta.5",
       "version": "9.0.0-beta.5",
       "comments": {
@@ -17,37 +166,37 @@
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
             "comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
             "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
             "comment": "Bump @fluentui/react-label to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
             "comment": "Bump @fluentui/react-tabster to v9.0.0-beta.5",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
             "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
             "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4",
-            "commit": "281e8820669214c1ffb9bc75e9b719a3b27fa9b6"
+            "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,23 +1,50 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Thu, 25 Nov 2021 08:31:31 GMT and should not be manually modified.
+This log was last generated on Thu, 10 Feb 2022 08:45:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.6)
+
+Thu, 10 Feb 2022 08:45:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.0-beta.5..@fluentui/react-checkbox_v9.0.0-beta.6)
+
+### Changes
+
+- Using ComponentSlotProps instead of ObjectShorthandProps. ([PR #20890](https://github.com/microsoft/fluentui/pull/20890) by Humberto.Morimoto@microsoft.com)
+- Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com)
+- update styles to not use CSS shorthands ([PR #20816](https://github.com/microsoft/fluentui/pull/20816) by olfedias@microsoft.com)
+- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
+- remove export of commons types ([PR #21660](https://github.com/microsoft/fluentui/pull/21660) by mgodbolt@microsoft.com)
+- Replace make-styles packages with griffel equivalents. ([PR #21435](https://github.com/microsoft/fluentui/pull/21435) by olfedias@microsoft.com)
+- Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster. ([PR #21035](https://github.com/microsoft/fluentui/pull/21035) by Humberto.Morimoto@microsoft.com)
+- Update checkmark icons and color styles to match visual spec ([PR #21011](https://github.com/microsoft/fluentui/pull/21011) by behowell@microsoft.com)
+- fix: update styles to match typings ([PR #20539](https://github.com/microsoft/fluentui/pull/20539) by olfedias@microsoft.com)
+- update @fluentui/react-icons package ([PR #21498](https://github.com/microsoft/fluentui/pull/21498) by olfedias@microsoft.com)
+- Replacing use of functions in makeStyles with direct use of tokens. ([PR #21041](https://github.com/microsoft/fluentui/pull/21041) by Humberto.Morimoto@microsoft.com)
+- Bump Fluent UI dependencies to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
+- BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
+- Refactor component Slot typings ([PR #21518](https://github.com/microsoft/fluentui/pull/21518) by behowell@microsoft.com)
+- Refactor Checkbox to use label as a slot instead of being the root ([PR #20904](https://github.com/microsoft/fluentui/pull/20904) by behowell@microsoft.com)
+- Bump @fluentui/react-label to v9.0.0-beta.5 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
+
 ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.5)
 
-Thu, 25 Nov 2021 08:31:31 GMT 
+Thu, 25 Nov 2021 08:34:13 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.0-beta.4..@fluentui/react-checkbox_v9.0.0-beta.5)
 
 ### Changes
 
 - Implement primary slot: 'input' is now the primary slot and receives native props passed to Checkbox ([PR #20617](https://github.com/microsoft/fluentui/pull/20617) by behowell@microsoft.com)
-- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-label to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-tabster to v9.0.0-beta.5 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20609](https://github.com/microsoft/fluentui/pull/20609) by beachball)
+- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-label to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-beta.5 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
 
 ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.4)
 

package/Spec.md

@@ -2,7 +2,8 @@
 
 ## Background
 
-Checkboxes are used to represent one or more options, giving the user a way to select one or more of these options.
+Checkboxes give people a way to select one or more items from a group, or switch between
+two mutually exclusive options (checked or unchecked).
 
 ## Prior Art
 
@@ -124,98 +125,21 @@ Component props:
 
 ### Checkbox Props
 
-```tsx
-/**
- * Checkbox Props
- */
-export interface CheckboxProps
-  extends Omit<ComponentPropsCompat, 'children'>,
-    Omit<React.HTMLAttributes<HTMLElement>, 'defaultChecked'> {
-  /**
-   * Label that will be rendered next to the input.
-   */
-  label?: ShorthandProps<LabelProps>;
-
-  /**
-   * Indicator to be rendered as the checkbox icon.
-   */
-  indicator?: ShorthandProps<ComponentPropsCompat>;
-
-  /**
-   * Hidden input that handles the checkbox's functionality.
-   */
-  input?: ShorthandProps<React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement> }>;
-
-  /**
-   * Disabled state of the checkbox.
-   */
-  disabled?: boolean;
-
-  /**
-   * Required state of the checkbox.
-   */
-  required?: boolean;
-
-  /**
-   * A checkbox can be rendered with a circular shape.
-   */
-  circular?: boolean;
-
-  /**
-   * A checkbox's state can be controlled.
-   * @defaultvalue false
-   */
-  checked?: 'mixed' | boolean;
-
-  /**
-   * Whether the checkbox should be rendered as checked by default.
-   */
-  defaultChecked?: 'mixed' | boolean;
-
-  /**
-   * Checkbox supports two different checkbox sizes.
-   * @defaultvalue 'medium'
-   */
-  size?: 'medium' | 'large';
-
-  /**
-   * Determines whether the label should be positioned before or after the checkbox.
-   * @defaultvalue 'after'
-   */
-  labelPosition?: 'before' | 'after';
-
-  /**
-   * ID of the root element that wraps the checkbox and label.
-   */
-  rootId?: string;
-
-  /**
-   * ID of the native element that represents the checkbox.
-   */
-  id?: string;
-
-  /**
-   * Callback to be called when the checked state value changes.
-   */
-  onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, data?: CheckboxOnChangeData) => void;
-}
-
-/**
- * Data for the onChange event for checkbox.
- */
-export interface CheckboxOnChangeData {
-  checked?: 'mixed' | boolean;
-}
-```
+See [Checkbox.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-checkbox/src/components/Checkbox/Checkbox.types.ts)
 
 ## Structure
 
-- The icon that will be used to represent the Checkbox's state is a slot to allow customization of the icons. This means that if a user were to customize the icons that will appear, the user will have to handle both icons based on the state.
-- The input element will be a slot to allow for customization.
+### Slots
+
+- `root`: Outermost `<span>` that contains the rest of the slots
+- `input`: The HTML `<input type="checkbox">`. This is the **primary** slot: it receives all of the native props passed to the
+  Checkbox component. It has opacity 0 and overlaps the entire `root` slot, for hit testing.
+- `indicator`: A `<div>` that is the visual representation of the check "box". Its child is the checkmark icon.
+- `label`: (optional) The `<label>` describing this checkbox.
 
 ### **Public**
 
-```html
+```jsx
 <Checkbox label="Example Checkbox" />
 ```
 
@@ -223,31 +147,23 @@ export interface CheckboxOnChangeData {
 
 ```tsx
 <slots.root {...slotProps.root}>
-  {state.labelPosition === 'start' && <slots.label {...slotProps.label} />}
-  <div className={state.checkboxClassName}>
-    <slots.indicator {...slotProps.indicator} />
-    <slots.input {...slotProps.input} />
-  </div>
-  {state.labelPosition === 'end' && <slots.label {...slotProps.label} />}
+  {state.labelPosition === 'before' && <slots.label {...slotProps.label} />}
+  <slots.indicator {...slotProps.indicator} />
+  <slots.input {...slotProps.input} />
+  {state.labelPosition === 'after' && <slots.label {...slotProps.label} />}
 </slots.root>
 ```
 
 ### **DOM**
 
-In this case, the label position is set to end as per default.
-
 ```html
-<div {/* Root Element */}>
-  <div {/* Checkbox */}>
-    <div {/* indicator */}>
-      ...indicator
-    </div>
-    <input id="cbox-1" ...props />
+<span class="fui-Checkbox root">
+  <div aria-hidden="true" class="indicator">
+    <CheckmarkRegular />
   </div>
-  <label for="cbox-1" ...props>
-    Example Checkbox
-  </label>
-</div>
+  <input type="checkbox" id="checkbox-1" class="input" />
+  <label for="checkbox-1" className="label">Example Checkbox</label>
+</span>
 ```
 
 ## Migration
@@ -256,17 +172,11 @@ See [MIGRATION.md](MIGRATION.md)
 
 ## Behaviors
 
-- Keyboard
-  - When checkbox is focused, if `space` is pressed the checkbox's state is toggled.
-- Cursor
-  - When clicked the checkbox's state is toggled.
-- Focus
-  - A checkbox can be focused to interact with it using `space`.
-  - In case of a label having a link or information button, items inside the label may be focused.
+- Checkbox inherits all of its mouse and keyboard behaviors from the native `<input type="checkbox">`. It has no special handling of clicks or keypresses for toggling beyond the native control.
+- In case of a label having a link or information button, items inside the label may be focused.
 
 ## Accessibility
 
 - Aria design pattern: [Checkbox](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox).
-- If a label is used with the checkbox, an `aria-label` will be set on the `input` element.
-- Checkbox will have a tri-state `aria-checked`.
-- Elements inside the checkbox's label can be focused if there are elements such as links and info buttons.
+- Checkbox uses a standard HTML `<input type="checkbox">` and does not require any additional aria attributes on the input element.
+- The checkmark indicator has `aria-hidden="true"`, as it is purely a visual representation of the state of the underlying input.

package/dist/react-checkbox.d.ts

@@ -1,23 +1,26 @@
 import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import { LabelProps } from '@fluentui/react-label';
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
+import { Slot } from '@fluentui/react-utilities';
 
 /**
- * A Checkbox component provides a way to represent options that can be selected
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
  */
 export declare const Checkbox: ForwardRefComponent<CheckboxProps>;
 
 export declare const checkboxClassName = "fui-Checkbox";
 
-export declare interface CheckboxCommons {
+declare interface CheckboxCommons {
     /**
-     * A checkbox can be rendered with a circular shape.
+     * Whether to render the checkbox in a circular shape instead of square.
+     * This variant is only recommended to be used in a tasks-style UI (checklist),
+     * since it otherwise could be confused for a `RadioItem`.
+     * @defaultvalue false
      */
-    circular: boolean | undefined;
+    circular: boolean;
     /**
      * A checkbox's state can be controlled.
      * @defaultvalue false
@@ -25,19 +28,14 @@ export declare interface CheckboxCommons {
     checked: 'mixed' | boolean;
     /**
      * Checkbox supports two different checkbox sizes.
-     * @defaultvalue 'medium'
+     * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
      * Determines whether the label should be positioned before or after the checkbox.
-     * @defaultvalue 'after'
+     * @defaultvalue after
      */
     labelPosition: 'before' | 'after';
-    /**
-     * Field required to pass className to container instead of input
-     * this will be solved by https://github.com/microsoft/fluentui/pull/18983
-     */
-    containerClassName?: string;
 }
 
 /**
@@ -50,7 +48,11 @@ export declare interface CheckboxOnChangeData {
 /**
  * Checkbox Props
  */
-export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>, 'size' | 'checked' | 'defaultChecked'> & Partial<CheckboxCommons> & {
+export declare type CheckboxProps = Omit<ComponentProps<Partial<CheckboxSlots>, 'input'>, 'size' | 'checked' | 'defaultChecked' | 'onChange'> & Partial<CheckboxCommons> & {
+    /**
+     * Checkboxes don't support children. To add a label, use the `label` prop.
+     */
+    children?: never;
     /**
      * Callback to be called when the checked state value changes.
      */
@@ -63,48 +65,50 @@ export declare type CheckboxProps = Omit<ComponentProps<CheckboxSlots, 'input'>,
 
 export declare type CheckboxSlots = {
     /**
-     * The root element of the checkbox is its `<label>`.
+     * The root element of the Checkbox.
      *
      * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.
      * All other native props will be applied to the primary slot: `input`
      */
-    root: ObjectShorthandProps<LabelProps> | IntrinsicShorthandProps<'span'>;
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The Checkbox's label.
+     */
+    label?: Slot<typeof Label>;
     /**
      * Hidden input that handles the checkbox's functionality.
      *
      * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,
      * except `className` and `style`, which remain on the root slot.
      */
-    input: IntrinsicShorthandProps<'input'>;
+    input: NonNullable<Slot<'input'>>;
     /**
      * Renders the checkbox, with the checkmark icon as its child when checked.
      */
-    indicator: IntrinsicShorthandProps<'div'>;
+    indicator: Slot<'div'>;
 };
 
 /**
  * State used in rendering Checkbox
  */
-export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons & {
-    hasLabel: boolean;
-};
+export declare type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;
 
-export declare const renderCheckbox: (state: CheckboxState) => JSX.Element;
+export declare const renderCheckbox_unstable: (state: CheckboxState) => JSX.Element;
 
 /**
  * Create the state required to render Checkbox.
  *
- * The returned state can be modified with hooks such as useCheckboxStyles,
- * before being passed to renderCheckbox.
+ * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+ * before being passed to renderCheckbox_unstable.
  *
  * @param props - props from this instance of Checkbox
  * @param ref - reference to `<input>` element of Checkbox
  */
-export declare const useCheckbox: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
+export declare const useCheckbox_unstable: (props: CheckboxProps, ref: React_2.Ref<HTMLInputElement>) => CheckboxState;
 
 /**
  * Apply styling to the Checkbox slots based on the state
  */
-export declare const useCheckboxStyles: (state: CheckboxState) => CheckboxState;
+export declare const useCheckboxStyles_unstable: (state: CheckboxState) => CheckboxState;
 
 export { }

package/lib/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import type { CheckboxProps } from './Checkbox.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * A Checkbox component provides a way to represent options that can be selected
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
  */
 export declare const Checkbox: ForwardRefComponent<CheckboxProps>;

package/lib/components/Checkbox/Checkbox.js

@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { useCheckbox } from './useCheckbox';
-import { renderCheckbox } from './renderCheckbox';
-import { useCheckboxStyles } from './useCheckboxStyles';
+import { useCheckbox_unstable } from './useCheckbox';
+import { renderCheckbox_unstable } from './renderCheckbox';
+import { useCheckboxStyles_unstable } from './useCheckboxStyles';
 /**
- * A Checkbox component provides a way to represent options that can be selected
+ * Checkboxes give people a way to select one or more items from a group,
+ * or switch between two mutually exclusive options (checked or unchecked).
  */
-export const Checkbox = React.forwardRef((props, ref) => {
-    const state = useCheckbox(props, ref);
-    useCheckboxStyles(state);
-    return renderCheckbox(state);
+
+export const Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCheckbox_unstable(props, ref);
+  useCheckboxStyles_unstable(state);
+  return renderCheckbox_unstable(state);
 });
 Checkbox.displayName = 'Checkbox';
 //# sourceMappingURL=Checkbox.js.map

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEtC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACzB,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;;AAGG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;AAEA,EAAA,0BAA0B,CAAC,KAAD,CAA1B;AACA,SAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourceRoot":""}