@fluentui/react-radio - npm Package Compare versions

Comparing version 9.0.0-beta.4 to 9.0.0-beta.5

CHANGELOG.json

@@ -5,3 +5,78 @@ {
     {
-      "date": "Mon, 25 Apr 2022 09:31:20 GMT",
+      "date": "Wed, 04 May 2022 13:24:16 GMT",
+      "tag": "@fluentui/react-radio_v9.0.0-beta.5",
+      "version": "9.0.0-beta.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-radio",
+            "commit": "9132814df4b6d40d1f5d93d8324d756c1284b294",
+            "comment": "react-radio: update context usage"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-radio",
+            "commit": "8d990349b5af2d61057cccda2357412d2f5ab9b9",
+            "comment": "add bundle size fixtures"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-radio",
+            "commit": "6a017c3b1f2a282fa86c28b675e5ed34a1bb2aee",
+            "comment": "react-radio: add required prop to RadioGroup"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-radio",
+            "commit": "4bc1c43194cb9f44c5ad40ae43ab26556778157e",
+            "comment": "react-radio: remove required indicator from label"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-radio",
+            "commit": "5f27c51743f22f08741a75c2c10032a02afdf6fb",
+            "comment": "write readme"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-radio",
+            "commit": "3be7a89d9e9323780bba5b24d3bcc4342e1f1ec7",
+            "comment": "Allow data argument on onChange"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.0.0-beta.11",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.8",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 25 Apr 2022 09:32:19 GMT",
       "tag": "@fluentui/react-radio_v9.0.0-beta.4",
@@ -8,0 +83,0 @@ "version": "9.0.0-beta.4",

CHANGELOG.md

 # Change Log - @fluentui/react-radio
 
-This log was last generated on Mon, 25 Apr 2022 09:31:20 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 13:24:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.5)
+
+Wed, 04 May 2022 13:24:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.4..@fluentui/react-radio_v9.0.0-beta.5)
+
+### Changes
+
+- react-radio: update context usage ([PR #22803](https://github.com/microsoft/fluentui/pull/22803) by [e-mail])
+- add bundle size fixtures ([PR #22675](https://github.com/microsoft/fluentui/pull/22675) by [e-mail])
+- react-radio: add required prop to RadioGroup ([PR #22809](https://github.com/microsoft/fluentui/pull/22809) by [e-mail])
+- react-radio: remove required indicator from label ([PR #22782](https://github.com/microsoft/fluentui/pull/22782) by [e-mail])
+- write readme ([PR #22676](https://github.com/microsoft/fluentui/pull/22676) by [e-mail])
+- Allow data argument on onChange ([PR #22753](https://github.com/microsoft/fluentui/pull/22753) by [e-mail])
+- Bump @fluentui/react-context-selector to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-label to v9.0.0-beta.11 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) 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.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.4)
 
-Mon, 25 Apr 2022 09:31:20 GMT 
+Mon, 25 Apr 2022 09:32:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.3..@fluentui/react-radio_v9.0.0-beta.4)
@@ -11,0 +30,0 @@

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

@@ -31,3 +31,3 @@ import * as React from 'react';
  */
-export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {
+export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
     /**
@@ -34,0 +34,0 @@ * The value of the RadioGroup when this Radio item is selected.

lib-commonjs/components/Radio/useRadio.js

@@ -17,2 +17,4 @@ "use strict";
 const RadioGroupContext_1 = /*#__PURE__*/require("../../contexts/RadioGroupContext");
+
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 /**
@@ -30,10 +32,15 @@ * Create the state required to render Radio.
 const useRadio_unstable = (props, ref) => {
-  const group = React.useContext(RadioGroupContext_1.RadioGroupContext);
+  const nameGroup = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.name);
+  const value = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.value);
+  const defaultValue = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.defaultValue);
+  const disabledGroup = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.disabled);
+  const layout = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.layout);
+  const requiredGroup = react_context_selector_1.useContextSelector(RadioGroupContext_1.RadioGroupContext, ctx => ctx.required);
   const {
-    name = group.name,
-    checked = group.value !== undefined ? group.value === props.value : undefined,
-    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,
-    labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',
-    disabled = group.disabled,
-    required,
+    name = nameGroup,
+    checked = value !== undefined ? value === props.value : undefined,
+    defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,
+    labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',
+    disabled = disabledGroup,
+    required = requiredGroup,
     onChange
@@ -60,2 +67,3 @@ } = props;
       disabled,
+      required,
       ...nativeProps.primary
@@ -70,4 +78,3 @@ }
       htmlFor: input.id,
-      disabled,
-      required
+      disabled
     }
@@ -74,0 +81,0 @@ });

lib-commonjs/components/RadioGroup/RadioGroup.js

@@ -15,2 +15,4 @@ "use strict";
 const useRadioGroupStyles_1 = /*#__PURE__*/require("./useRadioGroupStyles");
+
+const useRadioGroupContextValues_1 = /*#__PURE__*/require("../../contexts/useRadioGroupContextValues");
 /**
@@ -23,6 +25,7 @@ * A RadioGroup component presents a set of options where only one option can be selected.
   const state = useRadioGroup_1.useRadioGroup_unstable(props, ref);
+  const contextValues = useRadioGroupContextValues_1.useRadioGroupContextValues(state);
   useRadioGroupStyles_1.useRadioGroupStyles_unstable(state);
-  return renderRadioGroup_1.renderRadioGroup_unstable(state);
+  return renderRadioGroup_1.renderRadioGroup_unstable(state, contextValues);
 });
 exports.RadioGroup.displayName = 'RadioGroup';
 //# sourceMappingURL=RadioGroup.js.map

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

 import * as React from 'react';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { RadioGroupContextValue } from '../../contexts/RadioGroupContext';
 export declare type RadioGroupSlots = {
@@ -36,3 +35,3 @@ /**
      *
-     * @defaultvalue vertical
+     * @default vertical
      */
@@ -44,2 +43,6 @@ layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
     disabled?: boolean;
+    /**
+     * Require all Radio items in this group.
+     */
+    required?: boolean;
 };
@@ -58,4 +61,6 @@ /**
  */
-export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & {
-    context: RadioGroupContextValue;
+export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;
+export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
+export declare type RadioGroupContextValues = {
+    radioGroup: RadioGroupContextValue;
 };

lib-commonjs/components/RadioGroup/renderRadioGroup.d.ts

@@ -1,5 +0,5 @@
-import { RadioGroupState } from './RadioGroup.types';
+import { RadioGroupContextValues, RadioGroupState } from './RadioGroup.types';
 /**
  * Render the final JSX of RadioGroup
  */
-export declare const renderRadioGroup_unstable: (state: RadioGroupState) => JSX.Element;
+export declare const renderRadioGroup_unstable: (state: RadioGroupState, contextValues: RadioGroupContextValues) => JSX.Element;

lib-commonjs/components/RadioGroup/renderRadioGroup.js

@@ -18,3 +18,3 @@ "use strict";
 
-const renderRadioGroup_unstable = state => {
+const renderRadioGroup_unstable = (state, contextValues) => {
   const {
@@ -25,3 +25,3 @@ slots,
   return React.createElement(RadioGroupContext_1.RadioGroupContext.Provider, {
-    value: state.context
+    value: contextValues.radioGroup
   }, React.createElement(slots.root, { ...slotProps.root
@@ -28,0 +28,0 @@ }));

lib-commonjs/components/RadioGroup/useRadioGroup.js

@@ -8,4 +8,2 @@ "use strict";
 
-const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
@@ -31,13 +29,12 @@ /**
     layout = 'vertical',
-    onChange
+    onChange,
+    required
   } = props;
   return {
     layout,
-    context: React.useMemo(() => ({
-      name,
-      value,
-      defaultValue,
-      disabled,
-      layout
-    }), [name, layout, value, defaultValue, disabled]),
+    name,
+    value,
+    defaultValue,
+    disabled,
+    required,
     components: {
@@ -44,0 +41,0 @@ root: 'div'

lib-commonjs/contexts/RadioGroupContext.d.ts

@@ -1,7 +0,6 @@
-import * as React from 'react';
-import { RadioGroupProps } from '../RadioGroup';
-export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'layout' | 'value' | 'defaultValue' | 'disabled'>;
+import type { Context } from '@fluentui/react-context-selector';
+import type { RadioGroupContextValue } from '../RadioGroup';
 /**
  * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
  */
-export declare const RadioGroupContext: React.Context<RadioGroupContextValue>;
+export declare const RadioGroupContext: Context<RadioGroupContextValue>;

lib-commonjs/contexts/RadioGroupContext.js

@@ -8,3 +8,3 @@ "use strict";
 
-const React = /*#__PURE__*/require("react");
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 /**
@@ -15,3 +15,3 @@ * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
 
-exports.RadioGroupContext = /*#__PURE__*/React.createContext({});
+exports.RadioGroupContext = /*#__PURE__*/react_context_selector_1.createContext({});
 //# sourceMappingURL=RadioGroupContext.js.map

lib-commonjs/index.d.ts

 export { RadioGroup, radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable, } from './RadioGroup';
-export type { RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState } from './RadioGroup';
+export type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState, } from './RadioGroup';
 export { Radio, radioClassName, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable, } from './Radio';
 export type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';
 export { RadioGroupContext } from './contexts/RadioGroupContext';
-export type { RadioGroupContextValue } from './contexts/RadioGroupContext';

lib/components/Radio/Radio.types.d.ts

@@ -31,3 +31,3 @@ import * as React from 'react';
  */
-export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {
+export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
     /**
@@ -34,0 +34,0 @@ * The value of the RadioGroup when this Radio item is selected.

lib/components/Radio/useRadio.js

@@ -6,2 +6,3 @@ import * as React from 'react';
 import { RadioGroupContext } from '../../contexts/RadioGroupContext';
+import { useContextSelector } from '@fluentui/react-context-selector';
 /**
@@ -18,10 +19,15 @@ * Create the state required to render Radio.
 export const useRadio_unstable = (props, ref) => {
-  const group = React.useContext(RadioGroupContext);
+  const nameGroup = useContextSelector(RadioGroupContext, ctx => ctx.name);
+  const value = useContextSelector(RadioGroupContext, ctx => ctx.value);
+  const defaultValue = useContextSelector(RadioGroupContext, ctx => ctx.defaultValue);
+  const disabledGroup = useContextSelector(RadioGroupContext, ctx => ctx.disabled);
+  const layout = useContextSelector(RadioGroupContext, ctx => ctx.layout);
+  const requiredGroup = useContextSelector(RadioGroupContext, ctx => ctx.required);
   const {
-    name = group.name,
-    checked = group.value !== undefined ? group.value === props.value : undefined,
-    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,
-    labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',
-    disabled = group.disabled,
-    required,
+    name = nameGroup,
+    checked = value !== undefined ? value === props.value : undefined,
+    defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,
+    labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',
+    disabled = disabledGroup,
+    required = requiredGroup,
     onChange
@@ -48,2 +54,3 @@ } = props;
       disabled,
+      required,
       ...nativeProps.primary
@@ -58,4 +65,3 @@ }
       htmlFor: input.id,
-      disabled,
-      required
+      disabled
     }
@@ -62,0 +68,0 @@ });

lib/components/RadioGroup/RadioGroup.js

@@ -5,2 +5,3 @@ import * as React from 'react';
 import { useRadioGroupStyles_unstable } from './useRadioGroupStyles';
+import { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';
 /**
@@ -12,6 +13,7 @@ * A RadioGroup component presents a set of options where only one option can be selected.
   const state = useRadioGroup_unstable(props, ref);
+  const contextValues = useRadioGroupContextValues(state);
   useRadioGroupStyles_unstable(state);
-  return renderRadioGroup_unstable(state);
+  return renderRadioGroup_unstable(state, contextValues);
 });
 RadioGroup.displayName = 'RadioGroup';
 //# sourceMappingURL=RadioGroup.js.map

lib/components/RadioGroup/RadioGroup.types.d.ts

 import * as React from 'react';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { RadioGroupContextValue } from '../../contexts/RadioGroupContext';
 export declare type RadioGroupSlots = {
@@ -36,3 +35,3 @@ /**
      *
-     * @defaultvalue vertical
+     * @default vertical
      */
@@ -44,2 +43,6 @@ layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
     disabled?: boolean;
+    /**
+     * Require all Radio items in this group.
+     */
+    required?: boolean;
 };
@@ -58,4 +61,6 @@ /**
  */
-export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & {
-    context: RadioGroupContextValue;
+export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;
+export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
+export declare type RadioGroupContextValues = {
+    radioGroup: RadioGroupContextValue;
 };

lib/components/RadioGroup/renderRadioGroup.d.ts

@@ -1,5 +0,5 @@
-import { RadioGroupState } from './RadioGroup.types';
+import { RadioGroupContextValues, RadioGroupState } from './RadioGroup.types';
 /**
  * Render the final JSX of RadioGroup
  */
-export declare const renderRadioGroup_unstable: (state: RadioGroupState) => JSX.Element;
+export declare const renderRadioGroup_unstable: (state: RadioGroupState, contextValues: RadioGroupContextValues) => JSX.Element;

lib/components/RadioGroup/renderRadioGroup.js

@@ -8,3 +8,3 @@ import * as React from 'react';
 
-export const renderRadioGroup_unstable = state => {
+export const renderRadioGroup_unstable = (state, contextValues) => {
   const {
@@ -15,3 +15,3 @@ slots,
   return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
-    value: state.context
+    value: contextValues.radioGroup
   }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
@@ -18,0 +18,0 @@ }));

lib/components/RadioGroup/useRadioGroup.js

@@ -1,2 +0,1 @@
-import * as React from 'react';
 import { getNativeElementProps, useEventCallback, useId } from '@fluentui/react-utilities';
@@ -21,13 +20,12 @@ /**
     layout = 'vertical',
-    onChange
+    onChange,
+    required
   } = props;
   return {
     layout,
-    context: React.useMemo(() => ({
-      name,
-      value,
-      defaultValue,
-      disabled,
-      layout
-    }), [name, layout, value, defaultValue, disabled]),
+    name,
+    value,
+    defaultValue,
+    disabled,
+    required,
     components: {
@@ -34,0 +32,0 @@ root: 'div'

lib/contexts/RadioGroupContext.d.ts

@@ -1,7 +0,6 @@
-import * as React from 'react';
-import { RadioGroupProps } from '../RadioGroup';
-export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'layout' | 'value' | 'defaultValue' | 'disabled'>;
+import type { Context } from '@fluentui/react-context-selector';
+import type { RadioGroupContextValue } from '../RadioGroup';
 /**
  * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
  */
-export declare const RadioGroupContext: React.Context<RadioGroupContextValue>;
+export declare const RadioGroupContext: Context<RadioGroupContextValue>;

lib/contexts/RadioGroupContext.js

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import { createContext } from '@fluentui/react-context-selector';
 /**
@@ -6,3 +6,3 @@ * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
 
-export const RadioGroupContext = /*#__PURE__*/React.createContext({});
+export const RadioGroupContext = /*#__PURE__*/createContext({});
 //# sourceMappingURL=RadioGroupContext.js.map

lib/index.d.ts

 export { RadioGroup, radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable, } from './RadioGroup';
-export type { RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState } from './RadioGroup';
+export type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState, } from './RadioGroup';
 export { Radio, radioClassName, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable, } from './Radio';
 export type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';
 export { RadioGroupContext } from './contexts/RadioGroupContext';
-export type { RadioGroupContextValue } from './contexts/RadioGroupContext';

package.json

 {
   "name": "@fluentui/react-radio",
-  "version": "9.0.0-beta.4",
+  "version": "9.0.0-beta.5",
   "description": "Fluent UI Radio component",
@@ -16,2 +16,3 @@ "main": "lib-commonjs/index.js",
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
@@ -34,7 +35,8 @@ "code-style": "just-scripts code-style",
   "dependencies": {
+    "@fluentui/react-context-selector": "9.0.0-rc.7",
     "@fluentui/react-icons": "^2.0.166-rc.3",
-    "@fluentui/react-label": "9.0.0-beta.10",
-    "@fluentui/react-tabster": "9.0.0-rc.7",
-    "@fluentui/react-theme": "9.0.0-rc.5",
-    "@fluentui/react-utilities": "9.0.0-rc.6",
+    "@fluentui/react-label": "9.0.0-beta.11",
+    "@fluentui/react-tabster": "9.0.0-rc.8",
+    "@fluentui/react-theme": "9.0.0-rc.6",
+    "@fluentui/react-utilities": "9.0.0-rc.7",
     "@griffel/react": "1.0.3",
@@ -41,0 +43,0 @@ "tslib": "^2.1.0"

README.md

@@ -6,1 +6,40 @@ # @fluentui/react-radio
 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.
+
+A Radio allows a user to select a single value from two or more options. All Radios with the same `name` are considered to be part of the same group. However, a `RadioGroup` is recommended to add a group label, formatting, and other functionality.
+
+### Usage
+
+Import `Radio` and `RadioGroup`:
+
+```js
+import { Radio, RadioGroup } from '@fluentui/react-radio';
+```
+
+#### Examples
+
+```jsx
+<RadioGroup defaultValue="B">
+  <Radio value="A" label="Option A" />
+  <Radio value="B" label="Option B" />
+  <Radio value="C" label="Option C" />
+  <Radio value="D" label="Option D" />
+</RadioGroup>
+
+<RadioGroup value={value} onChange={(_, data) => setValue(data.value)}>
+  <Radio value="A" label="Option A" />
+  <Radio value="B" label="Option B" />
+  <Radio value="C" label="Option C" />
+  <Radio value="D" label="Option D" />
+</RadioGroup>
+```
+
+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-radio` from the list.
+
+### Specification
+
+See [Spec.md](./Spec.md).

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

Total package byte prevSize

191207

increased by7.52%

Number of package files

110

increased by5.77%

Lines of code

2262

increased by7.15%

Number of lines in readme file

45

increased by650%

Published versions last two months

49

increased by2.08%

Worsened metrics

Dependency count

12

increased by9.09%

Published versions last year

293

decreased by-0.34%

Dependency changes

• + Added@fluentui/react-context-selector@9.0.0-rc.7

• + Added@fluentui/keyboard-keys@9.0.0-rc.5(transitive)

• + Added@fluentui/react-context-selector@9.0.0-rc.7(transitive)

• + Added@fluentui/react-label@9.0.0-beta.11(transitive)

• + Added@fluentui/react-shared-contexts@9.0.0-rc.6(transitive)

• + Added@fluentui/react-tabster@9.0.0-rc.8(transitive)

• + Added@fluentui/react-theme@9.0.0-rc.6(transitive)

• + Added@fluentui/react-utilities@9.0.0-rc.7(transitive)

• - Removed@fluentui/keyboard-keys@9.0.0-rc.4(transitive)

• - Removed@fluentui/react-label@9.0.0-beta.10(transitive)

• - Removed@fluentui/react-shared-contexts@9.0.0-rc.5(transitive)

• - Removed@fluentui/react-tabster@9.0.0-rc.7(transitive)

• - Removed@fluentui/react-theme@9.0.0-rc.5(transitive)

• - Removed@fluentui/react-utilities@9.0.0-rc.6(transitive)

• Updated@fluentui/react-label@9.0.0-beta.11

• Updated@fluentui/react-tabster@9.0.0-rc.8

• Updated@fluentui/react-theme@9.0.0-rc.6

• Updated@fluentui/react-utilities@9.0.0-rc.7