@datarobot/design-system 30.1.2 → 30.2.0

package/js/bundle/index.d.ts

@@ -5117,15 +5117,23 @@ export type SelectableTilesProps = {
         isDisabled?: boolean;
         /** Allows for aria label to be associated with the component */
         labelledBy?: string;
+        /** size of the tiles */
+        size?: SelectableTilesSize;
 };
 /** SelectableTiles let user choose on of the options represented in the form of tiles
     * [CAPITALIZATION] Sentence case (capitalize proper nouns i.e., Holdout).
     * @midnight-gray-supported
     * @alpine-light-supported
     */
-function SelectableTiles({ options, selectedKey, onItemSelect, containerClassName, itemClassName, optionId, isDisabled, labelledBy, }: SelectableTilesProps): import("react/jsx-runtime").JSX.Element;
+function SelectableTiles({ options, selectedKey, onItemSelect, containerClassName, itemClassName, optionId, isDisabled, labelledBy, size, }: SelectableTilesProps): import("react/jsx-runtime").JSX.Element;
 export default SelectableTiles;
 
+export const SELECTABLE_TILES_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+};
+export type SelectableTilesSize = ValueOf<typeof SELECTABLE_TILES_SIZES>;
+
 export type SidebarCardHeaderProps = {
         /** Card Header testId */
         testId: string;
@@ -5191,6 +5199,8 @@ export type SidebarCardItemProps = {
         className?: string;
         /** Defines if left item should be added */
         leftItem?: React.ReactNode | null;
+        /** Optional ref to attach to the card's root element */
+        ref?: React.Ref<HTMLDivElement>;
 };
 export type SidebarCardProps = {
         /** Test id */
@@ -5270,7 +5280,8 @@ import './sidebar-card.less';
   * @midnight-gray-supported
   * @alpine-light-supported
   * */
-export default function SidebarCard({ testId, id, isDisabled, isSelected, isReadOnly, hasCheckbox, isChecked, leftItem, checkboxTooltip, isCheckboxDisabled, title, titleTooltip, headerContentLeft, headerContentRight, content, onCheckboxSelect, className, shouldSelectTileOnEnter, ...other }: SidebarCardProps): import("react/jsx-runtime").JSX.Element;
+const SidebarCard: React.ForwardRefExoticComponent<SidebarCardProps & React.RefAttributes<HTMLDivElement>>;
+export default SidebarCard;
 
 import './sidebar-menu.less';
 export type SidebarMenuProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarobot/design-system",
-  "version": "30.1.2",
+  "version": "30.2.0",
   "description": "DataRobot react components library",
   "scripts": {
     "build": "node ../../tools/build-lib.js",

package/styles/index.css

@@ -676,7 +676,8 @@
   --selectable-tiles-item-box-shadow: none;
   --selectable-tiles-item-hover-box-shadow: none;
   --selected-tiles-item-disabled-border: var(--selected-tiles-item-selected-disabled-border);
-  --selectable-tiles-item-padding: 0.75rem 1rem;
+  --selectable-tiles-item-padding-md: 0.75rem 1rem;
+  --selectable-tiles-item-padding-sm: 0.25rem 0.5rem;
   /*#endregion */
   /*#region SidebarMenu component */
   --sidebar-active-title-color: var(--text-primary);
@@ -11189,10 +11190,7 @@ button:hover.active.pill {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 2.25rem;
-  min-width: 5rem;
   margin-right: 0.5rem;
-  padding: var(--selectable-tiles-item-padding);
   color: var(--selectable-tiles-item-text-color);
   background: var(--selectable-tiles-item-bg);
   border: var(--selectable-tiles-item-border);
@@ -11201,6 +11199,14 @@ button:hover.active.pill {
   cursor: pointer;
   outline: none;
 }
+.selectable-tiles-container .selectable-tiles-item.sm {
+  padding: var(--selectable-tiles-item-padding-sm);
+}
+.selectable-tiles-container .selectable-tiles-item.md {
+  min-height: 2.25rem;
+  min-width: 5rem;
+  padding: var(--selectable-tiles-item-padding-md);
+}
 .selectable-tiles-container .selectable-tiles-item:hover,
 .selectable-tiles-container .selectable-tiles-item[aria-checked='false']:focus {
   background: var(--selectable-tiles-item-hover-bg);