@databricks/design-system 0.2.1 → 1.2.0

package/dist/design-system/Tree/Tree.d.ts

@@ -1,5 +1,34 @@
 /// <reference types="react" />
 import { TreeProps as AntDTreeProps } from 'antd';
-export interface TreeProps extends AntDTreeProps {
+import { DangerouslySetAntdProps } from '../types';
+export interface TreeProps extends DangerouslySetAntdProps<AntDTreeProps> {
+    /**
+     * An array of `TreeNode`s representing the data in the tree
+     */
+    treeData: AntDTreeProps['treeData'];
+    /**
+     * An array of keys of nodes in the tree which should be in an expanded state when the tree is first rendered.
+     */
+    defaultExpandedKeys?: string[];
+    /**
+     * An array of keys of nodes in the tree which should be in a selected state when the tree is first rendered.
+     * Use with `mode="selectable"`.
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * An array of keys of nodes in the tree which should be in a checked state when the tree is first rendered.
+     * Use with `mode="checkable"`.
+     */
+    defaultCheckedKeys?: string[];
+    /**
+     * Visually and functionally disables the tree.
+     */
+    disabled?: boolean;
+    /**
+     * The UX mode of the tree. In `default` mode, nodes are for display only and are non-interactive.
+     * In `selectable` mode, nodes can be selected and deselected. This is useful for something like a file browser.
+     * In `checkable` mode, nodes are rendered with a checkbox. This is useful for something like a nested preference list.
+     */
+    mode?: 'default' | 'selectable' | 'multiselectable' | 'checkable';
 }
-export declare const Tree: React.FC<TreeProps>;
+export declare function Tree({ treeData, defaultExpandedKeys, defaultSelectedKeys, defaultCheckedKeys, disabled, mode, dangerouslySetAntdProps, }: TreeProps): JSX.Element;

package/dist/design-system/Typography/Paragraph.d.ts

@@ -1,9 +1,11 @@
 import { Typography as AntDTypography } from 'antd';
 import { ComponentProps } from 'react';
-import { DangerouslySetAntdProps } from '../types';
+import { DangerouslySetAntdProps, TypographyColor } from '../types';
 declare type AntDTypographyProps = ComponentProps<typeof AntDTypography>;
 declare type AntDParagraphProps = ComponentProps<typeof AntDTypography['Paragraph']>;
-interface ParagraphProps extends AntDTypographyProps, Pick<AntDParagraphProps, 'ellipsis' | 'disabled'>, DangerouslySetAntdProps<AntDParagraphProps> {
+export interface ParagraphProps extends AntDTypographyProps, Pick<AntDParagraphProps, 'ellipsis' | 'disabled' | 'id' | 'title' | 'aria-label'>, DangerouslySetAntdProps<AntDParagraphProps> {
+    withoutMargins?: boolean;
+    color?: TypographyColor;
 }
 export declare function Paragraph(userProps: ParagraphProps): JSX.Element;
 export {};

package/dist/design-system/Typography/Text.d.ts

@@ -1,12 +1,14 @@
 import { ComponentProps } from 'react';
 import { Typography as AntDTypography } from 'antd';
-import { DangerouslySetAntdProps } from '../types';
+import { DangerouslySetAntdProps, TypographyColor } from '../types';
 declare type AntDTypographyProps = ComponentProps<typeof AntDTypography>;
 declare type AntDTextProps = ComponentProps<typeof AntDTypography['Text']>;
-interface TextProps extends AntDTypographyProps, Pick<AntDTextProps, 'ellipsis' | 'disabled' | 'code'>, DangerouslySetAntdProps<AntDTextProps> {
+export interface TextProps extends AntDTypographyProps, Pick<AntDTextProps, 'ellipsis' | 'disabled' | 'code' | 'id' | 'title' | 'aria-label'>, DangerouslySetAntdProps<AntDTextProps> {
     bold?: boolean;
     hint?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    withoutMargins?: boolean;
+    color?: TypographyColor;
 }
 export declare function Text(userProps: TextProps): JSX.Element;
 export {};

package/dist/design-system/Typography/Title.d.ts

@@ -1,9 +1,11 @@
 import { Typography as AntDTypography } from 'antd';
 import { ComponentProps } from 'react';
-import { DangerouslySetAntdProps } from '../types';
+import { DangerouslySetAntdProps, TypographyColor } from '../types';
 declare type AntDTypographyProps = ComponentProps<typeof AntDTypography>;
 declare type AntDTitleProps = ComponentProps<typeof AntDTypography['Title']>;
-export interface TitleProps extends AntDTypographyProps, Pick<AntDTitleProps, 'level' | 'ellipsis'>, DangerouslySetAntdProps<AntDTitleProps> {
+export interface TitleProps extends AntDTypographyProps, Pick<AntDTitleProps, 'level' | 'ellipsis' | 'id' | 'title' | 'aria-label'>, DangerouslySetAntdProps<AntDTitleProps> {
+    withoutMargins?: boolean;
+    color?: TypographyColor;
 }
 export declare function Title(userProps: TitleProps): JSX.Element;
 export {};

package/dist/design-system/Typography/Typography.d.ts

@@ -2,6 +2,7 @@ import { TypographyProps as AntDTypographyProps } from 'antd';
 import { ReactNode } from 'react';
 interface TypographyProps extends Omit<AntDTypographyProps, 'Text' | 'Title' | 'Paragraph' | 'Link'> {
     children?: ReactNode;
+    withoutMargins?: boolean;
 }
 export declare function Typography(props: TypographyProps): JSX.Element;
 export declare namespace Typography {

package/dist/design-system/constants.d.ts

@@ -0,0 +1,2 @@
+import { getColors } from '../theme/colors';
+export declare const ColorVars: Record<string, keyof ReturnType<typeof getColors>>;

package/dist/design-system/index.d.ts

@@ -4,8 +4,10 @@ export * from './Breadcrumb';
 export * from './Button';
 export * from './Checkbox';
 export * from './Collapse';
+export * from './DatePicker';
 export * from './DesignSystemProvider';
 export * from './Dropdown';
+export * from './DropdownMenu';
 export * from './Form';
 export * from './Grid';
 export * from './Header';

package/dist/design-system/types.d.ts

@@ -1,4 +1,5 @@
 import { CSSObject } from '@emotion/react';
+import { ColorVars } from './constants';
 export interface DangerouslySetAntdProps<P> {
     /** For components that wrap `antd` components, emergency access for properties we do not support. Ask in #dubois before using. */
     dangerouslySetAntdProps?: P;
@@ -7,3 +8,5 @@ export interface DangerousGeneralProps {
     /** Applies emotion styles to the top-level element in the component. Ask in #dubois before using. */
     dangerouslyAppendEmotionCSS?: CSSObject;
 }
+/** Mapping for color variables can be found under constants.tsx */
+export declare type TypographyColor = keyof typeof ColorVars;

package/dist/design-system/utils/css-utils.d.ts

@@ -1,6 +1,15 @@
 import { CSSObject } from '@emotion/react';
+import { Theme } from '../../theme';
+import { TypographyColor } from '../types';
 /**
  * Recursively appends `!important` to all CSS properties in an Emotion `CSSObject`.
  * Used to ensure that we always override Ant styles, without worrying about selector precedence.
  */
 export declare function importantify(obj: CSSObject): CSSObject;
+/**
+ * Returns a text color, in case of invalid/missing key and missing fallback color it will return textPrimary
+ * @param theme
+ * @param key - key of TypographyColor
+ * @param fallbackColor - color to return as fallback -- used to remove tertiary check inline
+ */
+export declare function getTypographyColor(theme: Theme, key?: TypographyColor, fallbackColor?: string): string;