fix(blueprint): Bump blueprint

Author: greg-in-a-box

package.json

@@ -124,17 +124,18 @@
         "@babel/preset-typescript": "^7.24.7",
         "@babel/template": "^7.24.7",
         "@babel/types": "^7.24.7",
-        "@box/blueprint-web": "^12.7.1",
-        "@box/blueprint-web-assets": "^4.60.0",
+        "@box/blueprint-web": "12.43.0",
+        "@box/blueprint-web-assets": "4.61.5",
         "@box/box-ai-agent-selector": "^0.48.5",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": "^34.2.0",
         "@box/combobox-with-api": "^0.34.9",
         "@box/frontend": "^11.0.1",
-        "@box/item-icon": "^0.9.83",
+        "@box/item-icon": "^0.17.0",
         "@box/languages": "^1.0.0",
         "@box/metadata-editor": "^0.122.0",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
+        "@box/types": "^0.2.1",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^4.0.1",
         "@commitlint/cli": "^19.8.0",
@@ -287,15 +288,16 @@
         "webpack-dev-server": "^5.2.1"
     },
     "peerDependencies": {
-        "@box/blueprint-web": "^12.7.1",
-        "@box/blueprint-web-assets": "^4.60.0",
+        "@box/blueprint-web": "12.43.0",
+        "@box/blueprint-web-assets": "4.61.5",
         "@box/box-ai-agent-selector": "^0.48.5",
         "@box/box-ai-content-answers": "^0.124.1",
         "@box/cldr-data": ">=34.2.0",
         "@box/combobox-with-api": "^0.34.9",
-        "@box/item-icon": "^0.9.83",
+        "@box/item-icon": "^0.17.0",
         "@box/metadata-editor": "^0.122.0",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
+        "@box/types": "^0.2.1",
         "@hapi/address": "^2.1.4",
         "axios": "^0.30.0",
         "classnames": "^2.2.5",

scripts/jest/jest.config.js

@@ -26,6 +26,6 @@ module.exports = {
     testMatch: ['**/__tests__/**/*.test.+(js|jsx|ts|tsx)'],
     testPathIgnorePatterns: ['stories.test.js$', 'stories.test.tsx$', 'stories.test.d.ts'],
     transformIgnorePatterns: [
-        'node_modules/(?!(@box/react-virtualized/dist/es|@box/cldr-data|@box/blueprint-web|@box/blueprint-web-assets|@box/metadata-editor|@box/box-ai-content-answers|@box/box-ai-agent-selector|@box/item-icon|@box/combobox-with-api|@box/tree)/)',
+        'node_modules/(?!(@box/react-virtualized/dist/es|@box/cldr-data|@box/blueprint-web|@box/blueprint-web-assets|@box/metadata-editor|@box/box-ai-content-answers|@box/box-ai-agent-selector|@box/item-icon|@box/combobox-with-api|@box/tree|@box/types)/)',
     ],
 };

src/components/notification/Notification.js

@@ -4,7 +4,13 @@ import { defineMessages, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 
 // $FlowFixMe
-import { Information, Check, AlertTriangle, AlertBadge, XMark } from '@box/blueprint-web-assets/icons/Medium';
+import {
+    InformationCircle,
+    CheckmarkCircle,
+    AlertTriangle,
+    XMark,
+    XMarkCircle,
+} from '@box/blueprint-web-assets/icons/Medium';
 
 import InfoBadge16 from '../../icon/line/InfoBadge16';
 import CircleCheck16 from '../../icon/line/CircleCheck16';
@@ -34,9 +40,9 @@ const DURATION_TIMES = {
 };
 
 const ICON_RENDERER: { [string]: Function } = {
-    [TYPE_DEFAULT]: useV2Icons => (useV2Icons ? <Information /> : <InfoBadge16 />),
-    [TYPE_ERROR]: useV2Icons => (useV2Icons ? <AlertBadge /> : <XBadge16 />),
-    [TYPE_INFO]: useV2Icons => (useV2Icons ? <Check /> : <CircleCheck16 />),
+    [TYPE_DEFAULT]: useV2Icons => (useV2Icons ? <InformationCircle /> : <InfoBadge16 />),
+    [TYPE_ERROR]: useV2Icons => (useV2Icons ? <XMarkCircle /> : <XBadge16 />),
+    [TYPE_INFO]: useV2Icons => (useV2Icons ? <CheckmarkCircle /> : <CircleCheck16 />),
     [TYPE_WARN]: useV2Icons => (useV2Icons ? <AlertTriangle /> : <TriangleAlert16 />),
 };
 

src/components/notification/stories/Notification.stories.js

@@ -40,6 +40,39 @@ export const error = () => (
     </IntlProvider>
 );
 
+export const basicV2 = () => (
+    <IntlProvider locale="en">
+        <Notification useV2Icons>This is a default notification.</Notification>
+    </IntlProvider>
+);
+
+export const infoV2 = () => (
+    <IntlProvider locale="en">
+        <Notification type="info" useV2Icons>
+            <span>This is an info notification with a button.</span>
+            <Button>Click me</Button>
+        </Notification>
+    </IntlProvider>
+);
+
+export const warnV2 = () => (
+    <IntlProvider locale="en">
+        <Notification type="warn" useV2Icons>
+            <span>This is a warning notification with two buttons.</span>
+            <Button>Click me</Button>
+            <Button>Click me again</Button>
+        </Notification>
+    </IntlProvider>
+);
+
+export const errorV2 = () => (
+    <IntlProvider locale="en">
+        <Notification type="error" useV2Icons>
+            <span>This is an error notification.</span>
+        </Notification>
+    </IntlProvider>
+);
+
 export default {
     title: 'Components/Notifications/Notification',
     component: Notification,

src/elements/common/modal.scss

@@ -40,7 +40,6 @@
 .be-modal-rename .be-modal-dialog-content,
 .be-modal-share .be-modal-dialog-content,
 .be-modal-delete .be-modal-dialog-content {
-    padding: 0;
     border-radius: var(--radius-4);
 }
 
@@ -53,11 +52,8 @@
 .be-modal-dialog-content {
     @extend .be-modal-wrapper-content;
 
-    position: absolute;
     inset: 50% auto auto 50%;
     width: 400px;
-    margin-right: -50%;
-    padding: 25px;
     border-radius: $bdl-border-radius-size;
     transform: translate(-50%, -50%);
 
@@ -68,6 +64,4 @@
 
 .be-modal-dialog-overlay {
     @extend .be-modal-wrapper-overlay;
-
-    position: absolute;
 }