refactor(button): simplify ts types in Button, Banner, ButtonIcon and…

… InputDropdown components
chanzuckerberg · Apr 24, 2024 · ddf8bb8 · ddf8bb8
1 parent 982d85b
commit ddf8bb8
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 133 deletions.
diff --git a/packages/components/src/core/Banner/__tests__/Banner.namespace-test.tsx b/packages/components/src/core/Banner/__tests__/Banner.namespace-test.tsx
@@ -1,13 +1,11 @@
-import { Banner, BannerProps } from "@czi-sds/components";
 import React from "react";
+import { Banner, BannerProps } from "@czi-sds/components";
+import { LONG_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
 
-const BannerNameSpaceTest = (props: BannerProps<"medium">) => {
+const BannerNameSpaceTest = (props: BannerProps) => {
   return (
     <Banner {...props} dismissible sdsType="primary">
-      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aliquid
-      maxime soluta voluptas expedita molestias neque saepe aperiam amet enim
-      natus placeat, tempore doloribus odio reiciendis repellat? Dolorem,
-      voluptatem tempore.
+      {LONG_LOREM_IPSUM}
     </Banner>
   );
 };
diff --git a/packages/components/src/core/Banner/index.tsx b/packages/components/src/core/Banner/index.tsx
@@ -1,5 +1,4 @@
 import React, { ForwardedRef, forwardRef, useState } from "react";
-import { ButtonIconSizeToTypes } from "src/core/ButtonIcon";
 import Icon, { IconNameToSizes, IconProps } from "src/core/Icon";
 import {
   BannerExtraProps,
@@ -9,8 +8,7 @@ import {
   StyledButtonIcon,
 } from "./style";
 
-export interface BannerProps<ButtonIconSize extends keyof ButtonIconSizeToTypes>
-  extends BannerExtraProps<ButtonIconSize> {
+export interface BannerProps extends BannerExtraProps {
   children: React.ReactNode;
   icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
   sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
@@ -19,10 +17,8 @@ export interface BannerProps<ButtonIconSize extends keyof ButtonIconSizeToTypes>
   onClose?: (e: React.MouseEvent) => void;
 }
 
-const Banner = forwardRef(function Banner<
-  ButtonIconSize extends keyof ButtonIconSizeToTypes,
->(
-  props: BannerProps<ButtonIconSize>,
+const Banner = forwardRef(function Banner(
+  props: BannerProps,
   ref: ForwardedRef<HTMLDivElement | null>
 ): JSX.Element | null {
   const {

diff --git a/packages/components/src/core/Banner/style.ts b/packages/components/src/core/Banner/style.ts
@@ -1,9 +1,6 @@
 import { styled } from "@mui/material/styles";
 import ButtonIcon from "src/core/ButtonIcon";
-import {
-  ButtonIconExtraProps,
-  ButtonIconSizeToTypes,
-} from "src/core/ButtonIcon/style";
+import { ButtonIconExtraProps } from "src/core/ButtonIcon/style";
 import {
   CommonThemeProps,
   fontBodyS,
@@ -14,10 +11,8 @@ import {
   getSpaces,
 } from "src/core/styles";
 
-export interface BannerExtraProps<
-  ButtonIconSize extends keyof ButtonIconSizeToTypes,
-> extends CommonThemeProps {
-  sdsType: ButtonIconSizeToTypes[ButtonIconSize];
+export interface BannerExtraProps extends CommonThemeProps {
+  sdsType: "primary" | "secondary" | "tertiary";
 }
 
 export const Centered = styled("div")`
@@ -28,9 +23,7 @@ export const Centered = styled("div")`
 `;
 
 export const IconWrapper = styled("div")`
-  ${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-    props: ButtonIconExtraProps<ButtonIconSize>
-  ) => {
+  ${(props: ButtonIconExtraProps) => {
     const iconSizes = getIconSizes(props);
     const spaces = getSpaces(props);
 
@@ -41,8 +34,7 @@ export const IconWrapper = styled("div")`
   }}
 `;
 
-type ButtonIconType<ButtonIconSize extends keyof ButtonIconSizeToTypes> =
-  ButtonIconExtraProps<ButtonIconSize> & { bannerType: string };
+type ButtonIconType = ButtonIconExtraProps & { bannerType: string };
 const doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
 
 export const StyledButtonIcon = styled(ButtonIcon, {
@@ -51,9 +43,7 @@ export const StyledButtonIcon = styled(ButtonIcon, {
 })`
   flex: 0 0 auto;
 
-  ${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-    props: ButtonIconType<ButtonIconSize>
-  ) => {
+  ${(props: ButtonIconType) => {
     const { bannerType } = props;
 
     const colors = getColors(props);
@@ -72,9 +62,7 @@ export const Text = styled("div")`
   ${fontBodyS}
 `;
 
-const primary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: BannerExtraProps<ButtonIconSize>
-) => {
+const primary = (props: BannerExtraProps) => {
   const semanticComponentColors = getSemanticComponentColors(props);
   const semanticTextColors = getSemanticTextColors(props);
 
@@ -87,9 +75,7 @@ const primary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   `;
 };
 
-const secondary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: BannerExtraProps<ButtonIconSize>
-) => {
+const secondary = (props: BannerExtraProps) => {
   const semanticComponentColors = getSemanticComponentColors(props);
   const semanticTextColors = getSemanticTextColors(props);
 
@@ -106,9 +92,7 @@ export const StyledBanner = styled("div", {
 })`
   ${fontBodyS}
 
-  ${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-    props: BannerExtraProps<ButtonIconSize>
-  ) => {
+  ${(props: BannerExtraProps) => {
     const { sdsType } = props;
 
     const spaces = getSpaces(props);

diff --git a/packages/components/src/core/Button/__tests__/Button.namespace-test.tsx b/packages/components/src/core/Button/__tests__/Button.namespace-test.tsx
@@ -1,9 +1,9 @@
-import { Button, ButtonProps } from "@czi-sds/components";
 import React from "react";
+import { Button, ButtonProps } from "@czi-sds/components";
 
 const ButtonNameSpaceTest = (props: ButtonProps) => {
   return (
-    <Button sdsType="primary" sdsStyle="rounded" {...props}>
+    <Button sdsType="primary" sdsStyle="icon" {...props}>
       Button
     </Button>
   );

diff --git a/packages/components/src/core/Button/index.tsx b/packages/components/src/core/Button/index.tsx
@@ -25,32 +25,34 @@ type ButtonStyle = "rounded" | "square" | "minimal" | "icon";
 type ButtonType = "primary" | "secondary" | "tertiary";
 type ButtonSize = "small" | "medium" | "large";
 
-type SdsProps<IconName extends keyof IconNameToSizes> = (
+type SdsProps =
   | {
       sdsStyle?: Exclude<ButtonStyle, "icon">;
       sdsType?: Exclude<ButtonType, "tertiary">;
+      isAllCaps?: boolean;
+      isRounded?: boolean;
+      sdsSize?: ButtonSize;
+      icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+      sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
     }
   | {
       sdsStyle?: "icon";
       sdsType?: ButtonType;
-    }
-) & {
-  isAllCaps?: boolean;
-  isRounded?: boolean;
-  sdsSize?: ButtonSize;
-  icon?: IconName | React.ReactElement<CustomSVGProps>;
-  sdsIconProps?: Partial<IconProps<IconName>>;
-};
+      isAllCaps?: boolean;
+      isRounded?: boolean;
+      sdsSize?: ButtonSize;
+      icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+      sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
+    };
 
-export type ButtonProps<IconName extends keyof IconNameToSizes> =
-  RawButtonProps & SdsProps<IconName>;
+export type ButtonProps = RawButtonProps & SdsProps;
 
 /**
  * @see https://mui.com/material-ui/react-button/
  */
 const Button = React.forwardRef(
-  <IconName extends keyof IconNameToSizes>(
-    props: ButtonProps<IconName>,
+  (
+    props: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>
   ): JSX.Element | null => {
     const { sdsStyle, sdsType, icon } = props;

diff --git a/packages/components/src/core/ButtonIcon/__storybook__/types.ts b/packages/components/src/core/ButtonIcon/__storybook__/types.ts
@@ -1,14 +1,5 @@
-import {
-  ButtonIconExtraProps,
-  ButtonIconSizeToTypes,
-} from "src/core/ButtonIcon/style";
-
-export type SDSTypes = NonNullable<
-  | ButtonIconExtraProps<"small">["sdsType"]
-  | ButtonIconExtraProps<"medium">["sdsType"]
-  | ButtonIconExtraProps<"large">["sdsType"]
->[];
+export type SDSTypes = NonNullable<"primary" | "secondary" | "tertiary">[];
 
 export type SDSStyles = NonNullable<"icon">[];
 
-export type SDSSizes = (keyof ButtonIconSizeToTypes)[];
+export type SDSSizes = NonNullable<"small" | "medium" | "large">[];
diff --git a/packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx b/packages/components/src/core/ButtonIcon/__tests__/ButtonIcon.namespace-test.tsx
@@ -1,9 +1,7 @@
-import { ButtonIcon, ButtonIconProps, Icon } from "@czi-sds/components";
 import React from "react";
+import { ButtonIcon, ButtonIconProps, Icon } from "@czi-sds/components";
 
-const ButtonIconNameSpaceTest = (
-  props: ButtonIconProps<"Download", "large">
-) => {
+const ButtonIconNameSpaceTest = (props: ButtonIconProps) => {
   return (
     <ButtonIcon size="large" sdsType="primary" {...props}>
       <Icon sdsIcon="Download" sdsSize="l" sdsType="button" />

diff --git a/packages/components/src/core/ButtonIcon/index.tsx b/packages/components/src/core/ButtonIcon/index.tsx
@@ -1,32 +1,24 @@
 import { IconButtonProps as RawButtonIconProps } from "@mui/material";
 import { ForwardedRef, forwardRef } from "react";
 import Icon, { IconNameToSizes, IconProps } from "src/core/Icon";
-import {
-  ButtonIconExtraProps,
-  ButtonIconSizeToTypes,
-  StyledButtonIcon,
-} from "./style";
+import { ButtonIconExtraProps, StyledButtonIcon } from "./style";
 
-export type { ButtonIconProps, ButtonIconSizeToTypes };
-export interface ButtonIconInternalProps<
-  IconName extends keyof IconNameToSizes,
-> {
-  icon: IconName | React.ReactElement<CustomSVGProps>;
+export interface ButtonIconInternalProps {
+  icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
   /**
    * @deprecated
    * (masoudmanson): This prop is deprecated and will be removed in the next major version.
    * Please use `icon` instead.
    */
-  sdsIcon?: IconName | React.ReactElement<CustomSVGProps>;
-  sdsIconProps?: Partial<IconProps<IconName>>;
+  sdsIcon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+  sdsIconProps?: Partial<IconProps<keyof IconNameToSizes>>;
 }
 
-type ButtonIconProps<
-  IconName extends keyof IconNameToSizes,
-  ButtonIconSize extends keyof ButtonIconSizeToTypes,
-> = ButtonIconExtraProps<ButtonIconSize> &
+export type ButtonIconProps = ButtonIconExtraProps &
   RawButtonIconProps &
-  ButtonIconInternalProps<IconName>;
+  ButtonIconInternalProps;
+
+type IconSizeType = "xs" | "s" | "l" | "xl";
 
 const ButtonIconSizeToSdsIconSize = {
   large: "xl",
@@ -37,11 +29,8 @@ const ButtonIconSizeToSdsIconSize = {
 /**
  * @see https://mui.com/material-ui/react-button/#icon-buttons
  */
-const ButtonIcon = forwardRef(function ButtonIcon<
-  IconName extends keyof IconNameToSizes,
-  ButtonIconSize extends keyof ButtonIconSizeToTypes,
->(
-  props: ButtonIconProps<IconName, ButtonIconSize>,
+const ButtonIcon = forwardRef(function ButtonIcon(
+  props: ButtonIconProps,
   ref: ForwardedRef<HTMLButtonElement | null>
 ): JSX.Element {
   /**
@@ -68,7 +57,7 @@ const ButtonIcon = forwardRef(function ButtonIcon<
             sdsType="iconButton"
             {...sdsIconProps}
             sdsIcon={icon}
-            sdsSize={iconSize as IconNameToSizes[IconName]}
+            sdsSize={iconSize as IconSizeType}
           />
         );
       }

diff --git a/packages/components/src/core/ButtonIcon/style.ts b/packages/components/src/core/ButtonIcon/style.ts
@@ -8,22 +8,13 @@ import {
   getSemanticComponentColors,
 } from "src/core/styles";
 
-export interface ButtonIconSizeToTypes {
-  small: "primary" | "secondary" | "tertiary";
-  medium: "tertiary";
-  large: "primary" | "secondary" | "tertiary";
-}
-export interface ButtonIconExtraProps<
-  ButtonIconSize extends keyof ButtonIconSizeToTypes,
-> extends CommonThemeProps {
+export interface ButtonIconExtraProps extends CommonThemeProps {
   disabled?: boolean;
-  sdsSize?: ButtonIconSize;
-  sdsType?: ButtonIconSizeToTypes[ButtonIconSize];
+  sdsSize?: "small" | "medium" | "large";
+  sdsType?: "primary" | "secondary" | "tertiary";
 }
 
-const isDisabled = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: ButtonIconExtraProps<ButtonIconSize>
-): SerializedStyles => {
+const isDisabled = (props: ButtonIconExtraProps): SerializedStyles => {
   const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
@@ -35,9 +26,7 @@ const isDisabled = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   `;
 };
 
-const primary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: ButtonIconExtraProps<ButtonIconSize>
-): SerializedStyles => {
+const primary = (props: ButtonIconExtraProps): SerializedStyles => {
   const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
@@ -67,9 +56,7 @@ const primary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   `;
 };
 
-const secondary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: ButtonIconExtraProps<ButtonIconSize>
-): SerializedStyles => {
+const secondary = (props: ButtonIconExtraProps): SerializedStyles => {
   const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
@@ -99,9 +86,7 @@ const secondary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   `;
 };
 
-const tertiary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: ButtonIconExtraProps<ButtonIconSize>
-): SerializedStyles => {
+const tertiary = (props: ButtonIconExtraProps): SerializedStyles => {
   const semanticComponentColors = getSemanticComponentColors(props);
 
   return css`
@@ -131,9 +116,7 @@ const tertiary = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   `;
 };
 
-const small = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: ButtonIconExtraProps<ButtonIconSize>
-): SerializedStyles => {
+const small = (props: ButtonIconExtraProps): SerializedStyles => {
   const { sdsType } = props;
   const iconSizes = getIconSizes(props);
 
@@ -146,9 +129,7 @@ const small = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   `;
 };
 
-const medium = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: ButtonIconExtraProps<ButtonIconSize>
-): SerializedStyles => {
+const medium = (props: ButtonIconExtraProps): SerializedStyles => {
   const { sdsType } = props;
   const iconSizes = getIconSizes(props);
 
@@ -161,9 +142,7 @@ const medium = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
   `;
 };
 
-const large = <ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-  props: ButtonIconExtraProps<ButtonIconSize>
-): SerializedStyles => {
+const large = (props: ButtonIconExtraProps): SerializedStyles => {
   const { sdsType } = props;
   const iconSizes = getIconSizes(props);
 
@@ -190,9 +169,7 @@ export const StyledButtonIcon = styled(IconButton, {
   padding: 0;
   ${focusVisibleA11yStyle}
 
-  ${<ButtonIconSize extends keyof ButtonIconSizeToTypes>(
-    props: ButtonIconExtraProps<ButtonIconSize>
-  ) => {
+  ${(props: ButtonIconExtraProps) => {
     const { disabled, sdsSize = "medium", sdsType = "primary" } = props;
 
     return css`