refactor(ui): review navigation button API interface

input-output-hk · May 31, 2023 · cbff0f7 · cbff0f7
1 parent 99714e9
commit cbff0f7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 24 deletions.
diff --git a/packages/ui/src/design-system/navigation-buttons/back-button.component.tsx b/packages/ui/src/design-system/navigation-buttons/back-button.component.tsx
@@ -5,18 +5,16 @@ import { ReactComponent as ArrowLeftIcon } from '../../assets/icons/arrow-left.c
 import * as cx from './back-button.css';
 import { NavigationSkeletonButton } from './navigation-skeleton-button.component';
 
-import type { OmitClassName } from '../../types';
+import type { Props as SkeletonButtonProps } from './navigation-skeleton-button.component';
 
-type Props = OmitClassName<HTMLButtonElement> & {
+type Props = Omit<SkeletonButtonProps, 'children'> & {
   disabled?: boolean;
   // Needed for @storybook/addon-docs
-  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
-export const Back = ({ ...props }: Readonly<Props>): JSX.Element => {
-  return (
-    <NavigationSkeletonButton {...props}>
-      <ArrowLeftIcon className={cx.icon} />
-    </NavigationSkeletonButton>
-  );
-};
+export const Back = ({ ...props }: Readonly<Props>): JSX.Element => (
+  <NavigationSkeletonButton {...props}>
+    <ArrowLeftIcon className={cx.icon} />
+  </NavigationSkeletonButton>
+);
diff --git a/packages/ui/src/design-system/navigation-buttons/close-button.component.tsx b/packages/ui/src/design-system/navigation-buttons/close-button.component.tsx
@@ -5,18 +5,16 @@ import { ReactComponent as CloseIcon } from '../../assets/icons/close.component.
 import * as cx from './close-button.css';
 import { NavigationSkeletonButton } from './navigation-skeleton-button.component';
 
-import type { OmitClassName } from '../../types';
+import type { Props as SkeletonButtonProps } from './navigation-skeleton-button.component';
 
-type Props = OmitClassName<HTMLButtonElement> & {
+type Props = Omit<SkeletonButtonProps, 'children'> & {
   disabled?: boolean;
   // Needed for @storybook/addon-docs
   onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 };
 
-export const Close = ({ ...props }: Readonly<Props>): JSX.Element => {
-  return (
-    <NavigationSkeletonButton {...props}>
-      <CloseIcon className={cx.icon} />
-    </NavigationSkeletonButton>
-  );
-};
+export const Close = ({ ...props }: Readonly<Props>): JSX.Element => (
+  <NavigationSkeletonButton {...props}>
+    <CloseIcon className={cx.icon} />
+  </NavigationSkeletonButton>
+);
diff --git a/packages/ui/src/design-system/navigation-buttons/navigation-skeleton-button.component.tsx b/packages/ui/src/design-system/navigation-buttons/navigation-skeleton-button.component.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { PropsWithChildren } from 'react';
 import React from 'react';
 
 import { Flex } from '../flex';
@@ -7,10 +7,10 @@ import * as cx from './navigation-skeleton-button.css';
 
 import type { OmitClassName } from '../../types';
 
-export type Props = OmitClassName<HTMLButtonElement> & {
-  disabled?: boolean;
-  children: ReactNode;
-};
+export type Props = OmitClassName<HTMLButtonElement> &
+  PropsWithChildren<{
+    disabled?: boolean;
+  }>;
 
 export const NavigationSkeletonButton = ({
   id,