Updating based on comments

docs/src/pages/components/alert/AlertPropControls.tsx

@@ -5,18 +5,17 @@ import {
   SwitchField,
   Flex,
 } from '@aws-amplify/ui-react';
+import React from 'react';
 
 export interface AlertPropControlsProps extends AlertProps {
   setVariation: (value: React.SetStateAction<AlertProps['variation']>) => void;
   setIsDismissible: (
     value: React.SetStateAction<AlertProps['isDismissible']>
   ) => void;
-  setIconSize: (value: React.SetStateAction<AlertProps['iconSize']>) => void;
   setHasIcon: (value: React.SetStateAction<AlertProps['hasIcon']>) => void;
   setHeading: (value: React.SetStateAction<AlertProps['heading']>) => void;
-  setHeadingLevel: (
-    value: React.SetStateAction<AlertProps['headingLevel']>
-  ) => void;
+  setBody: (value: React.SetStateAction<string>) => void;
+  body: string;
 }
 
 interface AlertPropControlsInterface {

docs/src/pages/components/alert/demo.tsx

@@ -4,26 +4,27 @@ import { Demo } from '@/components/Demo';
 import { AlertPropControls } from './AlertPropControls';
 import { useAlertProps } from './useAlertProps';
 
-const propsToCode = (props) => `import { Alert } from '@aws-amplify/ui-react';
-
-<Alert
-  variation="${props.variation}"
+const propsToCode = (props) => {
+  return (
+    `<Alert` +
+    (props.variation
+      ? `\n  variation=${JSON.stringify(props.variation)}`
+      : '') +
+    `
   isDismissible={${props.isDismissible}}
   hasIcon={${props.hasIcon}}
-  iconSize={${props.iconSize}}
   heading="${props.heading}"
-  headingLevel={${props.headingLevel}}
   >
   ${props.body}
-</Alert>`;
+</Alert>`
+  );
+};
 
 export const AlertDemo = () => {
   const alertProps = useAlertProps({
     isDismissible: false,
     hasIcon: true,
-    iconSize: 'large',
     heading: 'Alert heading',
-    headingLevel: 6,
     body: 'This is the alert message',
   });
 
@@ -36,9 +37,7 @@ export const AlertDemo = () => {
         variation={alertProps.variation}
         isDismissible={alertProps.isDismissible}
         hasIcon={alertProps.hasIcon}
-        iconSize={alertProps.iconSize}
         heading={alertProps.heading}
-        headingLevel={alertProps.headingLevel}
       >
         {alertProps.body}
       </Alert>

docs/src/pages/components/alert/useAlertProps.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { AlertPropControlsProps } from './AlertPropControls';
 
 interface UseAlertProps {
-  (initialValues: AlertProps): AlertPropControlsProps;
+  (initialValues: AlertProps & { body: string }): AlertPropControlsProps;
 }
 
 export const useAlertProps: UseAlertProps = (initialValues) => {
@@ -13,33 +13,23 @@ export const useAlertProps: UseAlertProps = (initialValues) => {
   const [isDismissible, setIsDismissible] = useState<
     AlertProps['isDismissible']
   >(initialValues.isDismissible);
-  const [iconSize, setIconSize] = useState<AlertProps['iconSize']>(
-    initialValues.iconSize
-  );
   const [hasIcon, setHasIcon] = useState<AlertProps['hasIcon']>(
     initialValues.hasIcon
   );
   const [heading, setHeading] = useState<AlertProps['heading']>(
     initialValues.heading
   );
-  const [headingLevel, setHeadingLevel] = useState<AlertProps['headingLevel']>(
-    initialValues.headingLevel
-  );
   const [body, setBody] = useState<string>(initialValues.body);
 
   return {
     variation,
     setVariation,
     isDismissible,
     setIsDismissible,
-    iconSize,
-    setIconSize,
     hasIcon,
     setHasIcon,
     heading,
     setHeading,
-    headingLevel,
-    setHeadingLevel,
     body,
     setBody,
   };

packages/react/src/primitives/Alert/Alert.tsx

@@ -20,7 +20,6 @@ export const Alert: Primitive<AlertProps, typeof Flex> = ({
   gap,
   hasIcon = true,
   heading,
-  iconSize,
   isDismissible = false,
   justifyContent = 'space-between',
   onDismiss,
@@ -64,7 +63,7 @@ export const Alert: Primitive<AlertProps, typeof Flex> = ({
             className={ComponentClassNames.AlertDismiss}
             onClick={dismissAlert}
           >
-            <IconClose size={iconSize} />
+            <IconClose />
           </Button>
         )}
       </Flex>

packages/ui/src/theme/css/component/alert.scss

@@ -29,7 +29,6 @@
 }
 
 .amplify-alert__heading {
-  color: inherit;
   display: block;
   font-weight: var(--amplify-components-alert-heading-font-weight);
   font-size: var(--amplify-components-alert-heading-font-size);