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

@@ -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).

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>

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']);
+  });
+});

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);