@databricks/design-system 1.12.18 → 1.12.19

package/src/design-system/Button/styles.ts

@@ -0,0 +1,269 @@
+import type { CSSObject } from '@emotion/react';
+
+import type { Theme } from '../../theme';
+
+export function getDefaultStyles(theme: Theme, loading = false): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDefaultBorderDefault,
+    color: theme.colors.actionDefaultTextDefault,
+  };
+  return {
+    ...defaultStyles,
+    lineHeight: theme.typography.lineHeightBase,
+    textDecoration: 'none',
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionDefaultBackgroundHover,
+      borderColor: theme.colors.actionDefaultBorderHover,
+      color: theme.colors.actionDefaultTextHover,
+    },
+
+    '&:active': {
+      backgroundColor: loading
+        ? theme.colors.actionDefaultBackgroundDefault
+        : theme.colors.actionDefaultBackgroundPress,
+      borderColor: theme.colors.actionDefaultBorderPress,
+      color: theme.colors.actionDefaultTextPress,
+    },
+  };
+}
+
+export function getPrimaryStyles(theme: Theme): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault,
+  };
+  return {
+    ...defaultStyles,
+    textShadow: 'none',
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextHover,
+    },
+
+    '&:active': {
+      backgroundColor: theme.colors.actionPrimaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextPress,
+    },
+  };
+}
+
+export function getLinkStyles(theme: Theme): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: theme.colors.actionTertiaryBackgroundDefault,
+    color: theme.colors.actionTertiaryTextDefault,
+  };
+  return {
+    ...defaultStyles,
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionTertiaryTextHover,
+    },
+
+    '&:active': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionTertiaryTextPress,
+    },
+
+    '&[disabled]:hover': {
+      background: 'none',
+      color: theme.colors.actionDisabledText,
+    },
+  };
+}
+
+export function getPrimaryDangerStyles(theme: Theme): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDangerPrimaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault,
+  };
+
+  return {
+    ...defaultStyles,
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundHover,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextHover,
+    },
+
+    '&:active': {
+      backgroundColor: theme.colors.actionDangerPrimaryBackgroundPress,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextPress,
+    },
+
+    '&:focus-visible': {
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault,
+    },
+  };
+}
+
+export function getSecondaryDangerStyles(theme: Theme): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDangerDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDangerDefaultBorderDefault,
+    color: theme.colors.actionDangerDefaultTextDefault,
+  };
+
+  return {
+    ...defaultStyles,
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionDangerDefaultBackgroundHover,
+      borderColor: theme.colors.actionDangerDefaultBorderHover,
+      color: theme.colors.actionDangerDefaultTextHover,
+    },
+
+    '&:active': {
+      backgroundColor: theme.colors.actionDangerDefaultBackgroundPress,
+      borderColor: theme.colors.actionDangerDefaultBorderPress,
+      color: theme.colors.actionDangerDefaultTextPress,
+    },
+
+    '&:focus-visible': {
+      outlineColor: theme.colors.actionDangerPrimaryBackgroundDefault,
+    },
+  };
+}
+
+export function getDisabledDefaultStyles(theme: Theme, useNewShadows: boolean): CSSObject {
+  const defaultStyles = {
+    backgroundColor: 'transparent',
+    borderColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none',
+    }),
+  };
+  return {
+    ...defaultStyles,
+
+    '&:hover': {
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText,
+    },
+
+    '&:active': {
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText,
+    },
+  };
+}
+
+export function getDisabledPrimaryStyles(theme: Theme, useNewShadows: boolean): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDisabledBorder,
+    borderColor: 'transparent',
+    color: theme.colors.actionPrimaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none',
+    }),
+  };
+  return {
+    ...defaultStyles,
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextDefault,
+    },
+
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      borderColor: 'transparent',
+      color: theme.colors.actionPrimaryTextDefault,
+    },
+  };
+}
+
+export function getDisabledErrorStyles(theme: Theme, useNewShadows: boolean): CSSObject {
+  return getDisabledPrimaryStyles(theme, useNewShadows);
+}
+
+export function getDisabledTertiaryStyles(theme: Theme, useNewShadows: boolean): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+    borderColor: 'transparent',
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none',
+    }),
+  };
+  return {
+    ...defaultStyles,
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText,
+    },
+
+    '&:active': {
+      backgroundColor: theme.colors.actionTertiaryBackgroundDefault,
+      borderColor: 'transparent',
+      color: theme.colors.actionDisabledText,
+    },
+  };
+}
+
+export function getDisabledSplitButtonStyles(theme: Theme, useNewShadows: boolean): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+    borderColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionDisabledText,
+    ...(useNewShadows && {
+      boxShadow: 'none',
+    }),
+  };
+  return {
+    ...defaultStyles,
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText,
+    },
+
+    '&:active': {
+      backgroundColor: theme.colors.actionDefaultBackgroundDefault,
+      borderColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionDisabledText,
+    },
+  };
+}
+
+export function getDisabledPrimarySplitButtonStyles(theme: Theme, useNewShadows: boolean): CSSObject {
+  const defaultStyles = {
+    backgroundColor: theme.colors.actionDisabledBorder,
+    color: theme.colors.actionPrimaryTextDefault,
+    ...(useNewShadows && {
+      boxShadow: 'none',
+    }),
+  };
+  return {
+    ...defaultStyles,
+
+    '&:hover': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionPrimaryTextDefault,
+    },
+
+    '&:active': {
+      backgroundColor: theme.colors.actionDisabledBorder,
+      color: theme.colors.actionPrimaryTextDefault,
+    },
+  };
+}

package/src/design-system/Card/Card.test.tsx

@@ -0,0 +1,99 @@
+import { describe, jest, it, expect } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Card } from './Card';
+import { DesignSystemEventProvider, DesignSystemEventProviderAnalyticsEventTypes } from '../DesignSystemEventProvider';
+
+describe('<Card/>', () => {
+  const cardComponentId = 'test_card_id';
+  const cardText = 'A';
+  const handleClickSpy = jest.fn();
+  const eventCallback = jest.fn();
+  const renderComponent = (
+    href?: string,
+    analyticsEvents: (
+      | DesignSystemEventProviderAnalyticsEventTypes.OnClick
+      | DesignSystemEventProviderAnalyticsEventTypes.OnView
+    )[] = [DesignSystemEventProviderAnalyticsEventTypes.OnClick],
+  ) => {
+    render(
+      <DesignSystemEventProvider callback={eventCallback}>
+        <Card componentId={cardComponentId} onClick={handleClickSpy} href={href} analyticsEvents={analyticsEvents}>
+          A
+        </Card>
+      </DesignSystemEventProvider>,
+    );
+  };
+
+  it('emits onClick event on mouse click', async () => {
+    renderComponent();
+    expect(handleClickSpy).not.toHaveBeenCalled();
+    expect(eventCallback).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByText(cardText));
+    expect(handleClickSpy).toHaveBeenCalledTimes(1);
+    expect(eventCallback).toHaveBeenCalledWith({
+      eventType: 'onClick',
+      componentId: cardComponentId,
+      componentType: 'card',
+      shouldStartInteraction: true,
+      value: undefined,
+      isInteractionSubject: undefined,
+      event: expect.any(Object),
+    });
+  });
+
+  it('emits onClick event on keyboard navigable select Tab+Enter', async () => {
+    renderComponent('databricks.com');
+    expect(handleClickSpy).not.toHaveBeenCalled();
+    expect(eventCallback).not.toHaveBeenCalled();
+    // handleSelection() is only called when the inner content is focused
+    // Tab to the <a> tag, Tab to the inner card content, Enter to trigger handleSelection()
+    await userEvent.keyboard('{Tab}{Tab}{Enter}');
+    expect(handleClickSpy).toHaveBeenCalledTimes(1);
+    expect(eventCallback).toHaveBeenCalledWith({
+      eventType: 'onClick',
+      componentId: cardComponentId,
+      componentType: 'card',
+      shouldStartInteraction: true,
+      value: undefined,
+      isInteractionSubject: undefined,
+      event: expect.any(Object),
+    });
+  });
+
+  it('emits onClick event on keyboard navigable select Tab+Space', async () => {
+    renderComponent('databricks.com');
+    expect(handleClickSpy).not.toHaveBeenCalled();
+    expect(eventCallback).not.toHaveBeenCalled();
+    // handleSelection() is only called when the inner content is focused
+    // Tab to the <a> tag, Tab to the inner card content, Space to trigger handleSelection()
+    await userEvent.keyboard('{Tab}{Tab} ');
+    expect(handleClickSpy).toHaveBeenCalledTimes(1);
+    expect(eventCallback).toHaveBeenCalledWith({
+      eventType: 'onClick',
+      componentId: cardComponentId,
+      componentType: 'card',
+      shouldStartInteraction: true,
+      value: undefined,
+      isInteractionSubject: undefined,
+      event: expect.any(Object),
+    });
+  });
+
+  it('emits onView on first render', async () => {
+    // Disable IntersectionObserver for useNotifyOnFirstView hook to trigger
+    (window as any).IntersectionObserver = undefined;
+
+    renderComponent('databricks.com', [DesignSystemEventProviderAnalyticsEventTypes.OnView]);
+
+    expect(screen.getByText('A')).toBeVisible();
+    expect(eventCallback).toHaveBeenCalledWith({
+      eventType: 'onView',
+      componentId: cardComponentId,
+      componentType: 'card',
+      shouldStartInteraction: false,
+      value: undefined,
+    });
+  });
+});

package/src/design-system/Card/Card.tsx

@@ -0,0 +1,298 @@
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+import { useMergeRefs } from '@floating-ui/react';
+import { isUndefined } from 'lodash';
+import type { HTMLAttributes, HTMLProps, PropsWithChildren } from 'react';
+import React, { useCallback, useMemo } from 'react';
+
+import type { Theme } from '../../theme';
+import {
+  DesignSystemEventProviderAnalyticsEventTypes,
+  DesignSystemEventProviderComponentTypes,
+  useDesignSystemEventComponentCallbacks,
+} from '../DesignSystemEventProvider/DesignSystemEventProvider';
+import { getAnimationCss } from '../DesignSystemProvider';
+import { useDesignSystemTheme } from '../Hooks';
+import { ParagraphSkeleton, TitleSkeleton } from '../Skeleton';
+import type { AnalyticsEventPropsWithStartInteraction, DangerousGeneralProps, HTMLDataAttributes } from '../types';
+import { useDesignSystemSafexFlags, useNotifyOnFirstView } from '../utils';
+import { addDebugOutlineIfEnabled } from '../utils/debug';
+import { safex } from '../utils/safex';
+
+export interface CardProps
+  extends DangerousGeneralProps,
+    HTMLDataAttributes,
+    HTMLAttributes<HTMLDivElement>,
+    AnalyticsEventPropsWithStartInteraction<
+      DesignSystemEventProviderAnalyticsEventTypes.OnClick | DesignSystemEventProviderAnalyticsEventTypes.OnView
+    > {
+  /**
+   * disable the default hover style effects (border, box-shadow)
+   *
+   * @default false
+   */
+  disableHover?: boolean;
+
+  /**
+   * Show the card in loading state using a Skeleton
+   * Without a given width we will default to 300px
+   *
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Custom loading content using Dubois Skeleton components
+   *
+   * @default undefined
+   */
+  customLoadingContent?: React.ReactNode;
+
+  /**
+   *
+   * @default undefined
+   */
+  onClick?: (e?: React.MouseEvent | React.KeyboardEvent) => void;
+
+  /**
+   * Width of the card, used when displaying a list of cards with matching widths
+   *
+   * @default 300
+   */
+  width?: string | number;
+
+  /**
+   * Add a row of content at the bottom of the card
+   * Note this content will stretch to the edge of the card, client will need to provide custom padding as needed
+   *
+   * @default undefined
+   */
+  bottomBarContent?: React.ReactNode;
+
+  /**
+   * Add a row of content at the top of the card
+   * Note this content will stretch to the edge of the card, client will need to provide custom padding as needed
+   *
+   * @default undefined
+   */
+  topBarContent?: React.ReactNode;
+  // Use this to navigate to a different page via a native anchor tag
+  href?: string;
+  anchorProps?: HTMLProps<HTMLAnchorElement>;
+  // Use this to navigate to a different page via a custom navigation function
+  navigateFn?: () => Promise<void>;
+}
+
+// Loading state requires a width since it'll have no content
+const LOADING_STATE_DEFAULT_WIDTH = 300;
+
+function getStyles(args: {
+  theme: Theme;
+  width: CardProps['width'];
+  disableHover: CardProps['disableHover'];
+  loading: CardProps['loading'];
+  hasBottomBar: boolean;
+  hasTopBar: boolean;
+  hasHref: boolean;
+  useNewShadows?: boolean;
+  useNewBorderRadii?: boolean;
+}): SerializedStyles {
+  const { theme, loading, width, disableHover, hasTopBar, hasBottomBar, hasHref, useNewShadows, useNewBorderRadii } =
+    args;
+
+  const hoverOrFocusStyle = {
+    boxShadow: disableHover || loading ? '' : useNewShadows ? theme.shadows.sm : theme.general.shadowLow,
+    ...(hasHref && {
+      border: `1px solid ${theme.colors.actionDefaultBorderHover}`,
+      ...(useNewShadows && {
+        boxShadow: theme.shadows.md,
+      }),
+    }),
+  };
+
+  return css({
+    color: theme.colors.textPrimary,
+    backgroundColor: theme.colors.backgroundPrimary,
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    flexDirection: 'column',
+    paddingRight: hasTopBar || hasBottomBar ? 0 : theme.spacing.md,
+    paddingLeft: hasTopBar || hasBottomBar ? 0 : theme.spacing.md,
+    paddingTop: hasTopBar ? 0 : theme.spacing.md,
+    paddingBottom: hasBottomBar ? 0 : theme.spacing.md,
+    width: width ?? 'fit-content',
+    borderRadius: useNewBorderRadii ? theme.borders.borderRadiusMd : theme.legacyBorders.borderRadiusMd,
+    borderColor: theme.colors.border,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    '&:hover': hoverOrFocusStyle,
+    '&:focus': hoverOrFocusStyle,
+    cursor: disableHover || loading ? 'default' : 'pointer',
+    ...(useNewShadows && {
+      boxShadow: theme.shadows.sm,
+    }),
+    transition: `box-shadow 0.2s ease-in-out`,
+    textDecoration: 'none !important',
+    ...getAnimationCss(theme.options.enableAnimation),
+  });
+}
+
+function getBottomBarStyles(theme: Theme, useNewBorderRadii: boolean) {
+  return css({
+    marginTop: theme.spacing.sm,
+    borderBottomRightRadius: useNewBorderRadii ? theme.borders.borderRadiusSm : theme.legacyBorders.borderRadiusMd,
+    borderBottomLeftRadius: useNewBorderRadii ? theme.borders.borderRadiusSm : theme.legacyBorders.borderRadiusMd,
+    overflow: 'hidden',
+  });
+}
+
+function getTopBarStyles(theme: Theme, useNewBorderRadii: boolean) {
+  return css({
+    marginBottom: theme.spacing.sm,
+    borderTopRightRadius: useNewBorderRadii ? theme.borders.borderRadiusSm : theme.legacyBorders.borderRadiusMd,
+    borderTopLeftRadius: useNewBorderRadii ? theme.borders.borderRadiusSm : theme.legacyBorders.borderRadiusMd,
+    overflow: 'hidden',
+  });
+}
+
+export const Card = ({
+  children,
+  customLoadingContent,
+  dangerouslyAppendEmotionCSS,
+  loading,
+  width,
+  bottomBarContent,
+  topBarContent,
+  disableHover,
+  onClick,
+  href,
+  navigateFn,
+  anchorProps,
+  componentId,
+  analyticsEvents,
+  shouldStartInteraction,
+  ...dataAndAttributes
+}: PropsWithChildren<CardProps>) => {
+  const emitOnView = safex('databricks.fe.observability.defaultComponentView.card', false);
+  const { theme } = useDesignSystemTheme();
+  const { useNewShadows, useNewBorderRadii } = useDesignSystemSafexFlags();
+  const hasTopBar = !isUndefined(topBarContent);
+  const hasBottomBar = !isUndefined(bottomBarContent);
+  const cardStyle = css(
+    getStyles({
+      theme,
+      loading,
+      width,
+      disableHover,
+      hasBottomBar,
+      hasTopBar,
+      hasHref: Boolean(href),
+      useNewShadows,
+      useNewBorderRadii,
+    }),
+  );
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const bottomBar = bottomBarContent ? (
+    <div css={css(getBottomBarStyles(theme, useNewBorderRadii))}>{bottomBarContent}</div>
+  ) : null;
+  const topBar = topBarContent ? <div css={css(getTopBarStyles(theme, useNewBorderRadii))}>{topBarContent}</div> : null;
+  const contentPadding = hasTopBar || hasBottomBar ? theme.spacing.lg : 0;
+  const memoizedAnalyticsEvents = useMemo(
+    () =>
+      analyticsEvents ??
+      (emitOnView
+        ? [DesignSystemEventProviderAnalyticsEventTypes.OnClick, DesignSystemEventProviderAnalyticsEventTypes.OnView]
+        : [DesignSystemEventProviderAnalyticsEventTypes.OnClick]),
+    [analyticsEvents, emitOnView],
+  );
+  const eventContext = useDesignSystemEventComponentCallbacks({
+    componentType: DesignSystemEventProviderComponentTypes.Card,
+    componentId,
+    analyticsEvents: memoizedAnalyticsEvents,
+    shouldStartInteraction,
+  });
+
+  const { elementRef: cardRef } = useNotifyOnFirstView<HTMLDivElement>({ onView: eventContext.onView });
+  const mergedRef = useMergeRefs<HTMLDivElement>([ref, cardRef]);
+
+  const navigate = useCallback(async () => {
+    if (navigateFn) {
+      await navigateFn();
+    }
+  }, [navigateFn]);
+
+  const handleClick = useCallback(
+    async (e: React.MouseEvent) => {
+      eventContext.onClick(e);
+      await navigate();
+      onClick?.(e);
+      ref.current?.blur();
+    },
+    [navigate, eventContext, onClick],
+  );
+
+  const handleSelection = useCallback(
+    async (e: React.KeyboardEvent) => {
+      eventContext.onClick(e);
+      e.preventDefault();
+      await navigate();
+      onClick?.(e);
+    },
+    [navigate, eventContext, onClick],
+  );
+
+  const content = (
+    <div
+      ref={mergedRef}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+      {...addDebugOutlineIfEnabled()}
+      css={href ? [] : [cardStyle, dangerouslyAppendEmotionCSS]}
+      onClick={loading || href ? undefined : handleClick}
+      {...dataAndAttributes}
+      {...(href && {
+        onKeyDown: async (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            await handleSelection(e);
+          }
+          dataAndAttributes.onKeyDown?.(e);
+        },
+      })}
+      {...eventContext.dataComponentProps}
+    >
+      {loading ? (
+        <DefaultCardLoadingContent width={width} customLoadingContent={customLoadingContent} />
+      ) : (
+        <>
+          {topBar}
+          <div css={{ padding: `0px ${contentPadding}px`, flexGrow: 1 }}>{children}</div>
+          {bottomBar}
+        </>
+      )}
+    </div>
+  );
+
+  return href ? (
+    <a css={[cardStyle, dangerouslyAppendEmotionCSS]} href={href} {...anchorProps}>
+      {content}
+    </a>
+  ) : (
+    content
+  );
+};
+
+function DefaultCardLoadingContent({ customLoadingContent, width }: Pick<CardProps, 'customLoadingContent' | 'width'>) {
+  if (customLoadingContent) {
+    return <>{customLoadingContent}</>;
+  }
+  return (
+    <div css={{ width: width ?? LOADING_STATE_DEFAULT_WIDTH }}>
+      <TitleSkeleton label="Loading..." style={{ width: '50%' }} />
+      {[...Array(3).keys()].map((i) => (
+        <ParagraphSkeleton label="Loading..." key={i} />
+      ))}
+    </div>
+  );
+}

package/src/design-system/Card/index.tsx

@@ -0,0 +1 @@
+export * from './Card';