Merge pull request #450 from Automattic/update/component-types

Update some component types to accept relevant html attributes

src/system/Code/Code.tsx

@@ -7,13 +7,13 @@ import classNames, { Argument } from 'classnames';
 import React, { ReactNode, createRef, useState } from 'react';
 import { MdContentCopy } from 'react-icons/md';
 
-export interface CodeProps {
+export type CodeProps = React.ComponentPropsWithoutRef< 'code' > & {
 	prompt?: boolean;
 	showCopy?: boolean;
 	onCopy?: () => void;
 	className?: Argument;
 	children?: ReactNode;
-}
+};
 
 const Code = React.forwardRef< HTMLDivElement, CodeProps >(
 	( { prompt = false, showCopy = false, onCopy, className, ...props }: CodeProps, forwardRef ) => {

src/system/NewForm/Form.tsx

@@ -3,10 +3,10 @@
  */
 import classNames from 'classnames';
 import React from 'react';
-export interface FormProps {
+export type FormProps = React.ComponentPropsWithoutRef< 'form' > & {
 	children?: React.ReactNode;
 	className?: string;
-}
+};
 export const Form = React.forwardRef< HTMLFormElement, FormProps >(
 	( { children, className, ...props }, forwardRef ) => (
 		<form

src/system/Notice/Notice.tsx

@@ -18,15 +18,15 @@ interface NoticeIconProps {
 	variant: ColorVariants;
 }
 
-export interface NoticeProps {
+export type NoticeProps = React.HTMLAttributes< HTMLDivElement > & {
 	children: React.ReactNode;
 	inline?: boolean;
 	sx?: ThemeUIStyleObject;
 	title?: React.ReactNode;
 	variant?: ColorVariants;
 	headingVariant?: React.ElementType;
 	className?: string;
-}
+};
 type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
 
 const NoticeIcon = ( { color, variant }: NoticeIconProps ) => {