From 0483dd833698b518d1c88d98871cafb1b6019c75 Mon Sep 17 00:00:00 2001
From: AhmetAhunbayAWS <ahmetahu@amazon.com>
Date: Wed, 10 Jul 2024 12:09:54 -0700
Subject: [PATCH] fix(ui & ui-react): Resolves ratings height discrepancy in
 edge case  (#5321)

* Adjusts RatingIcon component

* Adjusts display for amplify-rating class

* adds test case for additional class

* extends the RatingIconProps to include the BaseComponentProps

* Adds changeset

* Adds more context into changeset summary

* fixed ordering of imports to match standards

* remove unneccessary asyc

* removed BaseComponentProps inheritance

* cleaned up test
---
 .changeset/grumpy-crews-laugh.md              |  6 +++++
 .../src/primitives/Rating/RatingIcon.tsx      | 11 +++++---
 .../Rating/__tests__/RatingIcon.test.tsx      | 25 +++++++++++++++++++
 .../ui/src/theme/css/component/rating.scss    |  2 +-
 4 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/grumpy-crews-laugh.md
 create mode 100644 packages/react/src/primitives/Rating/__tests__/RatingIcon.test.tsx

diff --git a/.changeset/grumpy-crews-laugh.md b/.changeset/grumpy-crews-laugh.md
new file mode 100644
index 00000000000..e510bb77166
--- /dev/null
+++ b/.changeset/grumpy-crews-laugh.md
@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-react': patch
+'@aws-amplify/ui': patch
+---
+
+This change removes an inconsistency in the heights of ratings between 0-1 (non-inclusive). This change was made per customer request via a raised issue. A customer would only need to update their code if they display ratings between 0-1 (non-inclusive).
diff --git a/packages/react/src/primitives/Rating/RatingIcon.tsx b/packages/react/src/primitives/Rating/RatingIcon.tsx
index a001056f20d..4e78a3f0b25 100644
--- a/packages/react/src/primitives/Rating/RatingIcon.tsx
+++ b/packages/react/src/primitives/Rating/RatingIcon.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { classNames } from '@aws-amplify/ui';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
 import { Property } from 'csstype';
 
-import { View } from '../View';
 import { StyleToken } from '../types/style';
-import { ComponentClassName } from '@aws-amplify/ui';
+import { View } from '../View';
 
 interface RatingIconProps {
   icon: React.ReactNode;
@@ -23,7 +22,11 @@ export const RatingIcon: React.FC<RatingIconProps> = ({
       className={ComponentClassName.RatingItem}
       aria-hidden="true"
     >
-      <View as="span" className={classNames(className)} color={fill}>
+      <View
+        as="span"
+        className={classNames(ComponentClassName.RatingIcon, className)}
+        color={fill}
+      >
         {icon}
       </View>
     </View>
diff --git a/packages/react/src/primitives/Rating/__tests__/RatingIcon.test.tsx b/packages/react/src/primitives/Rating/__tests__/RatingIcon.test.tsx
new file mode 100644
index 00000000000..09818b9770c
--- /dev/null
+++ b/packages/react/src/primitives/Rating/__tests__/RatingIcon.test.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { ComponentClassName } from '@aws-amplify/ui';
+import { RatingIcon } from '../RatingIcon';
+
+const CustomIcon = ({ className }: { className: string }) => (
+  <svg className={className}></svg>
+);
+
+describe('RatingIcon', () => {
+  it('should render rating icon class', () => {
+    const { container } = render(
+      <RatingIcon
+        className="test-class"
+        icon={<CustomIcon className="dummy-icon" />}
+      />
+    );
+
+    const iconSpan = container.getElementsByClassName(
+      'test-class'
+    )[0] as HTMLElement;
+    expect(iconSpan).toHaveClass(ComponentClassName['RatingIcon']);
+  });
+});
diff --git a/packages/ui/src/theme/css/component/rating.scss b/packages/ui/src/theme/css/component/rating.scss
index b915ed389c1..fb3ecd8afdd 100644
--- a/packages/ui/src/theme/css/component/rating.scss
+++ b/packages/ui/src/theme/css/component/rating.scss
@@ -1,5 +1,5 @@
 .amplify-rating {
-  display: inline-flex;
+  display: flex;
   position: relative;
   text-align: left;
   font-size: var(--amplify-components-rating-default-size);