chore(stories): resolve React warnings for keys and DOM prop forwarding

skills/carbon-react/components/portrait.md

@@ -377,7 +377,7 @@ description: Carbon Portrait component props and usage examples.
           value={variant}
         >
           {availableVariants.map(({ label, value }) => (
-            <Option text={label} value={value} />
+            <Option key={value} text={label} value={value} />
           ))}
         </Select>
       </Box>

src/components/file-input/file-input-test.stories.tsx

@@ -67,16 +67,23 @@ export const AllStatuses = (args: Partial<FileInputProps>) => {
       message: "oops, that's not right",
     },
   ];
-  return statuses.map((status) => (
-    <FileInput
-      my={20}
-      label="test"
-      inputHint="hint"
-      uploadStatus={status}
-      onChange={() => {}}
-      {...args}
-    />
-  ));
+  return statuses.map((status, index) => {
+    const statusType = Array.isArray(status)
+      ? "multiple"
+      : (status?.status ?? "none");
+
+    return (
+      <FileInput
+        key={`status-${statusType}-${index}`}
+        my={20}
+        label="test"
+        inputHint="hint"
+        uploadStatus={status}
+        onChange={() => {}}
+        {...args}
+      />
+    );
+  });
 };
 
 export const LongFilenameStatus = (args: Partial<FileInputProps>) => {

src/components/form/form.component.tsx

@@ -120,7 +120,7 @@ export const Form = ({
           $hasFooterChildren={!!footerChildren}
           $stickyFooter={stickyFooter}
           {...(stickyFooter && { $stickyFooterVariant: stickyFooterVariant })}
-          disableStickyOnSmallScreen={disableStickyOnSmallScreen}
+          $disableStickyOnSmallScreen={disableStickyOnSmallScreen}
           $buttonAlignment={buttonAlignment}
           $fullWidthButtons={fullWidthButtons}
           {...footerPadding}

src/components/form/form.style.ts

@@ -52,7 +52,7 @@ interface StyledFormFooterProps {
   $stickyFooterVariant?: "light" | "grey";
   $fullWidthButtons?: boolean;
   $buttonAlignment?: FormButtonAlignment;
-  disableStickyOnSmallScreen?: boolean;
+  $disableStickyOnSmallScreen?: boolean;
 }
 
 export const StyledFormFooter = styled.div.attrs(
@@ -104,8 +104,8 @@ export const StyledFormFooter = styled.div.attrs(
 
   ${padding}
 
-  ${({ disableStickyOnSmallScreen }) =>
-    disableStickyOnSmallScreen &&
+  ${({ $disableStickyOnSmallScreen }) =>
+    $disableStickyOnSmallScreen &&
     css`
       @media screen and (max-width: 600px) {
         position: static;

src/components/menu/menu-test.stories.tsx

@@ -379,7 +379,7 @@ MenuFullScreenKeysTest.storyName = "Menu Fullscreen with dynamic submenus";
 export const MenuWithSubmenuCustomPadding = () => (
   <>
     {[0, "5px", 1, 2, "17px", 3, 4, 5, 6, 7, 8].map((padding) => (
-      <Menu>
+      <Menu key={`menu-padding-${padding}`}>
         <MenuItem px={padding} href="#">
           Item One
         </MenuItem>

src/components/password/password.component.tsx

@@ -20,10 +20,13 @@ export const Password = ({
   id,
   disabled,
   forceObscurity = false,
+  characterLimit,
   inputIcon,
   size,
   ...rest
 }: PasswordProps) => {
+  void characterLimit;
+
   const internalInputId = useRef(id || guid());
   const l = useLocale();
 

src/components/portrait/portrait.stories.tsx

@@ -294,7 +294,7 @@ export const Variants: Story = () => {
           value={variant}
         >
           {availableVariants.map(({ label, value }) => (
-            <Option text={label} value={value} />
+            <Option key={value} text={label} value={value} />
           ))}
         </Select>
       </Box>

src/components/tile/tile-test.stories.tsx

@@ -65,25 +65,26 @@ export const DefaultStory = ({
   ...args
 }: TileProps & TileStoryProps) => {
   const contentOneProps = {
-    key: "one",
     children: contentOneChildren,
     width: contentOneWidth,
   };
   const contentTwoProps = {
-    key: "two",
     children: contentTwoChildren,
     width: contentTwoWidth,
   };
   const contentThreeProps = {
-    key: "three",
     children: contentThreeChildren,
     width: contentThreeWidth,
   };
   const tileContent = [
-    contentOneProps.children ? <TileContent {...contentOneProps} /> : undefined,
-    contentTwoProps.children ? <TileContent {...contentTwoProps} /> : undefined,
+    contentOneProps.children ? (
+      <TileContent key="one" {...contentOneProps} />
+    ) : undefined,
+    contentTwoProps.children ? (
+      <TileContent key="two" {...contentTwoProps} />
+    ) : undefined,
     contentThreeProps.children ? (
-      <TileContent {...contentThreeProps} />
+      <TileContent key="three" {...contentThreeProps} />
     ) : undefined,
   ];
   return (