From 393c4ba0e37245d76dfcb636c0cecef0aa9dd00c Mon Sep 17 00:00:00 2001
From: Tomi Olubeko <ololubek@microsoft.com>
Date: Fri, 15 Dec 2023 13:14:32 -0800
Subject: [PATCH 1/6] Update Rating api and stories

---
 .../react-rating-preview/docs/Spec.md         | 111 ++++++++++++------
 .../src/components/Rating/Rating.types.ts     |  31 ++---
 .../src/components/Rating/useRating.tsx       |  18 ++-
 .../components/RatingItem/RatingItem.types.ts |   2 +-
 .../components/RatingItem/useRatingItem.tsx   |   8 +-
 .../src/contexts/useRatingContextValues.ts    |   7 +-
 .../stories/Rating/RatingCompact.stories.tsx  |  14 ---
 .../stories/Rating/RatingDescription.md       |   3 +
 .../stories/Rating/RatingMode.stories.tsx     |  35 ++++++
 .../stories/Rating/RatingReadOnly.stories.tsx |  14 ---
 .../stories/Rating/index.stories.tsx          |   5 +-
 11 files changed, 140 insertions(+), 108 deletions(-)
 delete mode 100644 packages/react-components/react-rating-preview/stories/Rating/RatingCompact.stories.tsx
 create mode 100644 packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
 delete mode 100644 packages/react-components/react-rating-preview/stories/Rating/RatingReadOnly.stories.tsx

diff --git a/packages/react-components/react-rating-preview/docs/Spec.md b/packages/react-components/react-rating-preview/docs/Spec.md
index 89a7ab9c601655..cb25931e86dfb3 100644
--- a/packages/react-components/react-rating-preview/docs/Spec.md
+++ b/packages/react-components/react-rating-preview/docs/Spec.md
@@ -1,63 +1,104 @@
-# @fluentui/react-rating-preview Spec
+# @fluentui/react-rating Spec
 
 ## Background
 
-_Description and use cases of this component_
+A `Rating` component allows users to provide a rating for a particular item.
+
+This component displays a set of stars or other symbols that represent the rating value. Users can interact with the component to select a rating by clicking on the stars or using touch gestures.
 
 ## Prior Art
 
-_Include background research done for this component_
+### Open UI
+
+### Comparison of v8 and v0
 
-- _Link to Open UI research_
-- _Link to comparison of v7 and v0_
-- _Link to GitHub epic issue for the converged component_
+The existing components are:
+
+- v8
+  - `Rating`
+- v0
 
 ## Sample Code
 
-_Provide some representative example code that uses the proposed API for the component_
+Basic example:
 
-## Variants
+```jsx
+import { Rating } from '@fluentui/react-rating';
 
-_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._
+function App() {
+  return <Rating />;
+}
+```
 
 ## API
 
-_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_
+### Slots
+
+#### Rating slots
+
+- `root` - The root slot of the `Rating` is the container that will contain the slots that make up a `Rating`. The default html element is a `div`.
+- `ratingLabel` - This slot will render the value of the `Rating`. The default html element is a `label`.
+- `ratingCountLabel`- This slot will render the total number of ratings. The default html element is a `label`.
+
+#### RatingItem slots
+
+- `root` - The root slot of the `RatingItem`. The default element is `span`.
+- `selectedIcon` - Icon displayed when `Rating` value is greater than or equal to the `RatingItem` value.
+- `selectedFilledIcon` - Icon displayed when `Rating` value is less than the `RatingItem` value. Outline style gray
+- `selectedUnfilledIcon` - Icon displayed when `Rating` value is less than the `RatingItem` value. Outline style white.
+- `halfValueInput` - Input slot for when `precision` prop is active and need to render half values of `RatingItem`.
+- `fullValueInput` - Default input slot to render selected `RatingItem`
+
+### Props
+
+See API at [Rating.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts).
 
 ## Structure
 
-- _**Public**_
-- _**Internal**_
-- _**DOM** - how the component will be rendered as HTML elements_
+```html
+<!-- Container for Rating -->
+<div class="fui-Rating">
+  <input />
+  <!-- Container for RatingItem -->
+  <span class="fui-RatingItem">
+    <div class="fui-RatingItem">
+      <input />
+      <svg />
+    </div>
+  </span>
+</div>
+```
 
 ## Migration
 
-_Describe what will need to be done to upgrade from the existing implementations:_
-
-- _Migration from v8_
-- _Migration from v0_
+See [MIGRATION.md](./MIGRATION.md).
 
 ## Behaviors
 
-_Explain how the component will behave in use, including:_
+### States
+
+- **Display** - The `Rating` will use the following priority:
+
+  - The `appearance` prop will dictate whether an unfilled `RatingItem` has a neutral white background or a gray background. Typically used for readOnly
+  - The `mode` prop will be used to set the type of `Rating`.
+  - The `max` prop sets how many `RatingItems` there are in the `Rating`
+  - Setting the `size` prop will allow the user to specify the size of the element.
+  - You can pass in filled and regular versions of icons to `iconFilled` and `iconOutline` slots to render custom `RatingItems`.
+
+### Interaction
+
+The Rating can be interactive or non-iteractive depending on the use case
+
+- **Keyboard** - Can use arrow keys.
+- **Mouse**
+
+  - Click: Selects a `RatingItem`
+  - Hover: Fills up to the hovered `RatingItem`
 
-- _Component States_
-- _Interaction_
-  - _Keyboard_
-  - _Cursor_
-  - _Touch_
-  - _Screen readers_
+- **Touch**
+  - Press: Selects a `RatingItem`
+  - Drag: No behavior
 
 ## Accessibility
 
-Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document.
-
-- Decide whether to use **native element** or folow **ARIA** and provide reasons
-- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible.
-- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props.
-- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used
-- Specify texts for **state change announcements** - [ARIA live regions
-  ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...)
-- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them
-- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation)
-- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases)
+- Tbd. Needs some sort of labelling for the `RatingItem` when interactive and for the whole `Rating` component when readOnly
diff --git a/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts b/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
index ca974682f2945e..8dafb8893add7a 100644
--- a/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
+++ b/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
@@ -16,11 +16,6 @@ export type RatingProps = ComponentProps<RatingSlots> & {
    * @default outline (filled if readOnly is set)
    */
   appearance?: 'filled' | 'outline';
-  /**
-   * Sets whether to render a full or compact Rating
-   * @default false
-   */
-  compact?: boolean;
   /**
    * Default value of the Rating
    */
@@ -39,6 +34,11 @@ export type RatingProps = ComponentProps<RatingSlots> & {
    * @default 5
    */
   max?: number;
+  /**
+   * The mode of the rating.
+   * @default 'interactive'
+   */
+  mode?: 'interactive' | 'readonly' | 'readonly-compact';
   /**
    * Name for the Radio inputs. If not provided, one will be automatically generated
    */
@@ -52,11 +52,6 @@ export type RatingProps = ComponentProps<RatingSlots> & {
    * @default false
    */
   precision?: boolean;
-  /**
-   * Sets Rating to be read only
-   * @default false
-   */
-  readOnly?: boolean;
   /**
    * Sets the size of the Rating items.
    * @default medium
@@ -83,26 +78,14 @@ export type RatingOnChangeData = {
  */
 export type RatingState = ComponentState<RatingSlots> &
   Required<
-    Pick<
-      RatingProps,
-      'appearance' | 'compact' | 'iconFilled' | 'iconOutline' | 'name' | 'precision' | 'readOnly' | 'size' | 'value'
-    >
+    Pick<RatingProps, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value'>
   > & {
     hoveredValue?: number | undefined;
   };
 
 export type RatingContextValue = Pick<
   RatingState,
-  | 'appearance'
-  | 'compact'
-  | 'iconFilled'
-  | 'iconOutline'
-  | 'name'
-  | 'precision'
-  | 'readOnly'
-  | 'size'
-  | 'value'
-  | 'hoveredValue'
+  'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value' | 'hoveredValue'
 >;
 
 export type RatingContextValues = {
diff --git a/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx b/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
index 676dc051331f5b..b69255c5415902 100644
--- a/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
+++ b/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
@@ -23,15 +23,14 @@ import { StarFilled, StarRegular } from '@fluentui/react-icons';
 export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {
   const generatedName = useId('rating-');
   const {
-    appearance = props.readOnly ? 'filled' : 'outline',
-    compact = false,
+    appearance = props.mode === 'readonly' ? 'filled' : 'outline',
     iconFilled = <StarFilled />,
     iconOutline = <StarRegular />,
     max = 5,
+    mode = 'interactive',
     name = generatedName,
     onChange,
     precision = false,
-    readOnly = false,
     size = 'medium',
   } = props;
 
@@ -51,21 +50,20 @@ export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivEle
 
   //Prevents unnecessary rerendering of children
   const rootChildren = React.useMemo(() => {
-    return !compact ? (
-      Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} />)
-    ) : (
+    return mode === 'readonly-compact' ? (
       <RatingItem value={1} key={1} />
+    ) : (
+      Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} />)
     );
-  }, [compact, max]);
+  }, [mode, max]);
 
   const state: RatingState = {
     appearance,
-    compact,
     iconFilled,
     iconOutline,
+    mode,
     name,
     precision,
-    readOnly,
     size,
     value,
     hoveredValue,
@@ -92,7 +90,7 @@ export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivEle
     }),
   };
 
-  if (!readOnly) {
+  if (mode === 'interactive') {
     state.root.onChange = ev => {
       if (isRatingRadioItem(ev.target)) {
         const newValue = parseFloat(ev.target.value);
diff --git a/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts b/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
index 33486badbbff6e..cca7a1f7db9ead 100644
--- a/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
+++ b/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
@@ -44,6 +44,6 @@ export type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {
  */
 export type RatingItemState = ComponentState<RatingItemSlots> &
   Required<Pick<RatingItemProps, 'value'>> &
-  Pick<RatingState, 'compact' | 'precision' | 'size'> & {
+  Pick<RatingState, 'mode' | 'precision' | 'size'> & {
     iconFillWidth: number;
   };
diff --git a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
index ba451c501f058b..961fbdce28e948 100644
--- a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
+++ b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
@@ -22,7 +22,7 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   const displayedRatingValue = context?.hoveredValue ?? ratingValue;
 
   let iconFillWidth;
-  if ((context && context.compact) || displayedRatingValue >= value) {
+  if ((context && context.mode === 'readonly-compact') || displayedRatingValue >= value) {
     iconFillWidth = 1;
   } else if (displayedRatingValue >= value - 0.5) {
     iconFillWidth = 0.5;
@@ -74,7 +74,7 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   }
 
   let halfValueInput;
-  if (context && !context.readOnly && context.precision && !context.compact) {
+  if (context && context.mode === 'interactive' && context.precision) {
     halfValueInput = slot.always(props.halfValueInput, {
       defaultProps: {
         type: 'radio',
@@ -91,7 +91,7 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   }
 
   let fullValueInput;
-  if (context && !context.readOnly && !context.compact) {
+  if (context && context.mode === 'interactive') {
     fullValueInput = slot.always(props.fullValueInput, {
       defaultProps: {
         type: 'radio',
@@ -109,7 +109,7 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   }
 
   const state: RatingItemState = {
-    compact: context ? context.compact : false,
+    mode: context ? context.mode : 'interactive',
     precision: context ? context.precision : false,
     size: context ? context.size : 'medium',
     iconFillWidth,
diff --git a/packages/react-components/react-rating-preview/src/contexts/useRatingContextValues.ts b/packages/react-components/react-rating-preview/src/contexts/useRatingContextValues.ts
index c2fcdb01e1cfdf..2b2306bb05ddcc 100644
--- a/packages/react-components/react-rating-preview/src/contexts/useRatingContextValues.ts
+++ b/packages/react-components/react-rating-preview/src/contexts/useRatingContextValues.ts
@@ -3,22 +3,21 @@ import * as React from 'react';
 import { RatingContextValue, RatingState, RatingContextValues } from '../Rating';
 
 export const useRatingContextValues = (state: RatingState): RatingContextValues => {
-  const { appearance, compact, hoveredValue, iconFilled, iconOutline, name, precision, readOnly, size, value } = state;
+  const { appearance, hoveredValue, iconFilled, iconOutline, mode, name, precision, size, value } = state;
 
   const rating = React.useMemo<RatingContextValue>(
     () => ({
       appearance,
-      compact,
       hoveredValue,
       iconFilled,
       iconOutline,
+      mode,
       name,
       precision,
-      readOnly,
       size,
       value,
     }),
-    [appearance, compact, hoveredValue, iconFilled, iconOutline, name, precision, readOnly, size, value],
+    [appearance, hoveredValue, iconFilled, iconOutline, mode, name, precision, size, value],
   );
 
   return { rating };
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingCompact.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingCompact.stories.tsx
deleted file mode 100644
index dd337f0019265d..00000000000000
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingCompact.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { Rating } from '@fluentui/react-rating-preview';
-
-export const Compact = () => {
-  return <Rating compact value={2} ratingCountLabel="1,160" />;
-};
-
-Compact.parameters = {
-  docs: {
-    description: {
-      story: 'You can use a compact Rating as a representation of the total Rating count.',
-    },
-  },
-};
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingDescription.md b/packages/react-components/react-rating-preview/stories/Rating/RatingDescription.md
index e69de29bb2d1d6..12bc99b2b1096f 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingDescription.md
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingDescription.md
@@ -0,0 +1,3 @@
+A `Rating` component allows users to provide a rating for a particular item.
+
+`Rating` displays a set of stars or other symbols that represent the rating value. It can also display the value represented by the `Rating`, as well as the number of users who have given a rating. Users can interact with the component to select a rating by clicking on the stars or using touch gestures.
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
new file mode 100644
index 00000000000000..7477bbddcb32dd
--- /dev/null
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Rating } from '@fluentui/react-rating-preview';
+import { Label, makeStyles, shorthands } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    ...shorthands.gap('10px'),
+  },
+});
+
+export const Mode = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <div>
+        <Label> Compact </Label>
+        <Rating mode="readonly-compact" ratingLabel={3} ratingCountLabel="1,160" />
+      </div>
+      <div>
+        <Label> Read Only </Label>
+        <Rating mode="readonly" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+      </div>
+    </div>
+  );
+};
+
+Mode.parameters = {
+  docs: {
+    description: {
+      story: 'You can specify the mode of the Rating component with the "mode" prop.',
+    },
+  },
+};
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingReadOnly.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingReadOnly.stories.tsx
deleted file mode 100644
index c1075e16406dcf..00000000000000
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingReadOnly.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { Rating } from '@fluentui/react-rating-preview';
-
-export const ReadOnly = () => {
-  return <Rating readOnly value={3} ratingLabel={3} ratingCountLabel={'1,160'} />;
-};
-
-ReadOnly.parameters = {
-  docs: {
-    description: {
-      story: 'A readonly Rating can be used for display purposes, and is not functional.',
-    },
-  },
-};
diff --git a/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
index fec05cef2371be..25191c17e4aed1 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
@@ -4,10 +4,11 @@ import descriptionMd from './RatingDescription.md';
 import bestPracticesMd from './RatingBestPractices.md';
 
 export { Default } from './RatingDefault.stories';
-export { Compact } from './RatingCompact.stories';
+//export { Compact } from './RatingCompact.stories';
 export { Max } from './RatingMax.stories';
+export { Mode } from './RatingMode.stories';
 export { Precision } from './RatingPrecision.stories';
-export { ReadOnly } from './RatingReadOnly.stories';
+//export { ReadOnly } from './RatingReadOnly.stories';
 export { Size } from './RatingSize.stories';
 export { Shape } from './RatingShape.stories';
 

From 6cb417b5eb067051c044cacab0d83a119ef11dc0 Mon Sep 17 00:00:00 2001
From: Tomi Olubeko <ololubek@microsoft.com>
Date: Fri, 15 Dec 2023 13:25:22 -0800
Subject: [PATCH 2/6] api update

---
 .../react-rating-preview/etc/react-rating-preview.api.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
index 4c7773131404f6..dede67be422e9b 100644
--- a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
+++ b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
@@ -20,7 +20,7 @@ export const Rating: ForwardRefComponent<RatingProps>;
 export const ratingClassNames: SlotClassNames<RatingSlots>;
 
 // @public (undocumented)
-export type RatingContextValue = Pick<RatingState, 'appearance' | 'compact' | 'iconFilled' | 'iconOutline' | 'name' | 'precision' | 'readOnly' | 'size' | 'value' | 'hoveredValue'>;
+export type RatingContextValue = Pick<RatingState, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value' | 'hoveredValue'>;
 
 // @public (undocumented)
 export type RatingContextValues = {
@@ -49,7 +49,7 @@ export type RatingItemSlots = {
 };
 
 // @public
-export type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'compact' | 'precision' | 'size'> & {
+export type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'mode' | 'precision' | 'size'> & {
     iconFillWidth: number;
 };
 
@@ -61,15 +61,14 @@ export type RatingOnChangeData = {
 // @public
 export type RatingProps = ComponentProps<RatingSlots> & {
     appearance?: 'filled' | 'outline';
-    compact?: boolean;
     defaultValue?: number;
     iconFilled?: React_2.ReactElement;
     iconOutline?: React_2.ReactElement;
     max?: number;
+    mode?: 'interactive' | 'readonly' | 'readonly-compact';
     name?: string;
     onChange?: (ev: React_2.SyntheticEvent | Event, data: RatingOnChangeData) => void;
     precision?: boolean;
-    readOnly?: boolean;
     size?: 'small' | 'medium' | 'large';
     value?: number;
 };
@@ -85,7 +84,7 @@ export type RatingSlots = {
 };
 
 // @public
-export type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'appearance' | 'compact' | 'iconFilled' | 'iconOutline' | 'name' | 'precision' | 'readOnly' | 'size' | 'value'>> & {
+export type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value'>> & {
     hoveredValue?: number | undefined;
 };
 

From 9ce08a5335d40f1b707f6b88dfaed166165b2239 Mon Sep 17 00:00:00 2001
From: Tomi Olubeko <ololubek@microsoft.com>
Date: Sun, 7 Jan 2024 22:11:57 -0800
Subject: [PATCH 3/6] Update storis and type files with new values from figma

---
 .../etc/react-rating-preview.api.md           | 10 +++--
 .../src/components/Rating/Rating.types.ts     |  8 ++--
 .../src/components/Rating/useRating.tsx       |  2 +-
 .../components/RatingItem/RatingItem.types.ts |  2 +-
 .../components/RatingItem/useRatingItem.tsx   |  3 +-
 .../RatingItem/useRatingItemStyles.styles.ts  | 37 ++++++++++++++++++
 .../Rating/RatingAppearance.stories.tsx       | 39 +++++++++++++++++++
 .../stories/Rating/RatingMode.stories.tsx     | 16 ++++++++
 .../stories/Rating/RatingSize.stories.tsx     |  9 +++--
 .../stories/Rating/index.stories.tsx          |  3 +-
 10 files changed, 112 insertions(+), 17 deletions(-)
 create mode 100644 packages/react-components/react-rating-preview/stories/Rating/RatingAppearance.stories.tsx

diff --git a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
index dede67be422e9b..6289e112540c2b 100644
--- a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
+++ b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
@@ -20,7 +20,7 @@ export const Rating: ForwardRefComponent<RatingProps>;
 export const ratingClassNames: SlotClassNames<RatingSlots>;
 
 // @public (undocumented)
-export type RatingContextValue = Pick<RatingState, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value' | 'hoveredValue'>;
+export type RatingContextValue = Pick<RatingState, 'appearance' | 'bordered' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'unselectedAppearance' | 'value' | 'hoveredValue'>;
 
 // @public (undocumented)
 export type RatingContextValues = {
@@ -49,7 +49,7 @@ export type RatingItemSlots = {
 };
 
 // @public
-export type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'mode' | 'precision' | 'size'> & {
+export type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'appearance' | 'bordered' | 'mode' | 'precision' | 'size'> & {
     iconFillWidth: number;
 };
 
@@ -60,7 +60,8 @@ export type RatingOnChangeData = {
 
 // @public
 export type RatingProps = ComponentProps<RatingSlots> & {
-    appearance?: 'filled' | 'outline';
+    appearance?: 'brand' | 'marigold' | 'neutral';
+    bordered?: boolean;
     defaultValue?: number;
     iconFilled?: React_2.ReactElement;
     iconOutline?: React_2.ReactElement;
@@ -70,6 +71,7 @@ export type RatingProps = ComponentProps<RatingSlots> & {
     onChange?: (ev: React_2.SyntheticEvent | Event, data: RatingOnChangeData) => void;
     precision?: boolean;
     size?: 'small' | 'medium' | 'large';
+    unselectedAppearance?: 'filled' | 'outline';
     value?: number;
 };
 
@@ -84,7 +86,7 @@ export type RatingSlots = {
 };
 
 // @public
-export type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value'>> & {
+export type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'appearance' | 'bordered' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'unselectedAppearance' | 'value'>> & {
     hoveredValue?: number | undefined;
 };
 
diff --git a/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts b/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
index 8dafb8893add7a..528740183d26e4 100644
--- a/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
+++ b/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
@@ -12,10 +12,10 @@ export type RatingSlots = {
  */
 export type RatingProps = ComponentProps<RatingSlots> & {
   /**
-   * Controls the appearance of unselected rating items.
-   * @default outline (filled if readOnly is set)
+   * Controls the appearance of the Rating.
+   * @default neutral
    */
-  appearance?: 'filled' | 'outline';
+  appearance?: 'brand' | 'marigold' | 'neutral';
   /**
    * Default value of the Rating
    */
@@ -56,7 +56,7 @@ export type RatingProps = ComponentProps<RatingSlots> & {
    * Sets the size of the Rating items.
    * @default medium
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
   /**
    * The value of the rating
    */
diff --git a/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx b/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
index b69255c5415902..f47cafd42195c4 100644
--- a/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
+++ b/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
@@ -23,7 +23,7 @@ import { StarFilled, StarRegular } from '@fluentui/react-icons';
 export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {
   const generatedName = useId('rating-');
   const {
-    appearance = props.mode === 'readonly' ? 'filled' : 'outline',
+    appearance = 'neutral',
     iconFilled = <StarFilled />,
     iconOutline = <StarRegular />,
     max = 5,
diff --git a/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts b/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
index cca7a1f7db9ead..f7e449b9053282 100644
--- a/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
+++ b/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
@@ -44,6 +44,6 @@ export type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {
  */
 export type RatingItemState = ComponentState<RatingItemSlots> &
   Required<Pick<RatingItemProps, 'value'>> &
-  Pick<RatingState, 'mode' | 'precision' | 'size'> & {
+  Pick<RatingState, 'appearance' | 'mode' | 'precision' | 'size'> & {
     iconFillWidth: number;
   };
diff --git a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
index 961fbdce28e948..07c7caae2a310a 100644
--- a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
+++ b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
@@ -52,7 +52,7 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   }
 
   let unselectedFilledIcon;
-  if (context && iconFillWidth < 1 && context.appearance === 'filled') {
+  if (context && context.mode !== 'interactive' && iconFillWidth < 1) {
     unselectedFilledIcon = slot.always(props.unselectedFilledIcon, {
       defaultProps: {
         children: context.iconFilled,
@@ -109,6 +109,7 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   }
 
   const state: RatingItemState = {
+    appearance: context ? context.appearance : 'neutral',
     mode: context ? context.mode : 'interactive',
     precision: context ? context.precision : false,
     size: context ? context.size : 'medium',
diff --git a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItemStyles.styles.ts b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItemStyles.styles.ts
index 650e1733acce45..deb48be54e23dd 100644
--- a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItemStyles.styles.ts
+++ b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItemStyles.styles.ts
@@ -16,6 +16,7 @@ const indicatorSizes = {
   small: '12px',
   medium: '16px',
   large: '20px',
+  xlarge: '28px',
 };
 
 /**
@@ -42,6 +43,12 @@ const useStyles = makeStyles({
     width: indicatorSizes.large,
     height: indicatorSizes.large,
   },
+
+  xlarge: {
+    fontSize: indicatorSizes.xlarge,
+    width: indicatorSizes.xlarge,
+    height: indicatorSizes.xlarge,
+  },
 });
 
 const useInputBaseClassName = makeResetStyles({
@@ -83,6 +90,23 @@ const useIndicatorStyles = makeStyles({
     left: '50%',
     marginLeft: '-50%',
   },
+  bordered: {
+    '& > svg': {
+      stroke: 'currentColor',
+    },
+  },
+  brand: {
+    color: tokens.colorBrandBackground,
+  },
+  unselectedFilledBrand: {
+    color: tokens.colorBrandBackground2,
+  },
+  marigold: {
+    color: tokens.colorPaletteMarigoldBackground3,
+  },
+  unselectedFilledMarigold: {
+    color: tokens.colorPaletteMarigoldBackground2,
+  },
   unselectedFilled: {
     color: tokens.colorNeutralBackground6,
     '@media (forced-colors: active)': {
@@ -94,6 +118,12 @@ const useIndicatorStyles = makeStyles({
   unselectedOutline: {
     color: tokens.colorNeutralForeground3,
   },
+  unselectedOutlineBrand: {
+    color: tokens.colorBrandForeground1,
+  },
+  unselectedOutlineMarigold: {
+    color: tokens.colorPaletteMarigoldForeground3,
+  },
   unselectedOutlineHighContrast: {
     // When the style is 'filled' for unselected icons, we still
     // need to show the outline version for high contrast.
@@ -138,6 +168,10 @@ export const useRatingItemStyles_unstable = (state: RatingItemState): RatingItem
       indicatorBaseClassName,
       indicatorStyles.unselectedOutline,
       state.unselectedFilledIcon ? indicatorStyles.unselectedOutlineHighContrast : indicatorStyles.unselectedOutline,
+      state.mode === 'interactive' && indicatorStyles.bordered,
+      state.appearance === 'neutral' && indicatorStyles.unselectedOutline,
+      state.appearance === 'brand' && indicatorStyles.unselectedOutlineBrand,
+      state.appearance === 'marigold' && indicatorStyles.unselectedOutlineMarigold,
       iconFillWidth === 0.5 && indicatorStyles.upperHalf,
       state.unselectedOutlineIcon.className,
     );
@@ -147,6 +181,7 @@ export const useRatingItemStyles_unstable = (state: RatingItemState): RatingItem
       ratingItemClassNames.unselectedFilledIcon,
       indicatorBaseClassName,
       indicatorStyles.unselectedFilled,
+      state.appearance === 'brand' && indicatorStyles.unselectedFilledBrand,
       iconFillWidth === 0.5 && indicatorStyles.upperHalf,
       state.unselectedFilledIcon.className,
     );
@@ -155,6 +190,8 @@ export const useRatingItemStyles_unstable = (state: RatingItemState): RatingItem
     state.selectedIcon.className = mergeClasses(
       ratingItemClassNames.selectedIcon,
       indicatorBaseClassName,
+      state.appearance === 'brand' && indicatorStyles.brand,
+      state.appearance === 'marigold' && indicatorStyles.marigold,
       iconFillWidth === 0.5 && indicatorStyles.lowerHalf,
       state.selectedIcon.className,
     );
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingAppearance.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingAppearance.stories.tsx
new file mode 100644
index 00000000000000..6a9d569edcc28c
--- /dev/null
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingAppearance.stories.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Rating } from '@fluentui/react-rating-preview';
+import { Label, makeStyles, shorthands } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    ...shorthands.gap('10px'),
+  },
+});
+
+export const Appearance = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <div>
+        <Label> Brand </Label>
+        <Rating appearance="brand" defaultValue={3} ratingLabel={3} ratingCountLabel="1,160" />
+      </div>
+      <div>
+        <Label> Marigold </Label>
+        <Rating appearance="marigold" defaultValue={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+      </div>
+      <div>
+        <Label> Neutral </Label>
+        <Rating defaultValue={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+      </div>
+    </div>
+  );
+};
+
+Appearance.parameters = {
+  docs: {
+    description: {
+      story: 'You can specify the appearance of the Rating component with the "appearance" prop.',
+    },
+  },
+};
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
index 7477bbddcb32dd..f2b4d845bf9b74 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
@@ -22,6 +22,22 @@ export const Mode = () => {
         <Label> Read Only </Label>
         <Rating mode="readonly" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
       </div>
+      <div>
+        <Label> Brand Compact </Label>
+        <Rating appearance="brand" mode="readonly-compact" ratingLabel={3} ratingCountLabel="1,160" />
+      </div>
+      <div>
+        <Label> Brand Read Only </Label>
+        <Rating appearance="brand" mode="readonly" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+      </div>
+      <div>
+        <Label> Marigold Compact </Label>
+        <Rating appearance="marigold" mode="readonly-compact" ratingLabel={3} ratingCountLabel="1,160" />
+      </div>
+      <div>
+        <Label> Marigold Read Only </Label>
+        <Rating appearance="marigold" mode="readonly" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+      </div>
     </div>
   );
 };
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingSize.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingSize.stories.tsx
index fffd4e1cc67a2b..ea51c7dd535db0 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingSize.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingSize.stories.tsx
@@ -14,9 +14,10 @@ export const Size = () => {
   const classes = useStyles();
   return (
     <div className={classes.root}>
-      <Rating size="small" />
-      <Rating size="medium" />
-      <Rating size="large" />
+      <Rating defaultValue={3} size="small" />
+      <Rating defaultValue={3} size="medium" />
+      <Rating defaultValue={3} size="large" />
+      <Rating defaultValue={3} size="xlarge" />
     </div>
   );
 };
@@ -24,7 +25,7 @@ export const Size = () => {
 Size.parameters = {
   docs: {
     description: {
-      story: 'A Rating can be small, medium, or large. You can specify the size with the "size" prop.',
+      story: 'A Rating can be small, medium, large, or xlarge. You can specify the size with the "size" prop.',
     },
   },
 };
diff --git a/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
index 25191c17e4aed1..61bc209d9bc2bb 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
@@ -4,11 +4,10 @@ import descriptionMd from './RatingDescription.md';
 import bestPracticesMd from './RatingBestPractices.md';
 
 export { Default } from './RatingDefault.stories';
-//export { Compact } from './RatingCompact.stories';
+export { Appearance } from './RatingAppearance.stories';
 export { Max } from './RatingMax.stories';
 export { Mode } from './RatingMode.stories';
 export { Precision } from './RatingPrecision.stories';
-//export { ReadOnly } from './RatingReadOnly.stories';
 export { Size } from './RatingSize.stories';
 export { Shape } from './RatingShape.stories';
 

From a1b15b98cd84683adc1f5a693b9c48da095223b2 Mon Sep 17 00:00:00 2001
From: Tomi Olubeko <ololubek@microsoft.com>
Date: Sun, 7 Jan 2024 22:19:48 -0800
Subject: [PATCH 4/6] change file and api update

---
 ...g-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json |  7 +++++++
 .../etc/react-rating-preview.api.md                    | 10 ++++------
 2 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 change/@fluentui-react-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json

diff --git a/change/@fluentui-react-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json b/change/@fluentui-react-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json
new file mode 100644
index 00000000000000..f9da21aa643f55
--- /dev/null
+++ b/change/@fluentui-react-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update stories and props",
+  "packageName": "@fluentui/react-rating-preview",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
index 6289e112540c2b..259b1e6e6a8d1b 100644
--- a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
+++ b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
@@ -20,7 +20,7 @@ export const Rating: ForwardRefComponent<RatingProps>;
 export const ratingClassNames: SlotClassNames<RatingSlots>;
 
 // @public (undocumented)
-export type RatingContextValue = Pick<RatingState, 'appearance' | 'bordered' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'unselectedAppearance' | 'value' | 'hoveredValue'>;
+export type RatingContextValue = Pick<RatingState, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value' | 'hoveredValue'>;
 
 // @public (undocumented)
 export type RatingContextValues = {
@@ -49,7 +49,7 @@ export type RatingItemSlots = {
 };
 
 // @public
-export type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'appearance' | 'bordered' | 'mode' | 'precision' | 'size'> & {
+export type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'appearance' | 'mode' | 'precision' | 'size'> & {
     iconFillWidth: number;
 };
 
@@ -61,7 +61,6 @@ export type RatingOnChangeData = {
 // @public
 export type RatingProps = ComponentProps<RatingSlots> & {
     appearance?: 'brand' | 'marigold' | 'neutral';
-    bordered?: boolean;
     defaultValue?: number;
     iconFilled?: React_2.ReactElement;
     iconOutline?: React_2.ReactElement;
@@ -70,8 +69,7 @@ export type RatingProps = ComponentProps<RatingSlots> & {
     name?: string;
     onChange?: (ev: React_2.SyntheticEvent | Event, data: RatingOnChangeData) => void;
     precision?: boolean;
-    size?: 'small' | 'medium' | 'large';
-    unselectedAppearance?: 'filled' | 'outline';
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     value?: number;
 };
 
@@ -86,7 +84,7 @@ export type RatingSlots = {
 };
 
 // @public
-export type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'appearance' | 'bordered' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'unselectedAppearance' | 'value'>> & {
+export type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value'>> & {
     hoveredValue?: number | undefined;
 };
 

From 90e5e78c08a0880b26580badbc831c2d0caaca51 Mon Sep 17 00:00:00 2001
From: Tomi Olubeko <ololubek@microsoft.com>
Date: Mon, 8 Jan 2024 12:50:02 -0800
Subject: [PATCH 5/6] update api: change appearance to color and precision to
 step

---
 .../etc/react-rating-preview.api.md           | 14 +++----
 .../src/components/Rating/Rating.types.ts     | 16 ++++----
 .../src/components/Rating/useRating.tsx       | 10 ++---
 .../components/RatingItem/RatingItem.types.ts |  2 +-
 .../components/RatingItem/useRatingItem.tsx   |  8 ++--
 .../RatingItem/useRatingItemStyles.styles.ts  | 28 ++++++-------
 .../src/contexts/useRatingContextValues.ts    |  8 ++--
 .../Rating/RatingAppearance.stories.tsx       | 39 -------------------
 .../stories/Rating/RatingColor.stories.tsx    | 32 +++++++++++++++
 .../stories/Rating/RatingMax.stories.tsx      |  2 +-
 .../stories/Rating/RatingMode.stories.tsx     | 12 +++---
 .../stories/Rating/RatingShape.stories.tsx    |  2 +-
 .../stories/Rating/RatingSize.stories.tsx     |  2 +-
 ...ion.stories.tsx => RatingStep.stories.tsx} |  8 ++--
 .../stories/Rating/index.stories.tsx          |  4 +-
 15 files changed, 86 insertions(+), 101 deletions(-)
 delete mode 100644 packages/react-components/react-rating-preview/stories/Rating/RatingAppearance.stories.tsx
 create mode 100644 packages/react-components/react-rating-preview/stories/Rating/RatingColor.stories.tsx
 rename packages/react-components/react-rating-preview/stories/Rating/{RatingPrecision.stories.tsx => RatingStep.stories.tsx} (61%)

diff --git a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
index 259b1e6e6a8d1b..94301558d55107 100644
--- a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
+++ b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
@@ -20,7 +20,7 @@ export const Rating: ForwardRefComponent<RatingProps>;
 export const ratingClassNames: SlotClassNames<RatingSlots>;
 
 // @public (undocumented)
-export type RatingContextValue = Pick<RatingState, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value' | 'hoveredValue'>;
+export type RatingContextValue = Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'step' | 'size' | 'value' | 'hoveredValue'>;
 
 // @public (undocumented)
 export type RatingContextValues = {
@@ -49,7 +49,7 @@ export type RatingItemSlots = {
 };
 
 // @public
-export type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'appearance' | 'mode' | 'precision' | 'size'> & {
+export type RatingItemState = ComponentState<RatingItemSlots> & Required<Pick<RatingItemProps, 'value'>> & Pick<RatingState, 'color' | 'mode' | 'step' | 'size'> & {
     iconFillWidth: number;
 };
 
@@ -60,16 +60,16 @@ export type RatingOnChangeData = {
 
 // @public
 export type RatingProps = ComponentProps<RatingSlots> & {
-    appearance?: 'brand' | 'marigold' | 'neutral';
+    color?: 'brand' | 'marigold' | 'neutral';
     defaultValue?: number;
     iconFilled?: React_2.ReactElement;
     iconOutline?: React_2.ReactElement;
     max?: number;
-    mode?: 'interactive' | 'readonly' | 'readonly-compact';
+    mode?: 'interactive' | 'read-only' | 'read-only-compact';
     name?: string;
     onChange?: (ev: React_2.SyntheticEvent | Event, data: RatingOnChangeData) => void;
-    precision?: boolean;
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    step?: 0.5 | 1;
+    size?: 'small' | 'medium' | 'large' | 'extra-large';
     value?: number;
 };
 
@@ -84,7 +84,7 @@ export type RatingSlots = {
 };
 
 // @public
-export type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value'>> & {
+export type RatingState = ComponentState<RatingSlots> & Required<Pick<RatingProps, 'color' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'step' | 'size' | 'value'>> & {
     hoveredValue?: number | undefined;
 };
 
diff --git a/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts b/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
index 528740183d26e4..0bfd260e09eda3 100644
--- a/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
+++ b/packages/react-components/react-rating-preview/src/components/Rating/Rating.types.ts
@@ -15,7 +15,7 @@ export type RatingProps = ComponentProps<RatingSlots> & {
    * Controls the appearance of the Rating.
    * @default neutral
    */
-  appearance?: 'brand' | 'marigold' | 'neutral';
+  color?: 'brand' | 'marigold' | 'neutral';
   /**
    * Default value of the Rating
    */
@@ -38,7 +38,7 @@ export type RatingProps = ComponentProps<RatingSlots> & {
    * The mode of the rating.
    * @default 'interactive'
    */
-  mode?: 'interactive' | 'readonly' | 'readonly-compact';
+  mode?: 'interactive' | 'read-only' | 'read-only-compact';
   /**
    * Name for the Radio inputs. If not provided, one will be automatically generated
    */
@@ -49,14 +49,14 @@ export type RatingProps = ComponentProps<RatingSlots> & {
   onChange?: (ev: React.SyntheticEvent | Event, data: RatingOnChangeData) => void;
   /**
    * Sets the precision to allow half-filled shapes in Rating
-   * @default false
+   * @default 1
    */
-  precision?: boolean;
+  step?: 0.5 | 1;
   /**
    * Sets the size of the Rating items.
    * @default medium
    */
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  size?: 'small' | 'medium' | 'large' | 'extra-large';
   /**
    * The value of the rating
    */
@@ -77,15 +77,13 @@ export type RatingOnChangeData = {
  * State used in rendering Rating
  */
 export type RatingState = ComponentState<RatingSlots> &
-  Required<
-    Pick<RatingProps, 'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value'>
-  > & {
+  Required<Pick<RatingProps, 'color' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'step' | 'size' | 'value'>> & {
     hoveredValue?: number | undefined;
   };
 
 export type RatingContextValue = Pick<
   RatingState,
-  'appearance' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'precision' | 'size' | 'value' | 'hoveredValue'
+  'color' | 'iconFilled' | 'iconOutline' | 'mode' | 'name' | 'step' | 'size' | 'value' | 'hoveredValue'
 >;
 
 export type RatingContextValues = {
diff --git a/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx b/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
index f47cafd42195c4..9d4c58e87d36c9 100644
--- a/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
+++ b/packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx
@@ -23,14 +23,14 @@ import { StarFilled, StarRegular } from '@fluentui/react-icons';
 export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {
   const generatedName = useId('rating-');
   const {
-    appearance = 'neutral',
+    color = 'neutral',
     iconFilled = <StarFilled />,
     iconOutline = <StarRegular />,
     max = 5,
     mode = 'interactive',
     name = generatedName,
     onChange,
-    precision = false,
+    step = 1,
     size = 'medium',
   } = props;
 
@@ -50,7 +50,7 @@ export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivEle
 
   //Prevents unnecessary rerendering of children
   const rootChildren = React.useMemo(() => {
-    return mode === 'readonly-compact' ? (
+    return mode === 'read-only-compact' ? (
       <RatingItem value={1} key={1} />
     ) : (
       Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} />)
@@ -58,12 +58,12 @@ export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivEle
   }, [mode, max]);
 
   const state: RatingState = {
-    appearance,
+    color,
     iconFilled,
     iconOutline,
     mode,
     name,
-    precision,
+    step,
     size,
     value,
     hoveredValue,
diff --git a/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts b/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
index f7e449b9053282..fd56d44484a117 100644
--- a/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
+++ b/packages/react-components/react-rating-preview/src/components/RatingItem/RatingItem.types.ts
@@ -44,6 +44,6 @@ export type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {
  */
 export type RatingItemState = ComponentState<RatingItemSlots> &
   Required<Pick<RatingItemProps, 'value'>> &
-  Pick<RatingState, 'appearance' | 'mode' | 'precision' | 'size'> & {
+  Pick<RatingState, 'color' | 'mode' | 'step' | 'size'> & {
     iconFillWidth: number;
   };
diff --git a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
index 07c7caae2a310a..c96b41ef397642 100644
--- a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
+++ b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx
@@ -22,7 +22,7 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   const displayedRatingValue = context?.hoveredValue ?? ratingValue;
 
   let iconFillWidth;
-  if ((context && context.mode === 'readonly-compact') || displayedRatingValue >= value) {
+  if ((context && context.mode === 'read-only-compact') || displayedRatingValue >= value) {
     iconFillWidth = 1;
   } else if (displayedRatingValue >= value - 0.5) {
     iconFillWidth = 0.5;
@@ -74,7 +74,7 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   }
 
   let halfValueInput;
-  if (context && context.mode === 'interactive' && context.precision) {
+  if (context && context.mode === 'interactive' && context.step === 0.5) {
     halfValueInput = slot.always(props.halfValueInput, {
       defaultProps: {
         type: 'radio',
@@ -109,9 +109,9 @@ export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HT
   }
 
   const state: RatingItemState = {
-    appearance: context ? context.appearance : 'neutral',
+    color: context ? context.color : 'neutral',
     mode: context ? context.mode : 'interactive',
-    precision: context ? context.precision : false,
+    step: context ? (context.step === 1 ? 1 : 0.5) : 1,
     size: context ? context.size : 'medium',
     iconFillWidth,
     value,
diff --git a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItemStyles.styles.ts b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItemStyles.styles.ts
index deb48be54e23dd..96b452e1a8be04 100644
--- a/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItemStyles.styles.ts
+++ b/packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItemStyles.styles.ts
@@ -16,7 +16,7 @@ const indicatorSizes = {
   small: '12px',
   medium: '16px',
   large: '20px',
-  xlarge: '28px',
+  'extra-large': '28px',
 };
 
 /**
@@ -44,10 +44,10 @@ const useStyles = makeStyles({
     height: indicatorSizes.large,
   },
 
-  xlarge: {
-    fontSize: indicatorSizes.xlarge,
-    width: indicatorSizes.xlarge,
-    height: indicatorSizes.xlarge,
+  'extra-large': {
+    fontSize: indicatorSizes['extra-large'],
+    width: indicatorSizes['extra-large'],
+    height: indicatorSizes['extra-large'],
   },
 });
 
@@ -90,11 +90,6 @@ const useIndicatorStyles = makeStyles({
     left: '50%',
     marginLeft: '-50%',
   },
-  bordered: {
-    '& > svg': {
-      stroke: 'currentColor',
-    },
-  },
   brand: {
     color: tokens.colorBrandBackground,
   },
@@ -168,10 +163,9 @@ export const useRatingItemStyles_unstable = (state: RatingItemState): RatingItem
       indicatorBaseClassName,
       indicatorStyles.unselectedOutline,
       state.unselectedFilledIcon ? indicatorStyles.unselectedOutlineHighContrast : indicatorStyles.unselectedOutline,
-      state.mode === 'interactive' && indicatorStyles.bordered,
-      state.appearance === 'neutral' && indicatorStyles.unselectedOutline,
-      state.appearance === 'brand' && indicatorStyles.unselectedOutlineBrand,
-      state.appearance === 'marigold' && indicatorStyles.unselectedOutlineMarigold,
+      state.color === 'neutral' && indicatorStyles.unselectedOutline,
+      state.color === 'brand' && indicatorStyles.unselectedOutlineBrand,
+      state.color === 'marigold' && indicatorStyles.unselectedOutlineMarigold,
       iconFillWidth === 0.5 && indicatorStyles.upperHalf,
       state.unselectedOutlineIcon.className,
     );
@@ -181,7 +175,7 @@ export const useRatingItemStyles_unstable = (state: RatingItemState): RatingItem
       ratingItemClassNames.unselectedFilledIcon,
       indicatorBaseClassName,
       indicatorStyles.unselectedFilled,
-      state.appearance === 'brand' && indicatorStyles.unselectedFilledBrand,
+      state.color === 'brand' && indicatorStyles.unselectedFilledBrand,
       iconFillWidth === 0.5 && indicatorStyles.upperHalf,
       state.unselectedFilledIcon.className,
     );
@@ -190,8 +184,8 @@ export const useRatingItemStyles_unstable = (state: RatingItemState): RatingItem
     state.selectedIcon.className = mergeClasses(
       ratingItemClassNames.selectedIcon,
       indicatorBaseClassName,
-      state.appearance === 'brand' && indicatorStyles.brand,
-      state.appearance === 'marigold' && indicatorStyles.marigold,
+      state.color === 'brand' && indicatorStyles.brand,
+      state.color === 'marigold' && indicatorStyles.marigold,
       iconFillWidth === 0.5 && indicatorStyles.lowerHalf,
       state.selectedIcon.className,
     );
diff --git a/packages/react-components/react-rating-preview/src/contexts/useRatingContextValues.ts b/packages/react-components/react-rating-preview/src/contexts/useRatingContextValues.ts
index 2b2306bb05ddcc..b5a23b3c275cb3 100644
--- a/packages/react-components/react-rating-preview/src/contexts/useRatingContextValues.ts
+++ b/packages/react-components/react-rating-preview/src/contexts/useRatingContextValues.ts
@@ -3,21 +3,21 @@ import * as React from 'react';
 import { RatingContextValue, RatingState, RatingContextValues } from '../Rating';
 
 export const useRatingContextValues = (state: RatingState): RatingContextValues => {
-  const { appearance, hoveredValue, iconFilled, iconOutline, mode, name, precision, size, value } = state;
+  const { color, hoveredValue, iconFilled, iconOutline, mode, name, step, size, value } = state;
 
   const rating = React.useMemo<RatingContextValue>(
     () => ({
-      appearance,
+      color,
       hoveredValue,
       iconFilled,
       iconOutline,
       mode,
       name,
-      precision,
+      step,
       size,
       value,
     }),
-    [appearance, hoveredValue, iconFilled, iconOutline, mode, name, precision, size, value],
+    [color, hoveredValue, iconFilled, iconOutline, mode, name, step, size, value],
   );
 
   return { rating };
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingAppearance.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingAppearance.stories.tsx
deleted file mode 100644
index 6a9d569edcc28c..00000000000000
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingAppearance.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { Rating } from '@fluentui/react-rating-preview';
-import { Label, makeStyles, shorthands } from '@fluentui/react-components';
-
-const useStyles = makeStyles({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    ...shorthands.gap('10px'),
-  },
-});
-
-export const Appearance = () => {
-  const styles = useStyles();
-  return (
-    <div className={styles.root}>
-      <div>
-        <Label> Brand </Label>
-        <Rating appearance="brand" defaultValue={3} ratingLabel={3} ratingCountLabel="1,160" />
-      </div>
-      <div>
-        <Label> Marigold </Label>
-        <Rating appearance="marigold" defaultValue={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
-      </div>
-      <div>
-        <Label> Neutral </Label>
-        <Rating defaultValue={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
-      </div>
-    </div>
-  );
-};
-
-Appearance.parameters = {
-  docs: {
-    description: {
-      story: 'You can specify the appearance of the Rating component with the "appearance" prop.',
-    },
-  },
-};
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingColor.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingColor.stories.tsx
new file mode 100644
index 00000000000000..f1ceb15ad362c8
--- /dev/null
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingColor.stories.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Rating } from '@fluentui/react-rating-preview';
+import { makeStyles, shorthands } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    ...shorthands.gap('10px'),
+  },
+});
+
+export const Color = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <Rating color="brand" defaultValue={3} ratingLabel={3} ratingCountLabel="1,160" />
+
+      <Rating color="marigold" defaultValue={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+
+      <Rating defaultValue={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+    </div>
+  );
+};
+
+Color.parameters = {
+  docs: {
+    description: {
+      story: 'You can specify the appearance of the Rating component with the "appearance" prop.',
+    },
+  },
+};
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingMax.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingMax.stories.tsx
index ba460c71ef2030..8fe6613175feac 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingMax.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingMax.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Rating } from '@fluentui/react-rating-preview';
 
 export const Max = () => {
-  return <Rating max={10} />;
+  return <Rating max={10} defaultValue={5} />;
 };
 
 Max.parameters = {
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
index f2b4d845bf9b74..d5fdc86b13c536 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingMode.stories.tsx
@@ -16,27 +16,27 @@ export const Mode = () => {
     <div className={styles.root}>
       <div>
         <Label> Compact </Label>
-        <Rating mode="readonly-compact" ratingLabel={3} ratingCountLabel="1,160" />
+        <Rating mode="read-only-compact" ratingLabel={3} ratingCountLabel="1,160" />
       </div>
       <div>
         <Label> Read Only </Label>
-        <Rating mode="readonly" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+        <Rating mode="read-only" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
       </div>
       <div>
         <Label> Brand Compact </Label>
-        <Rating appearance="brand" mode="readonly-compact" ratingLabel={3} ratingCountLabel="1,160" />
+        <Rating color="brand" mode="read-only-compact" ratingLabel={3} ratingCountLabel="1,160" />
       </div>
       <div>
         <Label> Brand Read Only </Label>
-        <Rating appearance="brand" mode="readonly" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+        <Rating color="brand" mode="read-only" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
       </div>
       <div>
         <Label> Marigold Compact </Label>
-        <Rating appearance="marigold" mode="readonly-compact" ratingLabel={3} ratingCountLabel="1,160" />
+        <Rating color="marigold" mode="read-only-compact" ratingLabel={3} ratingCountLabel="1,160" />
       </div>
       <div>
         <Label> Marigold Read Only </Label>
-        <Rating appearance="marigold" mode="readonly" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
+        <Rating color="marigold" mode="read-only" value={3.5} ratingLabel={3.5} ratingCountLabel="1,160" />
       </div>
     </div>
   );
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingShape.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingShape.stories.tsx
index 257014132981ca..aabff90da720c5 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingShape.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingShape.stories.tsx
@@ -15,7 +15,7 @@ export const Shape = () => {
   const styles = useStyles();
   return (
     <div className={styles.root}>
-      <Rating iconFilled={<CircleFilled />} iconOutline={<CircleRegular />} precision />
+      <Rating iconFilled={<CircleFilled />} iconOutline={<CircleRegular />} step={0.5} />
       <Rating iconFilled={<SquareFilled />} iconOutline={<SquareRegular />} />
     </div>
   );
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingSize.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingSize.stories.tsx
index ea51c7dd535db0..deccd3d0b4918b 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingSize.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingSize.stories.tsx
@@ -17,7 +17,7 @@ export const Size = () => {
       <Rating defaultValue={3} size="small" />
       <Rating defaultValue={3} size="medium" />
       <Rating defaultValue={3} size="large" />
-      <Rating defaultValue={3} size="xlarge" />
+      <Rating defaultValue={3} size="extra-large" />
     </div>
   );
 };
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingPrecision.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingStep.stories.tsx
similarity index 61%
rename from packages/react-components/react-rating-preview/stories/Rating/RatingPrecision.stories.tsx
rename to packages/react-components/react-rating-preview/stories/Rating/RatingStep.stories.tsx
index 96b7c90db01456..f1b0aa409ef979 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingPrecision.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingStep.stories.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { Rating } from '@fluentui/react-rating-preview';
 
-export const Precision = () => {
-  return <Rating precision defaultValue={3.5} />;
+export const Step = () => {
+  return <Rating step={0.5} defaultValue={3.5} />;
 };
 
-Precision.parameters = {
+Step.parameters = {
   docs: {
     description: {
-      story: 'You can specify half values in the Rating with the "precision" prop.',
+      story: 'You can specify half values in the Rating with the "step" prop.',
     },
   },
 };
diff --git a/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
index 61bc209d9bc2bb..0847cafd3bd968 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/index.stories.tsx
@@ -4,10 +4,10 @@ import descriptionMd from './RatingDescription.md';
 import bestPracticesMd from './RatingBestPractices.md';
 
 export { Default } from './RatingDefault.stories';
-export { Appearance } from './RatingAppearance.stories';
+export { Color } from './RatingColor.stories';
 export { Max } from './RatingMax.stories';
 export { Mode } from './RatingMode.stories';
-export { Precision } from './RatingPrecision.stories';
+export { Step } from './RatingStep.stories';
 export { Size } from './RatingSize.stories';
 export { Shape } from './RatingShape.stories';
 

From 53e0c4cdb868f266c5584af4bb889b6303d4e11c Mon Sep 17 00:00:00 2001
From: Tomi Olubeko <ololubek@microsoft.com>
Date: Tue, 9 Jan 2024 12:03:15 -0800
Subject: [PATCH 6/6] color story edit and change file edit

---
 ...act-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json | 2 +-
 .../react-rating-preview/stories/Rating/RatingColor.stories.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/change/@fluentui-react-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json b/change/@fluentui-react-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json
index f9da21aa643f55..3bba7ab4006e4f 100644
--- a/change/@fluentui-react-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json
+++ b/change/@fluentui-react-rating-preview-94bd847c-77c5-4f2e-8000-acbceb63aa7e.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "update stories and props",
+  "comment": "chore: Updating doc stories and API.",
   "packageName": "@fluentui/react-rating-preview",
   "email": "ololubek@microsoft.com",
   "dependentChangeType": "patch"
diff --git a/packages/react-components/react-rating-preview/stories/Rating/RatingColor.stories.tsx b/packages/react-components/react-rating-preview/stories/Rating/RatingColor.stories.tsx
index f1ceb15ad362c8..fa2bdb1002ee8e 100644
--- a/packages/react-components/react-rating-preview/stories/Rating/RatingColor.stories.tsx
+++ b/packages/react-components/react-rating-preview/stories/Rating/RatingColor.stories.tsx
@@ -26,7 +26,7 @@ export const Color = () => {
 Color.parameters = {
   docs: {
     description: {
-      story: 'You can specify the appearance of the Rating component with the "appearance" prop.',
+      story: 'You can specify the appearance of the Rating component with the "color" prop.',
     },
   },
 };