omitted children from base, made name required

MetaMask · Jun 13, 2023 · c218a54 · c218a54
1 parent 7086583
commit c218a54
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 39 deletions.
diff --git a/ui/components/component-library/avatar-network/avatar-network.test.tsx b/ui/components/component-library/avatar-network/avatar-network.test.tsx
@@ -19,46 +19,28 @@ describe('AvatarNetwork', () => {
 
   it('should render correctly', () => {
     const { getByTestId, container } = render(
-      <AvatarNetwork data-testid="avatar-network" children={undefined} />,
+      <AvatarNetwork {...args} data-testid="avatar-network" />,
     );
     expect(getByTestId('avatar-network')).toBeDefined();
     expect(container).toMatchSnapshot();
   });
 
   it('should render image of Avatar Network', () => {
-    render(
-      <AvatarNetwork
-        children={undefined}
-        data-testid="avatar-network"
-        {...args}
-      />,
-    );
+    render(<AvatarNetwork data-testid="avatar-network" {...args} />);
     const image = screen.getByRole('img');
     expect(image).toBeDefined();
     expect(image).toHaveAttribute('src', args.src);
   });
 
   it('should render the first letter of the name prop if no src is provided', () => {
     const { getByText } = render(
-      <AvatarNetwork
-        children={undefined}
-        data-testid="avatar-network"
-        {...args}
-        src=""
-      />,
+      <AvatarNetwork data-testid="avatar-network" {...args} src="" />,
     );
     expect(getByText('e')).toBeDefined();
   });
 
   it('should render halo effect if showHalo is true and image url is there', () => {
-    render(
-      <AvatarNetwork
-        children={undefined}
-        data-testid="avatar-network"
-        {...args}
-        showHalo
-      />,
-    );
+    render(<AvatarNetwork data-testid="avatar-network" {...args} showHalo />);
     const image = screen.getAllByRole('img', { hidden: true });
     expect(image[1]).toHaveClass(
       'mm-avatar-network__network-image--size-reduced',
@@ -67,23 +49,17 @@ describe('AvatarNetwork', () => {
 
   it('should render the first letter of the name prop when showHalo is true and no image url is provided', () => {
     const { getByText } = render(
-      <AvatarNetwork
-        children={undefined}
-        {...args}
-        src=""
-        data-testid="avatar-network"
-        showHalo
-      />,
+      <AvatarNetwork {...args} src="" data-testid="avatar-network" showHalo />,
     );
     expect(getByText('e')).toBeDefined();
   });
   // className
   it('should render with custom className', () => {
     const { getByTestId } = render(
       <AvatarNetwork
+        {...args}
         data-testid="avatar-network"
         className="test-class"
-        children={undefined}
       />,
     );
     expect(getByTestId('avatar-network')).toHaveClass('test-class');
@@ -93,14 +69,14 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           color={TextColor.successDefault}
           data-testid={TextColor.successDefault}
-          children={undefined}
         />
         <AvatarNetwork
+          {...args}
           color={TextColor.errorDefault}
           data-testid={TextColor.errorDefault}
-          children={undefined}
         />
       </>,
     );
@@ -116,14 +92,14 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           backgroundColor={BackgroundColor.successDefault}
           data-testid={BackgroundColor.successDefault}
-          children={undefined}
         />
         <AvatarNetwork
+          {...args}
           backgroundColor={BackgroundColor.errorDefault}
           data-testid={BackgroundColor.errorDefault}
-          children={undefined}
         />
       </>,
     );
@@ -139,14 +115,14 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           borderColor={BorderColor.successDefault}
           data-testid={BorderColor.successDefault}
-          children={undefined}
         />
         <AvatarNetwork
+          {...args}
           borderColor={BorderColor.errorDefault}
           data-testid={BorderColor.errorDefault}
-          children={undefined}
         />
       </>,
     );
@@ -159,7 +135,7 @@ describe('AvatarNetwork', () => {
   });
   it('should forward a ref to the root html element', () => {
     const ref = React.createRef<HTMLDivElement>();
-    render(<AvatarNetwork ref={ref} children={undefined} />);
+    render(<AvatarNetwork {...args} ref={ref} />);
     expect(ref.current).not.toBeNull();
     if (ref.current) {
       expect(ref.current.nodeName).toBe('DIV');

diff --git a/ui/components/component-library/avatar-network/avatar-network.types.ts b/ui/components/component-library/avatar-network/avatar-network.types.ts
@@ -11,11 +11,11 @@ export enum AvatarNetworkSize {
 /**
  * Props for the AvatarNetwork component
  */
-export interface AvatarNetworkProps extends AvatarBaseProps {
+export interface AvatarNetworkProps extends Omit<AvatarBaseProps, 'children'> {
   /**
    * The name accepts the string to render the first alphabet of the Avatar Name
    */
-  name?: string;
+  name: string;
   /**
    * The src accepts the string of the image to be rendered
    */