Add API report + styles + changeset

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/spotty-papers-call.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+The icon prop in TextField now accept a ReactNode instead of an icon name. We also updated the icon sizes for each input sizes.

packages/canon/css/components.css

@@ -576,13 +576,20 @@
   display: flex;
 }
 
-.canon-TextFieldInputIcon {
-  padding-right: var(--canon-space-1);
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-TextFieldIcon {
+  margin-right: var(--canon-space-1);
   color: var(--canon-fg-primary);
   flex-shrink: 0;
-  display: block;
+}
+
+.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextFieldInput {

packages/canon/css/styles.css

@@ -9800,13 +9800,20 @@
   display: flex;
 }
 
-.canon-TextFieldInputIcon {
-  padding-right: var(--canon-space-1);
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-TextFieldIcon {
+  margin-right: var(--canon-space-1);
   color: var(--canon-fg-primary);
   flex-shrink: 0;
-  display: block;
+}
+
+.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextFieldInput {

packages/canon/css/textfield.css

@@ -43,13 +43,20 @@
   display: flex;
 }
 
-.canon-TextFieldInputIcon {
-  padding-right: var(--canon-space-1);
-  width: 1.5rem;
-  height: 1.5rem;
+.canon-TextFieldIcon {
+  margin-right: var(--canon-space-1);
   color: var(--canon-fg-primary);
   flex-shrink: 0;
-  display: block;
+}
+
+.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .canon-TextFieldInput {

packages/canon/report.api.md

@@ -174,8 +174,8 @@ export const buttonPropDefs: {
 export interface ButtonProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   children: React.ReactNode;
-  iconEnd?: ReactElement;
-  iconStart?: ReactElement;
+  iconEnd?: React.ReactNode;
+  iconStart?: React.ReactNode;
   size?: ButtonOwnProps['size'];
   variant?: ButtonOwnProps['variant'];
 }
@@ -1220,7 +1220,7 @@ export interface TextFieldProps
   className?: string;
   description?: string;
   error?: string | null;
-  icon?: IconNames;
+  icon?: React.ReactNode;
   label?: string;
   name: string;
   onClear?: React.MouseEventHandler<HTMLButtonElement>;

packages/canon/src/components/Button/Button.tsx

@@ -24,7 +24,7 @@ import type { ButtonProps } from './types';
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (props: ButtonProps, ref) => {
     const {
-      size = 'small',
+      size = 'medium',
       variant = 'primary',
       disabled,
       iconStart,