@databricks/design-system 1.1.0 → 1.2.0

package/dist/index.js

@@ -52373,15 +52373,15 @@ const antdGeneralVariables = {
 };
 var generalVariables = antdGeneralVariables;
 
-const FONT_SIZE_BASE = 14; // Less variables that are used by AntD
+const FONT_SIZE_BASE = 13; // Less variables that are used by AntD
 
 const antdTypography = {
-  fontSizeSm: 12,
+  fontSizeSm: FONT_SIZE_BASE - 2,
   fontSizeBase: FONT_SIZE_BASE,
   fontSizeMd: FONT_SIZE_BASE,
-  fontSizeLg: 18,
-  fontSizeXl: 22,
-  fontSizeXxl: 32,
+  fontSizeLg: FONT_SIZE_BASE + 6,
+  fontSizeXl: FONT_SIZE_BASE + 8,
+  fontSizeXxl: FONT_SIZE_BASE + 18,
   lineHeightSm: '16px',
   lineHeightBase: '20px',
   lineHeightMd: '20px',
@@ -52453,6 +52453,43 @@ function WithDesignSystemThemeHoc(Component) {
   };
 }
 
+/**
+ * A helper hook that allows quick creation of theme-dependent styles. 
+ * Results in more compact code than using useMemo and 
+ * useDesignSystemTheme separately.
+ * 
+ * @example 
+ * const styles = useThemedStyles((theme) => ({
+ *   overlay: {
+ *     backgroundColor: theme.colors.backgroundPrimary,
+ *     borderRadius: theme.borders.borderRadiusMd,
+ *   },
+ *   wrapper: {
+ *     display: 'flex',
+ *     gap: theme.spacing.md,
+ *   },
+ * }));
+
+ * <div css={styles.overlay}>...</div>
+ * 
+ * @param styleFactory Factory function that accepts theme object as a parameter and returns
+ *     the style object. **Note**: factory function body is being memoized internally and is intended
+ *     to be used only for simple style objects that depend solely on the theme. If you want to use
+ *     styles that change depending on external values (state, props etc.) you should use
+ *     `useDesignSystemTheme` directly with  your own reaction mechanism.
+ * @returns The constructed style object
+ */
+
+const useThemedStyles = styleFactory => {
+  const {
+    theme
+  } = useDesignSystemTheme(); // We can assume that the factory function won't change and we're
+  // observing theme changes only.
+
+  const styleFactoryRef = useRef(styleFactory);
+  return useMemo$1(() => styleFactoryRef.current(theme), [theme]);
+};
+
 const DuboisContextDefaults = {
   enableAnimation: false,
   theme: 'default',
@@ -53296,6 +53333,12 @@ function getCollapseEmotionStyles(clsPrefix, theme) {
     [classContentBox]: {
       padding: '8px 16px 16px'
     },
+    ...(theme.options.isCompact && {
+      ["& > ".concat(classItem, " > ").concat(classHeader)]: {
+        padding: '6px 44px 6px 0',
+        lineHeight: theme.typography.lineHeightBase
+      }
+    }),
     ...getAnimationCss(theme.options.enableAnimation)
   };
   return /*#__PURE__*/css$1(styles, process.env.NODE_ENV === "production" ? "" : ";label:getCollapseEmotionStyles;");
@@ -53917,7 +53960,7 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
   IconWrapper: IconWrapper
 });
 
-const getFormEmotionStyles = _ref => {
+const getFormItemEmotionStyles = _ref => {
   let {
     theme,
     clsPrefix
@@ -53931,7 +53974,8 @@ const getFormEmotionStyles = _ref => {
       lineHeight: theme.typography.lineHeightBase
     },
     [clsFormItemExplain]: {
-      fontSize: theme.typography.fontSizeSm
+      fontSize: theme.typography.fontSizeSm,
+      margin: 0
     },
     [clsFormItemInputControl]: {
       minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
@@ -53940,7 +53984,7 @@ const getFormEmotionStyles = _ref => {
       border: 'none'
     },
     ...getAnimationCss(theme.options.enableAnimation)
-  }, process.env.NODE_ENV === "production" ? "" : ";label:getFormEmotionStyles;");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:getFormItemEmotionStyles;");
 };
 
 const FormDubois = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
@@ -53948,26 +53992,28 @@ const FormDubois = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
     dangerouslySetAntdProps,
     ...props
   } = _ref2;
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
   const mergedProps = { ...props,
     layout: props.layout || 'vertical',
     requiredMark: props.requiredMark || false
   };
   return jsx(AntDForm, { ...mergedProps,
     ref: ref,
-    css: getFormEmotionStyles({
-      theme,
-      clsPrefix: classNamePrefix
-    }),
     ...dangerouslySetAntdProps
   });
 });
 
-const FormItem = props => jsx(AntDForm.Item, { ...props
-});
+const FormItem = props => {
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  return jsx(AntDForm.Item, { ...props,
+    css: getFormItemEmotionStyles({
+      theme,
+      clsPrefix: classNamePrefix
+    })
+  });
+};
 
 const FormNamespace = Object.assign(FormDubois, {
   Item: FormItem,
@@ -54336,7 +54382,6 @@ const getModalEmotionStyles = args => {
   const bodyMaxHeight = "calc(".concat(modalMaxHeight, " - ").concat(headerHeight, "px - ").concat(footerHeight, "px - ").concat(contentBottomPadding, "px)");
   return /*#__PURE__*/css$1({
     [classNameHeader]: {
-      height: headerHeight,
       paddingTop: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1,
       paddingLeft: theme.options.isCompact ? theme.spacing.lg : MODAL_PADDING$1,
       paddingRight: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1,
@@ -54391,9 +54436,10 @@ const getModalEmotionStyles = args => {
       fontSize: theme.typography.fontSizeXl,
       lineHeight: theme.typography.lineHeightXl,
       fontWeight: theme.typography.typographyBoldFontWeight,
+      paddingRight: MODAL_PADDING$1,
       // Don't impact regular size
       ...(theme.options.isCompact && {
-        height: headerHeight / 2,
+        minHeight: headerHeight / 2,
         display: 'flex',
         alignItems: 'center'
       })
@@ -54402,7 +54448,9 @@ const getModalEmotionStyles = args => {
       maxHeight: modalMaxHeight,
       height: maxedOutHeight ? modalMaxHeight : '',
       overflow: 'hidden',
-      paddingBottom: contentBottomPadding
+      paddingBottom: contentBottomPadding,
+      display: 'flex',
+      flexDirection: 'column'
     },
     [classNameBody]: {
       overflowY: 'auto',
@@ -56412,5 +56460,5 @@ Typography.Title = Title;
 Typography.Paragraph = Paragraph;
 Typography.Link = AntDTypography.Link;
 
-export { AIcon, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ApplyCompactDesignSystemTheme, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, Clock1Icon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, Collapse, CollapsePanel, CopyIcon, DIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FeatureStoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, ForkIcon, Form, FormDubois, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfoBorderIcon, InfoFillIcon, Input, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationsIcon, OfficeIcon, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PinXIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, ReposIcon, Row, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VideosIcon, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Option, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getTabEmotionStyles, useDesignSystemTheme, useNotification };
+export { AIcon, Alert, AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ApplyCompactDesignSystemTheme, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowsUpDownIcon, AutoComplete, BarChartIcon, BeakerIcon, BookIcon, BookmarkBorderIcon, BookmarkFillIcon, Breadcrumb, BriefcaseFillIcon, BriefcaseIcon, Button, CalendarEventIcon, CalendarIcon, CaretDownSquareIcon, CaretUpSquareIcon, CheckCircleBorderIcon, CheckCircleFillIcon, CheckIcon, CheckLineIcon, Checkbox, ChecklistIcon, ChevronDoubleDownIcon, ChevronDoubleLeftIcon, ChevronDoubleRightIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardIcon, Clock1Icon, ClockIcon, CloseIcon, CloudDownloadIcon, CloudIcon, CloudOffIcon, CloudUploadIcon, ClusterIcon, ClustersIcon, CodeIcon, Col, Collapse, CollapsePanel, CopyIcon, DIcon, DangerModal, DashIcon, DashboardIcon, DataIcon, DatabaseIcon, DesignSystemContext, DesignSystemProvider, DownloadIcon, DragIcon, Dropdown, DropdownMenu, DuboisDatePicker, ErrorBorderIcon, ErrorFillIcon, ExpandLessIcon, ExpandMoreIcon, ExperimentIcon, FeatureStoreIcon, FileCodeIcon, FileDocumentIcon, FileIcon, FileImageIcon, FileModelIcon, FilterIcon, Folder1Icon, FolderIcon, ForkIcon, Form, FormDubois, FullscreenExitIcon, FullscreenIcon, Gear1Icon, GearIcon, GridDashIcon, GridIcon, H1Icon, H2Icon, H3Icon, Header$1 as Header, HistoryIcon, HomeIcon, Icon, ImageIcon, IndentDecreaseIcon, IndentIncreaseIcon, InfoBorderIcon, InfoFillIcon, Input, KeyboardIcon, LayerIcon, Layout, LegacyDatePicker, LifesaverIcon, LightningIcon, LinkIcon, LinkRemoveIcon, ListBorderIcon, ListIcon, LoadingIcon, LockBorderIcon, LockFillIcon, LockUnlockedIcon, MIcon, Menu, MinusBoxIcon, MinusCircleBorderIcon, MinusCircleFillIcon, Modal, ModelsIcon, NewWindowIcon, NoIcon, NotebookIcon, NotificationIcon, NotificationsIcon, OfficeIcon, Option, OverflowIcon, PageBottomIcon, PageFirstIcon, PageLastIcon, PageTopIcon, PageWrapper, Pagination, PencilIcon, PinBorderIcon, PinCancelIcon, PinFillIcon, PinXIcon, PlayCircleBorderIcon, PlayCircleFillIcon, PlayIcon, PlusCircleBorderIcon, PlusCircleFillIcon, PlusIcon, PlusSquareIcon, Popover, QueryEditorIcon, QueryIcon, QueryListViewIcon, QueryNavIcon, QuestionMarkBorderIcon, QuestionMarkFillIcon, ROW_GUTTER_SIZE, Radio, ReaderModeIcon, ReposIcon, Row, SchoolIcon, Search1Icon, SearchIcon, SecurityIcon, SegmentedControlButton, SegmentedControlGroup, Select, ShareIcon, SidebarAutoIcon, SidebarCollapseIcon, SidebarExpandIcon, SidebarIcon, Skeleton, Space, Spacer, SpeechBubbleIcon, SpeechBubblePlusIcon, Spinner, SplitButton, StarBorderIcon, StarFillIcon, StopCircleBorderIcon, StopCricleFillIcon, StopIcon, StreamIcon, Switch, SyncIcon, TabPane, Table, TableIcon, Tabs, Tag, Tooltip, TrashIcon, Tree, TreeIcon, Typography, UploadIcon, UsbIcon, UserBadgeIcon, UserCircleIcon, UserGroupIcon, UserIcon, VideosIcon, WarningBorderIcon, WarningFillIcon, WithDesignSystemThemeHoc, XCircleBorderIcon, XCircleFillIcon, ZoomInIcon, ZoomOutIcon, __INTERNAL_DO_NOT_USE__FormItem, __INTERNAL_DO_NOT_USE__Group, __INTERNAL_DO_NOT_USE__HorizontalGroup, __INTERNAL_DO_NOT_USE__Option, __INTERNAL_DO_NOT_USE__Password, __INTERNAL_DO_NOT_USE__TextArea, __INTERNAL_DO_NOT_USE__VerticalGroup, getAnimationCss, getButtonEmotionStyles, getPaginationEmotionStyles, getTabEmotionStyles, useDesignSystemTheme, useNotification, useThemedStyles };
 //# sourceMappingURL=index.js.map