refactor(ui/v2): Update icons and search bars on schema tab, glossary search, domain search

datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx

@@ -1,3 +1,6 @@
+import { ButtonVariantValues } from '@components/components/Button/types';
+import { MATERIAL_UI_ICONS, PHOSPHOR_ICONS } from '@components/components/Icon/constants';
+import { SizeValues } from '@components/theme/config';
 import React from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
@@ -33,7 +36,7 @@ const meta = {
         },
         variant: {
             description: 'The variant of the Button.',
-            options: ['filled', 'outline', 'text'],
+            options: Object.values(ButtonVariantValues),
             table: {
                 defaultValue: { summary: buttonDefaults.variant },
             },
@@ -43,7 +46,7 @@ const meta = {
         },
         color: {
             description: 'The color of the Button.',
-            options: ['violet', 'green', 'red', 'blue', 'gray'],
+            options: ['violet', 'green', 'red', 'gray'],
             table: {
                 defaultValue: { summary: buttonDefaults.color },
             },
@@ -53,31 +56,22 @@ const meta = {
         },
         size: {
             description: 'The size of the Button.',
-            options: ['sm', 'md', 'lg', 'xl'],
+            options: Object.values(SizeValues),
             table: {
                 defaultValue: { summary: buttonDefaults.size },
             },
             control: {
                 type: 'select',
             },
         },
-        iconSize: {
-            description: 'The optional size of the Icon.',
-            options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
-            table: {
-                defaultValue: {
-                    summary: 'undefined',
-                    detail: 'The size of the Button will be used as the size of the Icon',
-                },
-            },
-            control: {
-                type: 'select',
-            },
-        },
         icon: {
             description: 'The icon to display in the Button.',
             type: 'string',
             options: AVAILABLE_ICONS,
+            mapping: Object.fromEntries([
+                ...MATERIAL_UI_ICONS.map((icon) => [icon, { icon, source: 'material', size: '2xl' }]),
+                ...PHOSPHOR_ICONS.map((icon) => [icon, { icon, source: 'phosphor', size: '2xl' }]),
+            ]),
             table: {
                 defaultValue: { summary: 'undefined' },
             },
@@ -143,7 +137,7 @@ const meta = {
 
     // Define defaults
     args: {
-        children: 'Button Content',
+        children: 'Button',
         variant: buttonDefaults.variant,
         color: buttonDefaults.color,
         size: buttonDefaults.size,
@@ -167,7 +161,7 @@ type Story = StoryObj<typeof meta>;
 // Pass props to this so that it can be customized via the UI props panel
 export const sandbox: Story = {
     tags: ['dev'],
-    render: (props) => <Button {...props}>Button</Button>,
+    render: (props) => <Button {...props} />,
 };
 
 export const states = () => (
@@ -191,26 +185,27 @@ export const colors = () => (
 
 export const sizes = () => (
     <GridList>
-        <Button size="sm">Small Button</Button>
-        <Button size="md">Regular Button</Button>
-        <Button size="lg">Large Button</Button>
-        <Button size="xl">XLarge Button</Button>
+        <Button size="xs">XSmall</Button>
+        <Button size="sm">Small</Button>
+        <Button size="md">Regular</Button>
+        <Button size="lg">Large</Button>
+        <Button size="xl">XLarge</Button>
     </GridList>
 );
 
 export const withIcon = () => (
     <GridList>
-        <Button icon="Add">Icon Left</Button>
-        <Button icon="Add" iconPosition="right">
+        <Button icon={{ icon: 'Add', source: 'material' }}>Icon Left</Button>
+        <Button icon={{ icon: 'Add', source: 'material' }} iconPosition="right">
             Icon Right
         </Button>
     </GridList>
 );
 
 export const circleShape = () => (
     <GridList>
-        <Button icon="Add" size="sm" isCircle />
-        <Button icon="Add" isCircle />
-        <Button icon="Add" size="lg" isCircle />
+        <Button icon={{ icon: 'Add', source: 'material' }} size="sm" isCircle />
+        <Button icon={{ icon: 'Add', source: 'material' }} isCircle />
+        <Button icon={{ icon: 'Add', source: 'material' }} size="lg" isCircle />
     </GridList>
 );

datahub-web-react/src/alchemy-components/components/Button/Button.tsx

@@ -24,7 +24,6 @@ export const Button = ({
     size = buttonDefaults.size,
     icon, // default undefined
     iconPosition = buttonDefaults.iconPosition,
-    iconSize,
     isCircle = buttonDefaults.isCircle,
     isLoading = buttonDefaults.isLoading,
     isDisabled = buttonDefaults.isDisabled,
@@ -40,6 +39,7 @@ export const Button = ({
         isLoading,
         isActive,
         isDisabled,
+        hasChildren: !!children,
     };
 
     if (isLoading) {
@@ -50,11 +50,12 @@ export const Button = ({
         );
     }
 
+    // Prefer `icon.size` over `size` for icon size
     return (
         <ButtonBase {...styleProps} {...props}>
-            {icon && iconPosition === 'left' && <Icon icon={icon} size={iconSize || size} />}
+            {icon && iconPosition === 'left' && <Icon size={size} {...icon} />}
             {!isCircle && children}
-            {icon && iconPosition === 'right' && <Icon icon={icon} size={iconSize || size} />}
+            {icon && iconPosition === 'right' && <Icon size={size} {...icon} />}
         </ButtonBase>
     );
 };

datahub-web-react/src/alchemy-components/components/Button/types.ts

@@ -1,9 +1,14 @@
+import { IconProps } from '@components/components/Icon/types';
 import { ButtonHTMLAttributes } from 'react';
 
-import type { IconNames } from '@components';
-import type { SizeOptions, ColorOptions, FontSizeOptions } from '@components/theme/config';
+import type { SizeOptions, ColorOptions } from '@components/theme/config';
 
-export type ButtonVariant = 'filled' | 'outline' | 'text';
+export enum ButtonVariantValues {
+    filled = 'filled',
+    outline = 'outline',
+    text = 'text',
+}
+export type ButtonVariant = keyof typeof ButtonVariantValues;
 
 export interface ButtonPropsDefaults {
     variant: ButtonVariant;
@@ -19,8 +24,7 @@ export interface ButtonPropsDefaults {
 export interface ButtonProps
     extends Partial<ButtonPropsDefaults>,
         Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
-    icon?: IconNames;
-    iconSize?: FontSizeOptions;
+    icon?: IconProps;
 }
 
-export type ButtonStyleProps = Omit<ButtonPropsDefaults, 'iconPosition'>;
+export type ButtonStyleProps = Omit<ButtonPropsDefaults, 'iconPosition'> & { hasChildren: boolean };

datahub-web-react/src/alchemy-components/components/Button/utils.ts

@@ -81,7 +81,7 @@ const getButtonColorStyles = (variant: ButtonVariant, color: ColorOptions): Colo
 
             bgColor: colors.transparent,
             borderColor: colors.transparent,
-            hoverBgColor: colors.transparent,
+            hoverBgColor: colors.gray[1500],
             activeBgColor: colors.transparent,
             disabledBgColor: colors.transparent,
             disabledBorderColor: colors.transparent,
@@ -151,26 +151,7 @@ const getButtonFontStyles = (size: SizeOptions) => {
         lineHeight: typography.lineHeights.none,
     };
 
-    const sizeStyles = {
-        sm: {
-            ...baseFontStyles,
-            fontSize: getFontSize(size), // 12px
-        },
-        md: {
-            ...baseFontStyles,
-            fontSize: getFontSize(size), // 14px
-        },
-        lg: {
-            ...baseFontStyles,
-            fontSize: getFontSize(size), // 16px
-        },
-        xl: {
-            ...baseFontStyles,
-            fontSize: getFontSize(size), // 18px
-        },
-    };
-
-    return sizeStyles[size];
+    return { ...baseFontStyles, fontSize: getFontSize(size) };
 };
 
 // Generate radii styles for button
@@ -180,13 +161,14 @@ const getButtonRadiiStyles = (isCircle: boolean) => {
 };
 
 // Generate padding styles for button
-const getButtonPadding = (size: SizeOptions, variant: ButtonVariant, isCircle: boolean) => {
+const getButtonPadding = (size: SizeOptions, hasChildren: boolean, isCircle: boolean) => {
     if (isCircle) return { padding: spacing.xsm };
+    if (!hasChildren) return { padding: spacing.xsm };
 
     const paddingStyles = {
         xs: {
-            vertical: 0,
-            horizontal: 0,
+            vertical: 6,
+            horizontal: 6,
         },
         sm: {
             vertical: 8,
@@ -208,7 +190,7 @@ const getButtonPadding = (size: SizeOptions, variant: ButtonVariant, isCircle: b
 
     const selectedStyle = paddingStyles[size];
     const verticalPadding = selectedStyle.vertical;
-    const horizontalPadding = variant === 'text' ? 0 : selectedStyle.horizontal;
+    const horizontalPadding = selectedStyle.horizontal;
     return { padding: `${verticalPadding}px ${horizontalPadding}px` };
 };
 
@@ -221,16 +203,16 @@ const getButtonActiveStyles = (colorStyles: ColorStyles) => ({
 });
 
 // Generate loading styles for button
-const getButtonLoadingStyles = () => ({
+const getButtonLoadingStyles = (): CSSObject => ({
     pointerEvents: 'none',
     opacity: 0.75,
 });
 
 /*
  * Main function to generate styles for button
  */
-export const getButtonStyle = (props: ButtonStyleProps) => {
-    const { variant, color, size, isCircle, isActive, isLoading, isDisabled } = props;
+export const getButtonStyle = (props: ButtonStyleProps): CSSObject => {
+    const { variant, color, size, isCircle, isActive, isLoading, isDisabled, hasChildren } = props;
 
     // Get map of colors
     const colorStyles = getButtonColorStyles(variant, color);
@@ -239,10 +221,10 @@ export const getButtonStyle = (props: ButtonStyleProps) => {
     const variantStyles = getButtonVariantStyles(variant, colorStyles);
     const fontStyles = getButtonFontStyles(size);
     const radiiStyles = getButtonRadiiStyles(isCircle);
-    const paddingStyles = getButtonPadding(size, variant, isCircle);
+    const paddingStyles = getButtonPadding(size, hasChildren, isCircle);
 
     // Base of all generated styles
-    let styles = {
+    let styles: CSSObject = {
         ...variantStyles,
         ...fontStyles,
         ...radiiStyles,

datahub-web-react/src/alchemy-components/components/Drawer/Drawer.tsx

@@ -26,7 +26,7 @@
                         {onBack && (
                             <Button
                                 color="gray"
-                                icon="ArrowBack"
+                                icon={{ icon: 'ArrowBack', source: 'material' }}
                                 iconPosition="left"
                                 isCircle
                                 onClick={() => onBack?.()}
@@ -41,7 +41,7 @@
                     {closable && (
                         <Button
                             color="gray"
-                            icon="Close"
+                            icon={{ icon: 'Close', source: 'material' }}
                             iconPosition="left"
                             isCircle
                             onClick={() => onClose?.()}

datahub-web-react/src/alchemy-components/components/GraphCard/GraphCard.stories.tsx

@@ -50,7 +50,7 @@ const meta = {
         subTitle: 'Description of the card',
         renderControls: () => (
             <>
-                <Button icon="Add" variant="outline" size="md">
+                <Button icon={{ icon: 'Add', source: 'material' }} variant="outline" size="md">
                     Assertion
                 </Button>
                 <SimpleSelect

datahub-web-react/src/alchemy-components/components/Icon/constants.ts

@@ -1,4 +1,4 @@
-const MATERIAL_UI_ICONS = [
+export const MATERIAL_UI_ICONS = [
     'AccountCircle',
     'AccountTree',
     'AddCircle',
@@ -546,7 +546,7 @@ const MATERIAL_UI_ICONS = [
     'ZoomOutMap',
 ];
 
-const PHOSPHOR_ICONS = [
+export const PHOSPHOR_ICONS = [
     'Activity',
     'AddressBook',
     'Airplane',

datahub-web-react/src/alchemy-components/components/Input/Input.stories.tsx

@@ -1,3 +1,4 @@
+import { MATERIAL_UI_ICONS, PHOSPHOR_ICONS } from '@components/components/Icon/constants';
 import React from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
@@ -54,6 +55,10 @@ const meta = {
             description: 'The icon to display in the Input.',
             type: 'string',
             options: AVAILABLE_ICONS,
+            mapping: Object.fromEntries([
+                ...MATERIAL_UI_ICONS.map((icon) => [icon, { icon, source: 'material' }]),
+                ...PHOSPHOR_ICONS.map((icon) => [icon, { icon, source: 'phosphor' }]),
+            ]),
             table: {
                 defaultValue: { summary: 'undefined' },
             },

datahub-web-react/src/alchemy-components/components/Input/Input.tsx

@@ -76,7 +76,7 @@
                 </Label>
             )}
             <InputContainer {...inputBaseProps}>
-                {icon && <SearchIcon icon={icon.name} source={icon.source} variant={icon.variant} size="xl" />}
+                {icon && <SearchIcon size="xl" {...icon} />}
                 <InputField
                     value={value}
                     onChange={(e) => setValue?.(e.target.value)}

datahub-web-react/src/alchemy-components/components/Input/types.ts

@@ -1,14 +1,12 @@
-import { IconSource } from '@components/components/Icon/types';
+import { IconProps } from '@components/components/Icon/types';
 import React, { InputHTMLAttributes } from 'react';
 
-import { IconNames, MaterialIconVariant } from '../Icon';
-
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     value?: string | number | readonly string[] | undefined;
     setValue?: React.Dispatch<React.SetStateAction<string>>;
     label: string;
     placeholder?: string;
-    icon?: { name: IconNames; source: IconSource; variant?: MaterialIconVariant };
+    icon?: IconProps;
     error?: string;
     warning?: string;
     isSuccess?: boolean;

datahub-web-react/src/alchemy-components/components/SearchBar/SearchBar.tsx

@@ -1,12 +1,13 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { Icon } from '@src/alchemy-components';
+import { InputProps } from 'antd';
 import React from 'react';
 import { StyledSearchBar } from './components';
 import { SearchBarProps } from './types';
 
 export const searchBarDefaults: SearchBarProps = {
     placeholder: 'Search...',
     value: '',
-    width: '272px',
+    width: '100%',
     allowClear: true,
 };
 
@@ -16,15 +17,17 @@ export const SearchBar = ({
     width = searchBarDefaults.width,
     allowClear = searchBarDefaults.allowClear,
     onChange,
-}: SearchBarProps) => {
+    ...props
+}: SearchBarProps & Omit<InputProps, 'onChange'>) => {
     return (
         <StyledSearchBar
             placeholder={placeholder}
             onChange={(e) => onChange?.(e.target.value)}
             value={value}
-            prefix={<SearchOutlined />}
+            prefix={<Icon icon="MagnifyingGlass" source="phosphor" />}
             allowClear={allowClear}
             $width={width}
+            {...props}
         />
     );
 };

datahub-web-react/src/alchemy-components/components/SearchBar/types.ts

@@ -4,4 +4,5 @@ export interface SearchBarProps {
     width?: string;
     onChange?: (value: string) => void;
     allowClear?: boolean;
+    disabled?: boolean;
 }