@fluentui/react-label 0.0.0-nightly-20220504-0420.1 → 0.0.0-nightly-20220509-0421.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-label",
   "entries": [
     {
-      "date": "Wed, 04 May 2022 04:33:42 GMT",
-      "tag": "@fluentui/react-label_v0.0.0-nightly-20220504-0420.1",
-      "version": "0.0.0-nightly-20220504-0420.1",
+      "date": "Mon, 09 May 2022 04:32:18 GMT",
+      "tag": "@fluentui/react-label_v0.0.0-nightly-20220509-0421.1",
+      "version": "0.0.0-nightly-20220509-0421.1",
       "comments": {
         "prerelease": [
           {
@@ -14,28 +14,96 @@
             "comment": "Release nightly v9"
           },
           {
-            "author": "mgodbolt@microsoft.com",
+            "author": "esteban.230@hotmail.com",
             "package": "@fluentui/react-label",
-            "commit": "65c5c91acea26b129e9ffac6b2b1a8c9808f0141",
-            "comment": "Add style to make required match text when disabled"
+            "commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
+            "comment": "update README and package version"
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-label",
+            "commit": "6b3b09b6f05e6a17a578a65fc36b606e3004efe9",
+            "comment": "Removing commons type from Label."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220509-0421.1",
+            "commit": "bfa631b1a1c5b024e734a24fb8d3f53e51f97f75"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220509-0421.1",
+            "commit": "bfa631b1a1c5b024e734a24fb8d3f53e51f97f75"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220509-0421.1",
+            "commit": "bfa631b1a1c5b024e734a24fb8d3f53e51f97f75"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 May 2022 18:26:24 GMT",
+      "tag": "@fluentui/react-label_v9.0.0-beta.12",
+      "version": "9.0.0-beta.12",
+      "comments": {
+        "none": [
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-label",
+            "commit": "700e11e12b3e06cb10a0196e91e64b5ee4867405",
+            "comment": "Updating spec, fixing typos in types, and adding descriptions in stories."
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220504-0420.1",
-            "commit": "158bbd218038e21eb173d3fa7efa00c595be789c"
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 May 2022 13:26:43 GMT",
+      "tag": "@fluentui/react-label_v9.0.0-beta.11",
+      "version": "9.0.0-beta.11",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-label",
+            "commit": "65c5c91acea26b129e9ffac6b2b1a8c9808f0141",
+            "comment": "Add style to make required match text when disabled"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220504-0420.1",
-            "commit": "158bbd218038e21eb173d3fa7efa00c595be789c"
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220504-0420.1",
-            "commit": "158bbd218038e21eb173d3fa7efa00c595be789c"
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,21 +1,44 @@
 # Change Log - @fluentui/react-label
 
-This log was last generated on Wed, 04 May 2022 04:33:42 GMT and should not be manually modified.
+This log was last generated on Mon, 09 May 2022 04:32:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220504-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightly-20220504-0420.1)
+## [0.0.0-nightly-20220509-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightly-20220509-0421.1)
 
-Wed, 04 May 2022 04:33:42 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.10..@fluentui/react-label_v0.0.0-nightly-20220504-0420.1)
+Mon, 09 May 2022 04:32:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.12..@fluentui/react-label_v0.0.0-nightly-20220509-0421.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
+- update README and package version ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
+- Removing commons type from Label. ([PR #22880](https://github.com/microsoft/fluentui/pull/22880) by esteban.230@hotmail.com)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220509-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/bfa631b1a1c5b024e734a24fb8d3f53e51f97f75) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220509-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/bfa631b1a1c5b024e734a24fb8d3f53e51f97f75) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220509-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/bfa631b1a1c5b024e734a24fb8d3f53e51f97f75) by beachball)
+
+## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.12)
+
+Thu, 05 May 2022 18:26:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.11..@fluentui/react-label_v9.0.0-beta.12)
+
+### Changes
+
+- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+
+## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.11)
+
+Wed, 04 May 2022 13:26:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.10..@fluentui/react-label_v9.0.0-beta.11)
+
+### Changes
+
 - Add style to make required match text when disabled ([PR #22715](https://github.com/microsoft/fluentui/pull/22715) by mgodbolt@microsoft.com)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220504-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/158bbd218038e21eb173d3fa7efa00c595be789c) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220504-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/158bbd218038e21eb173d3fa7efa00c595be789c) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220504-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/158bbd218038e21eb173d3fa7efa00c595be789c) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
 
 ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.10)
 

package/README.md

@@ -4,13 +4,15 @@
 
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
 
+Labels provide a name or title to a component or group of components, e.g., text fields, checkboxes, radio buttons, and dropdown menus.
+
 ## Usage
 
-To use the `Label` component import it from `@fluentui/react-label` and use it as shown below.
+To use the `Label` component import it from `@fluentui/react-components` and use it as shown below.
 
 ```tsx
 import * as React from 'react';
-import { Label } from '@fluentui/react-label';
+import { Label } from '@fluentui/react-components';
 import { useId } from '@fluentui/react-utilities';
 
 export const labelExample = () => {
@@ -26,3 +28,14 @@ export const labelExample = () => {
   );
 };
 ```
+
+See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-label` from the list.
+
+### Specification
+
+See [Spec.md](./Spec.md).

package/Spec.md

@@ -78,19 +78,19 @@ The Label component should be simple as shown below. It will just need the text
 export type LabelCommons = {
   /**
    * Renders the label as disabled
-   * @defaultvalue false
+   * @default false
    */
   disabled: boolean;
 
   /**
    * A label supports different sizes.
-   * @defaultvalue 'medium'
+   * @default 'medium'
    */
   size: 'small' | 'medium' | 'large';
 
   /**
    * A label supports semibold/strong fontweight.
-   * @defaultvalue false
+   * @default false
    */
   strong: boolean;
 };
@@ -111,11 +111,11 @@ export type LabelState = ComponentState<LabelSlots> & LabelCommons;
 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
+     * Displays an 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
+     * @default false
      */
-    required?: boolean | IntrinsicSlotProps<'span'> | React.ReactNode;
+    required?: boolean | Slot<'span'>;
   };
 ```
 
@@ -166,3 +166,4 @@ _Keyboard, Cursor, Touch, and Screen Readers_
 - Label will use the native `label` element to render.
 - Label cannot receive focus.
 - Label will have no focusable elements.
+- When a Label is disabled, the required contrast ratio won't be met. This is acceptable behavior due to the nature of the styling. This state should be used sparingly and make it clear that there's no interaction with the control associated with it.

package/dist/index.d.ts

@@ -17,34 +17,31 @@ export declare const labelClassName = "fui-Label";
 
 export declare const labelClassNames: SlotClassNames<LabelSlots>;
 
-declare type LabelCommons = {
+/**
+ * Label Props
+ */
+export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {
     /**
      * Renders the label as disabled
-     * @defaultvalue false
+     * @default false
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
-     * A label supports different sizes.
-     * @defaultvalue 'medium'
+     * Displays an 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.
+     * @default false
      */
-    size: 'small' | 'medium' | 'large';
+    required?: boolean | Slot<'span'>;
     /**
-     * A label supports semibold/strong fontweight.
-     * @defaultvalue false
+     * A label supports different sizes.
+     * @default 'medium'
      */
-    strong: boolean;
-};
-
-/**
- * Label Props
- */
-export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
+    size?: 'small' | 'medium' | 'large';
     /**
-     * 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
+     * A label supports semibold/strong fontweight.
+     * @default false
      */
-    required?: boolean | Slot<'span'>;
+    strong?: boolean;
 };
 
 export declare type LabelSlots = {
@@ -55,7 +52,7 @@ export declare type LabelSlots = {
 /**
  * State used in rendering Label
  */
-export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
+export declare type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'strong'>>;
 
 /**
  * Render the final JSX of Label

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

@@ -1,20 +1,29 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-declare type LabelCommons = {
+/**
+ * Label Props
+ */
+export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {
     /**
      * Renders the label as disabled
-     * @defaultvalue false
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Displays an 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.
+     * @default false
      */
-    disabled: boolean;
+    required?: boolean | Slot<'span'>;
     /**
      * A label supports different sizes.
-     * @defaultvalue 'medium'
+     * @default 'medium'
      */
-    size: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     /**
      * A label supports semibold/strong fontweight.
-     * @defaultvalue false
+     * @default false
      */
-    strong: boolean;
+    strong?: boolean;
 };
 export declare type LabelSlots = {
     root: Slot<'label'>;
@@ -23,16 +32,4 @@ export declare type LabelSlots = {
 /**
  * State used in rendering Label
  */
-export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
-/**
- * Label Props
- */
-export declare 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 | Slot<'span'>;
-};
-export {};
+export declare type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'strong'>>;

package/lib/components/Label/Label.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ntype LabelCommons = {\n  /**\n   * Renders the label as disabled\n   * @defaultvalue false\n   */\n  disabled: boolean;\n\n  /**\n   * A label supports different sizes.\n   * @defaultvalue 'medium'\n   */\n  size: 'small' | 'medium' | 'large';\n\n  /**\n   * A label supports semibold/strong fontweight.\n   * @defaultvalue false\n   */\n  strong: boolean;\n};\n\nexport type LabelSlots = {\n  root: Slot<'label'>;\n  required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & LabelCommons;\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &\n  Partial<LabelCommons> & {\n    /**\n     * Displays and indicator that the label is for a required field. The required prop can be set to true to display\n     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n     * @defaultvalue false\n     */\n    required?: boolean | Slot<'span'>;\n  };\n"]}
+{"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {\n  /**\n   * Renders the label as disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Displays an indicator that the label is for a required field. The required prop can be set to true to display\n   * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n   * @default false\n   */\n  required?: boolean | Slot<'span'>;\n\n  /**\n   * A label supports different sizes.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A label supports semibold/strong fontweight.\n   * @default false\n   */\n  strong?: boolean;\n};\n\nexport type LabelSlots = {\n  root: Slot<'label'>;\n  required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'strong'>>;\n"]}

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

@@ -1,20 +1,29 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-declare type LabelCommons = {
+/**
+ * Label Props
+ */
+export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {
     /**
      * Renders the label as disabled
-     * @defaultvalue false
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Displays an 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.
+     * @default false
      */
-    disabled: boolean;
+    required?: boolean | Slot<'span'>;
     /**
      * A label supports different sizes.
-     * @defaultvalue 'medium'
+     * @default 'medium'
      */
-    size: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     /**
      * A label supports semibold/strong fontweight.
-     * @defaultvalue false
+     * @default false
      */
-    strong: boolean;
+    strong?: boolean;
 };
 export declare type LabelSlots = {
     root: Slot<'label'>;
@@ -23,16 +32,4 @@ export declare type LabelSlots = {
 /**
  * State used in rendering Label
  */
-export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
-/**
- * Label Props
- */
-export declare 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 | Slot<'span'>;
-};
-export {};
+export declare type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'strong'>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-label",
-  "version": "0.0.0-nightly-20220504-0420.1",
+  "version": "0.0.0-nightly-20220509-0421.1",
   "description": "Fluent UI React Label component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,12 +28,12 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220504-0420.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220509-0421.1",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-theme": "0.0.0-nightly-20220504-0420.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20220504-0420.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220509-0421.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220509-0421.1",
     "@griffel/react": "1.0.3",
     "tslib": "^2.1.0"
   },