Merge branch 'vibe3' into vibe3-enums-colorpicker-7021048627

packages/core/docs/vibe-3-changelog.md

@@ -34,10 +34,6 @@ codemod: `avatar-component-migration`
 - `dataTestId` -> `data-testid` [codemod]
 - `children` prop is now mandatory
 
-### Box
-
-- `scrollable` -> change default to true [codemod]
-
 ### ButtonGroup
 
 - `componentClassName` -> `className` [codemod]
@@ -62,7 +58,6 @@ codemod: `avatar-component-migration`
 ### Dialog
 
 - `shoudlCallbackOnMount` -> `shouldCallbackOnMount` [codemod]
-- `JustifyType` removed [codemod]
 
 ### DialogContentContainer
 
@@ -80,6 +75,7 @@ codemod: `avatar-component-migration`
 ### Dropdown
 
 - Removed `Dropdown.size` property, use `Dropdown.sizes` instead [codemod]
+- Remove size 'xxs' and 'xs'
 
 ### IconButton
 

packages/core/src/components/Box/Box.tsx

@@ -124,7 +124,7 @@ const Box: VibeComponent<BoxProps> & {
       paddingStart,
       textColor,
       backgroundColor,
-      scrollable = true,
+      scrollable,
       style
     },
     ref

packages/core/src/components/Box/__tests__/__snapshots__/Box.snapshot.test.js.snap

@@ -2,128 +2,128 @@
 
 exports[`Box renders correctly with backgronudColor prop 1`] = `
 <div
-  className="box scrollable"
+  className="box"
 />
 `;
 
 exports[`Box renders correctly with border prop 1`] = `
 <div
-  className="box scrollable border"
+  className="box border"
 />
 `;
 
 exports[`Box renders correctly with borderColor prop 1`] = `
 <div
-  className="box scrollable borderColorUiBorderColor"
+  className="box borderColorUiBorderColor"
 />
 `;
 
 exports[`Box renders correctly with children 1`] = `
 <div
-  className="box scrollable"
+  className="box"
 >
   Child
 </div>
 `;
 
 exports[`Box renders correctly with empty props 1`] = `
 <div
-  className="box scrollable"
+  className="box"
 />
 `;
 
 exports[`Box renders correctly with margin prop 1`] = `
 <div
-  className="box scrollable mSmall"
+  className="box mSmall"
 />
 `;
 
 exports[`Box renders correctly with marginEnd prop 1`] = `
 <div
-  className="box scrollable meSmall"
+  className="box meSmall"
 />
 `;
 
 exports[`Box renders correctly with marginStart prop 1`] = `
 <div
-  className="box scrollable msSmall"
+  className="box msSmall"
 />
 `;
 
 exports[`Box renders correctly with marginTop prop 1`] = `
 <div
-  className="box scrollable mtSmall"
+  className="box mtSmall"
 />
 `;
 
 exports[`Box renders correctly with marginX prop 1`] = `
 <div
-  className="box scrollable mxSmall"
+  className="box mxSmall"
 />
 `;
 
 exports[`Box renders correctly with marginY prop 1`] = `
 <div
-  className="box scrollable mySmall"
+  className="box mySmall"
 />
 `;
 
 exports[`Box renders correctly with padding prop 1`] = `
 <div
-  className="box scrollable pSmall"
+  className="box pSmall"
 />
 `;
 
 exports[`Box renders correctly with paddingBottom prop 1`] = `
 <div
-  className="box scrollable pbSmall"
+  className="box pbSmall"
 />
 `;
 
 exports[`Box renders correctly with paddingEnd prop 1`] = `
 <div
-  className="box scrollable peSmall"
+  className="box peSmall"
 />
 `;
 
 exports[`Box renders correctly with paddingStart prop 1`] = `
 <div
-  className="box scrollable psSmall"
+  className="box psSmall"
 />
 `;
 
 exports[`Box renders correctly with paddingTop prop 1`] = `
 <div
-  className="box scrollable ptSmall"
+  className="box ptSmall"
 />
 `;
 
 exports[`Box renders correctly with paddingX prop 1`] = `
 <div
-  className="box scrollable pxSmall"
+  className="box pxSmall"
 />
 `;
 
 exports[`Box renders correctly with paddingY prop 1`] = `
 <div
-  className="box scrollable pySmall"
+  className="box pySmall"
 />
 `;
 
 exports[`Box renders correctly with rounded prop 1`] = `
 <div
-  className="box scrollable roundedSmall"
+  className="box roundedSmall"
 />
 `;
 
 exports[`Box renders correctly with shadow prop 1`] = `
 <div
-  className="box scrollable shadowSmall"
+  className="box shadowSmall"
 />
 `;
 
 exports[`Box renders correctly with text prop 1`] = `
 <div
-  className="box scrollable textPrimaryTextColor"
+  className="box textPrimaryTextColor"
 />
 `;

packages/core/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props,react/forbid-prop-types */
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
-import { SIZES, SIZES_VALUES } from "../../constants";
+import { BaseSizes, SIZES_VALUES } from "../../constants";
 import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import Select, { InputProps, components, createFilter, ActionMeta } from "react-select";
 import AsyncSelect from "react-select/async";
@@ -38,8 +38,7 @@ import {
 import { VibeComponent, withStaticProps } from "../../types";
 
 const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
-  size?: typeof SIZES;
-  sizes?: typeof SIZES;
+  sizes?: typeof BaseSizes;
   chipColors?: typeof DROPDOWN_CHIP_COLORS;
   menuPlacements?: typeof DROPDOWN_MENU_PLACEMENT;
   menuPositions?: typeof DROPDOWN_MENU_POSITION;
@@ -423,7 +422,7 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
 );
 
 export default withStaticProps(Dropdown, {
-  sizes: SIZES,
+  sizes: BaseSizes,
   chipColors: DROPDOWN_CHIP_COLORS,
   menuPlacements: DROPDOWN_MENU_PLACEMENT,
   menuPositions: DROPDOWN_MENU_POSITION,

packages/core/src/components/Dropdown/Dropdown.types.ts

@@ -279,4 +279,4 @@ export type DropdownMenuPosition = "absolute" | "fixed";
 
 export type DropdownMenuPlacement = "top" | "bottom" | "auto";
 
-export type DropdownSize = "xxs" | "xs" | "small" | "medium" | "large";
+export type DropdownSize = "small" | "medium" | "large";