@fluentui/react-label - npm Package Compare versions

Comparing version 0.0.0-nightlyb8537fb52c20211129.1 to 0.0.0-nightlyb8663b78ad20220207.1

CHANGELOG.json

@@ -5,24 +5,60 @@ {
     {
-      "date": "Mon, 29 Nov 2021 04:13:47 GMT",
-      "tag": "@fluentui/react-label_v0.0.0-nightlyb8537fb52c20211129.1",
-      "version": "0.0.0-nightlyb8537fb52c20211129.1",
+      "date": "Mon, 07 Feb 2022 04:15:33 GMT",
+      "tag": "@fluentui/react-label_v0.0.0-nightlyb8663b78ad20220207.1",
+      "version": "0.0.0-nightlyb8663b78ad20220207.1",
       "comments": {
         "prerelease": [
           {
-            "author": "beachball",
+            "author": "email not defined",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightlyb8537fb52c20211129.1",
-            "commit": "5f550f625ae0c912908d55f3a25d7c68d2950c32"
+            "commit": "2e460da7ff58924597e3137a784dc897fd174d71",
+            "comment": "Release nightly v9"
           },
           {
-            "author": "beachball",
+            "author": "[e-mail]",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightlyb8537fb52c20211129.1",
-            "commit": "5f550f625ae0c912908d55f3a25d7c68d2950c32"
+            "commit": "742c191b7f2ea28505e49304117c090f9f36386c",
+            "comment": "Replace make-styles packages with griffel equivalents."
           },
           {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
+            "comment": "Updating based on changes to composition types."
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "0bc161458eae5ae8d387172430496ce9829b1bb1",
+            "comment": "Using ComponentSlotProps instead of ObjectShorthandProps."
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "a052fbc9204600669d32b0ac346032d2cd8d9204",
+            "comment": "react-label: Replacing use of functions in makeStyles with direct use of tokens."
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
+            "comment": "Remove component's shorthandProps array"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
+            "comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "00a5d945904c896a0664de6ba72c145a255f0848",
+            "comment": "Updating use of tokens.fontWeight now that we don't need to use casting."
+          },
+          {
             "author": "beachball",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightlyb8537fb52c20211129.1",
-            "commit": "5f550f625ae0c912908d55f3a25d7c68d2950c32"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightlyb8663b78ad20220207.1",
+            "commit": "2e460da7ff58924597e3137a784dc897fd174d71"
           },
@@ -32,5 +68,31 @@ {
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/react-conformance-make-styles to v0.0.0-nightlyb8537fb52c20211129.1",
-            "commit": "5f550f625ae0c912908d55f3a25d7c68d2950c32"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightlyb8663b78ad20220207.1",
+            "commit": "2e460da7ff58924597e3137a784dc897fd174d71"
           }
+        ],
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "d892c7f79c543b6008634ecd669b75b5108cad46",
+            "comment": "Relocate comment about props to the correct type, and update spec to accurately reflect props"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "084a7183511bae60a43e57fbd57979349c4736a4",
+            "comment": "Migrate package to use solution tsconfigs"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-label",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+          }
         ]
@@ -37,0 +99,0 @@ }

CHANGELOG.md

 # Change Log - @fluentui/react-label
 
-This log was last generated on Mon, 29 Nov 2021 04:13:47 GMT and should not be manually modified.
+This log was last generated on Mon, 07 Feb 2022 04:15:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightlyb8537fb52c20211129.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightlyb8537fb52c20211129.1)
+## [0.0.0-nightlyb8663b78ad20220207.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightlyb8663b78ad20220207.1)
 
-Mon, 29 Nov 2021 04:13:47 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.4..@fluentui/react-label_v0.0.0-nightlyb8537fb52c20211129.1)
+Mon, 07 Feb 2022 04:15:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.4..@fluentui/react-label_v0.0.0-nightlyb8663b78ad20220207.1)
 
 ### Changes
 
-- Bump @fluentui/react-make-styles to v0.0.0-nightlyb8537fb52c20211129.1 ([commit](https://github.com/microsoft/fluentui/commit/5f550f625ae0c912908d55f3a25d7c68d2950c32) by beachball)
-- Bump @fluentui/babel-make-styles to v0.0.0-nightlyb8537fb52c20211129.1 ([commit](https://github.com/microsoft/fluentui/commit/5f550f625ae0c912908d55f3a25d7c68d2950c32) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightlyb8537fb52c20211129.1 ([commit](https://github.com/microsoft/fluentui/commit/5f550f625ae0c912908d55f3a25d7c68d2950c32) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v0.0.0-nightlyb8537fb52c20211129.1 ([commit](https://github.com/microsoft/fluentui/commit/5f550f625ae0c912908d55f3a25d7c68d2950c32) by beachball)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/2e460da7ff58924597e3137a784dc897fd174d71) by email not defined)
+- Replace make-styles packages with griffel equivalents. ([PR #21430](https://github.com/microsoft/fluentui/pull/21430) by [e-mail])
+- Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by [e-mail])
+- Using ComponentSlotProps instead of ObjectShorthandProps. ([PR #20890](https://github.com/microsoft/fluentui/pull/20890) by [e-mail])
+- react-label: Replacing use of functions in makeStyles with direct use of tokens. ([PR #21046](https://github.com/microsoft/fluentui/pull/21046) by [e-mail])
+- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by [e-mail])
+- 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 [e-mail])
+- Updating use of tokens.fontWeight now that we don't need to use casting. ([PR #21217](https://github.com/microsoft/fluentui/pull/21217) by [e-mail])
+- Bump @fluentui/react-utilities to v0.0.0-nightlyb8663b78ad20220207.1 ([commit](https://github.com/microsoft/fluentui/commit/2e460da7ff58924597e3137a784dc897fd174d71) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightlyb8663b78ad20220207.1 ([commit](https://github.com/microsoft/fluentui/commit/2e460da7ff58924597e3137a784dc897fd174d71) by beachball)
 
@@ -19,0 +25,0 @@ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.4)

dist/react-label.d.ts

 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import type { ObjectShorthandProps } from '@fluentui/react-utilities';
+import type { IntrinsicSlotProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
@@ -15,5 +14,2 @@
 
-/**
- * Label Props
- */
 export declare type LabelCommons = {
@@ -37,2 +33,5 @@ /**
 
+/**
+ * Label Props
+ */
 export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
@@ -44,14 +43,8 @@ /**
      */
-    required?: boolean | ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>> | React_2.ReactNode;
+    required?: boolean | IntrinsicSlotProps<'span'> | React_2.ReactNode;
 };
 
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export declare const labelShorthandProps: Array<keyof LabelSlots>;
-
 export declare type LabelSlots = {
-    root: IntrinsicShorthandProps<'label'>;
-    required?: IntrinsicShorthandProps<'span'>;
+    root: IntrinsicSlotProps<'label'>;
+    required?: IntrinsicSlotProps<'span'>;
 };
@@ -67,3 +60,3 @@
  */
-export declare const renderLabel: (state: LabelState) => JSX.Element;
+export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
 
@@ -73,4 +66,4 @@ /**
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
@@ -80,3 +73,3 @@ * @param props - props from this instance of Label
  */
-export declare const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
+export declare const useLabel_unstable: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
 
@@ -86,4 +79,4 @@ /**
  */
-export declare const useLabelStyles: (state: LabelState) => LabelState;
+export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
 
 export { }

lib-commonjs/components/Label/Label.js

@@ -21,7 +21,7 @@ "use strict";
 exports.Label = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useLabel_1.useLabel(props, ref);
-  useLabelStyles_1.useLabelStyles(state);
-  return renderLabel_1.renderLabel(state);
+  const state = useLabel_1.useLabel_unstable(props, ref);
+  useLabelStyles_1.useLabelStyles_unstable(state);
+  return renderLabel_1.renderLabel_unstable(state);
 });
 exports.Label.displayName = 'Label';
 //# sourceMappingURL=Label.js.map

lib-commonjs/components/Label/Label.types.d.ts

@@ -1,6 +0,3 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React from 'react';
-/**
- * Label Props
- */
+import type { ComponentProps, ComponentState, IntrinsicSlotProps } from '@fluentui/react-utilities';
 export declare type LabelCommons = {
@@ -24,4 +21,4 @@ /**
 export declare type LabelSlots = {
-    root: IntrinsicShorthandProps<'label'>;
-    required?: IntrinsicShorthandProps<'span'>;
+    root: IntrinsicSlotProps<'label'>;
+    required?: IntrinsicSlotProps<'span'>;
 };
@@ -32,2 +29,5 @@ /**
 export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
+/**
+ * Label Props
+ */
 export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
@@ -39,3 +39,3 @@ /**
      */
-    required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
+    required?: boolean | IntrinsicSlotProps<'span'> | React.ReactNode;
 };

lib-commonjs/components/Label/renderLabel.d.ts

@@ -5,2 +5,2 @@ import type { LabelState } from './Label.types';
  */
-export declare const renderLabel: (state: LabelState) => JSX.Element;
+export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;

lib-commonjs/components/Label/renderLabel.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.renderLabel = void 0;
+exports.renderLabel_unstable = void 0;
 
@@ -12,4 +12,2 @@ const React = /*#__PURE__*/require("react");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const useLabel_1 = /*#__PURE__*/require("./useLabel");
 /**
@@ -20,11 +18,13 @@ * Render the final JSX of Label
 
-const renderLabel = state => {
+const renderLabel_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root), state.root.children, React.createElement(slots.required, Object.assign({}, slotProps.required)));
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, state.root.children, React.createElement(slots.required, { ...slotProps.required
+  }));
 };
 
-exports.renderLabel = renderLabel;
+exports.renderLabel_unstable = renderLabel_unstable;
 //# sourceMappingURL=renderLabel.js.map

lib-commonjs/components/Label/useLabel.d.ts

 import * as React from 'react';
-import type { LabelProps, LabelSlots, LabelState } from './Label.types';
+import type { LabelProps, LabelState } from './Label.types';
 /**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export declare const labelShorthandProps: Array<keyof LabelSlots>;
-/**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
@@ -17,2 +12,2 @@ * @param props - props from this instance of Label
  */
-export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
+export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;

lib-commonjs/components/Label/useLabel.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.useLabel = exports.labelShorthandProps = void 0;
+exports.useLabel_unstable = void 0;
 
@@ -13,13 +13,6 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-
-
-exports.labelShorthandProps = ['root', 'required'];
-/**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
@@ -30,3 +23,4 @@ * @param props - props from this instance of Label
 
-const useLabel = (props, ref) => {
+
+const useLabel_unstable = (props, ref) => {
   const {
@@ -60,3 +54,3 @@ disabled = false,
 
-exports.useLabel = useLabel;
+exports.useLabel_unstable = useLabel_unstable;
 //# sourceMappingURL=useLabel.js.map

lib-commonjs/components/Label/useLabelStyles.d.ts

@@ -6,2 +6,2 @@ import type { LabelState } from './Label.types';
  */
-export declare const useLabelStyles: (state: LabelState) => LabelState;
+export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;

lib-commonjs/components/Label/useLabelStyles.js

@@ -6,6 +6,8 @@ "use strict";
 });
-exports.useLabelStyles = exports.labelClassName = void 0;
+exports.useLabelStyles_unstable = exports.labelClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
 exports.labelClassName = 'fui-Label';
@@ -16,3 +18,3 @@ /**
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
@@ -53,8 +55,8 @@ "Bahqtrf": "fk6fouc",
 
-const useLabelStyles = state => {
+const useLabelStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
 
   if (state.required) {
-    state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);
+    state.required.className = react_1.mergeClasses(styles.required, state.required.className);
   }
@@ -65,3 +67,3 @@
 
-exports.useLabelStyles = useLabelStyles;
+exports.useLabelStyles_unstable = useLabelStyles_unstable;
 //# sourceMappingURL=useLabelStyles.js.map

lib/components/Label/Label.js

 import * as React from 'react';
-import { useLabel } from './useLabel';
-import { renderLabel } from './renderLabel';
-import { useLabelStyles } from './useLabelStyles';
+import { useLabel_unstable } from './useLabel';
+import { renderLabel_unstable } from './renderLabel';
+import { useLabelStyles_unstable } from './useLabelStyles';
 /**
@@ -10,7 +10,7 @@ * A label component provides a title or name to a component.
 export const Label = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useLabel(props, ref);
-  useLabelStyles(state);
-  return renderLabel(state);
+  const state = useLabel_unstable(props, ref);
+  useLabelStyles_unstable(state);
+  return renderLabel_unstable(state);
 });
 Label.displayName = 'Label';
 //# sourceMappingURL=Label.js.map

lib/components/Label/Label.types.d.ts

@@ -1,6 +0,3 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React from 'react';
-/**
- * Label Props
- */
+import type { ComponentProps, ComponentState, IntrinsicSlotProps } from '@fluentui/react-utilities';
 export declare type LabelCommons = {
@@ -24,4 +21,4 @@ /**
 export declare type LabelSlots = {
-    root: IntrinsicShorthandProps<'label'>;
-    required?: IntrinsicShorthandProps<'span'>;
+    root: IntrinsicSlotProps<'label'>;
+    required?: IntrinsicSlotProps<'span'>;
 };
@@ -32,2 +29,5 @@ /**
 export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
+/**
+ * Label Props
+ */
 export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
@@ -39,3 +39,3 @@ /**
      */
-    required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
+    required?: boolean | IntrinsicSlotProps<'span'> | React.ReactNode;
 };

lib/components/Label/renderLabel.d.ts

@@ -5,2 +5,2 @@ import type { LabelState } from './Label.types';
  */
-export declare const renderLabel: (state: LabelState) => JSX.Element;
+export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;

lib/components/Label/renderLabel.js

 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { labelShorthandProps } from './useLabel';
 /**
@@ -8,9 +7,11 @@ * Render the final JSX of Label
 
-export const renderLabel = state => {
+export const renderLabel_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, labelShorthandProps);
-  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), state.root.children, /*#__PURE__*/React.createElement(slots.required, Object.assign({}, slotProps.required)));
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, state.root.children, /*#__PURE__*/React.createElement(slots.required, { ...slotProps.required
+  }));
 };
 //# sourceMappingURL=renderLabel.js.map

lib/components/Label/useLabel.d.ts

 import * as React from 'react';
-import type { LabelProps, LabelSlots, LabelState } from './Label.types';
+import type { LabelProps, LabelState } from './Label.types';
 /**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export declare const labelShorthandProps: Array<keyof LabelSlots>;
-/**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
@@ -17,2 +12,2 @@ * @param props - props from this instance of Label
  */
-export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
+export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;

lib/components/Label/useLabel.js

 import { getNativeElementProps } from '@fluentui/react-utilities';
 import { resolveShorthand } from '@fluentui/react-utilities';
 /**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-
-export const labelShorthandProps = ['root', 'required'];
-/**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
@@ -19,3 +13,3 @@ * @param props - props from this instance of Label
 
-export const useLabel = (props, ref) => {
+export const useLabel_unstable = (props, ref) => {
   const {
@@ -22,0 +16,0 @@ disabled = false,

lib/components/Label/useLabelStyles.d.ts

@@ -6,2 +6,2 @@ import type { LabelState } from './Label.types';
  */
-export declare const useLabelStyles: (state: LabelState) => LabelState;
+export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;

lib/components/Label/useLabelStyles.js

@@ -1,2 +0,3 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const labelClassName = 'fui-Label';
@@ -43,3 +44,3 @@ /**
 
-export const useLabelStyles = state => {
+export const useLabelStyles_unstable = state => {
   const styles = useStyles();
@@ -46,0 +47,0 @@ state.root.className = mergeClasses(labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);

package.json

 {
   "name": "@fluentui/react-label",
-  "version": "0.0.0-nightlyb8537fb52c20211129.1",
+  "version": "0.0.0-nightlyb8663b78ad20220207.1",
   "description": "Label component for FluentUI library.",
@@ -22,13 +22,12 @@ "main": "lib-commonjs/index.js",
     "start": "yarn storybook",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/packages/react-label/src && yarn docs",
-    "storybook": "start-storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-label/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "0.0.0-nightlyb8537fb52c20211129.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "0.0.0-nightlyb8537fb52c20211129.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "0.0.0-nightlyb8537fb52c20211129.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightlyb8663b78ad20220207.1",
     "@fluentui/scripts": "^1.0.0",
@@ -47,4 +46,4 @@ "@types/enzyme": "3.10.3",
   "dependencies": {
-    "@fluentui/react-make-styles": "0.0.0-nightlyb8537fb52c20211129.1",
-    "@fluentui/react-utilities": "0.0.0-nightlyb8537fb52c20211129.0",
+    "@fluentui/react-utilities": "0.0.0-nightlyb8663b78ad20220207.1",
+    "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
@@ -51,0 +50,0 @@ },

Spec.md

@@ -78,51 +78,44 @@ # @fluentui/react-label Spec
 ```ts
-/**
- * Label Props
- */
-export type LabelProps = ComponentProps &
-  React.LabelHTMLAttributes<HTMLElement> & {
-    /**
-     * Renders the label as disabled
-     * @defaultvalue false
-     */
-    disabled?: boolean;
+export type LabelCommons = {
+  /**
+   * Renders the label as disabled
+   * @defaultvalue false
+   */
+  disabled: boolean;
 
-    /**
-     * Whether the associated form field is required or not. If true it will be an asterisk, otherwise it will be what is provided.
-     * @defaultvalue false
-     */
-    required?: boolean | ShorthandProps<ComponentProps>;
+  /**
+   * A label supports different sizes.
+   * @defaultvalue 'medium'
+   */
+  size: 'small' | 'medium' | 'large';
 
-    /**
-     * A label supports different font sizes, see tokens for reference.
-     * @defaultvalue 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
+  /**
+   * A label supports semibold/strong fontweight.
+   * @defaultvalue false
+   */
+  strong: boolean;
+};
 
-    /**
-     * A label supports semibold/strong fontweight. When size is set to large, label strong will be set by default.
-     * @defaultvalue false
-     */
-    strong?: boolean;
-  };
+export type LabelSlots = {
+  root: IntrinsicSlotProps<'label'>;
+  required?: IntrinsicSlotProps<'span'>;
+};
 
 /**
- * Names of the shorthand properties in LabelProps
+ * State used in rendering Label
  */
-export type LabelShorthandProps = 'required';
+export type LabelState = ComponentState<LabelSlots> & LabelCommons;
 
 /**
- * Names of LabelProps that have a default value in useLabel
+ * Label Props
  */
-export type LabelDefaultedProps = never;
-
-/**
- * State used in rendering Label
- */
-export type LabelState = ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
-  /**
-   * Ref to the root element
-   */
-  ref: React.Ref<HTMLElement>;
-};
+export type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &
+  Partial<LabelCommons> & {
+    /**
+     * Displays and indicator that the label is for a required field. The required prop can be set to true to display
+     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
+     * @defaultvalue false
+     */
+    required?: boolean | IntrinsicSlotProps<'span'> | React.ReactNode;
+  };
 ```
@@ -129,0 +122,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

14

decreased by-12.5%

Lines of code

2211

increased by0.27%

Worsened metrics

Total package byte prevSize

129707

decreased by-0.16%

Number of package files

57

decreased by-9.52%

Dependency changes

• + Added@griffel/react@1.0.0

• + Added@fluentui/keyboard-keys@0.0.0-nightlyb8663b78ad20220207.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightlyb8663b78ad20220207.1(transitive)

• + Added@griffel/core@1.0.7(transitive)

• + Added@griffel/react@1.0.0(transitive)

• - Removed@fluentui/react-make-styles@0.0.0-nightlyb8537fb52c20211129.1

• - Removed@fluentui/make-styles@0.0.0-nightlyb8537fb52c20211129.1(transitive)

• - Removed@fluentui/react-make-styles@0.0.0-nightlyb8537fb52c20211129.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightlyb8537fb52c20211129.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightlyb8537fb52c20211129.1(transitive)

• - Removedinline-style-expand-shorthand@1.6.0(transitive)

• Updated@fluentui/react-utilities@0.0.0-nightlyb8663b78ad20220207.1